@nuxt/ui 4.2.1 → 4.4.0

package/dist/runtime/components/prose/callout/Warning.vue.d.ts

@@ -1,8 +1,8 @@
-declare var __VLS_6: {
+declare var __VLS_8: {
     mdcUnwrap: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -9,7 +9,8 @@ export interface ShortcutsConfig {
 }
 export interface ShortcutsOptions {
     chainDelay?: number;
+    layoutIndependent?: boolean;
 }
-export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function extractShortcuts(items: any[] | any[][], separator?: '_' | '-'): Record<string, Handler>;
 export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/shared").Fn;
 export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -4,12 +4,36 @@ import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
-export function extractShortcuts(items) {
+function convertKeyToCode(key) {
+  if (/^[a-z]$/i.test(key)) {
+    return `Key${key.toUpperCase()}`;
+  }
+  if (/^\d$/.test(key)) {
+    return `Digit${key}`;
+  }
+  if (/^f\d+$/i.test(key)) {
+    return key.toUpperCase();
+  }
+  const specialKeys = {
+    space: "Space",
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    arrowup: "ArrowUp",
+    arrowdown: "ArrowDown",
+    arrowleft: "ArrowLeft",
+    arrowright: "ArrowRight"
+  };
+  return specialKeys[key.toLowerCase()] || key;
+}
+export function extractShortcuts(items, separator = "_") {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
       if (item.kbds?.length && (item.onSelect || item.onClick)) {
-        const shortcutKey = item.kbds.join("_");
+        const shortcutKey = item.kbds.join(separator);
         shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
       if (item.children) {
@@ -31,14 +55,16 @@ export function defineShortcuts(config, options = {}) {
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
+  const layoutIndependent = options.layoutIndependent ?? false;
+  const shiftableCodes = shiftableKeys.map((k) => convertKeyToCode(k));
   const onKeyDown = (e) => {
     if (!e.key) {
       return;
     }
-    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
-    const shiftableKey = shiftableKeys.includes(e.key.toLowerCase());
+    const alphabetKey = layoutIndependent ? /^Key[A-Z]$/i.test(e.code) : /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = layoutIndependent ? shiftableCodes.includes(e.code) : shiftableKeys.includes(e.key.toLowerCase());
     let chainedKey;
-    chainedInputs.value.push(e.key);
+    chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
       for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
@@ -54,8 +80,14 @@ export function defineShortcuts(config, options = {}) {
       }
     }
     for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
-      if (e.key.toLowerCase() !== shortcut.key) {
-        continue;
+      if (layoutIndependent) {
+        if (e.code !== shortcut.key) {
+          continue;
+        }
+      } else {
+        if (e.key.toLowerCase() !== shortcut.key) {
+          continue;
+        }
       }
       if (e.metaKey !== shortcut.metaKey) {
         continue;
@@ -63,7 +95,7 @@ export function defineShortcuts(config, options = {}) {
       if (e.ctrlKey !== shortcut.ctrlKey) {
         continue;
       }
-      if ((alphabetKey || shiftableKey) && e.shiftKey !== shortcut.shiftKey) {
+      if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey) && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
       if (shortcut.enabled) {
@@ -98,17 +130,32 @@ export function defineShortcuts(config, options = {}) {
       }
       const chained = key.includes("-") && key !== "-" && !key.includes("_");
       if (chained) {
-        shortcut = {
-          key: key.toLowerCase(),
-          metaKey: false,
-          ctrlKey: false,
-          shiftKey: false,
-          altKey: false
-        };
+        if (layoutIndependent) {
+          const parts = key.split("-").map((p) => convertKeyToCode(p));
+          shortcut = {
+            key: parts.join("-"),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        } else {
+          shortcut = {
+            key: key.toLowerCase(),
+            metaKey: false,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false
+          };
+        }
       } else {
         const keySplit = key.toLowerCase().split("_").map((k) => k);
+        let baseKey = keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_");
+        if (layoutIndependent) {
+          baseKey = convertKeyToCode(baseKey);
+        }
         shortcut = {
-          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          key: baseKey,
           metaKey: keySplit.includes("meta") || keySplit.includes("command"),
           ctrlKey: keySplit.includes("ctrl"),
           shiftKey: keySplit.includes("shift"),

package/dist/runtime/composables/useEditorMenu.d.ts

@@ -0,0 +1,75 @@
+import type { Ref, ComputedRef, MaybeRef } from 'vue';
+import type { Editor } from '@tiptap/vue-3';
+import type { FloatingUIOptions } from '../types/editor';
+export interface EditorMenuOptions<T = any> {
+    editor: Editor;
+    /**
+     * The trigger character (e.g., '/', '@', ':')
+     */
+    char: string;
+    /**
+     * Plugin key to identify this menu
+     */
+    pluginKey: string;
+    /**
+     * The items to display (can be a flat array or grouped)
+     */
+    items?: MaybeRef<T[] | T[][] | undefined>;
+    /**
+     * Fields to filter items by.
+     * @defaultValue ['label']
+     */
+    filterFields?: string[];
+    /**
+     * Function to filter items based on query
+     */
+    filter?: (items: T[], query: string) => T[];
+    /**
+     * Whether to ignore the default filtering.
+     * When `true`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
+    /**
+     * Maximum number of items to display
+     * @defaultValue 42
+     */
+    limit?: number;
+    /**
+     * Ref to sync the current search term with
+     */
+    searchTerm?: Ref<string>;
+    /**
+     * Function to execute when an item is selected
+     */
+    onSelect: (editor: Editor, range: any, item: T) => void;
+    /**
+     * Function to render each menu item
+     */
+    renderItem: (item: T, ui: ComputedRef<any>) => any;
+    /**
+     * The options for positioning the menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+     * @defaultValue { strategy: 'absolute', placement: 'bottom-start', offset: 8, shift: { padding: 8 } }
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: FloatingUIOptions;
+    /**
+     * The DOM element to append the menu to. Default is the editor's parent element.
+     *
+     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+     *
+     * @type {HTMLElement}
+     * @default editor.view.dom.parentElement
+     */
+    appendTo?: HTMLElement | (() => HTMLElement);
+    /**
+     * UI styles computed ref
+     */
+    ui: ComputedRef<any>;
+}
+export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
+    plugin: import("@tiptap/pm/state").Plugin<any>;
+    destroy: () => void;
+    filteredItems: Ref<T[], T[]>;
+    searchTerm: Ref<string, string>;
+};

package/dist/runtime/composables/useEditorMenu.js

@@ -0,0 +1,435 @@
+import { ref, h, computed, unref, watch } from "vue";
+import { defu } from "defu";
+import { useFilter } from "reka-ui";
+import { computePosition } from "@floating-ui/dom";
+import { VueRenderer } from "@tiptap/vue-3";
+import Suggestion from "@tiptap/suggestion";
+import { PluginKey } from "@tiptap/pm/state";
+import { buildFloatingUIMiddleware } from "../utils/editor.js";
+import { get, isArrayOfArray } from "../utils/index.js";
+export function useEditorMenu(options) {
+  const filteredItems = ref([]);
+  const selectedIndex = ref(0);
+  const menuState = ref("closed");
+  const searchTerm = options.searchTerm ?? ref("");
+  let renderer = null;
+  let element = null;
+  let handleMouseDown = null;
+  let commandFn = null;
+  let keyDownHandler = null;
+  let globalKeyHandler = null;
+  let blurHandler = null;
+  let triggerClientRect = null;
+  let handleHover = null;
+  let scrollHandler = null;
+  let stopItemsWatch = null;
+  const { contains } = useFilter({ sensitivity: "base" });
+  const cleanupMenu = () => {
+    if (menuState.value === "closed") return;
+    menuState.value = "closed";
+    if (globalKeyHandler) {
+      document.removeEventListener("keydown", globalKeyHandler, true);
+      globalKeyHandler = null;
+    }
+    if (blurHandler) {
+      options.editor.view.dom.removeEventListener("blur", blurHandler);
+      blurHandler = null;
+    }
+    if (scrollHandler) {
+      window.removeEventListener("scroll", scrollHandler, true);
+      scrollHandler = null;
+    }
+    if (element && handleMouseDown) {
+      element.removeEventListener("mousedown", handleMouseDown);
+      handleMouseDown = null;
+    }
+    if (renderer) {
+      renderer.destroy();
+      renderer = null;
+    }
+    if (element) {
+      element.remove();
+      element = null;
+    }
+  };
+  const filterFields = options.filterFields ?? ["label"];
+  const defaultFilter = (items2, query) => {
+    if (!query) return items2;
+    return items2.filter((item) => {
+      return filterFields.some((field) => {
+        const value = get(item, field);
+        if (value === void 0 || value === null) return false;
+        const stringValue = Array.isArray(value) ? value.join(" ") : String(value);
+        return contains(stringValue, query) || contains(stringValue.replace(/[\s_-]/g, ""), query);
+      });
+    });
+  };
+  const filter = options.filter || defaultFilter;
+  const limit = options.limit ?? 42;
+  const pluginKeyInstance = typeof options.pluginKey === "string" ? new PluginKey(options.pluginKey) : options.pluginKey;
+  const groups = computed(() => {
+    const items2 = unref(options.items);
+    return items2?.length ? isArrayOfArray(items2) ? items2 : [items2] : [];
+  });
+  const items = computed(() => groups.value.flatMap((group) => group));
+  const filteredGroups = computed(() => {
+    if (!filteredItems.value.length) return [];
+    if (options.ignoreFilter) {
+      return [filteredItems.value];
+    }
+    return groups.value.map((group) => group.filter((item) => filteredItems.value.includes(item))).filter((group) => group.length > 0);
+  });
+  const selectableItems = computed(() => {
+    return filteredItems.value.filter((item) => {
+      return item.type !== "label" && item.type !== "separator";
+    });
+  });
+  const floatingUIOptions = defu(options.options, {
+    strategy: "absolute",
+    placement: "bottom-start",
+    offset: 8,
+    flip: {},
+    shift: { padding: 8 },
+    size: false,
+    autoPlacement: false,
+    hide: false,
+    inline: false
+  });
+  const middleware = buildFloatingUIMiddleware(floatingUIOptions);
+  const updatePosition = (el) => {
+    if (!triggerClientRect) return;
+    const rect = triggerClientRect();
+    if (!rect) return;
+    const virtualElement = {
+      getBoundingClientRect: () => rect
+    };
+    computePosition(virtualElement, el, {
+      placement: floatingUIOptions.placement,
+      strategy: floatingUIOptions.strategy,
+      middleware
+    }).then(({ x, y, strategy }) => {
+      el.style.width = "max-content";
+      el.style.position = strategy;
+      el.style.top = "0";
+      el.style.left = "0";
+      el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    });
+  };
+  const showMenu = () => {
+    menuState.value = "open";
+    if (!globalKeyHandler) {
+      globalKeyHandler = (e) => {
+        if (keyDownHandler) {
+          const handled = keyDownHandler({ event: e });
+          if (handled) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      };
+      document.addEventListener("keydown", globalKeyHandler, true);
+    }
+    if (!blurHandler) {
+      blurHandler = () => {
+        setTimeout(() => {
+          if (menuState.value === "open") {
+            const tr = options.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true });
+            options.editor.view.dispatch(tr);
+          }
+        }, 0);
+      };
+      options.editor.view.dom.addEventListener("blur", blurHandler);
+    }
+    if (!scrollHandler) {
+      scrollHandler = () => {
+        if (element) {
+          updatePosition(element);
+        }
+      };
+      window.addEventListener("scroll", scrollHandler, true);
+    }
+    handleHover = (index) => {
+      selectedIndex.value = index;
+      if (renderer) {
+        renderer.updateProps({
+          groups: filteredGroups.value,
+          selectedIndex: index,
+          onSelect: commandFn,
+          onHover: handleHover,
+          state: menuState.value
+        });
+      }
+    };
+    renderer = new VueRenderer(MenuComponent, {
+      props: {
+        groups: filteredGroups.value,
+        selectedIndex: selectedIndex.value,
+        onSelect: commandFn,
+        onHover: handleHover,
+        state: menuState.value
+      },
+      editor: options.editor
+    });
+    element = document.createElement("div");
+    element.style.position = floatingUIOptions.strategy;
+    element.style.zIndex = "50";
+    handleMouseDown = (e) => {
+      e.preventDefault();
+    };
+    element.addEventListener("mousedown", handleMouseDown);
+    const appendToElement = typeof options.appendTo === "function" ? options.appendTo() : options.appendTo;
+    (appendToElement ?? options.editor.view.dom.parentElement)?.appendChild(element);
+    if (renderer.element) {
+      element.appendChild(renderer.element);
+    }
+    updatePosition(element);
+  };
+  if (options.ignoreFilter) {
+    stopItemsWatch = watch(() => unref(options.items), (newItems) => {
+      if (!triggerClientRect) return;
+      const normalizedItems = newItems?.length ? isArrayOfArray(newItems) ? newItems.flat() : newItems : [];
+      filteredItems.value = normalizedItems.slice(0, limit);
+      if (!filteredItems.value.length) {
+        cleanupMenu();
+        return;
+      }
+      if (selectedIndex.value >= selectableItems.value.length) {
+        selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
+      }
+      if (menuState.value === "closed" && filteredItems.value.length) {
+        showMenu();
+        return;
+      }
+      if (renderer) {
+        renderer.updateProps({
+          groups: filteredGroups.value,
+          selectedIndex: selectedIndex.value,
+          onSelect: commandFn,
+          onHover: handleHover,
+          state: menuState.value
+        });
+      }
+      if (element) {
+        updatePosition(element);
+      }
+    }, { deep: true, flush: "sync" });
+  }
+  const MenuComponent = {
+    props: {
+      groups: { type: Array, required: true },
+      selectedIndex: { type: Number, required: true },
+      onSelect: { type: Function, required: true },
+      onHover: { type: Function, required: true },
+      state: { type: String, required: true }
+    },
+    setup(menuProps) {
+      function handleClick(e, item, selectableIndex) {
+        e.preventDefault();
+        menuProps.onSelect(item, selectableIndex);
+      }
+      function handleMouseEnter(selectableIndex) {
+        menuProps.onHover(selectableIndex);
+      }
+      return () => {
+        const groupsData = menuProps.groups;
+        const selectableIndexMap = /* @__PURE__ */ new Map();
+        let selectableCounter = 0;
+        for (const group of groupsData) {
+          for (const item of group) {
+            const itemData = item;
+            if (itemData.type !== "label" && itemData.type !== "separator") {
+              selectableIndexMap.set(item, selectableCounter++);
+            }
+          }
+        }
+        return h("div", {
+          "class": options.ui.value.content(),
+          "role": "listbox",
+          "data-state": menuProps.state
+        }, [
+          h("div", {
+            class: options.ui.value.viewport(),
+            role: "presentation"
+          }, groupsData.map(
+            (group, groupIndex) => h("div", {
+              key: `group-${groupIndex}`,
+              class: options.ui.value.group(),
+              role: "group"
+            }, group.map((item, itemInGroupIndex) => {
+              const itemData = item;
+              if (itemData.type === "label") {
+                return h("div", {
+                  key: `label-${groupIndex}-${itemInGroupIndex}`,
+                  class: options.ui.value.label({ class: itemData.class })
+                }, options.renderItem(item, options.ui));
+              }
+              if (itemData.type === "separator") {
+                return h("div", {
+                  key: `separator-${groupIndex}-${itemInGroupIndex}`,
+                  class: options.ui.value.separator({ class: itemData.class }),
+                  role: "separator"
+                });
+              }
+              const selectableIndex = selectableIndexMap.get(item);
+              const isHighlighted = selectableIndex === menuProps.selectedIndex;
+              return h("div", {
+                "key": `item-${selectableIndex}`,
+                "class": options.ui.value.item({ class: itemData.class, active: false }),
+                "role": "option",
+                "aria-selected": isHighlighted,
+                "data-highlighted": isHighlighted ? "" : void 0,
+                "data-disabled": itemData.disabled ? "" : void 0,
+                "onMousedown": (e) => handleClick(e, item, selectableIndex),
+                "onMouseenter": () => handleMouseEnter(selectableIndex),
+                "ref": (el) => {
+                  if (el && isHighlighted) {
+                    el.scrollIntoView({ block: "nearest", inline: "nearest" });
+                  }
+                }
+              }, options.renderItem(item, options.ui));
+            }))
+          ))
+        ]);
+      };
+    }
+  };
+  const plugin = Suggestion({
+    pluginKey: pluginKeyInstance,
+    editor: options.editor,
+    char: options.char,
+    items: ({ query: q }) => {
+      searchTerm.value = q;
+      if (options.ignoreFilter) {
+        return items.value.slice(0, limit);
+      }
+      const filtered = filter(items.value, q);
+      return filtered.slice(0, limit);
+    },
+    command: ({ editor, range, props }) => {
+      options.onSelect(editor, range, props);
+    },
+    render: () => {
+      keyDownHandler = (props) => {
+        const { event } = props;
+        if (!renderer || !selectableItems.value.length) {
+          return false;
+        }
+        if (event.key === "Escape") {
+          cleanupMenu();
+          return true;
+        }
+        if (event.key === "ArrowUp") {
+          selectedIndex.value = (selectedIndex.value + selectableItems.value.length - 1) % selectableItems.value.length;
+          renderer?.updateProps({
+            groups: filteredGroups.value,
+            selectedIndex: selectedIndex.value,
+            onSelect: commandFn,
+            onHover: handleHover,
+            state: menuState.value
+          });
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          selectedIndex.value = (selectedIndex.value + 1) % selectableItems.value.length;
+          renderer?.updateProps({
+            groups: filteredGroups.value,
+            selectedIndex: selectedIndex.value,
+            onSelect: commandFn,
+            onHover: handleHover,
+            state: menuState.value
+          });
+          return true;
+        }
+        if (event.key === "Enter" || event.key === "Tab") {
+          const selectedItem = selectableItems.value[selectedIndex.value];
+          if (selectedItem && commandFn) {
+            commandFn(selectedItem);
+          }
+          return true;
+        }
+        return false;
+      };
+      const handlers = {
+        onStart: (suggestionProps) => {
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
+          selectedIndex.value = 0;
+          commandFn = (item) => suggestionProps.command(item);
+          triggerClientRect = suggestionProps.clientRect;
+          if (!filteredItems.value.length) {
+            return;
+          }
+          showMenu();
+        },
+        onUpdate: (suggestionProps) => {
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
+          commandFn = (item) => suggestionProps.command(item);
+          if (selectedIndex.value >= selectableItems.value.length) {
+            selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
+          }
+          if (!filteredItems.value.length) {
+            cleanupMenu();
+            return;
+          }
+          if (!renderer) {
+            showMenu();
+          } else {
+            renderer.updateProps({
+              groups: filteredGroups.value,
+              selectedIndex: selectedIndex.value,
+              onSelect: commandFn,
+              onHover: handleHover,
+              state: menuState.value
+            });
+          }
+          if (element) {
+            updatePosition(element);
+          }
+        },
+        onKeyDown: keyDownHandler,
+        onExit: () => {
+          cleanupMenu();
+          triggerClientRect = null;
+          searchTerm.value = "";
+        }
+      };
+      return handlers;
+    }
+  });
+  const destroy = () => {
+    menuState.value = "closed";
+    if (globalKeyHandler) {
+      document.removeEventListener("keydown", globalKeyHandler, true);
+      globalKeyHandler = null;
+    }
+    if (blurHandler) {
+      options.editor.view.dom.removeEventListener("blur", blurHandler);
+      blurHandler = null;
+    }
+    if (scrollHandler) {
+      window.removeEventListener("scroll", scrollHandler, true);
+      scrollHandler = null;
+    }
+    if (element && handleMouseDown) {
+      element.removeEventListener("mousedown", handleMouseDown);
+      handleMouseDown = null;
+    }
+    if (renderer) {
+      renderer.destroy();
+      renderer = null;
+    }
+    if (element) {
+      element.remove();
+      element = null;
+    }
+    if (stopItemsWatch) {
+      stopItemsWatch();
+      stopItemsWatch = null;
+    }
+  };
+  return {
+    plugin,
+    destroy,
+    filteredItems,
+    searchTerm
+  };
+}

package/dist/runtime/composables/useFileUpload.d.ts

@@ -1,5 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { MaybeRef } from '@vueuse/core';
+import type { ComponentPublicInstance, MaybeRef } from 'vue';
 export interface UseFileUploadOptions {
     /**
      * Specifies the allowed file types. Provide a comma-separated list of MIME types or file extensions.

package/dist/runtime/composables/useOverlay.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'vue';
 import type { ComponentProps, ComponentEmit } from 'vue-component-type-helpers';
+type CloseEventArgTypeSimple<T> = T extends (event: 'close', arg_0: infer Arg, ...args: any[]) => void ? Arg : never;
 /**
  * This is a workaround for a design limitation in TypeScript.
  *
@@ -9,7 +10,7 @@ import type { ComponentProps, ComponentEmit } from 'vue-component-type-helpers';
  *
  * @see https://github.com/microsoft/TypeScript/issues/32164
  */
-type CloseEventArgType<T> = T extends {
+type CloseEventArgTypeComplex<T> = T extends {
     (event: 'close', arg_0: infer Arg, ...args: any[]): void;
     (...args: any[]): void;
     (...args: any[]): void;
@@ -28,6 +29,7 @@ type CloseEventArgType<T> = T extends {
     (...args: any[]): void;
     (...args: any[]): void;
 } ? Arg : never;
+type CloseEventArgType<T> = CloseEventArgTypeSimple<T> | CloseEventArgTypeComplex<T>;
 export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
     defaultOpen?: boolean;
     props?: OverlayAttrs;