@vc-shell/framework 1.0.39 → 1.0.40

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="tw-inline-block tw-rounded-[var(--badge-border-radius)] tw-py-1 tw-px-2 tw-text-base tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+    :class="{
+      'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
+        active,
+      'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
+        clickable,
+      'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
+        disabled,
+    }"
+    @click="onClick"
+  >
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  VcBadgeEmits,
+  VcBadgeProps,
+} from "@/ui/components/atoms/vc-badge/vc-badge-model";
+
+const props = withDefaults(defineProps<VcBadgeProps>(), {
+  active: false,
+  disabled: false,
+  clickable: true,
+});
+const emit = defineEmits<VcBadgeEmits>();
+
+function onClick(): void {
+  if (props.clickable && !props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --badge-background-color: #ffffff;
+  --badge-background-color-hover: #fafafa;
+  --badge-background-color-active: #fafafa;
+  --badge-background-color-disabled: #f2f2f2;
+
+  --badge-text-color: #455668;
+  --badge-text-color-hover: #3b4959;
+  --badge-text-color-active: #3b4959;
+  --badge-text-color-disabled: #8296ab;
+
+  --badge-border-radius: 35px;
+
+  --badge-border-color: #a1bfd4;
+  --badge-border-color-hover: #8fb3cc;
+  --badge-border-color-active: #8fb3cc;
+  --badge-border-color-disabled: #b2cbdc;
+}
+</style>

package/ui/components/atoms/vc-button/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcButtonProps } from "./vc-button-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Button from "./vc-button.vue";
+export const VcBadge: ComponentConstructor<
+  ComponentPublicInstance<VcButtonProps>
+> = Button;

package/ui/components/atoms/vc-button/vc-button-model.ts

@@ -0,0 +1,30 @@
+import { VNode } from "vue";
+
+export interface VcButtonProps {
+  /**
+   * Badge active state
+   * */
+  icon?: string | undefined;
+  /**
+   * Put component in disabled state
+   * */
+  disabled?: boolean | undefined;
+  /**
+   * Is badge clickable?
+   * */
+  clickable?: boolean | undefined;
+}
+
+export interface VcButtonEmits {
+  /**
+   * Emitted when component is clicked
+   * */
+  (event: "click"): void;
+}
+
+export interface VcButtonSlots {
+  /**
+   * Slot for component content
+   * */
+  default: () => VNode[];
+}

