@vc-shell/framework 1.1.84 → 1.1.86

package/ui/components/molecules/vc-input/vc-input.vue

@@ -241,14 +241,13 @@
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
 import { VcLabel, VcIcon, VcHint } from "./../../";
-import VueDatePicker, { VueDatePickerProps } from "@vuepic/vue-datepicker";
+import VueDatePicker, { VueDatePickerProps, ModelValue } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 
-export interface Props {
-  /**
-   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
-   */
-  modelValue?: string | number | Date | null | undefined;
+/**
+ * Base props for VcInput
+ */
+interface VcInputBaseProps {
   /**
    * Input label text
    */
@@ -257,15 +256,6 @@ export interface Props {
    * Input placeholder text
    */
   placeholder?: string;
-  /**
-   * Input type
-   * Default value: text
-   */
-  type?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
-  /**
-   * The step attribute is a number that specifies the granularity that the value must adhere to.
-   */
-  step?: string;
   /**
    * Input description (hint) text below input component
    */
@@ -332,6 +322,56 @@ export interface Props {
    * Input current language
    */
   currentLanguage?: string;
+  /**
+   * The step attribute is a number that specifies the granularity that the value must adhere to.
+   */
+  step?: string;
+  size?: "default" | "small";
+}
+
+/**
+ * Props for string-based inputs
+ */
+interface VcInputStringProps extends VcInputBaseProps {
+  /**
+   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
+   */
+  modelValue?: string | null;
+  /**
+   * Input type
+   * Default value: text
+   */
+  type?: "text" | "password" | "email" | "tel" | "url" | "time";
+  datePickerOptions?: never;
+}
+
+/**
+ * Props for number-based inputs
+ */
+interface VcInputNumberProps extends VcInputBaseProps {
+  /**
+   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
+   */
+  modelValue?: number | null;
+  /**
+   * Input type
+   */
+  type: "number" | "integer";
+  datePickerOptions?: never;
+}
+
+/**
+ * Props for date-based inputs
+ */
+interface VcInputDateProps extends VcInputBaseProps {
+  /**
+   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
+   */
+  modelValue?: ModelValue;
+  /**
+   * Input type
+   */
+  type: "date" | "datetime-local";
   /**
    * VueDatePicker options
    *
@@ -340,14 +380,19 @@ export interface Props {
    * @see https://vue3datepicker.com/
    */
   datePickerOptions?: VueDatePickerProps;
-  size?: "default" | "small";
 }
 
+export type Props = VcInputStringProps | VcInputNumberProps | VcInputDateProps;
+
 export interface Emits {
   /**
    * Emitted when the component needs to change the model; Is also used by v-model
+   * Type of value depends on input type:
+   * - string inputs: string | null
+   * - number inputs: number | null
+   * - date inputs: ModelValue
    */
-  (event: "update:modelValue", value: string | number | Date | null | undefined): void;
+  (event: "update:modelValue", value: string | number | ModelValue | null | undefined): void;
   (event: "blur", value: Event): void;
   (event: "focus"): void;
 }
@@ -377,14 +422,14 @@ defineSlots<{
      */
     focused: boolean | undefined;
     /**
-     * Field's value
+     * Field's value - type depends on input type
      */
-    modelValue: string | number | Date | null;
+    modelValue: string | number | ModelValue | null;
     /**
      * Function that emits an @input event in the context of the field
-     * @param value Value to be emitted
+     * @param value Value to be emitted - type depends on input type
      */
-    emitValue: (value: string | number | Date | null) => void;
+    emitValue: (value: string | number | ModelValue | null) => void;
     /**
      * Field placeholder text
      */
@@ -522,11 +567,11 @@ function onKeyDown(e: KeyboardEvent) {
 }
 
 // Handle input event and emit changes
-function onInput(value: string | number | Date | null) {
+function onInput(value: string | number | ModelValue | null) {
   emitValue(value);
 }
 
-function emitValue(val: string | number | Date | null) {
+function emitValue(val: string | number | ModelValue | null) {
   emitValueFn = () => {
     if (mutatedModel.value !== val) {
       let value;

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

@@ -175,7 +175,7 @@ const slots = defineSlots<{
    * Use `useWidgets` composable instead
    * @example
    * // Register widget in blade:
-   * const blade = inject(BladeInstance);
+   * const blade = useBlade();
    * const widgetService = useWidgets();
    * widgetService.registerWidget({
    *   id: "widget-id",

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;