@vc-shell/framework 1.0.46 → 1.0.48

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

@@ -24,14 +24,16 @@
 </template>
 
 <script lang="ts" setup>
+import { IBladeToolbar } from "@/core/types";
 import { ref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
-  },
+export interface Props {
+  items: IBladeToolbar[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
 });
 
 const isExpanded = ref(true);

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -122,14 +122,13 @@
 
   <Field
     v-else-if="property.valueType === 'Number' && property.multivalue"
-    v-slot="{ errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :modelValue="property.values"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
-      :error-message="errorMessage"
       :label="handleDisplayName"
       :modelValue="property.values"
       @update:modelValue="
@@ -142,7 +141,13 @@
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
-    ></VcMultivalue>
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :options="items"
+      option-value="id"
+      :option-label="handleDisplayProperty"
+      multiple
+    ></VcSelect>
   </Field>
 
   <Field

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -57,13 +57,10 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { VcPopup } from "@/ui/components";
+import { IImage } from "@/core/types";
 
 export interface Props {
-  images?: {
-    title: string;
-    name: string;
-    url: string;
-  }[];
+  images?: IImage[];
   index: number;
 }
 

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

@@ -192,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)"
                   >
@@ -202,7 +202,7 @@
                     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
@@ -312,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",
@@ -490,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) {
@@ -499,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) {
@@ -529,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;
+    }
 };