@vc-shell/framework 1.0.39 → 1.0.40

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden flex flex-col grow basis-0">
+  <div class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0">
     <!-- Header slot with filter and searchbar -->
     <slot
       name="header"
@@ -11,9 +11,9 @@
           activeFilterCount)
       "
     >
-      <div class="shrink-0 flex items-center justify-between p-4">
+      <div class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4">
         <!-- Table filter mobile button -->
-        <div v-if="$isMobile.value && $slots['filters']" class="mr-3">
+        <div v-if="$isMobile.value && $slots['filters']" class="tw-mr-3">
           <VcTableFilter :counter="activeFilterCount">
             <template v-slot:default="{ closePanel }">
               <slot name="filters" :closePanel="closePanel"></slot>
@@ -23,16 +23,16 @@
 
         <!-- Table search input -->
         <VcInput
-          class="grow basis-0"
+          class="tw-grow tw-basis-0"
           :placeholder="searchPlaceholder"
-          :clearable="true"
+          clearable
           name="table_search"
           :modelValue="searchValue"
           @update:modelValue="$emit('search:change', $event)"
         ></VcInput>
 
         <!-- Table filter desktop button -->
-        <div v-if="$isDesktop.value && $slots['filters']" class="ml-3">
+        <div v-if="$isDesktop.value && $slots['filters']" class="tw-ml-3">
           <VcTableFilter
             :title="$t('Filters')"
             :counter="activeFilterCount"
@@ -46,7 +46,7 @@
       </div>
     </slot>
 
-    <div class="flex relative overflow-hidden grow">
+    <div class= "tw-flex tw-relative tw-overflow-hidden tw-grow">
       <!-- Table loading overlay -->
       <VcLoading :active="loading"></VcLoading>
 
@@ -55,7 +55,7 @@
         v-if="items && items.length"
         ref="scrollContainer"
         :noPadding="true"
-        class="grow basis-0"
+        class="tw-grow tw-basis-0"
         :usePtr="!!$attrs['onScroll:ptr']"
         @scroll:ptr="$emit('scroll:ptr')"
       >
@@ -79,7 +79,7 @@
         <!-- Desktop table view -->
         <table
           v-else
-          class="[border-spacing:0] border-collapse relative pt-[43px] table-fixed box-border w-full"
+          class="[border-spacing:0] tw-border-collapse tw-relative tw-pt-[43px] tw-table-fixed tw-box-border tw-w-full"
           :class="{
             'vc-table_empty': !items || !items.length,
             'vc-table_multiselect': multiselect,
@@ -89,10 +89,10 @@
             <tr class="vc-table__header-row">
               <th
                 v-if="multiselect"
-                class="h-[42px] bg-[#f9f9f9] !border-0 shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] box-border sticky top-0 select-none overflow-hidden z-[1]"
+                class="tw-h-[42px] tw-bg-[#f9f9f9] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1]"
                 width="50"
               >
-                <div class="flex justify-center items-center">
+                <div class= "tw-flex tw-justify-center tw-items-center">
                   <VcCheckbox
                     :modelValue="headerCheckbox"
                     @update:modelValue="processHeaderCheckbox"
@@ -103,21 +103,21 @@
               <th
                 v-for="item in columns"
                 :key="item.id"
-                class="h-[42px] bg-[#f9f9f9] !border-0 shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] box-border sticky top-0 select-none overflow-hidden z-[1] px-3"
+                class="tw-h-[42px] tw-bg-[#f9f9f9] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1] tw-px-3"
                 :class="{
-                  'cursor-pointer group': item.sortable,
+                  'tw-cursor-pointer tw-group': item.sortable,
                 }"
                 :width="item.width"
                 @click="handleHeaderClick(item)"
               >
                 <div
-                  class="flex items-center flex-nowrap"
+                  class= "tw-flex tw-items-center tw-flex-nowrap"
                   :class="tableAlignment[item.align]"
                 >
                   <div>
                     <slot :name="`header_${item.id}`">{{ item.title }}</slot>
                   </div>
-                  <div v-if="sortField === item.id" class="ml-1">
+                  <div v-if="sortField === item.id" class="tw-ml-1">
                     <VcIcon
                       size="xs"
                       :icon="`fas fa-caret-${
@@ -126,7 +126,7 @@
                     ></VcIcon>
                   </div>
                   <div
