@vc-shell/framework 1.0.120 → 1.0.121

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -1,16 +1,5 @@
-import {
-  computed,
-  ref,
-  unref,
-  watch,
-  Ref,
-  ComponentPublicInstance,
-  getCurrentInstance,
-  markRaw,
-  inject,
-  nextTick,
-  warn,
-} from "vue";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed, ref, unref, watch, Ref, getCurrentInstance, markRaw, inject, nextTick, warn, Component } from "vue";
 import * as _ from "lodash-es";
 import { useRouter, RouteLocationNormalized } from "vue-router";
 import { usePermissions } from "../../../../../core/composables";
@@ -19,11 +8,10 @@ import {
   IBladeRef,
   IBladeEvent,
   IParentCallArgs,
-  BladeConstructor,
   BladeComponentInternalInstance,
   BladeNavigationPlugin,
   notification,
-  BladePageComponent,
+  BladeInstanceConstructor,
 } from "../../../..";
 import { bladeNavigationInstance } from "../../plugin";
 import pattern from "url-pattern";
@@ -34,18 +22,20 @@ interface BladeData {
   param?: string;
   options?: string;
 }
+
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
-  readonly workspaceOptions: Ref<Record<string, unknown>>;
-  readonly workspaceParam: Ref<string>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly workspaceOptions: Ref<Record<string, any>> | Ref<undefined>;
+  readonly workspaceParam: Ref<string> | Ref<undefined>;
   readonly lastBladeData: Ref<BladeData>;
   bladesRefs: Ref<IBladeRef[]>;
   activeBlade: Ref<IBladeContainer>;
