@vc-shell/framework 1.0.45 → 1.0.48

package/ui/components/organisms/vc-table/vc-table.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-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,7 +13,9 @@
           activeFilterCount)
       "
     >
-      <div class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-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="tw-mr-3">
           <VcTableFilter :counter="activeFilterCount">
@@ -46,7 +50,7 @@
       </div>
     </slot>
 
-    <div class= "tw-flex tw-relative tw-overflow-hidden tw-grow">
+    <div class="tw-flex tw-relative tw-overflow-hidden tw-grow">
       <!-- Table loading overlay -->
       <VcLoading :active="loading"></VcLoading>
 
@@ -92,7 +96,7 @@
                 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= "tw-flex tw-justify-center tw-items-center">
+                <div class="tw-flex tw-justify-center tw-items-center">
                   <VcCheckbox
                     :modelValue="headerCheckbox"
                     @update:modelValue="processHeaderCheckbox"
@@ -111,7 +115,7 @@
                 @click="handleHeaderClick(item)"
               >
                 <div
-                  class= "tw-flex tw-items-center tw-flex-nowrap"
+                  class="tw-flex tw-items-center tw-flex-nowrap"
                   :class="tableAlignment[item.align]"
                 >
                   <div>
@@ -126,7 +130,7 @@
                     ></VcIcon>
                   </div>
                   <div
-                    class= "tw-flex tw-flex-col tw-ml-1 tw-invisible group-hover:tw-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>
@@ -158,7 +162,7 @@
               @mouseleave="closeActions"
             >
               <td v-if="multiselect" width="50">
-                <div class= "tw-flex tw-justify-center tw-items-center">
+                <div class="tw-flex tw-justify-center tw-items-center">
                   <VcCheckbox
                     :modelValue="checkboxes[item.id]"
                     @update:modelValue="processCheckbox(item.id, $event)"
@@ -188,7 +192,7 @@
                   <button
                     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)"
+                    :ref="(el: Element) => setActionToggleRefs(el, item.id)"
                     aria-describedby="tooltip"
                     :disabled="!(itemActions && itemActions.length)"
                   >
@@ -198,11 +202,11 @@
                     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)"
+                    :ref="(el: Element) => setTooltipRefs(el, item.id)"
                     role="tooltip"
                   >
                     <div
-                      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]"
+                      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"
@@ -308,129 +312,72 @@ import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
 import VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import { createPopper, Instance } from "@popperjs/core";
-import { IActionBuilderResult } from "@/core/types";
+import { IActionBuilderResult, ITableColumns } from "@/core/types";
+
+export interface Props {
+  columns: ITableColumns[];
+  items: { id: string }[];
+  itemActionBuilder?: (item: { id: string }) => IActionBuilderResult[];
+  sort?: string;
+  multiselect?: boolean;
+  expanded?: boolean;
+  totalLabel?: string;
+  totalCount?: number;
+  pages?: number;
+  currentPage?: number;
+  searchPlaceholder?: string;
+  searchValue?: string;
+  loading?: boolean;
+  empty?: StatusImage;
+  notfound?: StatusImage;
+  header?: boolean;
+  footer?: boolean;
+  activeFilterCount?: number;
+  selectedItemId?: string;
+  scrolling?: boolean;
+  onItemClick?: () => void;
+}
 
