@vc-shell/framework 1.0.39 → 1.0.41

package/{components → ui/components}/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -7,34 +7,34 @@
         <span>)</span>
       </div>
     </template>
-    <div class="w-full h-full box-border flex flex-col items-center">
-      <div class="box-border p-5 grow basis-0 w-full">
+    <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center">
+      <div class="tw-box-border p-5 tw-grow tw-basis-0 tw-w-full">
         <div
-          class="bg-contain bg-no-repeat bg-center w-full h-full box-border"
+          class="bg-contain tw-bg-no-repeat tw-bg-center tw-w-full tw-h-full tw-box-border"
           :style="{ backgroundImage: 'url(' + currentImage.url + ')' }"
         ></div>
         <div
           v-if="localIndex > 0"
-          class="absolute top-2/4 -mt-9 h-[72px] w-[72px] flex items-center justify-center rounded-full bg-[#f1f6fa] cursor-pointer text-[#a1c0d4] [--icon-size-xl: 36px] hover:shadow-[0_0_20px_rgba(31,40,50,0.15)] left-[25px]"
+          class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-left-[25px]"
           @click="localIndex--"
         >
           <VcIcon icon="fas fa-arrow-left" size="xl"></VcIcon>
         </div>
         <div
           v-if="localIndex < images.length - 1"
-          class="absolute top-2/4 -mt-9 h-[72px] w-[72px] flex items-center justify-center rounded-full bg-[#f1f6fa] cursor-pointer text-[#a1c0d4] [--icon-size-xl: 36px] hover:shadow-[0_0_20px_rgba(31,40,50,0.15)] right-[25px]"
+          class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-right-[25px]"
           @click="localIndex++"
         >
           <VcIcon icon="fas fa-arrow-right" size="xl"></VcIcon>
         </div>
       </div>
       <div
-        class="p-4 pb-[40px] max-w-full overflow-x-auto box-border shrink flex"
+        class="tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex"
       >
         <div
           v-for="(item, i) in images"
           :key="i"
-          class="m-1 opacity-60"
+          class="tw-m-1 tw-opacity-60"
           :class="{
             'vc-gallery-preview__images-item_current': i === localIndex,
           }"
