btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
2023-11-01 21:25:08 +06:00
committed by GitHub
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/hoppscotch-ui/src/components/button/Primary.vue
View File

@@ -1,21 +1,21 @@
<template>
<HoppSmartLink
:to="to"
:exact="exact"
:blank="blank"
class="inline-flex items-center justify-center font-semibold transition whitespace-nowrap focus:outline-none"
class="button-primary relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
:exact="exact"
:class="[
color
? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
: `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
: `bg-accent text-accentContrast hover:bg-accentDark focus-visible:bg-accentDark`,
label ? 'px-4 py-2' : 'p-2',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'cursor-not-allowed opacity-75': disabled },
{ 'pointer-events-none': loading },
{ 'px-6 py-4 text-lg': large },
{ 'shadow-lg hover:shadow-xl': shadow },
{
'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
'bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo text-white':
gradient,
},
{
@@ -40,14 +40,14 @@
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
<div class="truncate max-w-54">
<div class="max-w-54 truncate">
{{ label }}
</div>
<div v-if="shortcut.length" class="<sm:hidden">
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="shortcut-key !bg-accentDark !border-accentLight"
class="shortcut-key !border-accentLight !bg-accentDark"
>
{{ key }}
</kbd>

2
packages/hoppscotch-ui/src/components/smart/Checkbox.vue
View File

@@ -47,7 +47,7 @@ const emit = defineEmits<{
&::before {
@apply border-2 border-divider;
@apply rounded;
@apply group-hover: border-accentDark;
@apply group-hover:border-accentDark;
@apply inline-flex;
@apply items-center;
@apply justify-center;

13
packages/hoppscotch-ui/src/components/smart/Modal.vue
View File

@@ -6,7 +6,7 @@
role="dialog"
>
<div
class="flex items-end justify-center min-h-screen text-center sm:block"
class="flex min-h-screen items-end justify-center text-center sm:!block"
>
<Transition name="fade" appear>
<div
@@ -17,7 +17,7 @@
@mousedown="!dialog ? close() : null"
>
<div
class="absolute inset-0 opacity-80 bg-primaryLight focus:outline-none"
class="absolute inset-0 bg-primaryLight opacity-80 focus:outline-none"
tabindex="0"
@click="!dialog ? close() : null"
></div>
@@ -25,13 +25,13 @@
</Transition>
<span
v-if="placement === 'center'"
class="sm:h-screen <sm:hidden sm:align-middle"
class="sm:h-screen sm:align-middle <sm:hidden"
aria-hidden="true"
>&#8203;</span
>
<Transition name="bounce" appear>
<div
class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg sm:border border-dividerDark bg-primary sm:rounded-xl sm:align-middle"
class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
:class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
>
<div
@@ -44,6 +44,7 @@
</h3>
<span class="flex items-center">
<slot name="actions"></slot>
<kbd class="shortcut-key mr-2">ESC</kbd>
<HoppButtonSecondary
v-if="dimissible"
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -54,14 +55,14 @@
</span>
</div>
<div
class="flex flex-col overflow-y-auto max-h-lg"
class="max-h-lg flex flex-col overflow-y-auto"
:class="{ 'p-4': !fullWidth }"
>
<slot name="body"></slot>
</div>
<div
v-if="hasFooterSlot"
class="flex items-center justify-between flex-1 border-t border-dividerLight bg-primaryContrast"
class="flex flex-1 items-center justify-between border-t border-dividerLight bg-primaryContrast"
:class="{ 'p-4': !fullWidth }"
>
<slot name="footer"></slot>

2
packages/hoppscotch-ui/src/components/smart/Tab.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="shouldRender" v-show="active" class="flex flex-col flex-1">
<div v-if="shouldRender" v-show="active" class="flex flex-1 flex-col">
<slot></slot>
</div>
</template>

38
packages/hoppscotch-ui/src/components/smart/Tabs.vue
View File

@@ -1,15 +1,15 @@
<template>
<div
class="flex flex-1 h-full flex-nowrap"
:class="{ 'flex-col h-auto': !vertical }"
class="flex h-full flex-1 flex-nowrap"
:class="{ 'h-auto flex-col': !vertical }"
>
<div
class="relative tabs border-dividerLight"
class="tabs relative border-dividerLight"
:class="[vertical ? 'border-r' : 'border-b', styles]"
>
<div class="flex flex-1">
<div
class="flex justify-between flex-1"
class="flex flex-1 justify-between"
:class="{ 'flex-col': vertical }"
>
<div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -25,7 +25,7 @@
:class="[
{ active: modelValue === tabID },
{ vertical: vertical },
{ 'opacity-75 !cursor-not-allowed': tabMeta.disabled },
{ '!cursor-not-allowed opacity-75': tabMeta.disabled },
]"
:aria-label="tabMeta.label || ''"
:disabled="tabMeta.disabled"
@@ -47,7 +47,7 @@
</span>
<span
v-if="tabMeta.indicator"
class="w-1 h-1 ml-2 rounded-full bg-accentLight"
class="ml-2 h-1 w-1 rounded-full bg-accentLight"
></span>
</button>
</div>
@@ -58,10 +58,10 @@
</div>
</div>
<div
class="w-full h-full contents"
class="contents h-full w-full"
:class="[
{
'!flex flex-col flex-1 overflow-y-auto': vertical,
'!flex flex-1 flex-col overflow-y-auto': vertical,
},
contentStyles,
]"
@@ -199,31 +199,32 @@ const selectTab = (id: string) => {
@apply flex-shrink-0;
@apply items-center;
@apply justify-center;
@apply py-2 px-4;
@apply px-4 py-2;
@apply text-secondary;
@apply font-semibold;
@apply cursor-pointer;
@apply hover: text-secondaryDark;
@apply focus: outline-none;
@apply focus-visible: text-secondaryDark;
@apply hover:text-secondaryDark;
@apply focus:outline-none;
@apply focus-visible:text-secondaryDark;
@apply after:absolute;
@apply after:left-4;
@apply after:right-4;
@apply after:bottom-0;
@apply after:bg-transparent;
@apply after:z-2;
@apply after:z-[2];
@apply after:h-0.5;
@apply after:content-DEFAULT;
@apply focus: after: bg-divider;
@apply after:content-[''];
@apply focus:after:bg-divider;
.tab-info {
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply px-1 py-0.75;
@apply px-1;
@apply leading-[15px];
@apply min-w-4;
@apply ml-2;
@apply text-8px;
@apply text-[8px];
@apply border border-divider;
@apply rounded;
@apply text-secondaryLight;
@@ -241,7 +242,8 @@ const selectTab = (id: string) => {
&.vertical {
@apply p-2;
@apply focus: after: hidden;
@apply rounded;
@apply focus:after:hidden;
&.active {
@apply text-accent;

8
packages/hoppscotch-ui/src/components/smart/Toggle.vue
View File

@@ -52,9 +52,9 @@ $transition: all 0.2s ease-in-out;
@apply cursor-pointer;
@apply flex-shrink-0;
@apply transition;
@apply group-hover: border-accentDark;
@apply focus: outline-none;
@apply focus-visible: border-accentDark;
@apply group-hover:border-accentDark;
@apply focus:outline-none;
@apply focus-visible:border-accentDark;
width: $width;
height: $height;
border: if($useBorder, 2px solid $borderColor, none);
@@ -78,7 +78,7 @@ $transition: all 0.2s ease-in-out;
&.on {
// background-color: $activeColor;
border-color: $activeColor;
@apply focus-visible: border-accentDark;
@apply focus-visible:border-accentDark;
.handle {
background-color: $activeHandleColor;

8
packages/hoppscotch-ui/src/components/smart/TreeBranch.vue
View File

@@ -15,12 +15,12 @@
-->
<div v-if="childrenRendered" v-show="showChildren" class="flex">
<div
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
@click="toggleNodeChildren"
></div>
<div
v-if="childNodes.status === 'loaded' && childNodes.data.length > 0"
class="flex flex-col flex-1 truncate"
class="flex flex-1 flex-col truncate"
:class="{
'bg-divider': highlightNode,
}"
@@ -58,14 +58,14 @@
<div
v-if="childNodes.status === 'loading'"
class="flex flex-col items-center justify-center flex-1 p-4"
class="flex flex-1 flex-col items-center justify-center p-4"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t?.("state.loading") }}</span>
</div>
<div
v-if="childNodes.status === 'loaded' && childNodes.data.length === 0"
class="flex flex-col flex-1"
class="flex flex-1 flex-col"
>
<slot name="emptyNode" :node="nodeItem"></slot>
</div>

70
packages/hoppscotch-ui/src/components/smart/Windows.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
<div
class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto divide-x divide-dividerLight bg-primaryLight tabs group-tabs"
class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto divide-x divide-dividerLight bg-primaryLight tabs group-tabs"
>
<div
class="flex flex-1 flex-shrink-0 w-0 overflow-hidden"
@@ -371,13 +371,13 @@ watch(
@apply whitespace-nowrap;
@apply overflow-auto;
@apply flex-shrink-0;
@apply after: absolute;
@apply after: inset-x-0;
@apply after: bottom-0;
@apply after: bg-dividerLight;
@apply after: z-10;
@apply after: h-0.25;
@apply after: content-DEFAULT;
@apply after:absolute;
@apply after:inset-x-0;
@apply after:bottom-0;
@apply after:bg-dividerLight;
@apply after:z-10;
@apply after:h-0.25;
@apply after:content-[""];
.tab {
@apply relative;
@@ -390,30 +390,30 @@ watch(
@apply items-center;
@apply justify-between;
@apply text-secondaryLight;
@apply hover: bg-primaryDark;
@apply hover: text-secondary;
@apply focus-visible: text-secondaryDark;
@apply before: absolute;
@apply before: left-0;
@apply before: right-0;
@apply before: top-0;
@apply before: bg-transparent;
@apply before: z-2;
@apply before: h-0.5;
@apply before: content-DEFAULT;
@apply focus: before: bg-divider;
@apply hover:bg-primaryDark;
@apply hover:text-secondary;
@apply focus-visible:text-secondaryDark;
@apply before:absolute;
@apply before:left-0;
@apply before:right-0;
@apply before:top-0;
@apply before:bg-transparent;
@apply before:z-[2];
@apply before:h-0.5;
@apply before:content-[""];
@apply focus:before:bg-divider;
&.active {
@apply text-secondaryDark;
@apply bg-primary;
@apply before: bg-accent;
@apply after: absolute;
@apply after: inset-x-0;
@apply after: bottom-0;
@apply after: bg-primary;
@apply after: z-12;
@apply after: h-0.25;
@apply after: content-DEFAULT;
@apply before:bg-accent;
@apply after:absolute;
@apply after:inset-x-0;
@apply after:bottom-0;
@apply after:bg-primary;
@apply after:z-[12];
@apply after:h-0.25;
@apply after:content-[""];
}
.close {
@@ -427,13 +427,13 @@ watch(
}
.create-new-tab {
@apply after: absolute;
@apply after: inset-x-0;
@apply after: bottom-0;
@apply after: bg-dividerLight;
@apply after: z-14;
@apply after: h-0.25;
@apply after: content-DEFAULT;
@apply after:absolute;
@apply after:inset-x-0;
@apply after:bottom-0;
@apply after:bg-dividerLight;
@apply after:z-[14];
@apply after:h-0.25;
@apply after:content-[""];
}
$slider-height: 4px;