@cgboiler/biz-basic 1.0.53 → 1.0.55

package/lib/rich-text-editor/menu-system/hooks/use-list-dropdown-menu.js

@@ -0,0 +1,140 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  canToggleAnyList: () => canToggleAnyList,
+  getActiveListType: () => getActiveListType,
+  getFilteredListOptions: () => getFilteredListOptions,
+  isAnyListActive: () => isAnyListActive,
+  listOptions: () => listOptions,
+  shouldShowListDropdown: () => shouldShowListDropdown,
+  useListDropdownMenu: () => useListDropdownMenu
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var import_use_list = require("./use-list");
+var import_icons = require("../icons");
+const listOptions = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: import_icons.ListIcon
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: import_icons.ListOrderedIcon
+  }
+  // {
+  //   label: 'Task List',
+  //   type: 'taskList',
+  //   icon: ListTodoIcon,
+  // },
+];
+function canToggleAnyList(editor, listTypes) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return listTypes.some((type) => (0, import_use_list.canToggleList)(editor, type));
+}
+function isAnyListActive(editor, listTypes) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return listTypes.some((type) => (0, import_use_list.isListActive)(editor, type));
+}
+function getFilteredListOptions(availableTypes) {
+  return listOptions.filter((option) => availableTypes.includes(option.type));
+}
+function shouldShowListDropdown(params) {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleAny;
+  }
+  return true;
+}
+function getActiveListType(editor, availableTypes) {
+  if (!editor || !editor.isEditable)
+    return void 0;
+  return availableTypes.find((type) => (0, import_use_list.isListActive)(editor, type));
+}
+function useListDropdownMenu(config) {
+  const { types = ["bulletList", "orderedList", "taskList"], hideWhenUnavailable = false } = config;
+  const isVisible = (0, import_vue.ref)(false);
+  const isActive = (0, import_vue.ref)(false);
+  const canToggleState = (0, import_vue.ref)(false);
+  const activeType = (0, import_vue.ref)();
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const listInSchema = (0, import_vue.computed)(() => {
+    const editor = getEditor();
+    return types.some((type) => (0, import_tiptap_utils.isNodeInSchema)(type, editor));
+  });
+  const filteredLists = getFilteredListOptions(types);
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggleState.value = false;
+      activeType.value = void 0;
+      return;
+    }
+    canToggleState.value = canToggleAnyList(editor, types);
+    isActive.value = isAnyListActive(editor, types);
+    activeType.value = getActiveListType(editor, types);
+    isVisible.value = shouldShowListDropdown({
+      editor,
+      listTypes: types,
+      hideWhenUnavailable,
+      listInSchema: listInSchema.value,
+      canToggleAny: canToggleState.value
+    });
+  };
+  (0, import_vue.watch)(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      (0, import_vue.onBeforeUnmount)(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const activeOption = (0, import_vue.computed)(() => filteredLists.find((opt) => opt.type === activeType.value));
+  const Icon = (0, import_vue.computed)(() => activeOption.value ? import_use_list.listIcons[activeOption.value.type] : import_icons.ListIcon);
+  return {
+    isVisible,
+    activeType,
+    isActive,
+    canToggle: canToggleState,
+    types,
+    filteredLists,
+    label: "List",
+    Icon
+  };
+}

package/lib/rich-text-editor/menu-system/hooks/use-list.d.ts

@@ -0,0 +1,28 @@
+import type { Editor } from '@tiptap/vue-3';
+export type ListType = 'bulletList' | 'orderedList' | 'taskList';
+export interface UseListConfig {
+    editor: any;
+    type: ListType;
+    hideWhenUnavailable?: boolean;
+    onToggled?: () => void;
+}
+export declare const listIcons: any;
+export declare const listLabels: Record<ListType, string>;
+export declare const LIST_SHORTCUT_KEYS: Record<ListType, string>;
+export declare function canToggleList(editor: Editor | null, type: ListType, turnInto?: boolean): boolean;
+export declare function isListActive(editor: Editor | null, type: ListType): boolean;
+export declare function toggleList(editor: Editor | null, type: ListType): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: ListType;
+    hideWhenUnavailable: boolean;
+}): boolean;
+export declare function useList(config: UseListConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleToggle: () => void;
+    canToggle: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: any;
+};

package/lib/rich-text-editor/menu-system/hooks/use-list.js

