@vc-shell/framework 1.0.39 → 1.0.41

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

@@ -2,8 +2,8 @@
   <div
     class="vc-link"
     :class="{
-      'vc-text-[color:var(--link-text-color-active)] no-underline': active,
-      'cursor-not-allowed text-[color:var(--link-text-color-disabled)] hover:text-[color:var(--link-text-color-disabled)] no-underline':
+      'tw-text-[color:var(--link-text-color-active)] tw-no-underline': active,
+      'tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] hover:tw-text-[color:var(--link-text-color-disabled)] tw-no-underline':
         disabled,
     }"
     @click="onClick"
@@ -41,6 +41,6 @@ function onClick(): void {
 }
 
 .vc-link {
-  @apply text-[color:var(--link-text-color)] no-underline cursor-pointer transition duration-200 inline-block hover:text-[color:var(--link-text-color-hover)] hover:underline;
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition  tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
 }
 </style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-hidden tw-w-full tw-h-full tw-box-border"
+    :class="{
+      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]':
+        active,
+    }"
+  >
+    <div class="tw-relative tw-w-[142px] tw-h-[40px] tw-z-[1]">
+      <span
+        class="tw-absolute tw-w-4 tw-h-4 tw-top-[12px] tw-left-[15px] tw-bg-[#319ed4] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker"
+      ></span>
+      <div
+        class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers"
+      >
+        <span
+          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
+          v-for="item in 3"
+          :key="`marker_${item}`"
+        ></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

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

@@ -1,12 +1,12 @@
 <template>
   <div
     :class="[
-      'vc-progress border border-[length:var(--progressbar-border-width)] border-[color:var(--progressbar-border-color)] rounded-[var(--progressbar-border-radius)] h-[var(--progressbar-height)] transition duration-200 box-border bg-[color:var(--progressbar-background-color)]',
+      'vc-progress tw-border tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition  tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)]',
       variant,
     ]"
   >
     <div
-      class="vc-progress__value bg-[color:var(--progressbar-foreground-color)] transition duration-200 h-full"
+      class="vc-progress__value tw-bg-[color:var(--progressbar-foreground-color)] tw-transition  tw-duration-200 tw-h-full"
       :style="`width: ${value}%`"
     ></div>
   </div>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-row flex-nowrap flex items-stretch">
+  <div class="vc-row tw-flex-nowrap tw-flex tw-items-stretch">
     <slot></slot>
   </div>
 </template>

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

