@vc-shell/framework 1.0.53 → 1.0.54

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

@@ -4,9 +4,7 @@
     <template v-if="value > 0">
       <span>{{ Math.trunc(Number(value)) }}</span
       ><span class="tw-text-[#a5a5a5] tw-text-xs"
-        >.{{
-          `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2)
-        }}</span
+        >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
       >
     </template>
     <template v-else>
@@ -15,7 +13,10 @@
   </template>
 
   <!-- Date ago cell -->
-  <span v-else-if="cell.type === 'date-ago'" class="tw-text-[#a5a5a5]">
+  <span
+    v-else-if="cell.type === 'date-ago'"
+    class="tw-text-[#a5a5a5]"
+  >
     <template v-if="value">
       {{ moment(value).fromNow() }}
     </template>
@@ -24,9 +25,7 @@
 
   <!-- Date exact cell -->
   <span
-    v-else-if="
-      cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'
-    "
+    v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
     class="tw-text-[#a5a5a5]"
   >
     <template v-if="value">
@@ -34,15 +33,9 @@
         {{ moment(value).locale(locale).format(cell.format) }}
       </template>
       <template v-else>
-        <template v-if="cell.type === 'date'">{{
-          value.toLocaleDateString()
-        }}</template>
-        <template v-if="cell.type === 'time'">{{
-          value.toLocaleTimeString()
-        }}</template>
-        <template v-if="cell.type === 'date-time'">{{
-          value.toLocaleString()
-        }}</template>
+        <template v-if="cell.type === 'date'">{{ value.toLocaleDateString() }}</template>
+        <template v-if="cell.type === 'time'">{{ value.toLocaleTimeString() }}</template>
+        <template v-if="cell.type === 'date-time'">{{ value.toLocaleString() }}</template>
       </template>
     </template>
     <template v-else>N/A</template>
@@ -73,7 +66,10 @@
   </div>
 
   <!-- Number cell -->
-  <span v-else-if="cell.type === 'number'" class="tw-text-right">
+  <span
+    v-else-if="cell.type === 'number'"
+    class="tw-text-right"
+  >
     {{ Number(value).toFixed(0) }}
   </span>
 
@@ -106,13 +102,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const locale = window.navigator.language;
 const value = computed(() => {
-  return (props.cell.field || props.cell.id)
-    .split(".")
-    .reduce((p: { [x: string]: unknown }, c: string) => {
-      if (p && Array.isArray(p) && p.length) {
-        return (p && p[0][c]) || null;
-      }
-      return (p && p[c]) || null;
-    }, props.item);
+  return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
+    if (p && Array.isArray(p) && p.length) {
+      return (p && p[0][c]) || null;
+    }
+    return (p && p[c]) || null;
+  }, props.item);
 });
 </script>

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

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

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

@@ -6,8 +6,14 @@
       @click="openPanel($isMobile.value)"
       ref="filterToggle"
     >
-      <VcIcon icon="fas fa-filter" size="m" />
-      <span v-if="title" class="tw-ml-[10px] tw-font-medium">
+      <VcIcon
+        icon="fas fa-filter"
+        size="m"
+      />
+      <span
+        v-if="title"
+        class="tw-ml-[10px] tw-font-medium"
+      >
         {{ title }}
       </span>
       <div

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-flex-nowrap tw-items-stretch tw-transition  tw-duration-200"
+    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')"
@@ -11,11 +11,11 @@
   >
     <!-- Left swipe actions-->
     <div
-      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-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= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-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)"
       >
@@ -26,22 +26,20 @@
       </div>
     </div>
 
-    <div class= "tw-flex-shrink-0 tw-w-full">
+    <div class="tw-flex-shrink-0 tw-w-full">
       <!-- Mobile item slot content -->
       <slot></slot>
     </div>
 
     <!-- Item actions -->
     <div
-      class= "tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-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= "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}`,
-        ]"
+        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}`]"
         @click.stop="rightSwipeActions[0].clickHandler(item)"
       >
         <VcIcon :icon="rightSwipeActions[0].icon"></VcIcon>
@@ -53,10 +51,8 @@
       <!-- Second available action -->
       <div
         v-if="rightSwipeActions.length === 2"
-        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}`,
-        ]"
+        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>
@@ -68,7 +64,7 @@
       <!-- Other available actions -->
       <template v-if="rightSwipeActions.length > 2">
         <div
-          class= "tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-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>
@@ -76,17 +72,18 @@
         </div>
 
         <!-- Actions popup -->
-        <teleport to="body" v-if="isActionsPopupVisible">
+        <teleport
+          to="body"
+          v-if="isActionsPopupVisible"
+        >
           <div
             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="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= "tw-flex tw-w-full tw-items-center">
-                <span
-                  class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]"
-                >
+              <div class="tw-flex tw-w-full tw-items-center">
+                <span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
                   {{ $t("All actions") }}
                 </span>
                 <VcIcon
@@ -97,14 +94,17 @@
                 ></VcIcon>
               </div>
 
-              <div class= "tw-flex tw-flex-wrap tw-my-5 tw-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= "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]"
+                  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>
+                  <VcIcon
+                    :icon="itemAction.icon"
+                    size="xl"
+                  ></VcIcon>
                   <div class="tw-text-base tw-mt-2 tw-text-center">
                     {{ itemAction.title }}
                   </div>