@@ -54,7 +54,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { VcPopup } from "@/components";
+import { VcPopup } from "@/ui/components";
 
 const props = defineProps({
   images: {
@@ -85,7 +85,7 @@ const copyLink = (link: string) => {
   &__images {
     &-item {
       &_current {
-        @apply relative opacity-100 after:content-[""] after:bg-[#43b0e6] after:h-1 after:w-full after:rounded-[5px] after:absolute after:left-0 after:-bottom-[12px];
+        @apply tw-relative tw-opacity-100 after:tw-content-[""] after:tw-bg-[#43b0e6] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
       }
     }
   }

package/{components → ui/components}/organisms/vc-gallery/vc-gallery.vue

@@ -10,10 +10,10 @@
     </VcLabel>
 
     <template v-if="(images && images.length) || !disabled">
-      <div class="flex flex-wrap">
+      <div class= "tw-flex tw-flex-wrap">
         <draggable
           :list="images"
-          class="flex flex-wrap w-full"
+          class= "tw-flex tw-flex-wrap tw-w-full"
           tag="transition-group"
           v-bind="dragOptions"
           @change="updateOrder"
@@ -23,7 +23,7 @@
         >
           <template #item="{ element, index }">
             <VcGalleryItem
-              class="m-2"
+              class="tw-m-2"
               :key="element.sortOrder"
               :image="element"
               :readonly="disabled"
@@ -37,7 +37,7 @@
           <template #footer>
             <VcFileUpload
               v-if="!disabled && !hideAfterUpload"
-              class="m-2"
+              class="tw-m-2"
               :icon="uploadIcon"
               @upload="onUpload"
               :variant="variant"
@@ -49,7 +49,7 @@
         </draggable>
       </div>
     </template>
-    <div v-else class="flex justify-center p-5">
+    <div v-else class= "tw-flex tw-justify-center tw-p-5">
       <VcHint>Gallery is empty</VcHint>
     </div>
 
@@ -64,7 +64,7 @@
 
 <script lang="ts" setup>
 import { computed, PropType, ref } from "vue";
-import { VcLabel, VcFileUpload } from "@/components";
+import { VcLabel, VcFileUpload } from "@/ui/components";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
 import { IImage } from "@/core/types";

package/{components → ui/components}/organisms/vc-login-form/vc-login-form.stories.ts

@@ -20,13 +20,13 @@ const Template: Story = (args) => ({
   template: `<vc-login-form v-bind="args">
     <vc-input
         ref="loginField"
-        class="mb-4 mt-1"
+        class="tw-mb-4 tw-mt-1"
         label="Username"
         placeholder="Enter username"
     ></vc-input>
     <vc-input
         ref="passwordField"
-        class="mb-4"
+        class="tw-mb-4"
         label="Password"
         placeholder="Enter password"
         type="password"
@@ -34,12 +34,12 @@ const Template: Story = (args) => ({
     <div
         class="
             flex
-            justify-center
-            items-center
-            pt-2
+            tw-justify-center
+            tw-items-center
+            tw-pt-2
           "
     >
-      <span class="grow basis-0"></span>
+      <span class="tw-grow tw-basis-0"></span>
       <vc-button variant="primary">
         Submit
       </vc-button>

package/{components → ui/components}/organisms/vc-login-form/vc-login-form.vue

@@ -1,25 +1,25 @@
 <template>
   <div
-    class="w-full h-full box-border flex flex-col items-center justify-center"
+    class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
     :style="{
       background: `url(${background}) center / cover no-repeat`,
     }"
   >
     <div
-      class="h-[80px] w-[516px] max-w-[90%] mb-[50px] -mt-[90px]"
+      class="tw-h-[80px] tw-w-[516px] tw-max-w-[90%] tw-mb-[50px] -tw-mt-[90px]"
       :style="{
         background: `url(${logo}) center / contain no-repeat`,
       }"
     ></div>
     <div
-      class="w-[516px] max-w-[90%] bg-white rounded-md overflow-hidden shadow-[0_0_0_rgba(0,0,0,0.05)]"
+      class="tw-w-[516px] tw-max-w-[90%] tw-bg-white tw-rounded-md tw-overflow-hidden tw-shadow-[0_0_0_rgba(0,0,0,0.05)]"
     >
       <div
-        class="uppercase text-white bg-[#465769] h-[50px] px-[28px] text-xl flex items-center"
+        class="tw-uppercase tw-text-white tw-bg-[#465769] tw-h-[50px] tw-px-[28px] tw-text-xl tw-flex tw-items-center"
       >
         {{ title }}
       </div>
-      <div class="pt-4 px-[28px] pb-[24px]">
+      <div class="tw-pt-4 tw-px-[28px] tw-pb-[24px]">
         <slot></slot>
       </div>
     </div>

package/{components → ui/components}/organisms/vc-popup/vc-popup.vue

@@ -3,7 +3,7 @@
     <div class="vc-popup__wrapper">
       <div class="vc-popup__inner">
         <div class="vc-popup__header">
-          <div class="truncate grow basis-0">
+          <div class="tw-truncate tw-grow tw-basis-0">
             <slot name="title">{{ title }}</slot>
           </div>
           <VcIcon
@@ -14,7 +14,7 @@
           ></VcIcon>
         </div>
 
-        <div class="vc-popup__content grow basis-0">
+        <div class="vc-popup__content tw-grow tw-basis-0">
           <slot></slot>
         </div>
       </div>
@@ -46,51 +46,51 @@ defineEmits(["close"]);
 
 <style lang="scss">
 .vc-popup {
-  @apply fixed top-0 right-0 bottom-0 left-0 z-[9999] bg-[rgba(31,40,50,0.58)];
+  @apply tw-fixed tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-z-[9999] tw-bg-[rgba(31,40,50,0.58)];
 
   &_small {
     .vc-popup__wrapper {
-      @apply max-h-fit items-center flex grow-0 shrink-0 basis-auto [flex-direction:inherit] justify-center;
+      @apply tw-max-h-fit tw-items-center tw-flex tw-grow-0 tw-shrink-0 tw-basis-auto [flex-direction:inherit] tw-justify-center;
     }
 
     .vc-popup__inner {
-      @apply max-w-[439px] w-full flex flex-col grow basis-0;
+      @apply tw-max-w-[439px] tw-w-full tw-flex tw-flex-col tw-grow tw-basis-0;
     }
   }
 
   &_medium {
     .vc-popup__wrapper {
-      @apply max-h-[75vh];
+      @apply tw-max-h-[75vh];
     }
   }
 
   &_fullscreen {
     .vc-popup__wrapper {
-      @apply max-h-[100vh];
+      @apply tw-max-h-[100vh];
     }
   }
 
   &__wrapper {
-    @apply fixed top-2/4 -translate-y-2/4 right-0 bottom-0 left-0 flex grow shrink basis-auto flex-col h-full;
+    @apply tw-fixed tw-top-2/4 -tw-translate-y-2/4 tw-right-0 tw-bottom-0 tw-left-0 tw-flex tw-grow tw-shrink tw-basis-auto tw-flex-col tw-h-full;
 
     .vc-app_phone & {
-      @apply max-h-[100vh];
+      @apply tw-max-h-[100vh];
     }
   }
 
   &__inner {
-    @apply grow shrink basis-auto m-[40px] box-border bg-white rounded-[5px] overflow-hidden relative flex flex-col grow basis-0;
+    @apply tw-grow tw-shrink tw-basis-auto tw-m-[40px] tw-box-border tw-bg-white tw-rounded-[5px] tw-overflow-hidden tw-relative tw-flex tw-flex-col tw-grow tw-basis-0;
 
     .vc-app_phone & {
-      @apply m-0 rounded-none;
+      @apply tw-m-0 tw-rounded-none;
     }
   }
 
   &__header {
-    @apply h-[44px] px-4 bg-[#eef5fa] flex shrink-0 items-center;
+    @apply tw-h-[44px] tw-px-4 tw-bg-[#eef5fa] tw-flex tw-shrink-0 tw-items-center;
 
     &-icon {
-      @apply cursor-pointer text-[#a1c0d4];
+      @apply tw-cursor-pointer tw-text-[#a1c0d4];
     }
   }
 }

package/{components → ui/components}/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -3,7 +3,7 @@
   <template v-if="cell.type === 'money'">
     <template v-if="value > 0">
       <span>{{ Math.trunc(Number(value)) }}</span
-      ><span class="text-[#a5a5a5] text-xs"
+      ><span class="tw-text-[#a5a5a5] tw-text-xs"
         >.{{
           `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2)
         }}</span
@@ -15,7 +15,7 @@
   </template>
 
   <!-- Date ago cell -->
-  <span v-else-if="cell.type === 'date-ago'" class="text-[#a5a5a5]">
+  <span v-else-if="cell.type === 'date-ago'" class="tw-text-[#a5a5a5]">
     <template v-if="value">
       {{ moment(value).fromNow() }}
     </template>
@@ -27,7 +27,7 @@
     v-else-if="
       cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'
     "
-    class="text-[#a5a5a5]"
+    class="tw-text-[#a5a5a5]"
   >
     <template v-if="value">
       <template v-if="cell.format">
@@ -65,12 +65,12 @@
   </template>
 
   <!-- Status icon cell -->
-  <div v-else-if="cell.type === 'status-icon'" class="flex justify-center">
+  <div v-else-if="cell.type === 'status-icon'" class= "tw-flex tw-justify-center">
     <VcStatusIcon :status="value"></VcStatusIcon>
   </div>
 
   <!-- Number cell -->
-  <span v-else-if="cell.type === 'number'" class="text-right">
+  <span v-else-if="cell.type === 'number'" class="tw-text-right">
     {{ Number(value).toFixed(0) }}
   </span>
 
@@ -89,7 +89,7 @@
 import { computed } from "vue";
 import moment from "moment";
 import { ITableColumns } from "@/core/types";
-import { VcImage, VcStatus, VcStatusIcon, VcLink } from "@/components";
+import { VcImage, VcStatus, VcStatusIcon, VcLink } from "@/ui/components";
 
 export interface Props {
   cell: ITableColumns;

package/{components → ui/components}/organisms/vc-table/_internal/vc-table-counter/vc-table-counter.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="font-medium text-base">
-    <span class="text-[color:var(--table-counter-label-color)]"
+  <div class="tw-font-medium tw-text-base">
+    <span class="tw-text-[color:var(--table-counter-label-color)]"
       >{{ label }}&nbsp;</span
     >
-    <span class="text-[color:var(--table-counter-value-color)]">{{
+    <span class="tw-text-[color:var(--table-counter-value-color)]">{{
       value
     }}</span>
   </div>

package/{components → ui/components}/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="relative overflow-visible">
+  <div class="tw-relative tw-overflow-visible">
     <!-- Filter button -->
     <div
-      class="rounded-[3px] bg-[#43b0e6] flex items-center px-[10px] text-white h-[38px] box-border cursor-pointer"
+      class="tw-rounded-[3px] tw-bg-[#43b0e6] tw-flex tw-items-center tw-px-[10px] tw-text-white tw-h-[38px] tw-box-border tw-cursor-pointer"
       @click="openPanel($isMobile.value)"
       ref="filterToggle"
     >
       <VcIcon icon="fas fa-filter" size="m" />
-      <span v-if="title" class="ml-[10px] font-medium">
+      <span v-if="title" class="tw-ml-[10px] tw-font-medium">
         {{ title }}
       </span>
       <div
         v-if="counter"
-        class="ml-[10px] rounded-[10px] bg-white text-[#43b0e6] h-[20px] min-w-[20px] leading-[20px] text-center font-medium"
+        class="tw-ml-[10px] tw-rounded-[10px] tw-bg-white tw-text-[#43b0e6] tw-h-[20px] tw-min-w-[20px] tw-leading-[20px] tw-text-center tw-font-medium"
       >
         {{ counter }}
       </div>
@@ -22,9 +22,9 @@
     <teleport to="body">
       <div
         :class="{
-          'vc-table-filter__panel_mobile fixed left-0 top-0 w-full bottom-0 z-[9999] bg-[rgba(128,140,153,0.6)] shadow-none rounded-none max-h-full max-w-full min-w-full':
+          'vc-table-filter__panel_mobile tw-fixed tw-left-0 tw-top-0 tw-w-full tw-bottom-0 tw-z-[9999] tw-bg-[rgba(128,140,153,0.6)] tw-shadow-none tw-rounded-none tw-max-h-full tw-max-w-full tw-min-w-full':
             $isMobile.value,
-          'vc-table-filter__panel absolute max-h-[400px] max-w-[800px] min-w-[400px] z-[100] shadow-[1px_1px_11px_rgba(141,152,163,0.6)] rounded-[3px] overflow-hidden':
+          'vc-table-filter__panel tw-absolute tw-max-h-[400px] tw-max-w-[800px] tw-min-w-[400px] tw-z-[100] tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-overflow-hidden':
             !$isMobile.value,
         }"
         v-if="isPanelVisible"
@@ -32,11 +32,11 @@
         ref="filterPanel"
       >
         <div
-          class="vc-table-filter__panel-inner bg-white box-border p-5 flex flex-col"
+          class="vc-table-filter__panel-inner tw-bg-white tw-box-border tw-p-5 tw-flex tw-flex-col"
           @click.stop
         >
           <VcIcon
-            class="vc-table-filter__panel-close text-[#43b0e6] cursor-pointer self-end shrink-0"
+            class="vc-table-filter__panel-close tw-text-[#43b0e6] tw-cursor-pointer tw-self-end tw-shrink-0"
             icon="fas fa-times"
             size="xl"
             @click="closePanel"
@@ -59,7 +59,7 @@ export default defineComponent({
 
 <script lang="ts" setup>
 import { createPopper, Instance } from "@popperjs/core";
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 export interface Props {
   title: string;
@@ -129,22 +129,22 @@ function destroyPopper() {
 
 <style lang="scss">
 .vc-table-filter {
-  @apply relative overflow-visible;
+  @apply tw-relative tw-overflow-visible;
 
   &__panel {
     &_mobile {
       .vc-table-filter__panel {
         &-inner {
-          @apply w-[280px] h-full;
+          @apply tw-w-[280px] tw-h-full;
         }
 
         &-close {
-          @apply self-start;
+          @apply tw-self-start;
         }
       }
 
       .vc-row {
-        @apply block;
+        @apply tw-block;
       }
     }
   }

package/{components → ui/components}/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="relative flex flex-nowrap items-stretch transition duration-200"
-    :class="{ 'transition-none': isMoving }"
+    class="tw-relative tw-flex tw-flex-nowrap tw-items-stretch tw-transition  tw-duration-200"
+    :class="{ ' tw-transition-none': isMoving }"
     :style="`transform: translateX(${offsetX}px)`"
     @click="$emit('click')"
     @touchstart="touchStart"
@@ -11,34 +11,34 @@
   >
     <!-- Left swipe actions-->
     <div
-      class="flex-shrink-0 w-[80px] flex flex-col [justify-content:stretch] bg-[#a9bfd2]"
+      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="leftSwipeActions && leftSwipeActions.length"
     >
       <div
-        class="flex grow basis-[1] flex-col justify-center items-center text-white"
+        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
         @click.stop="leftSwipeActions[0].clickHandler(item)"
       >
         <VcIcon :icon="leftSwipeActions[0].icon"></VcIcon>
-        <div class="mt-1 text-lg">
+        <div class="tw-mt-1 tw-text-lg">
           {{ leftSwipeActions[0].title }}
         </div>
       </div>
     </div>
 
-    <div class="flex-shrink-0 w-full">
+    <div class= "tw-flex-shrink-0 tw-w-full">
       <!-- Mobile item slot content -->
       <slot></slot>
     </div>
 
     <!-- Item actions -->
     <div
-      class="flex-shrink-0 w-[80px] flex flex-col [justify-content:stretch] bg-[#a9bfd2]"
+      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="rightSwipeActions && rightSwipeActions.length"
     >
       <!-- First available action -->
       <div
-        class="flex grow basis-[1] flex-col justify-center items-center text-white"
+        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[
           `vc-table-mobile__item-action_${rightSwipeActions[0].variant}`,
         ]"
@@ -53,14 +53,14 @@
       <!-- Second available action -->
       <div
         v-if="rightSwipeActions.length === 2"
-        class="flex grow basis-[1] flex-col justify-center items-center text-white"
+        class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[
           `vc-table-mobile__item-action_${rightSwipeActions[1].variant}`,
         ]"
         @click.stop="rightSwipeActions[1].clickHandler(item)"
       >
         <VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
-        <div class="mt-1 text-lg">
+        <div class="tw-mt-1 tw-text-lg">
           {{ rightSwipeActions[1].title }}
         </div>
       </div>
@@ -68,44 +68,44 @@
       <!-- Other available actions -->
       <template v-if="rightSwipeActions.length > 2">
         <div
-          class="flex grow basis-[1] flex-col justify-center items-center text-white"
+          class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
           @click.stop="isActionsPopupVisible = true"
         >
           <VcIcon icon="fas fa-ellipsis-h"></VcIcon>
-          <div class="mt-1 text-lg">More</div>
+          <div class="tw-mt-1 tw-text-lg">More</div>
         </div>
 
         <!-- Actions popup -->
         <teleport to="body" v-if="isActionsPopupVisible">
           <div
-            class="absolute left-0 top-0 right-0 bottom-0 bg-[rgba(107,121,135,0.15)] flex items-center justify-center z-[99]"
+            class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
           >
             <div
-              class="bg-white rounded-[6px] overflow-hidden p-5 max-w-[80%] w-[350px] border border-solid border-[#eef0f2] box-border shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
+              class="tw-bg-white tw-rounded-[6px] tw-overflow-hidden tw-p-5 tw-max-w-[80%] tw-w-[350px] tw-border tw-border-solid tw-border-[#eef0f2] tw-box-border tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
             >
-              <div class="flex w-full items-center">
+              <div class= "tw-flex tw-w-full tw-items-center">
                 <span
-                  class="grow text-[#2e3d4e] text-[19px] font-semibold tracking-[-0.01em]"
+                  class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]"
                 >
                   {{ $t("All actions") }}
                 </span>
                 <VcIcon
-                  class="text-[#c2d7e4]"
+                  class="tw-text-[#c2d7e4]"
                   icon="fas fa-times-circle"
                   size="xl"
                   @click="isActionsPopupVisible = false"
                 ></VcIcon>
               </div>
 
-              <div class="flex flex-wrap my-5 justify-between">
+              <div class= "tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
                 <div
                   v-for="(itemAction, i) in itemActions"
                   :key="i"
-                  class="flex grow shrink-0 flex-col items-center text-[#319ed4] my-2 box-border p-1 max-w-[80px]"
+                  class= "tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
                   @click="itemAction.clickHandler(item)"
                 >
                   <VcIcon :icon="itemAction.icon" size="xl"></VcIcon>
-                  <div class="text-base mt-2 text-center">
+                  <div class="tw-text-base tw-mt-2 tw-text-center">
                     {{ itemAction.title }}
                   </div>
                 </div>
@@ -121,7 +121,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 import { IActionBuilderResult } from "@/core/types";
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 export interface Props {
   item: {
@@ -261,11 +261,11 @@ function touchCancel(): void {
 .vc-table-mobile__item {
   &-action {
     &_success {
-      @apply bg-[#87b563];
+      @apply tw-bg-[#87b563];
     }
 
     &_danger {
-      @apply bg-[#ff4a4a];
+      @apply tw-bg-[#ff4a4a];
     }
   }
 }

package/{components → ui/components}/organisms/vc-table/vc-table.stories.ts

@@ -18,13 +18,13 @@ const Template: Story = (args) => ({
     return { args };
   },
   template: `
-    <div class="flex h-[400px] overflow-hidden">
+    <div class= "tw-flex tw-h-[400px] tw-overflow-hidden">
       <vc-table v-bind="args">
          <template v-slot:item_img="itemData">
-            <vc-image aspect="1x1" size="auto" :bordered="true" :src="itemData.item.img"></vc-image>
+            <vc-image aspect="1x1" size="auto" :tw-border-ed="true" :src="itemData.item.img"></vc-image>
          </template>
          <template v-slot:item_name="itemData">
-            <div class="flex flex-col">
+            <div class= "tw-flex tw-flex-col">
                <div>{{ itemData.item.name }}</div>
                <vc-hint>{{ itemData.item.description }}</vc-hint>
             </div>