@vc-shell/framework 1.0.116 → 1.0.117

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -122,6 +122,8 @@ import {
   unref,
   watch,
   UnwrapRef,
+  ShallowRef,
+  ConcreteComponent,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema } from "../types";
@@ -429,7 +431,7 @@ async function resetSearch() {
   });
 }
 
-function templateOverrideComponents(): Record<string, VNode> {
+function templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
   return {
     ...table.value.columns?.reduce((acc, curr) => {
       if ("customTemplate" in curr) {
@@ -446,17 +448,20 @@ function templateOverrideComponents(): Record<string, VNode> {
         }
       }
       return acc;
-    }, {}),
+    }, {} as Record<string, ShallowRef<ConcreteComponent>>),
   };
 }
 
-function resolveTemplateComponent(name: string) {
+function resolveTemplateComponent(name: keyof ListContentSchema) {
   if (!tableData.value) return;
-  const componentName = tableData.value[name]?.component;
-  if (componentName) {
-    const component = resolveComponent(componentName);
+  const value = tableData.value[name];
+  if (value && typeof value === "object" && "component" in value) {
+    const componentName = value.component;
+    if (componentName) {
+      const component = resolveComponent(componentName);
 
-    if (component && typeof component !== "string") return shallowRef(component);
+      if (component && typeof component !== "string") return shallowRef(component);
+    }
   }
 }
 

package/shared/modules/dynamic/types/models.ts

@@ -54,7 +54,7 @@ export type ControlTypeCtr = Extract<ControlType, ISelectField | IInputField | I
 
 export interface IControlBaseProps {
   key?: string | number | symbol;
-  rules?: string | Record<string, unknown>;
+  rules?: Record<string, unknown>;
   label?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -112,7 +112,8 @@ export type ICheckbox = {
 export type IDynamicProperties = {
   props:
     | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
-    | IControlBaseProps;
+    | (ComponentProps<typeof VcDynamicProperty> &
+        Omit<IControlBaseProps, keyof ComponentProps<typeof VcDynamicProperty> | "onUpdate:modelValue" | "rules">);
   options: IControlBaseOptions;
 } & FieldOpts<typeof VcDynamicProperty>;
 
@@ -122,7 +123,7 @@ export type IEditorField = {
 } & FieldOpts<typeof VcEditor>;
 
 export type IGallery = {
-  props: ComponentProps<typeof VcGallery> | IControlBaseProps;
+  props: (ComponentProps<typeof VcGallery> & { rules: Record<string, unknown> }) | IControlBaseProps;
   options: IControlBaseOptions;
 } & FieldOpts<typeof VcGallery>;
 

package/shared/pages/LoginPage/components/login/Login.vue

@@ -185,11 +185,13 @@ import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
 
+type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
+
 export interface Props {
   logo: string;
   background: string;
   title: string;
-  composable?: () => { forgotPassword: (args: { loginOrEmail: string }) => Promise<void> };
+  composable?: () => { forgotPassword: ForgotPasswordFunc };
 }
 
 const props = defineProps<Props>();
@@ -210,7 +212,7 @@ const isDirty = useIsFormDirty();
 const customizationLoading = ref(false);
 const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
-let forgotPassword;
+let forgotPassword: ForgotPasswordFunc;
 
 if (props.composable && typeof props.composable === "function") {
   useLogin = props.composable;

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

@@ -329,7 +329,7 @@ defineSlots<{
   hint: (props: any) => any;
 }>();
 
-let emitTimer;
+let emitTimer: NodeJS.Timeout;
 let emitValueFn;
 const temp = ref();
 const inputRef = ref();

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

@@ -41,7 +41,7 @@
           class="vc-multivalue__field-value"
         >
           <span class="tw-truncate">{{
-            type === "number" ? Number(item[props.emitLabel]).toFixed(3) : item[props.emitLabel]
+            type === "number" ? Number(item[props.emitLabel as keyof T]).toFixed(3) : item[props.emitLabel as keyof T]
           }}</span>
           <VcIcon
             v-if="!disabled"
@@ -87,7 +87,7 @@
                   <slot
                     name="item"
                     :item="item"
-                    >{{ item[optionLabel] }}</slot
+                    >{{ item[optionLabel as keyof T] }}</slot
                   >
                 </div>
               </VcContainer>
@@ -118,10 +118,10 @@
   </div>
 </template>
 
-<script lang="ts" setup generic="T extends {id?: string; alias?: string, languageCode?: string, value?:string}">
+<script lang="ts" setup generic="T extends {id?: string; alias?: string, languageCode?: string, value?: string}">
 import { unref, nextTick, ref, computed } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate, MiddlewareState } from "@floating-ui/vue";
 import { generateId } from "../../../../core/utilities";
 
 export interface Props<T> {
@@ -203,7 +203,7 @@ const dropdownStyle = computed(() => {
 
 const slicedDictionary = computed(() => {
   return props.options?.filter((x) => {
-    return !props.modelValue?.find((item) => item[props.emitValue] === x[props.optionValue]);
+    return !props.modelValue?.find((item) => item[props.emitValue as keyof T] === x[props.optionValue as keyof T]);
   });
 });
 
@@ -220,8 +220,8 @@ function onInput(e: KeyboardEvent) {
 function onItemSelect(item: T) {
   emit("update:model-value", [
     ...props.modelValue,
-    { [props.emitValue]: item[props.optionValue], [props.emitLabel]: item[props.optionLabel] } as T,
-  ]);
+    { [props.emitValue]: item[props.optionValue as keyof T], [props.emitLabel]: item[props.optionLabel as keyof T] },
+  ] as T[]);
   emit("close");
   closeDropdown();
 }
@@ -236,7 +236,7 @@ function onDelete(i: number) {
 function sameWidthChangeBorders() {
   return {
     name: "sameWidthChangeBorders",
-    fn: ({ rects, placement, x, y }) => {
+    fn: ({ rects, placement, x, y }: MiddlewareState) => {
       let borderTop;
       let borderBottom;
       let borderRadius;

package/ui/components/molecules/vc-select/index.ts

@@ -1,3 +1 @@
-import _Select from "./vc-select.vue";
-
-export const VcSelect = _Select;
+export { default as VcSelect } from "./vc-select.vue";

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

@@ -262,12 +262,12 @@ import { ref, computed, watch, nextTick, Ref, toRefs, MaybeRef, unref } from "vu
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
-import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate, MiddlewareState } from "@floating-ui/vue";
 import { VcLabel, VcContainer, VcHint, VcIcon } from "./../../";
 import { useI18n } from "vue-i18n";
 
 export type OptionProp<T> = ((option: T) => string) | string | undefined;
-
+type MaybeArray<T> = T | T[];
 type FloatingInstanceType = UseFloatingReturn & {
   middlewareData: {
     sameWidthChangeBorders: {
@@ -360,6 +360,7 @@ defineSlots<{
      */
     toggleOption: (opt: any) => void;
   }) => any;
+  "no-options": (props: any) => any;
 }>();
 
 const props = withDefaults(
@@ -474,7 +475,7 @@ const props = withDefaults(
     name: "Field",
     emitValue: true,
     mapOptions: true,
-    options: () => [],
+    options: (): T[] => [],
   }
 );
 
@@ -483,7 +484,9 @@ const emit = defineEmits<{
    * Emitted when the component needs to change the model; Is also used by v-model
    */
 
-  "update:modelValue": [inputValue: Option | string | (Option | string)[]];
+  "update:modelValue": [
+    inputValue: MaybeArray<string | Option | (T & P["results"][number] & object)[keyof T | keyof P["results"][number]]>
+  ];
   /**
    * Emitted when user wants to filter a value
    */
@@ -518,7 +521,7 @@ const optionsTemp = ref<Option[]>([]) as Ref<Option[]>;
 const totalItems = ref();
 
 let emitValueFn;
-let emitTimer;
+let emitTimer: NodeJS.Timeout;
 let innerValueCache: Option[];
 
 useIntersectionObserver(
@@ -552,7 +555,7 @@ watch(
         } else if (props.modelValue && typeof props.modelValue === "object") {
           return optionsList.value.includes(props.modelValue);
         } else {
-          return x[props.optionLabel as string] === props.modelValue;
+          return x[props.optionLabel as keyof Option] === props.modelValue;
         }
       });
 
@@ -565,9 +568,9 @@ watch(
             undefined,
             Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
           );
-          defaultValue.value = data.results?.filter((x) => x[props.optionValue as string] === props.modelValue);
+          defaultValue.value = data.results?.filter((x) => x[props.optionValue as keyof T] === props.modelValue);
         } else if (props.options && Array.isArray(props.options)) {
-          defaultValue.value = props.options.filter((x) => x[props.optionValue as string] === props.modelValue);
+          defaultValue.value = props.options.filter((x) => x[props.optionValue as keyof T] === props.modelValue);
         }
       }
     }
@@ -702,16 +705,16 @@ const dropdownStyle = computed(() => {
   };
 });
 
-function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Option>): (opt: Option) => string {
+function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Option>) {
   const val = propValue !== undefined ? propValue : defaultVal;
 
   return typeof val === "function"
     ? val
-    : (opt: Option) => (opt !== null && typeof opt === "object" && val in opt ? opt[val] : opt);
+    : (opt: Option) => (opt !== null && typeof opt === "object" && val in opt ? opt[val as keyof Option] : opt);
 }
 
 function getOption(value: Option, valueCache: Option[]) {
-  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value);
+  const fn = (opt: Option) => _.isEqual(getOptionValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -775,7 +778,7 @@ async function toggleDropdown() {
 function sameWidthChangeBorders() {
   return {
     name: "sameWidthChangeBorders",
-    fn: ({ rects, placement, x, y }) => {
+    fn: ({ rects, placement, x, y }: MiddlewareState) => {
       let borderTop;
       let borderBottom;
       let borderRadius;
@@ -853,8 +856,8 @@ async function onSearch(value: string) {
       listLoading.value = false;
     }
   } else {
-    optionsTemp.value = optionsList.value.filter((x) => {
-      return x[props.optionLabel as string].toLowerCase().includes(filterString.value.toLowerCase());
+    optionsTemp.value = optionsList.value.filter((x: Option) => {
+      return (x[props.optionLabel as keyof Option] as string).toLowerCase().includes(filterString.value.toLowerCase());
     });
   }
 }

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

@@ -222,9 +222,9 @@ const props = withDefaults(
       languageCode?: string;
     }[];
     rules?: {
-      min: number;
-      max: number;
-      regex: string;
+      min?: number;
+      max?: number;
+      regex?: string;
     };
     disabled?: boolean;
     placeholder?: string;
@@ -305,7 +305,7 @@ onMounted(async () => {
   await getOptions();
 });
 
-async function getOptions(keyword = null) {
+async function getOptions(keyword: string = null) {
   if (props.optionsGetter) {
     try {
       loading.value = true;

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

@@ -10,7 +10,7 @@
   >
     <VcImage
       aspect="1x1"
-      :src="image['url']"
+      :src="image.url"
       background="contain"
     ></VcImage>
     <div class="vc-gallery-item__overlay">
@@ -23,9 +23,9 @@
         ></VcIcon>
         <div
           class="tw-truncate"
-          :title="image['name']"
+          :title="image.name"
         >
-          {{ image["name"] }}
+          {{ image.name }}
         </div>
       </div>
       <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
@@ -89,6 +89,7 @@ export interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
+  image: () => ({} as IImage),
   readonly: false,
   actions: () => ({
     name: undefined,

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

@@ -40,35 +40,33 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
 import { VcIcon } from "./../../";
 import VcPopupWarning from "./_internal/vc-popup-warning/vc-popup-warning.vue";
 import VcPopupError from "./_internal/vc-popup-error/vc-popup-error.vue";
-
-export interface Props {
-  title?: string;
-  closable?: boolean;
-  variant?: "small" | "medium" | "fullscreen";
-  type?: "default" | "error" | "warning" | "success";
-}
-
-export interface Emits {
-  (event: "close"): void;
-  (event: "confirm"): void;
-}
-
-withDefaults(defineProps<Props>(), {
-  closable: true,
-  variant: "fullscreen",
-  type: "default",
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+    variant: {
+      type: String as PropType<"small" | "medium" | "fullscreen">,
+      default: "fullscreen",
+    },
+    type: {
+      type: String as PropType<"default" | "error" | "warning" | "success">,
+      default: "default",
+    },
+  },
+  emits: ["close", "confirm"],
 });
-
-defineEmits<Emits>();
-
-defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: (props: any) => any;
-}>();
 </script>
 
 <style lang="scss">

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

@@ -529,8 +529,8 @@ interface ITableItemRef {
 const emit = defineEmits<{
   paginationClick: [page: number];
   selectionChanged: [values: T[]];
-  "search:change": [value: string | number | Date];
-  headerClick;
+  "search:change": [value: string | number | Date | null];
+  headerClick: [item: ITableColumns];
   value: [Record<string, unknown>];
   itemClick: [item: T];
   "scroll:ptr": [];
@@ -547,8 +547,8 @@ const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
 
 // event listeners
-let columnResizeListener = null;
-let columnResizeEndListener = null;
+let columnResizeListener: (...args: any[]) => any = null;
+let columnResizeEndListener: (...args: any[]) => any = null;
 
 const selection = ref<T[]>([]) as Ref<T[]>;
 const allSelected = ref(false);
@@ -558,7 +558,7 @@ const tooltip = ref<ComputePositionReturn>();
 const scrollContainer = ref<typeof VcContainer>();
 const actionToggleRefs = ref<ITableItemRef[]>([]);
 
-const itemActions = ref<IActionBuilderResult[][]>([]);
+const itemActions: Ref<IActionBuilderResult[][]> = ref([]);
 const mobileSwipeItem = ref<string>();
 const columnResizing = ref(false);
 const resizeColumnElement = ref<ITableColumns>();
@@ -629,7 +629,7 @@ const headerCheckbox = computed({
     return props.items ? selection.value.length === props.items.length : false;
   },
   set(checked: boolean) {
-    let _selected = [];
+    let _selected: T[] = [];
 
     if (checked) {
       _selected = props.items;
@@ -829,7 +829,7 @@ function bindColumnResizeEvents() {
       if (columnResizing.value) {
         onColumnResize(event);
       }
-    });
+    }) as unknown as typeof document.addEventListener;
   }
   if (!columnResizeEndListener) {
     columnResizeEndListener = document.addEventListener("mouseup", () => {
@@ -837,7 +837,7 @@ function bindColumnResizeEvents() {
         columnResizing.value = false;
         onColumnResizeEnd();
       }
-    });
+    }) as unknown as typeof document.addEventListener;
   }
 }
 
@@ -883,13 +883,13 @@ function onColumnResizeEnd() {
 
   const minWidth = 15;
 
-  if (columnWidth + delta > parseInt(minWidth.toString(), 10)) {
+  if (columnWidth + delta > parseInt(minWidth.toString(), 10) && resizeColumnElement.value) {
     nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
 
     if (nextColumn.value) {
-      const nextColElement: HTMLElement = table.value.querySelector(`#${nextColumn.value.id}`);
+      const nextColElement = table.value.querySelector(`#${nextColumn.value.id}`);
 
-      const nextColumnWidth = nextColElement.offsetWidth - delta;
+      const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
       if (newColumnWidth > 15 && nextColumnWidth > 15) {
         resizeTableCells(newColumnWidth, nextColumnWidth);
       }
@@ -907,8 +907,12 @@ function onColumnResizeEnd() {
 }
 
 function resizeTableCells(newColumnWidth: number, nextColumnWidth: number) {
-  resizeColumnElement.value.width = newColumnWidth + "px";
-  nextColumn.value.width = nextColumnWidth + "px";
+  if (resizeColumnElement.value) {
+    resizeColumnElement.value.width = newColumnWidth + "px";
+  }
+  if (nextColumn.value) {
+    nextColumn.value.width = nextColumnWidth + "px";
+  }
 }
 
 function onColumnHeaderDragStart(event: DragEvent, item: ITableColumns) {
@@ -919,7 +923,9 @@ function onColumnHeaderDragStart(event: DragEvent, item: ITableColumns) {
 
   draggedColumn.value = item;
   draggedElement.value = event.target as HTMLElement;
-  event.dataTransfer.setData("text", "reorder");
+  if (event.dataTransfer) {
+    event.dataTransfer.setData("text", "reorder");
+  }
 }
 
 function findParentHeader(element: HTMLElement) {
@@ -928,7 +934,7 @@ function findParentHeader(element: HTMLElement) {
   } else {
     let parent = element.parentElement;
 
-    while (parent.nodeName !== "TH") {
+    while (parent && parent.nodeName !== "TH") {
       parent = parent.parentElement;
       if (!parent) break;
     }
@@ -945,7 +951,7 @@ function onColumnHeaderDragOver(event: DragEvent) {
     const containerOffset = getOffset(table.value as HTMLElement);
     const dropHeaderOffset = getOffset(dropHeader);
 
-    if (draggedElement.value !== dropHeader) {
+    if (draggedElement.value !== dropHeader && reorderRef.value && tableRef.value) {
       const targetLeft = dropHeaderOffset.left - containerOffset.left;
       const columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
 
@@ -969,7 +975,9 @@ function onColumnHeaderDragLeave(event: DragEvent) {
   if (props.reorderableColumns && draggedColumn.value) {
     event.preventDefault();
 
-    reorderRef.value.style.display = "none";
+    if (reorderRef.value != undefined) {
+      reorderRef.value.style.display = "none";
+    }
   }
 }
 
@@ -998,8 +1006,12 @@ function onColumnHeaderDrop(event: DragEvent, item: ITableColumns) {
       }
     }
 
-    reorderRef.value.style.display = "none";
-    draggedElement.value.draggable = false;
+    if (reorderRef.value) {
+      reorderRef.value.style.display = "none";
+    }
+    if (draggedElement.value) {
+      draggedElement.value.draggable = false;
+    }
     draggedColumn.value = null;
     dropPosition.value = null;
   }
@@ -1019,10 +1031,14 @@ function restoreState() {
   console.debug("[@vc-shell/framewok#vc-table.vue] - Restore state");
   if (Object.keys(state.value).length) {
     defaultColumns.value = state.value.map((item) => {
-      return {
-        ...item,
-        title: defaultColumns.value.find((x) => x.id === item.id).title,
-      };
+      const column = defaultColumns.value.find((x) => x.id === item.id);
+      if (column) {
+        return {
+          ...item,
+          title: column.title,
+        };
+      }
+      return item;
     });
   }
 }
@@ -1038,9 +1054,9 @@ function reorderArray(value: unknown[], from: number, to: number) {
   }
 }
 
-function onColumnHeaderMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
+function onColumnHeaderMouseDown(event: MouseEvent) {
   if (props.reorderableColumns) {
-    event.currentTarget.draggable = true;
+    (event.currentTarget as HTMLElement).draggable = true;
   }
 }
 
@@ -1059,9 +1075,9 @@ function toggleColumn(item: ITableColumns) {
   }
 }
 
-function onRowMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
+function onRowMouseDown(event: MouseEvent) {
   if (props.reorderableRows) {
-    event.currentTarget.draggable = true;
+    (event.currentTarget as HTMLElement).draggable = true;
   }
 }
 
@@ -1072,7 +1088,9 @@ function onRowDragStart(event: DragEvent, item: T) {
   rowDragged.value = true;
   draggedRow.value = item;
   draggedRowIndex.value = props.items.indexOf(item);
-  event.dataTransfer.setData("text", "row-reorder");
+  if (event.dataTransfer) {
+    event.dataTransfer.setData("text", "row-reorder");
+  }
 }
 
 function onRowDragOver(event: DragEvent, item: T) {
@@ -1127,13 +1145,13 @@ function onRowDragLeave(event: DragEvent) {
 
 function onRowDragEnd(event: DragEvent & { currentTarget?: { draggable: boolean } }) {
   rowDragged.value = false;
-  draggedRowIndex.value = null;
-  droppedRowIndex.value = null;
+  draggedRowIndex.value = undefined;
+  droppedRowIndex.value = undefined;
   event.currentTarget.draggable = false;
 }
 
 function onRowDrop(event: DragEvent) {
-  if (droppedRowIndex.value != null) {
+  if (droppedRowIndex.value !== undefined && draggedRowIndex.value !== undefined) {
     const dropIndex =
       draggedRowIndex.value > droppedRowIndex.value
         ? droppedRowIndex.value