-interface ITableItemRef {
-  element: HTMLDivElement;
-  id: string;
+export interface StatusImage {
+  image?: string;
+  text: string;
+  action?: boolean;
+  clickHandler?: () => void;
 }
 
-const props = defineProps({
-  columns: {
-    type: Array,
-    default: () => [],
-  },
-
-  items: {
-    type: Array as PropType<{ id: string }[]>,
-    default: () => [],
-  },
-
-  filterItems: {
-    type: Array,
-    default: () => [],
-  },
-
-  itemActionBuilder: {
-    type: Function,
-    default: undefined,
-  },
-
-  sort: {
-    type: String,
-    default: undefined,
-  },
-
-  multiselect: {
-    type: Boolean,
-    default: false,
-  },
-
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-
-  totalLabel: {
-    type: String,
-    default: "Totals:",
-  },
-
-  totalCount: {
-    type: Number,
-    default: 0,
-  },
-
-  pages: {
-    type: Number,
-    default: 0,
-  },
-
-  currentPage: {
-    type: Number,
-    default: 0,
-  },
-
-  searchPlaceholder: {
-    type: String,
-    default: "Search...",
-  },
-
-  searchValue: {
-    type: String,
-    default: undefined,
-  },
-
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  empty: {
-    type: Object,
-    default: () => ({
-      text: "List is empty.",
-    }),
-  },
-
-  notfound: {
-    type: Object,
-    default: () => ({
-      text: "Nothing found.",
-    }),
-  },
-
-  header: {
-    type: Boolean,
-    default: true,
-  },
-
-  footer: {
-    type: Boolean,
-    default: true,
-  },
-
-  activeFilterCount: {
-    type: Number,
-    default: 0,
-  },
-
-  selectedItemId: {
-    type: String,
-    default: undefined,
-  },
-
-  scrolling: {
-    type: Boolean,
-    default: false,
-  },
-
-  onItemClick: {
-    type: Function,
-    default: undefined,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  columns: () => [],
+  items: () => [],
+  itemActionBuilder: undefined,
+  sort: undefined,
+  multiselect: false,
+  expanded: false,
+  totalLabel: "Totals:",
+  totalCount: 0,
+  pages: 0,
+  currentPage: 0,
+  searchPlaceholder: "Search...",
+  searchValue: undefined,
+  loading: false,
+  empty: () => ({
+    text: "List is empty.",
+  }),
+  notfound: () => ({
+    text: "Nothing found.",
+  }),
+  header: true,
+  footer: true,
+  activeFilterCount: 0,
+  selectedItemId: undefined,
+  scrolling: false,
+  onItemClick: undefined,
 });
 
+interface ITableItemRef {
+  element: Element;
+  id: string;
+}
+
 const emit = defineEmits([
   "paginationClick",
   "selectionChanged",
@@ -486,7 +433,7 @@ watch(
   }
 );
 
-function setTooltipRefs(el: HTMLDivElement, id: string) {
+function setTooltipRefs(el: Element, id: string) {
   if (el) {
     const isExists = tooltipRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -495,7 +442,7 @@ function setTooltipRefs(el: HTMLDivElement, id: string) {
   }
 }
 
-function setActionToggleRefs(el: HTMLDivElement, id: string) {
+function setActionToggleRefs(el: Element, id: string) {
   if (el) {
     const isExists = actionToggleRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -525,18 +472,22 @@ function showActions(item: { id: string }, index: string) {
 
   if (toggleRef && tooltipRef) {
     nextTick(() => {
-      tooltip.value = createPopper(toggleRef.element, tooltipRef.element, {
-        placement: "bottom",
-        onFirstUpdate: () => tooltip.value?.update(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [-15, 15],
+      tooltip.value = createPopper(
+        toggleRef.element,
+        tooltipRef.element as HTMLElement,
+        {
+          placement: "bottom",
+          onFirstUpdate: () => tooltip.value?.update(),
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [-15, 15],
+              },
             },
-          },
-        ],
-      });
+          ],
+        }
+      );
     });
   }
 }

package/ui/types/index.ts

@@ -1,38 +1,26 @@
 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";
+} from "../components/molecules/vc-input-currency/vc-input-currency-model";
 
 declare module "@vue/runtime-core" {
   interface GlobalComponents {
-    VcInput: GlobalComponentConstructor<
-      VcInputProps,
-      VcInputSlots,
-      VcInputEmits
-    >;
+    VcInput: GlobalComponentConstructor<VcInputProps, VcInputSlots>;
     VcInputCurrency: GlobalComponentConstructor<
       VcInputCurrencyProps,
-      VcInputCurrencySlots,
-      VcInputCurrencyEmits
-    >;
-    VcSelect: GlobalComponentConstructor<
-      VcSelectProps,
-      VcSelectSlots,
-      VcSelectEmits
+      VcInputCurrencySlots
     >;
+    VcSelect: GlobalComponentConstructor<VcSelectProps, VcSelectSlots>;
   }
 }
 
-export {};
+export { };

package/ui/types/ts-helpers.ts

@@ -3,7 +3,6 @@ import {
   ComponentOptions,
   ComponentPublicInstance,
   ComputedOptions,
-  EmitsOptions,
   MethodOptions,
   VNodeProps,
 } from "vue";
@@ -16,31 +15,18 @@ export type ComponentConstructor<
     RawBindings,
     D,
     C,
-    M,
-    E
+    M
   > = 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
->;
+> = { new (): Component } & ComponentOptions<Props, RawBindings, D, C, M>;
 
-
-export type GlobalComponentConstructor<Props = {}, Slots = {}, Emits = {}> = {
-  new (): {
-    $props: PublicProps & Props;
-    $slots: Slots;
-    $emit: EmitsOptions & Emits;
-  };
+export type GlobalComponentConstructor<Props = {}, Slots = {}> = {
+    new (): {
+      $props: PublicProps & Props;
+      $slots: Slots;
+    }
 };