-                    class="flex flex-col ml-1 invisible group-hover:visible"
+                    class= "tw-flex tw-flex-col tw-ml-1 tw-invisible group-hover:tw-visible"
                     v-else
                   >
                     <VcIcon size="xs" icon="fas fa-caret-up"></VcIcon>
@@ -135,7 +135,7 @@
                 </div>
               </th>
               <th
-                class="h-[42px] bg-[#f9f9f9] !border-0 shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] box-border sticky top-0 select-none overflow-hidden z-[1]"
+                class="tw-h-[42px] tw-bg-[#f9f9f9] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1]"
                 width="44"
                 v-if="itemActionBuilder"
               ></th>
@@ -146,11 +146,11 @@
             <tr
               v-for="(item, i) in items"
               :key="item.id"
-              class="vc-table__body-row h-[60px] bg-white hover:bg-[#dfeef9]"
+              class="vc-table__body-row tw-h-[60px] tw-bg-white hover:tw-bg-[#dfeef9]"
               :class="{
-                'cursor-pointer hover:bg-[#dfeef9]': onItemClick,
-                'bg-[#f8f8f8]': i % 2 === 1,
-                '!bg-[#dfeef9] hover:bg-[#dfeef9]':
+                'tw-cursor-pointer hover:tw-bg-[#dfeef9]': onItemClick,
+                'tw-bg-[#f8f8f8]': i % 2 === 1,
+                '!tw-bg-[#dfeef9] hover:tw-bg-[#dfeef9]':
                   item && item.id ? selectedItemId === item.id : false,
               }"
               @click="$emit('itemClick', item)"
@@ -158,7 +158,7 @@
               @mouseleave="closeActions"
             >
               <td v-if="multiselect" width="50">
-                <div class="flex justify-center items-center">
+                <div class= "tw-flex tw-justify-center tw-items-center">
                   <VcCheckbox
                     :modelValue="checkboxes[item.id]"
                     @update:modelValue="processCheckbox(item.id, $event)"
@@ -169,7 +169,7 @@
               <td
                 v-for="cell in columns"
                 :key="`${item.id}_${cell.id}`"
-                class="box-border overflow-hidden px-3"
+                class="tw-box-border tw-overflow-hidden tw-px-3"
                 :class="cell.class"
                 :width="cell.width"
               >
@@ -178,15 +178,15 @@
                 </slot>
               </td>
               <td
-                class="box-border overflow-visible px-3"
+                class="tw-box-border tw-overflow-visible tw-px-3"
                 width="44"
                 v-if="itemActionBuilder"
               >
                 <div
-                  class="vc-table__body-actions-container relative !hidden justify-center items-center"
+                  class="vc-table__body-actions-container tw-relative !tw-hidden tw-justify-center tw-items-center"
                 >
                   <button
-                    class="text-[#319ed4] cursor-pointer border-none bg-transparent disabled:text-[gray]"
+                    class="tw-text-[#319ed4] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray]"
                     @click.stop="showActions(item, item.id)"
                     :ref="(el) => setActionToggleRefs(el, item.id)"
                     aria-describedby="tooltip"
@@ -195,27 +195,27 @@
                     <VcIcon icon="fas fa-cog" size="m" />
                   </button>
                   <div
-                    class="vc-table__body-tooltip bg-white rounded-l-[4px] p-[15px] z-0 absolute right-0 drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)]"
+                    class="vc-table__body-tooltip tw-bg-white tw-rounded-l-[4px] tw-p-[15px] tw-z-0 tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)]"
                     v-show="selectedRow === item.id"
                     @mouseleave="closeActions"
                     :ref="(el) => setTooltipRefs(el, item.id)"
                     role="tooltip"
                   >
                     <div
-                      class="flex items-center flex-row text-[#3f3f3f] font-normal not-italic text-base leading-[20px] gap-[25px]"
+                      class= "tw-flex tw-items-center tw-flex-row tw-text-[#3f3f3f] tw-font-normal not-italic tw-text-base tw-leading-[20px] tw-gap-[25px]"
                     >
                       <div
                         v-for="(itemAction, i) in itemActions"
                         :key="i"
                         :class="[