@@ -59,20 +59,20 @@ defineProps({
 $variants: info, warning, danger, success, light-danger;
 
 .vc-status {
-  @apply inline-block rounded-[var(--status-border-radius)] py-1 px-3.5 text-base font-normal whitespace-nowrap;
+  @apply tw-inline-block tw-rounded-[var(--status-border-radius)] tw-py-1 tw-px-3.5 tw-text-base tw-font-normal tw-whitespace-nowrap;
 
   @each $variant in $variants {
     &_#{$variant} {
-      @apply text-[color:var(--status-#{$variant}-color)] border border-solid border-[color:var(--status-#{$variant}-main-color)] bg-[color:var(--status-#{$variant}-main-color)];
+      @apply tw-text-[color:var(--status-#{$variant}-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
 
       &.vc-status_outline {
-        @apply text-[color:var(--status-#{$variant}-main-color)] border border-solid border-[color:var(--status-#{$variant}-main-color)] bg-white;
+        @apply tw-text-[color:var(--status-#{$variant}-main-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-white;
       }
     }
   }
 
   &.vc-status_extended {
-    @apply whitespace-normal p-[var(--status-padding-extended)] rounded-[var(--status-border-radius-extended)];
+    @apply tw-whitespace-normal tw-p-[var(--status-padding-extended)] tw-rounded-[var(--status-border-radius-extended)];
   }
 }
 </style>

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

@@ -1,16 +1,16 @@
 <template>
   <div>
     <template v-if="status">
-      <VcIcon icon="fas fa-check-circle" class="text-[color:#87b563]"></VcIcon>
+      <VcIcon icon="fas fa-check-circle" class="tw-text-[color:#87b563]"></VcIcon>
     </template>
     <template v-else>
-      <VcIcon icon="fas fa-times-circle" class="text-[color:#bdd1df]"></VcIcon>
+      <VcIcon icon="fas fa-times-circle" class="tw-text-[color:#bdd1df]"></VcIcon>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 defineProps({
   status: {

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

@@ -1,10 +1,10 @@
 <template>
   <div>
     <!-- Switch label -->
-    <VcLabel v-if="label" class="mb-2" :required="required">
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
       <span>{{ label }}</span>
     </VcLabel>
-    <div class="relative inline-block w-[54px] h-[18px]">
+    <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
       <label>
         <input
           type="checkbox"
@@ -15,7 +15,7 @@
         />
         <span class="vc-switch__slider"></span>
       </label>
-      <VcHint class="mt-2 w-max" v-if="tooltip">
+      <VcHint class="tw-mt-2 tw-w-max" v-if="tooltip">
         {{ tooltip }}
       </VcHint>
     </div>
@@ -70,30 +70,30 @@ function onInput(e: InputEvent) {
 
 .vc-switch {
   &__input {
-    @apply w-0 h-0 opacity-0;
+    @apply tw-w-0 tw-h-0 tw-opacity-0;
 
     &:checked + .vc-switch__slider:before {
-      @apply translate-x-[29px];
+      @apply tw-translate-x-[29px];
     }
 
     &:checked + .vc-switch__slider {
-      @apply bg-[color:var(--switch-main-color)] after:bg-[image:var(--switch-active-icon)] after:bg-[position:10px] after:bg-[length:10px_7px];
+      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[image:var(--switch-active-icon)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
     }
 
     &:disabled + .vc-switch__slider {
-      @apply bg-[color:var(--switch-secondary-color)];
+      @apply tw-bg-[color:var(--switch-secondary-color)];
     }
   }
 
   &__slider {
-    @apply absolute top-0 right-0 bottom-0 left-0 bg-[color:var(--switch-secondary-color)] rounded-[3px] cursor-pointer transition duration-200;
+    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[3px] tw-cursor-pointer tw-transition  tw-duration-200;
 
     &:after {
-      @apply inline-block w-full h-full bg-[image:var(--switch-disabled-icon)] bg-[position:calc(100%-11px)] bg-no-repeat bg-[length:8px_8px] content-[""];
+      @apply tw-inline-block tw-w-full tw-h-full tw-bg-[image:var(--switch-disabled-icon)] tw-bg-[position:calc(100%-11px)] tw-bg-no-repeat tw-bg-[length:8px_8px] tw-content-[""];
     }
 
     &:before {
-      @apply absolute bottom-px left-px flex justify-center items-center w-[23px] h-[16px] bg-white rounded-sm text-[color:#d2d2d2] text-[10px] transition duration-200 content-["|||"];
+      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[23px] tw-h-[16px] tw-bg-white tw-rounded-sm tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition  tw-duration-200 tw-content-["|||"];
     }
   }
 }

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

@@ -48,38 +48,38 @@ function onClick() {
 
 <style lang="scss">
 .vc-widget {
-  @apply flex w-[100px] overflow-hidden p-5
-    box-border flex-col items-center
-    justify-center border-b border-solid
-    border-b-[#eaedf3] cursor-pointer bg-white
-    hover:bg-[#eff7fc];
+  @apply tw-flex tw-w-[100px] tw-overflow-hidden tw-p-5
+    tw-box-border tw-flex-col tw-items-center
+    tw-justify-center tw-border-b tw-border-solid
+    tw-border-b-[#eaedf3] tw-cursor-pointer tw-bg-white
+    hover:tw-bg-[#eff7fc];
 
   &_disabled {
-    @apply cursor-default hover:bg-white;
+    @apply tw-cursor-default hover:tw-bg-white;
   }
 
   &__icon {
-    @apply text-[#a9bfd2];
+    @apply tw-text-[#a9bfd2];
   }
 
   &_disabled &__icon {
-    @apply text-[#d2d4d7];
+    @apply tw-text-[#d2d4d7];
   }
 
   &__title {
-    @apply font-medium text-sm text-[#333333] mt-3 mb-1 mx-0;
+    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-3 tw-mb-1 tw-mx-0;
   }
 
   &_disabled &__title {
-    @apply text-[#d2d4d7];
+    @apply tw-text-[#d2d4d7];
   }
 
   &__value {
-    @apply font-medium text-[22px] text-[#43b0e6];
+    @apply tw-font-medium tw-text-[22px] tw-text-[#43b0e6];
   }
 
   &_disabled &__value {
-    @apply text-[#d2d4d7];
+    @apply tw-text-[#d2d4d7];
   }
 }
 </style>

package/{components → ui/components}/index.ts

@@ -1,5 +1,5 @@
 /* Atoms */
-export { default as VcBadge } from "./atoms/vc-badge/vc-badge.vue";
+export { VcBadge } from "./atoms/vc-badge";
 export { default as VcButton } from "./atoms/vc-button/vc-button.vue";
 export { default as VcCard } from "./atoms/vc-card/vc-card.vue";
 export { default as VcCheckbox } from "./atoms/vc-checkbox/vc-checkbox.vue";
@@ -24,12 +24,13 @@ export { default as VcBreadcrumbs } from "./molecules/vc-breadcrumbs/vc-breadcru
 export { default as VcEditor } from "./molecules/vc-editor/vc-editor.vue";
 export { default as VcForm } from "./molecules/vc-form/vc-form.vue";
 export { default as VcFileUpload } from "./molecules/vc-file-upload/vc-file-upload.vue";
-export { default as VcInput } from "./molecules/vc-input/vc-input.vue";
+export { VcInput } from "./molecules/vc-input";
+export { VcInputCurrency } from "./molecules/vc-input-currency";
 export { default as VcMultivalue } from "./molecules/vc-multivalue/vc-multivalue.vue";
 export { default as VcNotification } from "./molecules/vc-notification/vc-notification.vue";
 export { default as VcPagination } from "./molecules/vc-pagination/vc-pagination.vue";
 export { default as VcRating } from "./molecules/vc-rating/vc-rating.vue";
-export { default as VcSelect } from "./molecules/vc-select/vc-select.vue";
+export { VcSelect } from "./molecules/vc-select";
 export { default as VcSlider } from "./molecules/vc-slider/vc-slider.vue";
 export { default as VcTextarea } from "./molecules/vc-textarea/vc-textarea.vue";
 

package/{components → ui/components}/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 const props = defineProps({
   current: {
@@ -73,31 +73,31 @@ function onClick(): void {
 }
 
 .vc-breadcrumbs-item {
-  @apply h-[var(--breadcrumbs-item-height)]
-  box-border rounded-[calc(var(--breadcrumbs-item-height)/2)]
-  border border-solid
-  border-[color:var(--breadcrumbs-item-border-color)]
-  text-[color:var(--breadcrumbs-item-color)]
-  whitespace-nowrap
-  px-3 mr-2
-  text-sm cursor-pointer inline-flex items-center
-  hover:border
-  hover:border-solid
-  hover:border-[color:var(--breadcrumbs-item-border-color-hover)];
+  @apply tw-h-[var(--breadcrumbs-item-height)]
+  tw-box-border tw-rounded-[calc(var(--breadcrumbs-item-height)/2)]
+  tw-border tw-border-solid
+  tw-border-[color:var(--breadcrumbs-item-border-color)]
+  tw-text-[color:var(--breadcrumbs-item-color)]
+  tw-whitespace-nowrap
+  tw-px-3 tw-mr-2
+  tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center
+  hover:tw-border
+  hover:tw-border-solid
+  hover:tw-border-[color:var(--breadcrumbs-item-border-color-hover)];
 
   &__icon {
-    @apply mr-2 text-[color:var(--breadcrumbs-item-icon-color)];
+    @apply tw-mr-2 tw-text-[color:var(--breadcrumbs-item-icon-color)];
   }
 
   &_disabled {
-    @apply opacity-[0.4];
+    @apply tw-opacity-[0.4];
   }
 
   &_current,
   &_current:hover {
-    @apply text-[color:var(--breadcrumbs-item-color-current)]
-    border border-solid border-[color:var(--breadcrumbs-item-border-color-current)]
-    cursor-default mr-0;
+    @apply tw-text-[color:var(--breadcrumbs-item-color-current)]
+    tw-border tw-border-solid tw-border-[color:var(--breadcrumbs-item-border-color-current)]
+    tw-cursor-default tw-mr-0;
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="items" class="flex items-center flex-nowrap">
+  <div v-if="items" class= "tw-flex tw-items-center tw-flex-nowrap">
     <VcBreadcrumbsItem
       v-for="(item, i) in items"
       :key="item.id"

package/{components/molecules/vc-input → ui/components/molecules/vc-currency-input}/vc-input.vue

@@ -11,7 +11,7 @@
     ]"
   >
     <!-- Input label -->
-    <VcLabel v-if="label" class="mb-2" :required="isRequired">
+    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
     </VcLabel>
@@ -45,7 +45,7 @@
         >
           {{ optionsValue }}
         </div>
-        <teleport to="body">
+        <teleport to="#app">
           <div
             v-if="dropActive"
             ref="dropRef"
@@ -128,9 +128,7 @@ import {
   unref,
   watch,
 } from "vue";
-import { GenericValidateFunction } from "vee-validate";
-import { VcIcon, VcLabel } from "@/components";
-import { IValidationRules } from "@/core/types";
+import { VcIcon, VcLabel } from "@/ui/components";
 import { createPopper, Instance } from "@popperjs/core";
 import {
   useCurrencyInput,
@@ -152,11 +150,6 @@ export interface Props {
     label?: string;
     tooltip?: string;
     name?: string;
-    rules?:
-        | string
-        | IValidationRules
-        | GenericValidateFunction<ValueType>
-        | GenericValidateFunction<ValueType>[];
     currency?: boolean;
     options?: Record<string, string>[];
     optionsTitle?: string;
@@ -337,107 +330,107 @@ function onReset() {
 }
 
 .vc-input {
-  @apply overflow-hidden;
+  @apply tw-overflow-hidden;
 
   &_date,
   &_datetime-local {
-    @apply max-w-[220px];
+    @apply tw-max-w-[220px];
 
     .vc-app_mobile & {
-      @apply max-w-full;
+      @apply tw-max-w-full;
     }
   }
 
   &__field-wrapper {
-    @apply border border-solid border-[color:var(--input-border-color)]
-    rounded-[var(--input-border-radius)]
-    bg-[color:var(--input-background-color)] flex items-stretch;
+    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color)]
+    tw-rounded-[var(--input-border-radius)]
+    tw-bg-[color:var(--input-background-color)] tw-flex tw-items-stretch;
   }
 
   &_error &__field-wrapper {
-    @apply border border-solid border-[color:var(--input-border-color-error)];
+    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)];
   }
 
   &__error {
-    @apply mt-1 [--hint-color:var(--input-border-color-error)];
+    @apply tw-mt-1 [--hint-color:var(--input-border-color-error)];
   }
 
   &__desc {
-    @apply text-[color:var(--multivalue-placeholder-color)] mt-1 break-words p-0;
+    @apply tw-text-[color:var(--multivalue-placeholder-color)] tw-mt-1 tw-break-words tw-p-0;
   }
 
   &__field {
-    @apply border-none outline-none h-[var(--input-height)] min-w-0 box-border grow pl-3;
+    @apply tw-border-none tw-outline-none tw-h-[var(--input-height)] tw-min-w-0 tw-box-border tw-grow tw-pl-3;
 
     &::-webkit-input-placeholder {
-      @apply text-[color:var(--input-placeholder-color)];
+      @apply tw-text-[color:var(--input-placeholder-color)];
     }
 
     &::-moz-placeholder {
-      @apply text-[color:var(--input-placeholder-color)];
+      @apply tw-text-[color:var(--input-placeholder-color)];
     }
 
     &::-ms-placeholder {
-      @apply text-[color:var(--input-placeholder-color)];
+      @apply tw-text-[color:var(--input-placeholder-color)];
     }
 
     &::placeholder {
-      @apply text-[color:var(--input-placeholder-color)];
+      @apply tw-text-[color:var(--input-placeholder-color)];
     }
 
     &::-ms-reveal,
     &::-ms-clear {
-      @apply hidden;
+      @apply tw-hidden;
     }
   }
 
   &__clear {
-    @apply cursor-pointer text-[color:var(--input-clear-color)] hover:text-[color:var(--input-clear-color-hover)] px-3 flex items-center;
+    @apply tw-cursor-pointer tw-text-[color:var(--input-clear-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-px-3 tw-flex tw-items-center;
   }
 
   &__showhide {
-    @apply cursor-pointer text-[color:var(--input-placeholder-color)] hover:text-[color:var(--input-clear-color-hover)] px-3 flex items-center;
+    @apply tw-cursor-pointer tw-text-[color:var(--input-placeholder-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-px-3 tw-flex tw-items-center;
   }
 
   &__dropdown-wrap {
-    @apply relative px-3 flex items-center;
+    @apply tw-relative tw-px-3 tw-flex tw-items-center;
   }
 
   &__dropdown-btn {
-    @apply text-[color:var(--input-clear-color)] not-italic font-medium text-[13px] leading-[20px] cursor-pointer;
+    @apply tw-text-[color:var(--input-clear-color)] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer;
 
     &_disabled {
-      @apply text-[#7e8e9d] cursor-default;
+      @apply tw-text-[#7e8e9d] tw-cursor-default;
     }
   }
 
   &__dropdown {
-    @apply absolute bg-white shadow-[1px_1px_11px_rgba(141,152,163,0.6)] rounded-[3px] p-[11px] w-[120px] box-border;
+    @apply tw-absolute tw-bg-white tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-p-[11px] tw-w-[120px] tw-box-border;
   }
 
   &__dropdown-title {
-    @apply not-italic font-normal text-base leading-[20px] text-[#333333] p-0 mb-[7px];
+    @apply tw-not-italic tw-font-normal tw-text-base tw-leading-[20px] tw-text-[#333333] tw-p-0 tw-mb-[7px];
   }
 
   &__dropdown-search {
-    @apply bg-white border border-solid border-[#eaecf2] box-border rounded-[4px] h-8 w-full outline-none px-2;
+    @apply tw-bg-white tw-border tw-border-solid tw-border-[#eaecf2] tw-box-border tw-rounded-[4px] tw-h-8 tw-w-full tw-outline-none tw-px-2;
   }
 
   &__dropdown-list {
-    @apply list-none p-0 mt-2;
+    @apply tw-list-none tw-p-0 tw-mt-2;
   }
 
   &__dropdown-selector {
-    @apply border-none bg-transparent p-[9px] text-left w-full cursor-pointer text-lg rounded-[3px] hover:bg-[#eff7fc];
+    @apply tw-border-none tw-bg-transparent tw-p-[9px] tw-text-left tw-w-full tw-cursor-pointer tw-text-lg tw-rounded-[3px] hover:tw-bg-[#eff7fc];
 
     &-active {
-      @apply bg-[#dfeef9];
+      @apply tw-bg-[#dfeef9];
     }
   }
 
   &_disabled &__field-wrapper,
   &_disabled &__field {
-    @apply bg-[#fafafa] text-[#424242];
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-editor/vc-editor.vue

@@ -9,14 +9,14 @@
     ]"
   >
     <!-- Editor label -->
-    <VcLabel v-if="label" class="mb-2" :required="required">
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
     </VcLabel>
 
     <!-- Editor field -->
     <v-ace-editor
-      class="border border-solid border-[color:var(--editor-border-color)] rounded-[var(--editor-border-radius)]"
+      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)]"
       v-model:value="content"
       lang="html"
       theme="chrome"
@@ -107,11 +107,11 @@ function onInput() {
 
 .vc-editor {
   &__error {
-    @apply text-[color:var(--editor-border-color-error)] mt-1;
+    @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
   }
 
   &_error .ace_editor {
-    @apply border border-solid border-[color:var(--editor-border-color-error)];
+    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)];
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-file-upload/vc-file-upload.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class= "tw-flex tw-flex-col tw-flex-1">
     <div
-      class="vc-file-upload relative h-[155px] box-border border border-dashed border-[#c8dbea] rounded-[6px] p-2 p-4 flex flex-col items-center justify-center"
+      class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-2 tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
       :class="`vc-file-upload_${variant}`"
       @drop.stop.prevent="onDrop"
       @drag.stop.prevent
@@ -13,12 +13,12 @@
     >
       <VcLoading :active="loading"></VcLoading>
       <VcIcon
-        class="text-[#c8dbea]"
+        class="tw-text-[#c8dbea]"
         icon="fas fa-cloud-upload-alt"
         size="xxl"
       ></VcIcon>
 
-      <div class="text-[#9db0be] text-center text-lg leading-lg mt-4">
+      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
         <span>Drag and drop file here or</span>&nbsp;
         <br />
         <VcLink @click="toggleUploader">browse your files</VcLink>
@@ -124,11 +124,11 @@ function onDrop(event: DragEvent) {
 .vc-file-upload {
   // variants
   &_gallery {
-    @apply w-[155px] h-[155px];
+    @apply tw-w-[155px] tw-h-[155px];
   }
 
   &_file-upload {
-    @apply w-full bg-[#f2f8fd];
+    @apply tw-w-full tw-bg-[#f2f8fd];
   }
 }
 </style>

package/ui/components/molecules/vc-input/index.ts

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcInputProps } from "./vc-input-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Input from "./vc-input.vue";
+
+export const VcInput: ComponentConstructor<
+  ComponentPublicInstance<VcInputProps>
+> = Input;