@@ -165,23 +165,17 @@ const rightSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter(
-      (actions: IActionBuilderResult) => !actions.leftActions
-    )
+    itemActions.value.filter((actions: IActionBuilderResult) => !actions.leftActions)
 );
 const leftSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter(
-      (actions: IActionBuilderResult) => actions.leftActions
-    )
+    itemActions.value.filter((actions: IActionBuilderResult) => actions.leftActions)
 );
 
 function handleOffset() {
-  if (
-    itemActions.value.some((action: IActionBuilderResult) => action.leftActions)
-  ) {
+  if (itemActions.value.some((action: IActionBuilderResult) => action.leftActions)) {
     offsetX.value = -maxWidth;
     startOffsetX.value = offsetX.value;
   } else {
@@ -233,10 +227,7 @@ function touchEnd(): void {
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
   } else {
-    offsetX.value =
-      absoluteOffsetX <= maxWidth * 2 - threshold * 2
-        ? -maxWidth
-        : -maxWidth * 2;
+    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
   }
 
   isMoving.value = false;
@@ -247,10 +238,7 @@ function touchCancel(): void {
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
   } else {
-    offsetX.value =
-      absoluteOffsetX <= maxWidth * 2 - threshold * 2
-        ? -maxWidth
-        : -maxWidth * 2;
+    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
   }
 
   isMoving.value = false;

package/ui/components/organisms/vc-table/index.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcTableProps } from "./vc-table-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcTableEmits, VcTableProps } from "./vc-table-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Table from "./vc-table.vue";
-export const VcTable: ComponentConstructor<
-  ComponentPublicInstance<VcTableProps>
-> = Table;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcTable: ComponentConstructor<ComponentPublicInstance<VcTableProps, any, any, any, any, VcTableEmits>> =
+  Table;

package/ui/components/organisms/vc-table/vc-table-model.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isNumber, isString, isObject } from "./../../../utils";
 
 export interface StatusImage {
   image?: string;
@@ -8,48 +11,105 @@ export interface StatusImage {
   clickHandler?: () => void;
 }
 
-export interface VcTableProps {
-  columns?: ITableColumns[];
-  items?: { id?: string }[] | any[];
-  itemActionBuilder?: (item: {
-    id?: string;
-  }) => IActionBuilderResult[] | undefined;
-  sort?: string | undefined;
-  multiselect?: boolean | undefined;
-  expanded?: boolean | undefined;
-  totalLabel?: string | undefined;
-  totalCount?: number | undefined;
-  pages?: number | undefined;
-  currentPage?: number | undefined;
-  searchPlaceholder?: string | undefined;
-  searchValue?: string | undefined;
-  loading?: boolean | undefined;
-  empty?: StatusImage | undefined;
-  notfound?: StatusImage | undefined;
-  header?: boolean | undefined;
-  footer?: boolean | undefined;
-  activeFilterCount?: number | undefined;
-  selectedItemId?: string | undefined;
-  scrolling?: boolean | undefined;
-  onPaginationClick?: (page: number) => void;
-  onSelectionChanged?: (values: Record<string, boolean>) => void;
-  "onSearch:change"?: (value: string) => void;
-  onHeaderClick?: (value: Record<string, unknown>) => void;
-  onItemClick?: (item: { id?: string }) => void;
-  "onScroll:ptr"?: () => void;
-}
+export const tableProps = {
+  columns: { type: Array as PropType<ITableColumns[]>, default: () => [] },
+  items: { type: Array as PropType<{ id?: string }[] | any[]>, default: () => [] },
+  itemActionBuilder: {
+    type: Function as PropType<(item: { id?: string }) => IActionBuilderResult[]>,
+    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 as PropType<StatusImage>,
+    default: () => ({
+      text: "List is empty.",
+    }),
+  },
+  notfound: {
+    type: Object as PropType<StatusImage>,
+    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,
+  },
+};
+
+export const tableEmits = {
+  paginationClick: (page: number) => isNumber(page),
+  selectionChanged: (values: Record<string, boolean>) => isObject(values),
+  "search:change": (value: string) => isString(value),
+  headerClick: (value: Record<string, unknown>) => isObject(value),
+  itemClick: (item: { id?: string }) => isObject(item),
+  "scroll:ptr": () => true,
+};
+
+export type VcTableProps = ExtractTypes<typeof tableProps>;
+export type VcTableEmits = typeof tableEmits;
 
 export interface VcTableSlots {
   header: () => VNode[];
   filters: (args: { closePanel: () => void }) => VNode[];
-  "mobile-item": (args: {
-    item: { [x: string]: any; id: string };
-  }) => VNode[];
+  "mobile-item": (args: { item: { [x: string]: any; id: string } }) => VNode[];
   [key: `header_${string}`]: () => VNode[];
-  [key: `item_${string}`]: (args: {
-    item?: { [x: string]: any; id: string };
-    cell?: ITableColumns;
-  }) => VNode[];
+  [key: `item_${string}`]: (args: { item?: { [x: string]: any; id: string }; cell?: ITableColumns }) => VNode[];
   notfound: () => VNode[];
   empty: () => VNode[];
   footer: () => VNode[];