-                          'flex flex-row items-center text-[#319ed4] cursor-pointer',
+                          'tw-flex tw-flex-row tw-items-center tw-text-[#319ed4] tw-cursor-pointer',
                           `vc-table__body-actions-item_${itemAction.variant}`,
                         ]"
                         @click.stop="itemAction.clickHandler(item)"
                       >
                         <VcIcon :icon="itemAction.icon" size="m" />
                         <div
-                          class="not-italic font-normal text-base leading-[20px] text-[#3f3f3f] ml-[7px]"
+                          class="tw-not-italic tw-font-normal tw-text-base tw-leading-[20px] tw-text-[#3f3f3f] tw-ml-[7px]"
                         >
                           {{ itemAction.title }}
                         </div>
@@ -241,10 +241,10 @@
         >
           <div
             v-if="notfound"
-            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"
           >
             <img v-if="notfound.image" :src="notfound.image" />
-            <div class="m-4 vc-table__empty-text">
+            <div class="tw-m-4 vc-table__empty-text">
               {{ notfound.text }}
             </div>
             <VcButton v-if="notfound.action" @click="notfound.clickHandler">
@@ -255,10 +255,10 @@
         <slot v-else name="empty">
           <div
             v-if="empty"
-            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"
           >
             <img v-if="empty.image" :src="empty.image" />
-            <div class="m-4 text-xl font-medium">{{ empty.text }}</div>
+            <div class="tw-m-4 tw-text-xl tw-font-medium">{{ empty.text }}</div>
             <VcButton v-if="empty.action" @click="empty.clickHandler">
               {{ empty.action }}
             </VcButton>
@@ -273,7 +273,7 @@
       v-if="($slots['footer'] || footer) && items && items.length"
     >
       <div
-        class="bg-[#fbfdfe] border-t border-solid border-[#eaedf3] flex-shrink-0 flex items-center justify-between p-4"
+        class="tw-bg-[#fbfdfe] tw-border-t tw-border-solid tw-border-[#eaedf3] tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4"
       >
         <!-- Table pagination -->
         <VcPagination
@@ -302,7 +302,7 @@ import {
   VcContainer,
   VcInput,
   VcPagination,
-} from "@/components";
+} from "@/ui/components";
 import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
 import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
@@ -606,32 +606,32 @@ $variants: (
     }
 
     &-row:hover .vc-table__body-actions-container {
-      @apply flex #{!important};
+      @apply tw-flex #{!important};
     }
 
     &-actions-item {
       @each $name, $variant in $variants {
         &_#{$name} {
-          @apply text-[#{$variant}];
+          @apply tw-text-[#{$variant}];
         }
       }
     }
 
     &-tooltip-arrow,
     &-tooltip-arrow:before {
-      @apply absolute w-2 h-2 bg-inherit;
+      @apply tw-absolute tw-w-2 tw-h-2 tw-bg-inherit;
     }
 
     &-tooltip-arrow {
-      @apply invisible before:visible before:content-[""] before:rotate-45;
+      @apply tw-invisible before:tw-visible before:tw-content-[""] before:tw-rotate-45;
     }
 
     &-tooltip[data-popper-placement^="top"] > .vc-table__body-tooltip-arrow {
-      @apply bottom-[-5px];
+      @apply tw-bottom-[-5px];
     }
 
     &-tooltip[data-popper-placement^="bottom"] > .vc-table__body-tooltip-arrow {
-      @apply top-[-5px];
+      @apply tw-top-[-5px];
     }
   }
 }

package/ui/types/index.ts

@@ -0,0 +1,38 @@
+import { GlobalComponentConstructor } from "./ts-helpers";
+import {
+  VcInputEmits,
+  VcInputProps,
+  VcInputSlots,
+} from "../components/molecules/vc-input/vc-input-model";
+import {
+  VcSelectEmits,
+  VcSelectProps,
+  VcSelectSlots,
+} from "../components/molecules/vc-select/vc-select-model";
+import {
+  VcInputCurrencyProps,
+  VcInputCurrencyEmits,
+  VcInputCurrencySlots,
+} from "@/ui/components/molecules/vc-input-currency/vc-input-currency-model";
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    VcInput: GlobalComponentConstructor<
+      VcInputProps,
+      VcInputSlots,
+      VcInputEmits
+    >;
+    VcInputCurrency: GlobalComponentConstructor<
+      VcInputCurrencyProps,
+      VcInputCurrencySlots,
+      VcInputCurrencyEmits
+    >;
+    VcSelect: GlobalComponentConstructor<
+      VcSelectProps,
+      VcSelectSlots,
+      VcSelectEmits
+    >;
+  }
+}
+
+export {};