package/{components → ui/components}/atoms/vc-button/vc-button.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 const props = defineProps({
   icon: {
@@ -131,88 +131,88 @@ function onClick(e: Event): void {
 $variants: primary, secondary, special, danger, widget;
 
 .vc-button {
-  @apply inline-flex items-center font-medium text-sm cursor-pointer box-border transition duration-200 rounded-[var(--button-border-radius)] px-[var(--button-padding)] h-[var(--button-height)];
+  @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition  tw-duration-200 tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding)] tw-h-[var(--button-height)];
 
   &__icon + &__title {
-    @apply ml-2;
+    @apply tw-ml-2;
   }
 
   @each $variant in $variants {
     &_#{$variant} {
-      @apply bg-[color:var(--button-#{$variant}-background-color)]
-      text-left
-      text-[color:var(--button-#{$variant}-text-color)]
-      border border-solid border-[color:var(--button-#{$variant}-background-color)]
-      hover:bg-[color:var(--button-#{$variant}-background-color-hover)]
-      hover:text-[color:var(--button-#{$variant}-text-color-hover)]
-      hover:border-[color:var(--button-#{$variant}-background-color-hover)]
-      focus:bg-[color:var(--button-#{$variant}-background-color-active)]
-      focus:text-[color:var(--button-#{$variant}-text-color-active)]
-      focus:bg-[color:var(--button-#{$variant}-background-color-active)]
-      disabled:cursor-not-allowed
-      disabled:bg-[color:var(--button-#{$variant}-background-color-disabled)]
-      disabled:text-[color:var(--button-#{$variant}-text-color-disabled)]
-      disabled:border-[color:var(--button-#{$variant}-background-color-disabled)];
+      @apply tw-bg-[color:var(--button-#{$variant}-background-color)]
+      tw-text-left
+      tw-text-[color:var(--button-#{$variant}-text-color)]
+      tw-border tw-border-solid tw-border-[color:var(--button-#{$variant}-background-color)]
+      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
+      hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
+      hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
+      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+      focus:tw-text-[color:var(--button-#{$variant}-text-color-active)]
+      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+      disabled:tw-cursor-not-allowed
+      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)]
+      disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)]
+      disabled:tw-border-[color:var(--button-#{$variant}-background-color-disabled)];
     }
   }
 
   &_widget {
-    @apply h-auto border-[color:var(--button-widget-border-color)]
-    shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
-    rounded-[4px]
-    p-[15px]
-    border-[color:var(--button-widget-background-color)]
-    hover:bg-[color:var(--button-widget-background-color-hover)]
-    focus:bg-[color:var(--button-widget-background-color-active)]
-    focus:border-[color:var(--button-widget-border-color-active)]
-    disabled:cursor-not-allowed
-    disabled:bg-[color:var(--button-widget-background-color-disabled)]
-    disabled:border-[color:var(--button-widget-background-color-disabled)];
+    @apply tw-h-auto tw-border-[color:var(--button-widget-border-color)]
+    tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
+    tw-rounded-[4px]
+    tw-p-[15px]
+    tw-border-[color:var(--button-widget-background-color)]
+    hover:tw-bg-[color:var(--button-widget-background-color-hover)]
+    focus:tw-bg-[color:var(--button-widget-background-color-active)]
+    focus:tw-border-[color:var(--button-widget-border-color-active)]
+    disabled:tw-cursor-not-allowed
+    disabled:tw-bg-[color:var(--button-widget-background-color-disabled)]
+    disabled:tw-border-[color:var(--button-widget-background-color-disabled)];
 
     .vc-button__icon {
-      @apply text-[30px] text-[color:#a9bfd2];
+      @apply tw-text-[30px] tw-text-[color:#a9bfd2];
     }
   }
 
   &_small {
-    @apply h-[var(--button-height-small)]
-      px-[var(--button-padding-small)]
-      font-normal
-      text-xs;
+    @apply tw-h-[var(--button-height-small)]
+      tw-px-[var(--button-padding-small)]
+      tw-font-normal
+      tw-text-xs;
 
     .vc-button__icon + .vc-button__title {
-      @apply ml-1;
+      @apply tw-ml-1;
     }
   }
 
   &_outline {
-    @apply bg-transparent
-    text-[color:var(--button-secondary-text-color)]
-    border-[color:var(--button-secondary-border-color)]
-    hover:text-[color:var(--button-secondary-text-color-hover)]
-    hover:border-[color:var(--button-secondary-border-color-hover)]
-    hover:bg-transparent
-    focus:text-[color:var(--button-secondary-text-color-hover)]
-    focus:border-[color:var(--button-secondary-border-color-active)]
-    focus:bg-transparent
-    disabled:cursor-not-allowed
-    disabled:text-[color:var(--button-secondary-text-color-disabled)]
-    disabled:border-[color:var(--button-secondary-border-color-disabled)]
-    disabled:bg-transparent;
+    @apply tw-bg-transparent
+    tw-text-[color:var(--button-secondary-text-color)]
+    tw-border-[color:var(--button-secondary-border-color)]
+    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
+    hover:tw-border-[color:var(--button-secondary-border-color-hover)]
+    hover:tw-bg-transparent
+    focus:tw-text-[color:var(--button-secondary-text-color-hover)]
+    focus:tw-border-[color:var(--button-secondary-border-color-active)]
+    focus:tw-bg-transparent
+    disabled:tw-cursor-not-allowed
+    disabled:tw-text-[color:var(--button-secondary-text-color-disabled)]
+    disabled:tw-border-[color:var(--button-secondary-border-color-disabled)]
+    disabled:tw-bg-transparent;
   }
 
   &_onlytext {
-    @apply text-[color:var(--button-secondary-text-color)]
-    p-0 border-none bg-transparent h-auto
-    hover:bg-transparent
-    hover:text-[color:var(--button-secondary-text-color-hover)]
-    focus:bg-transparent
-    focus:text-[color:var(--button-secondary-text-color-hover)];
+    @apply tw-text-[color:var(--button-secondary-text-color)]
+    tw-p-0 tw-border-none tw-bg-transparent tw-h-auto
+    hover:tw-bg-transparent
+    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
+    focus:tw-bg-transparent
+    focus:tw-text-[color:var(--button-secondary-text-color-hover)];
   }
 
   &_selected {
     &.vc-button_widget {
-      @apply bg-[color:var(--button-widget-background-color-hover)];
+      @apply tw-bg-[color:var(--button-widget-background-color-hover)];
     }
   }
 }

package/{components → ui/components}/atoms/vc-card/vc-card.vue

@@ -91,45 +91,45 @@ function onHeaderClick() {
 $variants: success, danger;
 
 .vc-card {
-  @apply bg-[color:var(--card-background)] border
-  border-[color:#eef0f2] border-solid box-border
-  shadow-[1px_1px_7px_rgba(126,142,157,0.15)]
-  rounded-[var(--card-border-radius)] overflow-hidden
-  flex-grow flex flex-col;
+  @apply tw-bg-[color:var(--card-background)] tw-border
+  tw-border-[color:#eef0f2] tw-border-solid tw-box-border
+  tw-shadow-[1px_1px_7px_rgba(126,142,157,0.15)]
+  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
+  tw-flex-grow tw-flex tw-flex-col;
 
   &__header {
-    @apply bg-[color:var(--card-header-background)] px-4 py-3 flex items-center content-between w-full box-border;
+    @apply tw-bg-[color:var(--card-header-background)] tw-px-4 tw-py-3 tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
   }
 
   &_collapsable &__header {
-    @apply cursor-pointer;
+    @apply tw-cursor-pointer;
   }
 
   &__title {
-    @apply uppercase flex-grow
-    text-[color:var(--card-header-color)]
-    text-base font-bold uppercase;
+    @apply tw-uppercase tw-flex-grow
+   tw-text-[color:var(--card-header-color)]
+   tw-text-base tw-font-bold tw-uppercase;
   }
 
   &__icon {
-    @apply text-[color:var(--card-header-color)] mr-3;
+    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
   }
 
   &__collapse {
-    @apply text-[color:var(--card-header-color)] ml-3;
+    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
   }
 
   &__body {
-    @apply flex-grow box-border;
+    @apply tw-flex-grow tw-box-border;
   }
 
   @each $variant in $variants {
     &_#{$variant} {
       .vc-card__header {
-        @apply bg-[color:var(--card-header-background-#{$variant})];
+        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
       }
       .vc-card__title {
-        @apply text-[color:var(--card-header-color-#{$variant})];
+        @apply tw-text-[color:var(--card-header-color-#{$variant})];
       }
     }
   }

package/{components → ui/components}/atoms/vc-checkbox/vc-checkbox.vue

@@ -9,18 +9,18 @@
         @change="onChange"
       />
       <span class="vc-checkbox__checkmark"></span>
-      <span v-if="$slots['default']" class="ml-2">
+      <span v-if="$slots['default']" class="tw-ml-2">
         <slot></slot>
       </span>
       <span
         v-if="required"
-        class="text-[color:var(--checkbox-required-color)] ml-1"
+        class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
         >*</span
       >
     </label>
 
     <slot v-if="errorMessage" name="error">
-      <VcHint class="vc-checkbox__error mt-1">
+      <VcHint class="vc-checkbox__error tw-mt-1">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -85,11 +85,11 @@ function onChange(e: InputEvent) {
 
 .vc-checkbox {
   &__label {
-    @apply inline-flex select-none cursor-pointer text-base items-center;
+    @apply tw-inline-flex tw-select-none tw-cursor-pointer tw-text-base tw-items-center;
   }
 
   &__input {
-    @apply absolute opacity-0 z-[-1] m-0;
+    @apply tw-absolute tw-opacity-0 tw-z-[-1] tw-m-0;
   }
 
   &__error {
@@ -97,34 +97,34 @@ function onChange(e: InputEvent) {
   }
 
   &__checkmark {
-    @apply h-[var(--checkbox-size)];
+    @apply tw-h-[var(--checkbox-size)];
 
     &:before {
-      @apply inline-block box-border
-      w-[var(--checkbox-size)]
-      h-[var(--checkbox-size)]
-      shrink-0
-      grow-0
-      rounded-[var(--checkbox-border-radius)]
-      bg-no-repeat
-      bg-left-top
-      bg-[length:auto_var(--checkbox-size)]
-      bg-[color:var(--checkbox-background-color)]
-      bg-[image:var(--checkbox-image)]
-      content-[""];
+      @apply tw-inline-block tw-box-border
+      tw-w-[var(--checkbox-size)]
+      tw-h-[var(--checkbox-size)]
+      tw-shrink-0
+      tw-grow-0
+      tw-rounded-[var(--checkbox-border-radius)]
+      tw-bg-no-repeat
+      tw-bg-left-top
+      tw-bg-[length:auto_var(--checkbox-size)]
+      tw-bg-[color:var(--checkbox-background-color)]
+      tw-bg-[image:var(--checkbox-image)]
+      tw-content-[""];
     }
   }
 
   &__input:checked ~ &__checkmark:before {
-    @apply bg-[image:var(--checkbox-image-checked)];
+    @apply tw-bg-[image:var(--checkbox-image-checked)];
   }
 
   &_disabled &__checkmark:before {
-    @apply bg-[#fafafa];
+    @apply tw-bg-[#fafafa];
   }
 
   &_disabled &__label {
-    @apply cursor-auto;
+    @apply tw-cursor-auto;
   }
 }
 </style>

package/{components → ui/components}/atoms/vc-col/vc-col.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-col flex flex-col min-w-0 basis-0" :style="{ flexGrow: size }">
+  <div class="vc-col tw-flex tw-flex-col tw-min-w-0 tw-basis-0" :style="{ flexGrow: size }">
     <slot></slot>
   </div>
 </template>
@@ -16,7 +16,7 @@ defineProps({
 <style lang="scss">
 .vc-col {
   .vc-app_mobile & {
-    @apply grow #{!important};
+    @apply tw-grow #{!important};
   }
 }
 </style>

package/{components → ui/components}/atoms/vc-container/vc-container.vue

@@ -25,7 +25,7 @@
       >
         <VcIcon
           icon="fas fa-spinner"
-          :style="{ 'font-size': `${dist / 2}px` }"
+          :style="{ 'tw-font-size': `${dist / 2}px` }"
           class="vc-container__overscroll-icon"
         ></VcIcon>
       </div>
@@ -82,9 +82,6 @@ const scrollTop = () => {
     component.value.scroll(0, 0);
   }
 };
-defineExpose({
-  scrollTop,
-});
 
 function touchStart(e: TouchEvent): void {
   if (!touchable.value) {
@@ -161,6 +158,11 @@ function ease(distance: number) {
   }
   return Math.round(distance);
 }
+
+defineExpose({
+    scrollTop,
+    component,
+});
 </script>
 
 <style lang="scss">
@@ -174,47 +176,47 @@ function ease(distance: number) {
 }
 
 .vc-container {
-  @apply w-full h-full overflow-hidden box-border flex flex-col relative;
+  @apply tw-w-full tw-h-full tw-overflow-hidden tw-box-border tw-flex tw-flex-col tw-relative;
 
   &_shadow {
-    @apply shadow-[0_3px_2px_rgba(0,0,0,0.1)_inset];
+    @apply tw-shadow-[0_3px_2px_rgba(0,0,0,0.1)_inset];
   }
 
   &__overscroll {
-    @apply relative w-full flex items-start justify-center overflow-hidden;
+    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden;
 
     &-icon {
-      @apply text-[color:#a1c0d4] animate-spin;
+      @apply tw-text-[color:#a1c0d4] tw-animate-spin;
     }
 
     &_passed &-icon {
-      @apply text-[#43b0e6];
+      @apply tw-text-[#43b0e6];
     }
   }
 
   &__inner {
-    @apply relative overflow-y-auto overflow-x-hidden
-    flex-1 p-[var(--container-scroll-padding)]
-    transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
+    @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
+    tw-flex-1 tw-p-[var(--container-scroll-padding)]
+     tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
 
     &::-webkit-scrollbar {
-      @apply w-[var(--container-scroll-width)] bg-transparent;
+      @apply tw-w-[var(--container-scroll-width)] tw-bg-transparent;
     }
 
     &::-webkit-scrollbar-track {
-      @apply bg-transparent;
+      @apply tw-bg-transparent;
     }
 
     &::-webkit-scrollbar-thumb {
-      @apply bg-[color:var(--container-scroll-color)]
-      rounded-[calc(var(--container-scroll-width)/2)]
-      overflow-x-hidden
-      hover:bg-[color:var(--container-scroll-color-hover)];
+      @apply tw-bg-[color:var(--container-scroll-color)]
+      tw-rounded-[calc(var(--container-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--container-scroll-color-hover)];
     }
   }
 
   &_nopadding &__inner {
-    @apply p-0;
+    @apply tw-p-0;
   }
 }
 </style>

package/{components → ui/components}/atoms/vc-hint/vc-hint.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-[color:var(--hint-color)] text-xs">
+  <div class="tw-text-[color:var(--hint-color)] tw-text-xs">
     <slot></slot>
   </div>
 </template>

package/{components → ui/components}/atoms/vc-icon/vc-icon.vue

@@ -29,7 +29,7 @@ $sizes: xs, s, m, l, xl, xxl;
 .vc-icon {
   @each $size in $sizes {
     &_#{$size} {
-      @apply text-[length:var(--icon-size-#{$size})];
+      @apply tw-text-[length:var(--icon-size-#{$size})];
     }
   }
 }

package/{components → ui/components}/atoms/vc-image/vc-image.vue

@@ -4,18 +4,18 @@
       :class="[
         `vc-image_${aspect}`,
         {
-          'rounded-full pb-[var(--image-padding-bottom-1x1)]': rounded,
-          'rounded-[3px] border border-solid border-[color:#efefef]': bordered,
-          'cursor-pointer': clickable,
+          'tw-rounded-full tw-pb-[var(--image-padding-bottom-1x1)]': rounded,
+          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
+          'tw-cursor-pointer': clickable,
         },
-        'relative',
+        'tw-relative',
       ]"
       :style="imageHandler"
       @click="onClick"
     >
       <div
         v-if="!src"
-        class="absolute w-full h-full flex items-center justify-center text-[#83a3be]"
+        class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
       >
         <VcIcon icon="fas fa-image" size="xl"></VcIcon>
       </div>
@@ -101,22 +101,22 @@ $aspects: (
 $paddings: xs, s, m, l, xl, xxl;
 
 .vc-image {
-  @apply inline-block relative;
+  @apply tw-inline-block tw-relative;
 
   @each $name, $aspect in $aspects {
     &_#{$name} {
-      @apply pb-[#{$aspect}];
+      @apply tw-pb-[#{$aspect}];
     }
   }
 
   @each $padding in $paddings {
     &_#{$padding} {
-      @apply w-[var(--image-size-#{$padding})];
+      @apply tw-w-[var(--image-size-#{$padding})];
     }
   }
 
   &_auto {
-    @apply w-full;
+    @apply tw-w-full;
   }
 }
 </style>

package/{components → ui/components}/atoms/vc-info-row/vc-info-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-[11px] last-of-type:mb-0">
+  <div class="tw-mb-[11px] last-of-type:tw-mb-0">
     <VcRow>
       <VcCol>
         <VcLabel>
@@ -8,7 +8,7 @@
         </VcLabel>
       </VcCol>
       <VcCol size="2">
-        <p class="m-0" v-if="type === 'default'">{{ value }}</p>
+        <p class="tw-m-0" v-if="type === 'default'">{{ value }}</p>
         <VcLink v-else-if="type === 'email'">{{ value }}</VcLink>
       </VcCol>
     </VcRow>
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLabel, VcRow, VcCol } from "@/components";
+import { VcLabel, VcRow, VcCol } from "@/ui/components";
 
 defineProps({
   label: {

package/{components → ui/components}/atoms/vc-label/vc-label.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="flex flex-nowrap font-bold">
+  <div class= "tw-flex tw-flex-nowrap tw-font-bold">
     <span><slot></slot></span>
-    <span v-if="required" class="text-[color:var(--label-required-color)] ml-1"
+    <span v-if="required" class="tw-text-[color:var(--label-required-color)] tw-ml-1"
       >*</span
     >
-    <span v-if="$slots['tooltip']" class="grow basis-0 ml-1">
+    <span v-if="$slots['tooltip']" class="tw-grow tw-basis-0 tw-ml-1">
       <VcIcon
-        class="text-[color:var(--label-tooltip-color)]"
+        class="tw-text-[color:var(--label-tooltip-color)]"
         :icon="tooltipIcon"
         size="s"
         @mouseenter="tooltipVisible = true"
         @mouseleave="tooltipVisible = false"
       ></VcIcon>
       <span
-        class="absolute z-10 bg-white border border-solid border-[color:#eef0f2] shadow-[1px_1px_8px_rgba(126,142,157,0.25)] rounded-[3px] text-[color:#8e9daa] font-normal py-1 px-2 ml-4"
+        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
         v-if="tooltipVisible"
       >
         <slot name="tooltip"></slot>
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 import { ref } from "vue";
 
 defineProps({