-  openBlade: <Blade extends ComponentPublicInstance = ComponentPublicInstance>(
+  openBlade: <Blade extends Component>(
     { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
     isWorkspace?: boolean
   ) => void;
-  closeBlade: (index: number) => Promise<boolean>;
+  closeBlade: (index: number) => Promise<boolean | undefined>;
   onParentCall: (index: number, args: IParentCallArgs) => void;
   /**
    * Resolves blades from vue-router's navigation guard 'to' param. Used to display blades after page reload or accessing via direct link.
@@ -53,18 +43,17 @@ interface IUseBladeNavigation {
    * @param to
    * @returns string
    */
-  resolveBlades: (to: RouteLocationNormalized) => string;
-  resolveLastBlade: (pages: BladePageComponent[]) => void;
-  resolveUnknownRoutes: (to: RouteLocationNormalized) => string;
-  resolveBladeByName: (name: string) => BladeConstructor;
+  resolveBlades: (to: RouteLocationNormalized) => string | unknown;
+  resolveLastBlade: (pages: BladeInstanceConstructor[]) => void;
+  resolveUnknownRoutes: (to: RouteLocationNormalized) => string | unknown;
+  resolveBladeByName: (name: string) => BladeInstanceConstructor<any>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const workspaceOptions: Ref<Record<string, any>> = ref();
-const workspaceParam: Ref<string> = ref();
+const workspaceOptions: Ref<Record<string, any>> | Ref<undefined> = ref();
+const workspaceParam: Ref<string> | Ref<undefined> = ref();
 const activeBlade = ref();
 const lastBladeData = useLocalStorage<BladeData>("VC_BLADE_DATA", {});
-// const resolvedLastBlade = ref<BladePageComponent>();
 
 export function useBladeNavigation(): IUseBladeNavigation {
   const router = useRouter();
@@ -73,7 +62,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   const isPrevented = ref(false);
   const routes = router.getRoutes();
 
-  const instance: BladeComponentInternalInstance = getCurrentInstance();
+  const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
   const navigationInstance =
     (instance && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
 
@@ -84,9 +73,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
         const workspace = navigationInstance.bladesRefs.value[0]?.blade;
         const lastBlade = newVal[newVal.length - 1];
 
-        if (workspace && workspace.blade.url) {
+        if (workspace && workspace.blade?.url) {
           let url: string;
-          if (lastBlade && lastBlade.blade.url) {
+          if (lastBlade && lastBlade.blade?.url) {
             url = urlPattern.stringify({
               workspace: workspace?.blade.url.substring(1),
               blade: lastBlade?.blade.url.substring(1),
@@ -103,13 +92,13 @@ export function useBladeNavigation(): IUseBladeNavigation {
     { deep: true }
   );
 
-  async function openWorkspace({ blade, param, options }: IBladeEvent) {
+  async function openWorkspace<Blade extends Component>({ blade, param, options }: IBladeEvent<Blade>) {
     await closeBlade(0);
 
     const bladeComponent = unref(blade);
 
-    if (!isPrevented.value) {
-      await router.replace(bladeComponent.url);
+    if (!isPrevented.value && bladeComponent?.url) {
+      await router.replace(bladeComponent.url as string);
 
       await nextTick(() => {
         workspaceOptions.value = unref(options);
@@ -119,7 +108,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function isBladeComponent(
-    component: Omit<BladeComponentInternalInstance["vnode"]["type"], "__isFragment"> | BladeConstructor
+    component:
+      | Omit<BladeComponentInternalInstance["vnode"]["type"], "__isFragment">
+      | InstanceType<BladeInstanceConstructor>
   ) {
     if (!instance) {
       warn("isBladeComponent can only be used in setup().");
@@ -130,7 +121,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     return foundComponent && "isBladeComponent" in foundComponent && !!foundComponent.isBladeComponent;
   }
 
-  async function openBlade<Blade extends ComponentPublicInstance>(
+  async function openBlade<Blade extends Component>(
     { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
     isWorkspace = false
   ) {
@@ -146,37 +137,39 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
     clearParentData();
 
-    // caller blade component
-    const instanceComponent = isBladeComponent(instance.vnode.type)
-      ? instance.vnode.type
-      : navigationInstance.bladesRefs.value.find((item) => item.active)?.blade?.blade;
-
-    if (instanceComponent) {
-      // Caller blade index in blades array
-      const callerIndex = navigationInstance.bladesRefs.value.findIndex((item) => {
-        return _.isEqual(item.blade.blade, instanceComponent);
-      });
-
-      // Trying to determine if the calling blade already has a child in order to replace it
-      const isBladeAlreadyExist =
-        callerIndex >= 0 ? navigationInstance.bladesRefs.value[callerIndex + 1]?.blade.blade : undefined;
-
-      // Blade we want to open
-      const bladeComponent = unref(blade);
-
-      // Check if caller blade has idx
-      const index = instanceComponent?.idx ? instanceComponent.idx : 0;
-
-      if (isBladeAlreadyExist === undefined) {
-        bladeComponent.idx = index ? index + 1 : 1;
-      } else if (isBladeAlreadyExist) {
-        await closeBlade(
-          navigationInstance.blades.value.findIndex((x: IBladeContainer) => x.idx === isBladeAlreadyExist.idx)
-        );
-        bladeComponent.idx = isBladeAlreadyExist.idx;
-      }
-      if (!isPrevented.value) {
-        await addBlade(bladeComponent, param, options, onOpen, onClose, index);
+    if (instance) {
+      // caller blade component
+      const instanceComponent = isBladeComponent(instance.vnode.type)
+        ? instance.vnode.type
+        : navigationInstance.bladesRefs.value.find((item) => item.active)?.blade?.blade;
+
+      if (instanceComponent) {
+        // Caller blade index in blades array
+        const callerIndex = navigationInstance.bladesRefs.value.findIndex((item) => {
+          return _.isEqual(item.blade.blade, instanceComponent);
+        });
+
+        // Trying to determine if the calling blade already has a child in order to replace it
+        const isBladeAlreadyExist =
+          callerIndex >= 0 ? navigationInstance.bladesRefs.value[callerIndex + 1]?.blade.blade : undefined;
+
+        // Blade we want to open
+        const bladeComponent = unref(blade);
+
+        // Check if caller blade has idx
+        const index = instanceComponent?.idx ? instanceComponent.idx : 0;
+
+        if (isBladeAlreadyExist === undefined) {
+          bladeComponent.idx = index ? index + 1 : 1;
+        } else if (isBladeAlreadyExist) {
+          await closeBlade(
+            navigationInstance.blades.value.findIndex((x: IBladeContainer) => x.idx === isBladeAlreadyExist.idx)
+          );
+          bladeComponent.idx = isBladeAlreadyExist.idx;
+        }
+        if (!isPrevented.value) {
+          await addBlade(bladeComponent, param, options, onOpen, onClose, index);
+        }
       }
     }
   }
@@ -191,7 +184,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
       isPrevented.value = false;
       for (let i = 0; i < children.length; i++) {
         if (children[i]?.exposed.onBeforeClose && typeof children[i].exposed.onBeforeClose === "function") {
-          const result = await children[i].exposed.onBeforeClose();
+          const result = await children[i].exposed.onBeforeClose?.();
           if (result === false) {
             isPrevented.value = true;
             console.debug(`[@vc-shell/framework#useBladeNavigation] - Navigation is prevented`);
@@ -211,19 +204,19 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   async function addBlade(
-    blade: BladeConstructor,
-    param: string,
+    blade: BladeInstanceConstructor,
+    param?: string,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    options: Record<string, any>,
-    onOpen: () => void,
-    onClose: () => void,
+    options?: Record<string, any>,
+    onOpen?: () => void,
+    onClose?: () => void,
     index?: number
   ) {
     if (index && navigationInstance.blades.value.length > index) {
       await closeBlade(index);
     }
 
-    if (blade && hasAccess(blade.permissions)) {
+    if (hasAccess(blade.permissions)) {
       navigationInstance.blades.value.push({
         blade: markRaw(blade),
         options,
@@ -264,7 +257,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function addEntryToLocation(params: string) {
-    history.replaceState({}, null, "#" + params);
+    history.replaceState({}, "", "#" + params);
   }
 
   async function clearParentData() {
@@ -308,34 +301,41 @@ export function useBladeNavigation(): IUseBladeNavigation {
     workspaceParam.value = param;
   }
 
-  function resolveLastBlade(pages: BladePageComponent[]) {
+  function resolveLastBlade(pages: BladeInstanceConstructor[]) {
     if (lastBladeData.value?.blade) {
       const blade = pages?.find((b) => b.url === lastBladeData.value?.blade);
       setParentData({ param: lastBladeData.value?.param });
 
-      if (!isBladeAlreadyOpened({ blade, param: lastBladeData.value?.param })) {
+      if (blade && !isBladeAlreadyOpened({ blade, param: lastBladeData.value?.param })) {
         openBlade({ blade, param: lastBladeData.value?.param });
         clearSavedBladeData();
       }
     }
   }
 
-  function isBladeAlreadyOpened(args: { blade: BladePageComponent; param?: string }) {
+  function isBladeAlreadyOpened(args: { blade: BladeInstanceConstructor; param?: string }) {
     return navigationInstance?.blades.value.some((x) => {
       return x.blade === args.blade && x.param === args.param;
     });
   }
 
-  function resolveBladeByName(name: string) {
+  function resolveBladeByName(name: string): BladeInstanceConstructor<any> {
     if (!instance) {
       warn("resolveComponentByName can only be used in setup().");
-      return;
+
+      return null as any; // Return type inferred as any due to the early return
     }
+
     if (!name) {
       throw new Error("blade name is required");
     }
-    const components = instance && instance.appContext.components;
-    return components[name] as BladeConstructor;
+
+    const components = instance?.appContext.components;
+    if (components[name]) {
+      return components[name] as BladeInstanceConstructor<any>;
+    } else {
+      throw new Error("Blade not found");
+    }
   }
 
   return {

package/shared/components/blade-navigation/types/index.ts

@@ -1,17 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentPublicInstance, VNode, ComponentInternalInstance, VNodeTypes, Ref } from "vue";
-
-export type BladeInstanceConstructor<T extends ComponentPublicInstance = ComponentPublicInstance> = {
-  new (...args: any[]): T & { $: ComponentInternalInstance & { exposed: CoreBladeExposed & T["$"]["exposed"] } } & {
-    $props: T["$props"] & CoreBladeComponentProps;
-  };
-} & CoreComponentData &
-  CoreBladeAdditionalSettings &
-  CoreBladeNavigationData;
-
-export type ComponentInstanceConstructor<T = any> = {
-  new (...args: any[]): T;
-};
+import {
+  AppContext,
+  Component,
+  ComponentOptionsBase,
+  ComponentOptionsMixin,
+  ComponentPublicInstance,
+  ComputedOptions,
+  VNode,
+  ComponentInternalInstance,
+  VNodeTypes,
+  Ref,
+  MethodOptions,
+} from "vue";
+import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
+
+/**
+ * @deprecated use `ComponentPublicInstanceConstructor` interface instead
+ */
+export type ComponentInstanceConstructor<T = any> = ComponentPublicInstanceConstructor<T>;
 
 export type CoreBladeComponentProps = {
   expanded?: boolean;
@@ -20,16 +26,24 @@ export type CoreBladeComponentProps = {
   options?: Record<string, any>;
 };
 
-export type BladePageComponent = BladeConstructor;
+export type CoreDynamicBladeComponentProps = {
+  model?: any;
+  composables?: any;
+};
+
+/**
+ * @deprecated use `BladeInstanceConstructor` interface instead
+ */
+export type BladePageComponent = BladeInstanceConstructor;
 
 export type CoreComponentData = {
   isBladeComponent?: boolean;
-  isWorkspace?: boolean;
 };
 
 export type CoreBladeAdditionalSettings = {
   url?: `/${string}`;
   permissions?: string | string[];
+  isWorkspace?: boolean;
 };
 
 export type CoreBladeNavigationData = {
@@ -56,15 +70,33 @@ export interface IBladeContainer extends IBladeEvent {
 
 export interface BladeComponentInternalInstance extends ComponentInternalInstance {
   vnode: VNode & { type: VNodeTypes & CoreBladeAdditionalSettings & CoreBladeNavigationData };
+  appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
 }
 
 export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
 
+/**
+ * @deprecated use `BladeInstanceConstructor` interface instead
+ */
 export type BladeConstructor<T extends ComponentPublicInstance = ComponentPublicInstance> = BladeInstanceConstructor<T>;
 
-export interface IBladeEvent<T extends ComponentPublicInstance = ComponentPublicInstance> {
-  blade?: BladeConstructor<T>;
-  options?: ExtractedBladeOptions<InstanceType<BladeConstructor<T>>["$props"], "options">;
+type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
+
+export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
+  new (...args: any[]): InstanceType<Extractor<T>> & {
+    $: ComponentInternalInstance & {
+      exposed: CoreBladeExposed | InstanceType<Extractor<T>>["$"]["exposed"];
+    };
+    $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
+  };
+} & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
+  CoreComponentData &
+  CoreBladeAdditionalSettings &
+  CoreBladeNavigationData;
+
+export interface IBladeEvent<T extends Component = Component> {
+  blade: BladeInstanceConstructor<T>;
+  options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
   param?: string;
   onOpen?: () => void;
   onClose?: () => void;

package/shared/components/change-password/change-password.vue

@@ -4,7 +4,7 @@
     :title="t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
     @close="$emit('close')"
   >
-    <div class="tw-p-3">
+    <div class="change-password tw-p-3 tw-overflow-scroll">
       <VcForm>
         <Field
           v-slot="{ field, errorMessage, errors }"
@@ -144,10 +144,10 @@ const isDisabled = computed(() => {
 
 async function changePassword() {
   const result = await changeUserPassword(form.currentPassword, form.password);
-  if (result.succeeded) {
+  if (result?.succeeded) {
     emit("close");
-  } else {
-    form.errors = result.errors;
+  } else if (result?.errors) {
+    form.errors = result?.errors;
     form.isValid = form.errors.length == 0;
   }
 }
@@ -155,7 +155,7 @@ async function changePassword() {
 function validate() {
   nextTick(async () => {
     if (form.password || form.confirmPassword) {
-      form.errors = (await validatePassword(form.password)).errors;
+      form.errors = (await validatePassword(form.password)).errors ?? [];
       if (form.confirmPassword !== form.password) {
         (form.errors as IIdentityError[]).push({ code: "Repeat-password" });
       }
@@ -167,3 +167,30 @@ function validate() {
   });
 }
 </script>
+
+<style lang="scss">
+:root {
+  --change-password-scroll-color: #e1eff9;
+  --change-password-scroll-color-hover: #cce4f5;
+  --change-password-scroll-width: 8px;
+  --change-password-scroll-padding: 8px;
+  --change-password-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset, 0 -3px 2px rgba(0, 0, 0, 0.1) inset;
+}
+
+.change-password {
+  &::-webkit-scrollbar {
+    @apply tw-w-[var(--change-password-scroll-width)] tw-bg-transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply tw-bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply tw-bg-[color:var(--change-password-scroll-color)]
+      tw-rounded-[calc(var(--change-password-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--change-password-scroll-color-hover)];
+  }
+}
+</style>

package/shared/components/error-interceptor/interceptor.ts

@@ -1,5 +1,5 @@
 import { useErrorHandler } from "./../../../core/composables";
-import { SetupContext, defineComponent, VNode } from "vue";
+import { defineComponent, VNode } from "vue";
 
 export interface Props {
   capture?: boolean;
@@ -12,7 +12,7 @@ export interface Emits {
 
 export type Slots = {
   slots: {
-    default: (args: { error: string; reset: () => void }) => VNode[];
+    default: (args: { error: string | null; reset: () => void }) => VNode[];
   };
 };
 
@@ -31,11 +31,11 @@ export default defineComponent({
       return true;
     },
   },
-  setup(props, { slots }: SetupContext & Slots) {
+  setup(props, { slots }) {
     const { error, reset } = useErrorHandler(props.capture);
 
     return () =>
-      slots.default({
+      slots.default?.({
         error: error.value,
         reset,
       });

package/shared/components/notifications/composables/useContainer/index.ts

@@ -27,7 +27,7 @@ interface IUseContainer {
   getAllNotifications(): NotificationOptions[];
   appendInstance(options: NotificationOptions): void;
   generateNotificationId(): string;
-  getNotification(notificationId: string): NotificationOptions;
+  getNotification(notificationId: string | number): NotificationOptions | undefined;
 }
 
 const pending = reactive<PendingContainer>({ items: [] });
@@ -53,7 +53,7 @@ export function useContainer(): IUseContainer {
   function appendFromPending() {
     if (pending.items.length > 0) {
       const append = pending.items.shift();
-      appendInstance(append?.notificationProps);
+      if (append?.notificationProps) appendInstance(append?.notificationProps);
     }
   }
 

package/shared/components/notifications/composables/useInstance/index.ts

@@ -7,7 +7,7 @@ interface IUseInstance {
   clearContainer(): void;
 }
 
-const containerInstance: Ref<App<Element>> = ref();
+const containerInstance: Ref<App<Element> | undefined> = ref();
 
 export function useInstance(): IUseInstance {
   const { pending, notificationContainer } = useContainer();
@@ -21,7 +21,7 @@ export function useInstance(): IUseInstance {
 
   function unmountComponent() {
     try {
-      containerInstance.value.unmount();
+      containerInstance.value?.unmount();
       document.getElementById("notification")?.remove();
       containerInstance.value = undefined;
       notificationContainer.value = [];

package/shared/components/notifications/core/notification.ts

@@ -19,7 +19,7 @@ function checkPending(limit?: number) {
 }
 
 function resolvePending(options: InternalNotificationOptions) {
-  if (checkPending(options.limit)) {
+  if (checkPending(options.limit) && options.notificationId) {
     pending.items.push({
       notificationId: options.notificationId,
       notificationProps: options,
@@ -89,7 +89,7 @@ notification.update = (notificationId: string | number, options: NotificationOpt
     const content = updatedOptions.content || item.content;
     delete updatedOptions.content;
 
-    showNotification(content, updatedOptions);
+    if (content) showNotification(content, updatedOptions);
   }
 };
 

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -1,10 +1,10 @@
 <template>
   <component
     :is="popup.component"
-    v-for="popup in popupPlugin.popups"
+    v-for="popup in popupPlugin?.popups"
     :key="popup.id"
     v-bind="{ ...popup.props, ...popup.emits }"
-    @close="() => popup.close()"
+    @close="() => popup.close?.()"
   >
     <template
       v-for="(slot, key) in popup.slots"

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -12,9 +12,10 @@ import {
   unref,
   DefineComponent,
 } from "vue";
-import { ComponentPublicInstanceConstructor, PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
+import { PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
 import { popupPluginInstance } from "./../../plugin";
 import { useI18n } from "vue-i18n";
+import { ComponentPublicInstanceConstructor } from "../../../../utilities/vueUtils";
 
 interface IUsePopup {
   open(): void;
@@ -29,12 +30,18 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
   const { t } = useI18n({ useScope: "global" });
   const instance = getCurrentInstance();
   const popupInstance: PopupPlugin = (instance && inject("popupPlugin")) || popupPluginInstance;
-  let rawPopup = createInstance(unref(options));
+  let rawPopup: UsePopupProps<DefineComponent> & UsePopupInternal;
+
+  if (options) {
+    rawPopup = createInstance(unref(options));
+  }
 
   watch(
     () => options,
     (newVal) => {
-      rawPopup = createInstance(unref(newVal));
+      if (newVal) {
+        rawPopup = createInstance(unref(newVal));
+      }
     },
     { deep: true }
   );
@@ -46,7 +53,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       activeInstance = popupInstance;
     }
 
-    activeInstance.popups.push(rawPopup || customInstance);
+    activeInstance?.popups.push(rawPopup || customInstance);
   }
 
   function close(customInstance?: UsePopupProps<DefineComponent>) {
@@ -54,8 +61,8 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
     if (popupInstance) {
       activeInstance = popupInstance;
     }
-    const index = activeInstance.popups.indexOf(rawPopup || customInstance);
-    if (index !== -1) activeInstance.popups.splice(index, 1);
+    const index = activeInstance?.popups.indexOf(rawPopup || customInstance);
+    if (index !== undefined && index !== -1) activeInstance?.popups.splice(index, 1);
   }
 
   async function showConfirmation(message: string | Ref<string>): Promise<boolean> {

package/shared/components/popup-handler/types/index.ts

@@ -1,4 +1,5 @@
 import { Component, ComponentPublicInstance, DefineComponent, Slot as VueSlot } from "vue";
+import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
 
 export type RawProps<T extends ComponentPublicInstanceConstructor<any>> = Omit<
   InstanceType<T>["$props"],
@@ -20,13 +21,6 @@ export interface PopupPlugin {
   popups: Partial<UsePopupProps<DefineComponent> & UsePopupInternal>[];
 }
 
-export interface ComponentPublicInstanceConstructor<T extends ComponentPublicInstance> {
-  __isFragment?: never;
-  __isTeleport?: never;
-  __isSuspense?: never;
-  new (...args: unknown[]): T;
-}
-
 export interface UsePopupProps<T extends ComponentPublicInstanceConstructor<any>> {
   component: T;
   emits?: RawEmits<T>;

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -38,7 +38,7 @@
         v-for="(item, i) in menuItems"
         :key="`menu_item_${i}`"
         class="user-dropdown-button__menu-item"
-        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler() : null"
+        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
       >
         {{ item.title }}
       </div>