package/ui/types/ts-helpers.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import {
+  ComponentOptions,
+  ComponentPublicInstance,
+  ComputedOptions,
+  EmitsOptions,
+  MethodOptions,
+  VNodeProps,
+} from "vue";
+
+export type PublicProps = VNodeProps;
+
+export type ComponentConstructor<
+  Component extends ComponentPublicInstance<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    E
+  > = ComponentPublicInstance<any>,
+  Props = any,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions = EmitsOptions
+> = { new (): Component } & ComponentOptions<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  any,
+  any,
+  E
+>;
+
+
+export type GlobalComponentConstructor<Props = {}, Slots = {}, Emits = {}> = {
+  new (): {
+    $props: PublicProps & Props;
+    $slots: Slots;
+    $emit: EmitsOptions & Emits;
+  };
+};

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

@@ -1,63 +0,0 @@
-<template>
-  <div
-    class="inline-block rounded-[var(--badge-border-radius)] py-1 px-2 text-base font-normal bg-[color:var(--badge-background-color)] text-[color:var(--badge-text-color)] border border-solid border-[color:var(--badge-border-color)] transition duration-200"
-    :class="{
-      'bg-[color:var(--badge-background-color-active)] text-[color:var(--badge-text-color-active)] border-[color:var(--badge-border-color-active)]':
-        active,
-      'cursor-pointer hover:bg-[color:var(--badge-background-color-active)] hover:text-[color:var(--badge-text-color-hover)] hover:border-[color:var(--badge-border-color-hover)]':
-        clickable,
-      'cursor-not-allowed bg-[color:var(--badge-background-color-disabled)] text-[color:var(--badge-text-color-disabled)] border-[color:var(--badge-border-color-disabled)] hover:bg-[color:var(--badge-background-color-disabled)] hover:text-[color:var(--badge-text-color-disabled)] hover:border-[color:var(--badge-border-color-disabled)]':
-        disabled,
-    }"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  clickable: {
-    type: Boolean,
-    default: true,
-  },
-});
-const emit = defineEmits(["click"]);
-
-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/components/atoms/vc-loading/vc-loading.vue

@@ -1,30 +0,0 @@
-<template>
-  <div
-    class="absolute items-center justify-center flex-col z-[9998] hidden w-full h-full box-border"
-    :class="{
-      '!flex backdrop-blur-[3px] bg-[rgba(255, 255, 255, 0.5)]': active,
-    }"
-  >
-    <div class="relative w-[142px] h-[40px] z-[1]">
-      <span
-        class="absolute w-4 h-4 top-[12px] left-[15px] bg-[#319ed4] rounded-full translate-x-0 animate-loadingMarker"
-      ></span>
-      <div class="translate-x-0 mt-3 ml-[31px] animate-loadingMarkers">
-        <span
-          class="block float-left w-4 h-4 bg-[#319ed4] rounded-full 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/molecules/vc-input/vc-input.stories.ts

@@ -1,26 +0,0 @@
-/**
- * Input component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcInput from "./vc-input.vue";
-
-export default {
-  title: "molecules/vc-input",
-  component: VcInput,
-};
-
-const Template: Story = (args) => ({
-  components: { VcInput },
-  setup() {
-    return { args };
-  },
-  template: '<vc-input v-bind="args"></vc-input>',
-});
-
-export const Input = Template.bind({});
-Input.storyName = "vc-input";
-Input.args = {
-  placeholder: "Placeholder",
-  clearable: true,
-};

package/components/molecules/vc-select/vc-select.stories.ts

@@ -1,25 +0,0 @@
-/**
- * Select component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcSelect from "./vc-select.vue";
-
-export default {
-  title: "molecules/vc-select",
-  component: VcSelect,
-};
-
-const Template: Story = (args) => ({
-  components: { VcSelect },
-  setup() {
-    return { args };
-  },
-  template: '<vc-select v-bind="args"></vc-select>',
-});
-
-export const Select = Template.bind({});
-Select.storyName = "vc-select";
-Select.args = {
-  options: [{ id: 1, title: "Option" }],
-};