@@ -0,0 +1,205 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  LIST_SHORTCUT_KEYS: () => LIST_SHORTCUT_KEYS,
+  canToggleList: () => canToggleList,
+  isListActive: () => isListActive,
+  listIcons: () => listIcons,
+  listLabels: () => listLabels,
+  shouldShowButton: () => shouldShowButton,
+  toggleList: () => toggleList,
+  useList: () => useList
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_state = require("@tiptap/pm/state");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var import_icons = require("../icons");
+const listIcons = {
+  bulletList: import_icons.ListIcon,
+  orderedList: import_icons.ListOrderedIcon,
+  taskList: import_icons.ListTodoIcon
+};
+const listLabels = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
+};
+const LIST_SHORTCUT_KEYS = {
+  bulletList: "mod+shift+8",
+  orderedList: "mod+shift+7",
+  taskList: "mod+shift+9"
+};
+function canToggleList(editor, type, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!(0, import_tiptap_utils.isNodeInSchema)(type, editor) || (0, import_tiptap_utils.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    switch (type) {
+      case "bulletList":
+        return editor.can().toggleBulletList();
+      case "orderedList":
+        return editor.can().toggleOrderedList();
+      case "taskList":
+        return editor.can().toggleList("taskList", "taskItem");
+      default:
+        return false;
+    }
+  }
+  try {
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof import_state.TextSelection) {
+      const pos = (_a = (0, import_tiptap_utils.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_tiptap_utils.isValidPosition)(pos))
+        return false;
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function isListActive(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList");
+    case "orderedList":
+      return editor.isActive("orderedList");
+    case "taskList":
+      return editor.isActive("taskList");
+    default:
+      return false;
+  }
+}
+function toggleList(editor, type) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggleList(editor, type))
+    return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof import_state.TextSelection) {
+      const pos = (_a = (0, import_tiptap_utils.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_tiptap_utils.isValidPosition)(pos))
+        return false;
+      tr = tr.setSelection(import_state.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state.NodeSelection) {
+      chain = chain.clearNodes();
+    }
+    if (editor.isActive(type)) {
+      chain.liftListItem("listItem").lift("bulletList").lift("orderedList").lift("taskList").run();
+    } else {
+      const toggleMap = {
+        bulletList: () => chain.toggleBulletList(),
+        orderedList: () => chain.toggleOrderedList(),
+        taskList: () => chain.toggleList("taskList", "taskItem")
+      };
+      const toggle = toggleMap[type];
+      if (!toggle)
+        return false;
+      toggle().run();
+    }
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function shouldShowButton(props) {
+  const { editor, type, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!(0, import_tiptap_utils.isNodeInSchema)(type, editor))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleList(editor, type);
+  }
+  return true;
+}
+function useList(config) {
+  const { type, hideWhenUnavailable = false, onToggled } = config;
+  const isVisible = (0, import_vue.ref)(true);
+  const isActive = (0, import_vue.ref)(false);
+  const canToggleState = (0, import_vue.ref)(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggleState.value = false;
+      return;
+    }
+    isActive.value = isListActive(editor, type);
+    canToggleState.value = canToggleList(editor, type);
+    isVisible.value = shouldShowButton({ editor, type, hideWhenUnavailable });
+  };
+  (0, import_vue.watch)(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      (0, import_vue.onBeforeUnmount)(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleToggle = () => {
+    const editor = getEditor();
+    if (toggleList(editor, type)) {
+      onToggled == null ? void 0 : onToggled();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: listLabels[type],
+    shortcutKeys: LIST_SHORTCUT_KEYS[type],
+    Icon: listIcons[type]
+  };
+}

package/lib/rich-text-editor/menu-system/hooks/use-mark.d.ts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/vue-3';
+export type Mark = 'bold' | 'italic' | 'strike' | 'code' | 'underline' | 'superscript' | 'subscript';
+export interface UseMarkConfig {
+    editor: any;
+    type: Mark;
+    hideWhenUnavailable?: boolean;
+    onToggled?: () => void;
+}
+export declare const markIcons: any;
+export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
+export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
+export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
+export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
+export declare function useMark(config: UseMarkConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleMark: () => boolean;
+    canToggle: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: any;
+};

package/lib/rich-text-editor/menu-system/hooks/use-mark.js

@@ -0,0 +1,138 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  MARK_SHORTCUT_KEYS: () => MARK_SHORTCUT_KEYS,
+  canToggleMark: () => canToggleMark,
+  isMarkActive: () => isMarkActive,
+  markIcons: () => markIcons,
+  toggleMark: () => toggleMark,
+  useMark: () => useMark
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_tiptap_utils = require("../utils/tiptap-utils");
+var Icons = __toESM(require("../icons"));
+const markIcons = {
+  bold: Icons.BoldIcon,
+  italic: Icons.ItalicIcon,
+  underline: Icons.UnderlineIcon,
+  strike: Icons.StrikeIcon,
+  code: Icons.Code2Icon,
+  superscript: Icons.SuperscriptIcon,
+  subscript: Icons.SubscriptIcon
+};
+const MARK_SHORTCUT_KEYS = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,"
+};
+function canToggleMark(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!(0, import_tiptap_utils.isMarkInSchema)(type, editor) || (0, import_tiptap_utils.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  return editor.can().toggleMark(type);
+}
+function isMarkActive(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.isActive(type);
+}
+function toggleMark(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggleMark(editor, type))
+    return false;
+  return editor.chain().focus().toggleMark(type).run();
+}
+function useMark(config) {
+  const { type, hideWhenUnavailable = false, onToggled } = config;
+  const isVisible = (0, import_vue.ref)(true);
+  const isActive = (0, import_vue.ref)(false);
+  const canToggle = (0, import_vue.ref)(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggle.value = false;
+      return;
+    }
+    isActive.value = isMarkActive(editor, type);
+    canToggle.value = canToggleMark(editor, type);
+    if (hideWhenUnavailable && !editor.isActive("code")) {
+      isVisible.value = canToggle.value;
+    } else {
+      isVisible.value = (0, import_tiptap_utils.isMarkInSchema)(type, editor);
+    }
+  };
+  const handleMark = () => {
+    const editor = getEditor();
+    if (!editor)
+      return false;
+    const success = toggleMark(editor, type);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  };
+  (0, import_vue.watch)(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      (0, import_vue.onBeforeUnmount)(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleMark,
+    canToggle,
+    label: type.charAt(0).toUpperCase() + type.slice(1),
+    shortcutKeys: MARK_SHORTCUT_KEYS[type],
+    Icon: markIcons[type] || Icons.BoldIcon
+    // fallback
+  };
+}

package/lib/rich-text-editor/menu-system/hooks/use-menu-navigation.d.ts

@@ -0,0 +1,16 @@
+import type { Editor } from '@tiptap/vue-3';
+type Orientation = 'horizontal' | 'vertical' | 'both';
+interface MenuNavigationOptions<T> {
+    editor?: Editor | null;
+    containerRef?: any;
+    query?: string;
+    items: T[];
+    onSelect?: (item: T) => void;
+    onClose?: () => void;
+    orientation?: Orientation;
+    autoSelectFirstItem?: boolean;
+}
+export declare function useMenuNavigation<T>({ editor, containerRef, query, items, onSelect, onClose, orientation, autoSelectFirstItem, }: MenuNavigationOptions<T>): {
+    selectedIndex: import("vue").Ref<number, number>;
+};
+export {};

package/lib/rich-text-editor/menu-system/hooks/use-menu-navigation.js

@@ -0,0 +1,153 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  useMenuNavigation: () => useMenuNavigation
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+function useMenuNavigation({
+  editor,
+  containerRef,
+  query,
+  items,
+  onSelect,
+  onClose,
+  orientation = "vertical",
+  autoSelectFirstItem = true
+}) {
+  const selectedIndex = (0, import_vue.ref)(autoSelectFirstItem ? 0 : -1);
+  const handleKeyboardNavigation = (event) => {
+    if (!items.length)
+      return false;
+    const moveNext = () => {
+      if (selectedIndex.value === -1) {
+        selectedIndex.value = 0;
+      } else {
+        selectedIndex.value = (selectedIndex.value + 1) % items.length;
+      }
+    };
+    const movePrev = () => {
+      if (selectedIndex.value === -1) {
+        selectedIndex.value = items.length - 1;
+      } else {
+        selectedIndex.value = (selectedIndex.value - 1 + items.length) % items.length;
+      }
+    };
+    switch (event.key) {
+      case "ArrowUp": {
+        if (orientation === "horizontal")
+          return false;
+        event.preventDefault();
+        movePrev();
+        return true;
+      }
+      case "ArrowDown": {
+        if (orientation === "horizontal")
+          return false;
+        event.preventDefault();
+        moveNext();
+        return true;
+      }
+      case "ArrowLeft": {
+        if (orientation === "vertical")
+          return false;
+        event.preventDefault();
+        movePrev();
+        return true;
+      }
+      case "ArrowRight": {
+        if (orientation === "vertical")
+          return false;
+        event.preventDefault();
+        moveNext();
+        return true;
+      }
+      case "Tab": {
+        event.preventDefault();
+        if (event.shiftKey) {
+          movePrev();
+        } else {
+          moveNext();
+        }
+        return true;
+      }
+      case "Home": {
+        event.preventDefault();
+        selectedIndex.value = 0;
+        return true;
+      }
+      case "End": {
+        event.preventDefault();
+        selectedIndex.value = items.length - 1;
+        return true;
+      }
+      case "Enter": {
+        if (event.isComposing)
+          return false;
+        event.preventDefault();
+        if (selectedIndex.value !== -1 && items[selectedIndex.value]) {
+          onSelect == null ? void 0 : onSelect(items[selectedIndex.value]);
+        }
+        return true;
+      }
+      case "Escape": {
+        event.preventDefault();
+        onClose == null ? void 0 : onClose();
+        return true;
+      }
+      default:
+        return false;
+    }
+  };
+  const bindEvents = () => {
+    let targetElement = null;
+    if (editor) {
+      targetElement = editor.view.dom;
+    } else if (containerRef == null ? void 0 : containerRef.value) {
+      targetElement = containerRef.value;
+    }
+    if (targetElement) {
+      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
+    }
+    return targetElement;
+  };
+  const unbindEvents = (element) => {
+    if (element) {
+      element.removeEventListener("keydown", handleKeyboardNavigation, true);
+    }
+  };
+  let mountedElement = null;
+  (0, import_vue.onMounted)(() => {
+    mountedElement = bindEvents();
+  });
+  (0, import_vue.onBeforeUnmount)(() => {
+    unbindEvents(mountedElement);
+  });
+  (0, import_vue.watch)(
+    () => query,
+    () => {
+      if (query) {
+        selectedIndex.value = autoSelectFirstItem ? 0 : -1;
+      }
+    }
+  );
+  return {
+    selectedIndex
+  };
+}