@vc-shell/framework 1.1.84 → 1.1.85

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-body/vc-table-body.vue

@@ -73,7 +73,7 @@
 import VcTableRow from "../vc-table-row/vc-table-row.vue";
 import VcTableEmpty from "../../../vc-table-empty/vc-table-empty.vue";
 import type { IActionBuilderResult } from "../../../../../../../../core/types";
-import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../../../types";
+import type { TableSlots, TableItem, TableColPartial, TableEmptyAction } from "../../../../types";
 import { MaybeRef, useSlots } from "vue";
 
 defineProps<{
@@ -93,8 +93,8 @@ defineProps<{
   columnsInit: boolean;
   searchValue?: string;
   activeFilterCount?: number;
-  notfound?: StatusImage;
-  empty?: StatusImage;
+  notfound?: TableEmptyAction;
+  empty?: TableEmptyAction;
   isSelected: (item: T) => boolean;
 }>();
 

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/vc-table-desktop-view.vue

@@ -93,7 +93,7 @@ import VcTableSelectAllHeader from "./_internal/vc-table-select-all-header/vc-ta
 import VcTableBody from "./_internal/vc-table-body/vc-table-body.vue";
 import type { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { useTableRowReorder } from "../../composables/useTableRowReorder";
-import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../types";
+import type { TableSlots, TableItem, TableColPartial, TableEmptyAction } from "../../types";
 
 const props = defineProps<{
   items: T[];
@@ -123,8 +123,8 @@ const props = defineProps<{
   hasClickListener?: boolean;
   searchValue?: string;
   activeFilterCount?: number;
-  notfound?: StatusImage;
-  empty?: StatusImage;
+  notfound?: TableEmptyAction;
+  empty?: TableEmptyAction;
   isSelected: (item: T) => boolean;
   rowCheckbox: (item: T) => void;
   internalColumns: TableColPartial[];

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

@@ -6,18 +6,17 @@
       name="notfound"
     >
       <div class="vc-table-empty">
-        <img
-          v-if="notfound?.image"
-          :src="notfound.image"
-          alt="Not Found"
-          class="vc-table-empty__image"
+        <VcIcon
+          v-if="notfound?.icon"
+          :icon="notfound.icon"
+          size="xxxl"
+          class="vc-table-empty__icon"
         />
         <div class="vc-table-empty__text">
           {{ notfound?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_FOUND") }}
         </div>
         <VcButton
           v-if="notfound?.action"
-          class="vc-table-empty__button"
           @click="notfound?.clickHandler"
         >
           {{ notfound.action }}
@@ -29,18 +28,17 @@
       name="empty"
     >
       <div class="vc-table-empty vc-table-empty--default">
-        <img
-          v-if="empty?.image"
-          :src="empty.image"
-          alt="Empty Table"
-          class="vc-table-empty__image"
-        />
+        <VcIcon
+          v-if="empty?.icon"
+          :icon="empty.icon"
+          size="xxxl"
+          class="vc-table-empty__icon"
+        />  
         <div class="vc-table-empty__text">
           {{ empty?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY") }}
         </div>
         <VcButton
           v-if="empty?.action"
-          class="vc-table-empty__button"
           @click="empty?.clickHandler"
         >
           {{ empty.action }}
@@ -53,24 +51,15 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref } from "vue";
+import { TableEmptyAction } from "../../types";
 
 export interface Props {
   items: any[];
   columnsInit: boolean;
   searchValue?: string;
   activeFilterCount?: number;
-  notfound?: {
-    image?: string;
-    text: string | Ref<string>;
-    action?: string;
-    clickHandler?: () => void;
-  };
-  empty?: {
-    image?: string;
-    text: string | Ref<string>;
-    action?: string;
-    clickHandler?: () => void;
-  };
+  notfound?: TableEmptyAction;
+  empty?: TableEmptyAction;
 }
 
 defineProps<Props>();
@@ -81,22 +70,19 @@ defineSlots<{
 </script>
 
 <style lang="scss">
+:root {
+  --table-empty-icon-color: var(--secondary-500);
+}
+
 .vc-table-empty {
   @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
 
-  &__image {
-    @apply tw-w-auto tw-h-auto;
+  &__icon {
+    @apply tw-text-[color:var(--table-empty-icon-color)];
   }
 
   &__text {
-    @apply tw-m-4;
-    @apply tw-text-center;
-    @apply tw-text-xl tw-font-medium;
-  }
-
-  &__button {
-    @apply tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-text-sm tw-cursor-pointer;
-    transition: background-color 0.3s ease;
+    @apply tw-m-4 tw-text-xl tw-font-medium;
   }
 }
 </style>

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

@@ -53,6 +53,7 @@
                       :cell="column"
                       :item="item"
                       :index="i"
+                      :editing="editing"
                       @update="$emit('onEditComplete', { event: $event, index: i })"
                       @blur="$emit('onCellBlur', $event)"
                     />
@@ -81,6 +82,7 @@
                       :cell="column"
                       :item="item"
                       :index="i"
+                      :editing="editing"
                       @update="$emit('onEditComplete', { event: $event, index: i })"
                       @blur="$emit('onCellBlur', $event)"
                     />
@@ -116,6 +118,7 @@
                           :cell="column"
                           :item="item"
                           :index="i"
+                          :editing="editing"
                           @update="$emit('onEditComplete', { event: $event, index: i })"
                           @blur="$emit('onCellBlur', $event)"
                         />
@@ -148,6 +151,7 @@
                           :cell="column"
                           :item="item"
                           :index="i"
+                          :editing="editing"
                           @update="$emit('onEditComplete', { event: $event, index: i })"
                           @blur="$emit('onCellBlur', $event)"
                         />
@@ -189,7 +193,7 @@ import { computed } from "vue";
 import VcTableCell from "../vc-table-cell/vc-table-cell.vue";
 import VcTableEmpty from "../vc-table-empty/vc-table-empty.vue";
 import VcTableMobileItem from "../vc-table-mobile-item/vc-table-mobile-item.vue";
-import type { TableItem, StatusImage } from "../../types";
+import type { TableItem, TableEmptyAction } from "../../types";
 import { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { provideTableSwipe } from "../../composables/useTableSwipe";
 
@@ -206,8 +210,8 @@ const props = defineProps<{
   columnsInit: boolean;
   searchValue?: string;
   activeFilterCount?: number;
-  notfound?: StatusImage;
-  empty?: StatusImage;
+  notfound?: TableEmptyAction;
+  empty?: TableEmptyAction;
 }>();
 
 const emit = defineEmits<{

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Ref, VNode } from "vue";
+import type { ComputedRef, Ref, VNode } from "vue";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 
 export interface TableSlots<T> {
@@ -24,9 +24,9 @@ export type TableColPartial = Partial<
   }
 >;
 
-export interface StatusImage {
-  image?: string;
-  text: string | Ref<string>;
-  action?: string;
+export interface TableEmptyAction {
+  icon?: string;
+  text: string | Ref<string> | ComputedRef<string>;
+  action?: string | Ref<string> | ComputedRef<string>;
   clickHandler?: () => void;
 }

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

@@ -196,7 +196,7 @@ import VcTableDesktopView from "./_internal/vc-table-desktop-view/vc-table-deskt
 import VcTableHeader from "./_internal/vc-table-header/vc-table-header.vue";
 import VcTableSelectAll from "./_internal/vc-table-select-all/vc-table-select-all.vue";
 import VcTableFooter from "./_internal/vc-table-footer/vc-table-footer.vue";
-import type { TableSlots, TableItem, TableColPartial, StatusImage } from "./types";
+import type { TableSlots, TableItem, TableColPartial, TableEmptyAction } from "./types";
 
 defineSlots<TableSlots<T>>();
 
@@ -216,8 +216,8 @@ const props = withDefaults(
     searchPlaceholder?: string;
     searchValue?: string;
     loading?: MaybeRef<boolean>;
-    empty?: StatusImage;
-    notfound?: StatusImage;
+    empty?: TableEmptyAction;
+    notfound?: TableEmptyAction;
     header?: boolean;
     footer?: boolean;
     activeFilterCount?: number;