@rotki/ui-library 2.12.2 → 2.13.1

package/dist/composables/forms/auto-complete/keyboard-navigation.d.ts

@@ -1,20 +1,25 @@
-import type { MaybeRef, Ref } from 'vue';
+import type { MaybeRef, Ref, TemplateRef } from 'vue';
 export interface UseAutoCompleteKeyboardNavigationOptions {
+    /** Whether multiple items can be selected. */
     multiple: MaybeRef<boolean>;
+    /** Whether custom (free-text) values are allowed. */
     customValue: MaybeRef<boolean>;
+    /** Whether selected values are displayed as chips. */
+    chips: MaybeRef<boolean>;
 }
 export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     internalSearch: Ref<string>;
     value: Ref<TItem[]>;
     filteredOptions: Ref<TItem[]>;
-    options: Ref<TItem[]>;
     isOpen: Ref<boolean>;
     highlightedIndex: Ref<number>;
     searchInputFocused: Ref<boolean>;
     applyHighlighted: () => void;
     clear: () => void;
+    removeValue: (item: TItem) => void;
     setSearchAsValue: () => void;
-    activator: Ref<HTMLElement | undefined>;
+    getText: (item: TItem) => string | undefined;
+    activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;
 }
 export interface UseAutoCompleteKeyboardNavigationReturn {
     focusedValueIndex: Ref<number>;

package/dist/composables/forms/auto-complete/keyboard-navigation.js

@@ -42,8 +42,7 @@ function useAutoCompleteKeyboardNavigation(options, deps) {
         if (typeof highlightedOption === "string") {
           hasExactMatch = highlightedOption === internalSearch;
         } else if (highlightedOption && typeof highlightedOption === "object") {
-          const label = highlightedOption.label || highlightedOption.value || "";
-          hasExactMatch = label === internalSearch;
+          hasExactMatch = (deps.getText(highlightedOption) ?? "") === internalSearch;
         }
       }
       if (!hasExactMatch) {
@@ -89,10 +88,17 @@ function useAutoCompleteKeyboardNavigation(options, deps) {
     const total = value.length;
     const multiple = get(options.multiple);
     if (!internalSearch && total > 0) {
-      if (multiple)
-        set(focusedValueIndex, total - 1);
-      else
+      if (multiple) {
+        if (get(options.chips)) {
+          set(focusedValueIndex, total - 1);
+        } else {
+          const lastItem = value[total - 1];
+          if (lastItem !== void 0)
+            deps.removeValue(lastItem);
+        }
+      } else {
         deps.clear();
+      }
     }
   }
   watch(deps.value, () => {

package/dist/composables/forms/auto-complete/keyboard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.js","sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRef, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  multiple: MaybeRef<boolean>;\n  customValue: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  options: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  setSearchAsValue: () => void;\n  activator: Ref<HTMLElement | undefined>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n  const chipElementsCache = ref<Map<number, HTMLElement>>(new Map());\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = get(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const isOpen = get(deps.isOpen);\n    const customValue = get(options.customValue);\n    const multiple = get(options.multiple);\n    const value = get(deps.value);\n    const internalSearch = get(deps.internalSearch);\n\n    // Check if we should use custom value\n    if (customValue && internalSearch && isOpen) {\n      // Check if any option exactly matches the search term\n      let hasExactMatch = false;\n\n      if (highlightedIndex > -1 && highlightedIndex < filteredOptions.length) {\n        const highlightedOption = filteredOptions[highlightedIndex];\n        if (typeof highlightedOption === 'string') {\n          hasExactMatch = highlightedOption === internalSearch;\n        }\n        else if (highlightedOption && typeof highlightedOption === 'object') {\n          const label = (highlightedOption as any).label || (highlightedOption as any).value || '';\n          hasExactMatch = label === internalSearch;\n        }\n      }\n\n      // If no exact match with highlighted option, use custom value\n      if (!hasExactMatch) {\n        deps.setSearchAsValue();\n        if (!multiple)\n          set(deps.isOpen, false);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    if (filteredOptions.length > 0 && highlightedIndex > -1 && isOpen) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n    else if (filteredOptions.length === 0 && customValue && internalSearch) {\n      deps.setSearchAsValue();\n      if (!multiple)\n        set(deps.isOpen, false);\n      event.preventDefault();\n    }\n    else if (!isOpen && value.length === 0) {\n      set(deps.isOpen, true);\n      event.preventDefault();\n    }\n    else {\n      const activator = get(deps.activator);\n      const form = activator?.closest('form');\n      if (form) {\n        form.dispatchEvent(new Event('submit'));\n      }\n    }\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = get(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = get(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple)\n        set(focusedValueIndex, total - 1);\n      else\n        deps.clear();\n    }\n  }\n\n  // Watch value changes to reset focused index and clear cache\n  watch(deps.value, () => {\n    setValueFocus(-1);\n    get(chipElementsCache).clear();\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = get(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const cache = get(chipElementsCache);\n      let activeChip = cache.get(index);\n\n      if (!activeChip) {\n        const activator = get(deps.activator);\n        const element = activator?.querySelector(`[data-index=\"${index}\"]`) as HTMLElement | null;\n        if (element) {\n          activeChip = element;\n          cache.set(index, element);\n        }\n      }\n\n      if (activeChip && 'focus' in activeChip && typeof activeChip.focus === 'function')\n        activeChip.focus();\n    });\n  });\n\n  return {\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"keyboard-navigation.js","sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRef, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRef<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRef<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n  const chipElementsCache = ref<Map<number, HTMLElement>>(new Map());\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = get(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const isOpen = get(deps.isOpen);\n    const customValue = get(options.customValue);\n    const multiple = get(options.multiple);\n    const value = get(deps.value);\n    const internalSearch = get(deps.internalSearch);\n\n    // Check if we should use custom value\n    if (customValue && internalSearch && isOpen) {\n      // Check if any option exactly matches the search term\n      let hasExactMatch = false;\n\n      if (highlightedIndex > -1 && highlightedIndex < filteredOptions.length) {\n        const highlightedOption = filteredOptions[highlightedIndex];\n        if (typeof highlightedOption === 'string') {\n          hasExactMatch = highlightedOption === internalSearch;\n        }\n        else if (highlightedOption && typeof highlightedOption === 'object') {\n          hasExactMatch = (deps.getText(highlightedOption) ?? '') === internalSearch;\n        }\n      }\n\n      // If no exact match with highlighted option, use custom value\n      if (!hasExactMatch) {\n        deps.setSearchAsValue();\n        if (!multiple)\n          set(deps.isOpen, false);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    if (filteredOptions.length > 0 && highlightedIndex > -1 && isOpen) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n    else if (filteredOptions.length === 0 && customValue && internalSearch) {\n      deps.setSearchAsValue();\n      if (!multiple)\n        set(deps.isOpen, false);\n      event.preventDefault();\n    }\n    else if (!isOpen && value.length === 0) {\n      set(deps.isOpen, true);\n      event.preventDefault();\n    }\n    else {\n      const activator = get(deps.activator);\n      const form = activator?.closest('form');\n      if (form) {\n        form.dispatchEvent(new Event('submit'));\n      }\n    }\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = get(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = get(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (get(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index and clear cache\n  watch(deps.value, () => {\n    setValueFocus(-1);\n    get(chipElementsCache).clear();\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = get(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const cache = get(chipElementsCache);\n      let activeChip = cache.get(index);\n\n      if (!activeChip) {\n        const activator = get(deps.activator);\n        const element = activator?.querySelector(`[data-index=\"${index}\"]`) as HTMLElement | null;\n        if (element) {\n          activeChip = element;\n          cache.set(index, element);\n        }\n      }\n\n      if (activeChip && 'focus' in activeChip && typeof activeChip.focus === 'function')\n        activeChip.focus();\n    });\n  });\n\n  return {\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/composables/forms/auto-complete/search.d.ts

@@ -1,11 +1,18 @@
 import type { MaybeRef, Ref } from 'vue';
 export interface UseAutoCompleteSearchOptions<TItem> {
+    /** The property used as the unique identifier for each item. */
     keyAttr?: MaybeRef<keyof TItem | undefined>;
+    /** The property used to display text for each item. */
     textAttr?: MaybeRef<keyof TItem | undefined>;
+    /** Whether to disable client-side filtering of options. */
     noFilter?: MaybeRef<boolean>;
+    /** Custom filter function to match items against the search query. */
     filter?: MaybeRef<((item: TItem, queryText: string) => boolean) | undefined>;
+    /** Whether custom (free-text) values are allowed. */
     customValue?: MaybeRef<boolean>;
+    /** Whether to hide the custom value option from the dropdown. */
     hideCustomValue?: MaybeRef<boolean>;
+    /** Whether to return the full item object instead of just the key. */
     returnObject?: MaybeRef<boolean>;
 }
 export interface UseAutoCompleteSearchReturn<TItem> {

package/dist/composables/forms/auto-complete/search.js

@@ -1,16 +1,18 @@
 import { get, set } from "@vueuse/shared";
 import { getTextToken } from "../../../utils/helpers.js";
-import { ref, computed, watch, onUnmounted } from "vue";
+import { shallowRef, computed, watch, onUnmounted } from "vue";
 import { refDebounced } from "@vueuse/core";
 function useAutoCompleteSearch(options, searchModel, opts) {
-  const internalSearch = ref("");
+  const internalSearch = shallowRef("");
   const debouncedInternalSearch = refDebounced(internalSearch, 50);
-  const justOpened = ref(false);
+  const justOpened = shallowRef(false);
+  const MAX_CACHE_SIZE = 500;
   const tokenCache = /* @__PURE__ */ new Map();
   const getCachedTextToken = (text) => {
-    if (tokenCache.has(text)) {
+    if (tokenCache.has(text))
       return tokenCache.get(text);
-    }
+    if (tokenCache.size >= MAX_CACHE_SIZE)
+      tokenCache.clear();
     const token = getTextToken(text);
     tokenCache.set(text, token);
     return token;
@@ -28,10 +30,10 @@ function useAutoCompleteSearch(options, searchModel, opts) {
     const usedFilter = filter || ((item) => {
       if (!item)
         return false;
-      const keywords = [keyAttr ? getCachedTextToken(item[keyAttr]) : item.toString()];
+      const keywords = [getCachedTextToken(keyAttr ? String(item[keyAttr]) : item.toString())];
       if (textAttr && typeof item === "object")
-        keywords.push(getCachedTextToken(item[textAttr]));
-      return keywords.some((keyword) => getCachedTextToken(keyword).includes(searchToken));
+        keywords.push(getCachedTextToken(String(item[textAttr])));
+      return keywords.some((keyword) => keyword.includes(searchToken));
     });
     const filtered = optionsValue.filter((item) => usedFilter(item, search));
     const customValue = get(opts.customValue);

package/dist/composables/forms/auto-complete/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../../src/composables/forms/auto-complete/search.ts"],"sourcesContent":["import type { MaybeRef, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { getTextToken } from '@/utils/helpers';\n\nexport interface UseAutoCompleteSearchOptions<TItem> {\n  keyAttr?: MaybeRef<keyof TItem | undefined>;\n  textAttr?: MaybeRef<keyof TItem | undefined>;\n  noFilter?: MaybeRef<boolean>;\n  filter?: MaybeRef<((item: TItem, queryText: string) => boolean) | undefined>;\n  customValue?: MaybeRef<boolean>;\n  hideCustomValue?: MaybeRef<boolean>;\n  returnObject?: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteSearchReturn<TItem> {\n  internalSearch: Ref<string>;\n  debouncedInternalSearch: Readonly<Ref<string>>;\n  filteredOptions: Readonly<Ref<TItem[]>>;\n  justOpened: Ref<boolean>;\n  updateInternalSearch: (value?: string) => void;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n}\n\nexport function useAutoCompleteSearch<TItem>(\n  options: MaybeRef<TItem[]>,\n  searchModel: Ref<string>,\n  opts: UseAutoCompleteSearchOptions<TItem>,\n): UseAutoCompleteSearchReturn<TItem> {\n  const internalSearch = ref<string>('');\n  const debouncedInternalSearch = refDebounced(internalSearch, 50);\n  const justOpened = ref<boolean>(false);\n\n  // Memoize token computation to avoid repeated string processing\n  const tokenCache = new Map<string, string>();\n  const getCachedTextToken = (text: string): string => {\n    if (tokenCache.has(text)) {\n      return tokenCache.get(text)!;\n    }\n    const token = getTextToken(text);\n    tokenCache.set(text, token);\n    return token;\n  };\n\n  const filteredOptions = computed<TItem[]>(() => {\n    const search = get(debouncedInternalSearch);\n    const optionsValue = get(options);\n\n    const noFilter = get(opts.noFilter);\n    if (noFilter || !search || get(justOpened))\n      return optionsValue;\n\n    const keyAttr = get(opts.keyAttr);\n    const textAttr = get(opts.textAttr);\n    const filter = get(opts.filter);\n\n    // Cache the search token once\n    const searchToken = getCachedTextToken(search);\n\n    const usedFilter = filter || ((item) => {\n      if (!item)\n        return false;\n\n      const keywords: string[] = [keyAttr ? getCachedTextToken((item as any)[keyAttr]) : item.toString()];\n\n      if (textAttr && typeof item === 'object')\n        keywords.push(getCachedTextToken((item as any)[textAttr]));\n\n      return keywords.some(keyword => getCachedTextToken(keyword).includes(searchToken));\n    });\n\n    const filtered = optionsValue.filter(item => usedFilter(item, search));\n\n    const customValue = get(opts.customValue);\n    const hideCustomValue = get(opts.hideCustomValue);\n    if (!customValue || hideCustomValue || !search) {\n      return filtered;\n    }\n\n    // Use a more efficient check for custom value inclusion\n    const isCustomValueIncluded = filtered.some((item) => {\n      if (!item) {\n        return false;\n      }\n\n      const val = textAttr ? (item as any)[textAttr] : item.toString();\n      return val === search;\n    });\n\n    if (isCustomValueIncluded) {\n      return filtered;\n    }\n\n    return [textValueToProperValue(search, {\n      keyAttr,\n      returnObject: get(opts.returnObject),\n      textAttr,\n    }), ...filtered];\n  });\n\n  function textValueToProperValue(val: any, options: { keyAttr?: keyof TItem; textAttr?: keyof TItem; returnObject?: boolean }): TItem {\n    const { keyAttr, returnObject, textAttr } = options;\n    if (!keyAttr || returnObject)\n      return val;\n\n    return {\n      [keyAttr]: val,\n      ...(\n        textAttr\n          ? { [textAttr]: val }\n          : {}\n      ),\n    } as TItem;\n  }\n\n  function updateInternalSearch(value: string = ''): void {\n    set(searchModel, value);\n    set(internalSearch, value);\n  }\n\n  watch(searchModel, (search) => {\n    set(internalSearch, search);\n  }, { immediate: true });\n\n  // Clear token cache when component unmounts to prevent memory leaks\n  onUnmounted(() => {\n    tokenCache.clear();\n  });\n\n  return {\n    debouncedInternalSearch,\n    filteredOptions,\n    internalSearch,\n    justOpened,\n    textValueToProperValue: (val: any, returnObjectOverride: boolean = false) => textValueToProperValue(val, {\n      keyAttr: get(opts.keyAttr),\n      returnObject: returnObjectOverride || get(opts.returnObject),\n      textAttr: get(opts.textAttr),\n    }),\n    updateInternalSearch,\n  };\n}\n"],"names":["options"],"mappings":"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"}
+{"version":3,"file":"search.js","sources":["../../../../src/composables/forms/auto-complete/search.ts"],"sourcesContent":["import type { MaybeRef, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { getTextToken } from '@/utils/helpers';\n\nexport interface UseAutoCompleteSearchOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRef<keyof TItem | undefined>;\n  /** The property used to display text for each item. */\n  textAttr?: MaybeRef<keyof TItem | undefined>;\n  /** Whether to disable client-side filtering of options. */\n  noFilter?: MaybeRef<boolean>;\n  /** Custom filter function to match items against the search query. */\n  filter?: MaybeRef<((item: TItem, queryText: string) => boolean) | undefined>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRef<boolean>;\n  /** Whether to hide the custom value option from the dropdown. */\n  hideCustomValue?: MaybeRef<boolean>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteSearchReturn<TItem> {\n  internalSearch: Ref<string>;\n  debouncedInternalSearch: Readonly<Ref<string>>;\n  filteredOptions: Readonly<Ref<TItem[]>>;\n  justOpened: Ref<boolean>;\n  updateInternalSearch: (value?: string) => void;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n}\n\nexport function useAutoCompleteSearch<TItem>(\n  options: MaybeRef<TItem[]>,\n  searchModel: Ref<string>,\n  opts: UseAutoCompleteSearchOptions<TItem>,\n): UseAutoCompleteSearchReturn<TItem> {\n  const internalSearch = shallowRef<string>('');\n  const debouncedInternalSearch = refDebounced(internalSearch, 50);\n  const justOpened = shallowRef<boolean>(false);\n\n  // Memoize token computation to avoid repeated string processing\n  const MAX_CACHE_SIZE = 500;\n  const tokenCache = new Map<string, string>();\n  const getCachedTextToken = (text: string): string => {\n    if (tokenCache.has(text))\n      return tokenCache.get(text)!;\n\n    if (tokenCache.size >= MAX_CACHE_SIZE)\n      tokenCache.clear();\n\n    const token = getTextToken(text);\n    tokenCache.set(text, token);\n    return token;\n  };\n\n  const filteredOptions = computed<TItem[]>(() => {\n    const search = get(debouncedInternalSearch);\n    const optionsValue = get(options);\n\n    const noFilter = get(opts.noFilter);\n    if (noFilter || !search || get(justOpened))\n      return optionsValue;\n\n    const keyAttr = get(opts.keyAttr);\n    const textAttr = get(opts.textAttr);\n    const filter = get(opts.filter);\n\n    // Cache the search token once\n    const searchToken = getCachedTextToken(search);\n\n    const usedFilter = filter || ((item) => {\n      if (!item)\n        return false;\n\n      const keywords: string[] = [getCachedTextToken(keyAttr ? String((item as any)[keyAttr]) : item.toString())];\n\n      if (textAttr && typeof item === 'object')\n        keywords.push(getCachedTextToken(String((item as any)[textAttr])));\n\n      return keywords.some(keyword => keyword.includes(searchToken));\n    });\n\n    const filtered = optionsValue.filter(item => usedFilter(item, search));\n\n    const customValue = get(opts.customValue);\n    const hideCustomValue = get(opts.hideCustomValue);\n    if (!customValue || hideCustomValue || !search) {\n      return filtered;\n    }\n\n    // Use a more efficient check for custom value inclusion\n    const isCustomValueIncluded = filtered.some((item) => {\n      if (!item) {\n        return false;\n      }\n\n      const val = textAttr ? (item as any)[textAttr] : item.toString();\n      return val === search;\n    });\n\n    if (isCustomValueIncluded) {\n      return filtered;\n    }\n\n    return [textValueToProperValue(search, {\n      keyAttr,\n      returnObject: get(opts.returnObject),\n      textAttr,\n    }), ...filtered];\n  });\n\n  function textValueToProperValue(val: any, options: { keyAttr?: keyof TItem; textAttr?: keyof TItem; returnObject?: boolean }): TItem {\n    const { keyAttr, returnObject, textAttr } = options;\n    if (!keyAttr || returnObject)\n      return val;\n\n    return {\n      [keyAttr]: val,\n      ...(\n        textAttr\n          ? { [textAttr]: val }\n          : {}\n      ),\n    } as TItem;\n  }\n\n  function updateInternalSearch(value: string = ''): void {\n    set(searchModel, value);\n    set(internalSearch, value);\n  }\n\n  watch(searchModel, (search) => {\n    set(internalSearch, search);\n  }, { immediate: true });\n\n  // Clear token cache when component unmounts to prevent memory leaks\n  onUnmounted(() => {\n    tokenCache.clear();\n  });\n\n  return {\n    debouncedInternalSearch,\n    filteredOptions,\n    internalSearch,\n    justOpened,\n    textValueToProperValue: (val: any, returnObjectOverride: boolean = false) => textValueToProperValue(val, {\n      keyAttr: get(opts.keyAttr),\n      returnObject: returnObjectOverride || get(opts.returnObject),\n      textAttr: get(opts.textAttr),\n    }),\n    updateInternalSearch,\n  };\n}\n"],"names":["options"],"mappings":"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"}

package/dist/composables/forms/auto-complete/value.d.ts

@@ -1,7 +1,10 @@
 import type { ComputedRef, MaybeRef, Ref } from 'vue';
 export interface UseAutoCompleteValueOptions<TItem> {
+    /** The property used as the unique identifier for each item. */
     keyAttr?: MaybeRef<keyof TItem | undefined>;
+    /** Whether to return the full item object instead of just the key. */
     returnObject?: MaybeRef<boolean>;
+    /** Whether custom (free-text) values are allowed. */
     customValue?: MaybeRef<boolean>;
 }
 export interface UseAutoCompleteValueReturn<TItem> {
@@ -14,6 +17,7 @@ export interface UseAutoCompleteValueDeps<TItem> {
     textValueToProperValue: (val: any, returnObject?: boolean) => TItem;
     shouldApplyValueAsSearch: MaybeRef<boolean>;
     isOpen: MaybeRef<boolean>;
+    multiple: MaybeRef<boolean>;
     updateInternalSearch: (value?: string) => void;
 }
 export declare function useAutoCompleteValue<TValue, TItem>(modelValue: Ref<TValue | undefined>, options: MaybeRef<TItem[]>, opts: UseAutoCompleteValueOptions<TItem>, deps: UseAutoCompleteValueDeps<TItem>): UseAutoCompleteValueReturn<TItem>;

package/dist/composables/forms/auto-complete/value.js

@@ -1,8 +1,7 @@
 import { get, set } from "@vueuse/shared";
 import { assert } from "../../../utils/assert.js";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 function useAutoCompleteValue(modelValue, options, opts, deps) {
-  const multiple = computed(() => Array.isArray(get(modelValue)));
   const optionsMap = computed(() => {
     const map = /* @__PURE__ */ new Map();
     const optionsData = get(options);
@@ -12,7 +11,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
     return map;
   });
   function convertModelValueToArray(modelValueData) {
-    if (!modelValueData)
+    if (modelValueData === null || modelValueData === void 0)
       return [];
     return Array.isArray(modelValueData) ? modelValueData : [modelValueData];
   }
@@ -23,7 +22,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
     for (const val of valueArray) {
       const identifier = deps.getIdentifier(val);
       const inOptions = optionsMapData.get(identifier);
-      if (inOptions) {
+      if (inOptions !== void 0) {
         filtered[index++] = inOptions;
       } else if (customValue) {
         filtered[index++] = deps.textValueToProperValue(val, returnObject);
@@ -38,7 +37,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
     let index = 0;
     for (const val of valueArray) {
       const inOptions = optionsMapData.get(val);
-      if (inOptions) {
+      if (inOptions !== void 0) {
         filtered[index++] = inOptions;
       } else if (customValue) {
         filtered[index++] = deps.textValueToProperValue(val, returnObject);
@@ -47,34 +46,19 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
     filtered.length = index;
     return filtered;
   }
-  function processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue, shouldUpdateInternalSearch) {
+  function processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue) {
     const multipleValue = Array.isArray(modelValueData);
     const valueArray = convertModelValueToArray(modelValueData);
     const filtered = filterValuesByOptions(valueArray, optionsMapData, customValue, returnObject);
-    if (multipleValue || filtered.length === 0) {
-      if (shouldUpdateInternalSearch)
-        deps.updateInternalSearch();
+    if (multipleValue || filtered.length === 0)
       return filtered;
-    }
     const val = filtered[0];
     assert(val);
-    if (shouldUpdateInternalSearch)
-      deps.updateInternalSearch(deps.getText(val));
     return [val];
   }
-  function processStandardValue(modelValueData, optionsMapData, returnObject, customValue, shouldUpdateInternalSearch) {
+  function processStandardValue(modelValueData, optionsMapData, returnObject, customValue) {
     const valueArray = convertModelValueToArray(modelValueData);
-    const filtered = filterValuesByIdentifier(valueArray, optionsMapData, customValue, returnObject);
-    if (shouldUpdateInternalSearch) {
-      if (filtered.length > 0) {
-        const firstItem = filtered[0];
-        assert(firstItem);
-        deps.updateInternalSearch(deps.getText(firstItem));
-      } else {
-        deps.updateInternalSearch();
-      }
-    }
-    return filtered;
+    return filterValuesByIdentifier(valueArray, optionsMapData, customValue, returnObject);
   }
   function onUpdateModelValue(value2) {
     set(modelValue, value2);
@@ -83,7 +67,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
     const keyAttr = get(opts.keyAttr);
     const returnObject = get(opts.returnObject);
     const selection = keyAttr && !returnObject ? selected.map((item) => item[keyAttr]) : selected;
-    if (get(multiple))
+    if (get(deps.multiple))
       return onUpdateModelValue(selection);
     if (selection.length === 0)
       return onUpdateModelValue(void 0);
@@ -96,28 +80,26 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
       const returnObject = get(opts.returnObject) ?? false;
       const customValue = get(opts.customValue) ?? false;
       const optionsMapData = get(optionsMap);
-      const shouldUpdateInternalSearch = get(deps.shouldApplyValueAsSearch) && !get(deps.isOpen);
-      if (keyAttr && returnObject) {
-        return processReturnObjectValue(
-          modelValueData,
-          optionsMapData,
-          returnObject,
-          customValue,
-          shouldUpdateInternalSearch
-        );
-      }
-      return processStandardValue(
-        modelValueData,
-        optionsMapData,
-        returnObject,
-        customValue,
-        shouldUpdateInternalSearch
-      );
+      if (keyAttr && returnObject)
+        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);
+      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);
     },
     set: (selected) => {
       setSelected(selected);
     }
   });
+  watch([modelValue, () => get(deps.isOpen)], () => {
+    if (get(deps.isOpen) || !get(deps.shouldApplyValueAsSearch))
+      return;
+    const currentValue = get(value);
+    if (get(deps.multiple) || currentValue.length === 0) {
+      deps.updateInternalSearch();
+    } else {
+      const firstItem = currentValue[0];
+      assert(firstItem);
+      deps.updateInternalSearch(deps.getText(firstItem));
+    }
+  }, { immediate: true });
   return {
     setSelected,
     value

package/dist/composables/forms/auto-complete/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  keyAttr?: MaybeRef<keyof TItem | undefined>;\n  returnObject?: MaybeRef<boolean>;\n  customValue?: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  isOpen: MaybeRef<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>,\n  options: MaybeRef<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  const multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = get(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (!modelValueData)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValuesByOptions(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    filtered.length = valueArray.length; // Pre-allocate array size\n    let index = 0;\n\n    for (const val of valueArray) {\n      const identifier = deps.getIdentifier(val);\n      const inOptions = optionsMapData.get(identifier);\n\n      if (inOptions) {\n        filtered[index++] = inOptions;\n      }\n      else if (customValue) {\n        filtered[index++] = deps.textValueToProperValue(val, returnObject);\n      }\n    }\n\n    filtered.length = index; // Trim to actual size\n    return filtered;\n  }\n\n  function filterValuesByIdentifier(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    filtered.length = valueArray.length; // Pre-allocate array size\n    let index = 0;\n\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(val);\n\n      if (inOptions) {\n        filtered[index++] = inOptions;\n      }\n      else if (customValue) {\n        filtered[index++] = deps.textValueToProperValue(val, returnObject);\n      }\n    }\n\n    filtered.length = index; // Trim to actual size\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n    shouldUpdateInternalSearch: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValuesByOptions(valueArray, optionsMapData, customValue, returnObject);\n\n    if (multipleValue || filtered.length === 0) {\n      if (shouldUpdateInternalSearch)\n        deps.updateInternalSearch();\n      return filtered;\n    }\n\n    const val = filtered[0];\n    assert(val);\n    if (shouldUpdateInternalSearch)\n      deps.updateInternalSearch(deps.getText(val));\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n    shouldUpdateInternalSearch: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValuesByIdentifier(valueArray, optionsMapData, customValue, returnObject);\n\n    if (shouldUpdateInternalSearch) {\n      if (filtered.length > 0) {\n        const firstItem = filtered[0];\n        assert(firstItem);\n        deps.updateInternalSearch(deps.getText(firstItem));\n      }\n      else {\n        deps.updateInternalSearch();\n      }\n    }\n\n    return filtered;\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = get(opts.keyAttr);\n    const returnObject = get(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (get(multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = get(opts.keyAttr);\n      const returnObject = get(opts.returnObject) ?? false;\n      const customValue = get(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n      const shouldUpdateInternalSearch = get(deps.shouldApplyValueAsSearch) && !get(deps.isOpen);\n\n      if (keyAttr && returnObject) {\n        return processReturnObjectValue(\n          modelValueData,\n          optionsMapData,\n          returnObject,\n          customValue,\n          shouldUpdateInternalSearch,\n        );\n      }\n\n      return processStandardValue(\n        modelValueData,\n        optionsMapData,\n        returnObject,\n        customValue,\n        shouldUpdateInternalSearch,\n      );\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"value.js","sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRef<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRef<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  isOpen: MaybeRef<boolean>;\n  multiple: MaybeRef<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>,\n  options: MaybeRef<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = get(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValuesByOptions(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    filtered.length = valueArray.length; // Pre-allocate array size\n    let index = 0;\n\n    for (const val of valueArray) {\n      const identifier = deps.getIdentifier(val);\n      const inOptions = optionsMapData.get(identifier);\n\n      if (inOptions !== undefined) {\n        filtered[index++] = inOptions;\n      }\n      else if (customValue) {\n        filtered[index++] = deps.textValueToProperValue(val, returnObject);\n      }\n    }\n\n    filtered.length = index; // Trim to actual size\n    return filtered;\n  }\n\n  function filterValuesByIdentifier(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    filtered.length = valueArray.length; // Pre-allocate array size\n    let index = 0;\n\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(val);\n\n      if (inOptions !== undefined) {\n        filtered[index++] = inOptions;\n      }\n      else if (customValue) {\n        filtered[index++] = deps.textValueToProperValue(val, returnObject);\n      }\n    }\n\n    filtered.length = index; // Trim to actual size\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValuesByOptions(valueArray, optionsMapData, customValue, returnObject);\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValuesByIdentifier(valueArray, optionsMapData, customValue, returnObject);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = get(opts.keyAttr);\n    const returnObject = get(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (get(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = get(opts.keyAttr);\n      const returnObject = get(opts.returnObject) ?? false;\n      const customValue = get(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n\n      if (keyAttr && returnObject)\n        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Sync search text when menu is closed and value changes\n  watch([modelValue, () => get(deps.isOpen)], () => {\n    if (get(deps.isOpen) || !get(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (get(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"names":["value"],"mappings":"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"}

package/dist/composables/forms/use-label-with-quote.d.ts

@@ -0,0 +1,2 @@
+import type { ComputedRef } from 'vue';
+export declare function useLabelWithQuote(label: () => string, required: () => boolean): ComputedRef<string>;

package/dist/composables/forms/use-label-with-quote.js

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+function useLabelWithQuote(label, required) {
+  return computed(() => {
+    const labelVal = label();
+    if (!labelVal)
+      return '"\\200B"';
+    const asterisk = required() ? "﹡" : "";
+    return `'  ${labelVal}${asterisk}  '`;
+  });
+}
+export {
+  useLabelWithQuote
+};
+//# sourceMappingURL=use-label-with-quote.js.map

package/dist/composables/forms/use-label-with-quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-label-with-quote.js","sources":["../../../src/composables/forms/use-label-with-quote.ts"],"sourcesContent":["import type { ComputedRef } from 'vue';\n\nexport function useLabelWithQuote(\n  label: () => string,\n  required: () => boolean,\n): ComputedRef<string> {\n  return computed<string>(() => {\n    const labelVal = label();\n    if (!labelVal)\n      return '\"\\\\200B\"';\n\n    const asterisk = required() ? '﹡' : '';\n    return `'  ${labelVal}${asterisk}  '`;\n  });\n}\n"],"names":[],"mappings":";AAEO,SAAS,kBACd,OACA,UACqB;AACrB,SAAO,SAAiB,MAAM;AAC5B,UAAM,WAAW,MAAA;AACjB,QAAI,CAAC;AACH,aAAO;AAET,UAAM,WAAW,aAAa,MAAM;AACpC,WAAO,MAAM,QAAQ,GAAG,QAAQ;AAAA,EAClC,CAAC;AACH;"}

package/dist/composables/forms/use-prepend-append-width.d.ts

@@ -0,0 +1,6 @@
+import type { Ref, ShallowRef } from 'vue';
+export interface PrependAppendWidth {
+    prependWidth: Ref<string>;
+    appendWidth: Ref<string>;
+}
+export declare function usePrependAppendWidth(prepend: Readonly<ShallowRef<HTMLDivElement | null>>, append: Readonly<ShallowRef<HTMLDivElement | null>>, offset?: number): PrependAppendWidth;

package/dist/composables/forms/use-prepend-append-width.js

@@ -0,0 +1,25 @@
+import { assert } from "../../utils/assert.js";
+import { shallowRef } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { set } from "@vueuse/shared";
+function usePrependAppendWidth(prepend, append, offset = 0) {
+  const prependWidth = shallowRef("0px");
+  const appendWidth = shallowRef("0px");
+  useResizeObserver(prepend, (entries) => {
+    const [entry] = entries;
+    assert(entry);
+    const { width, left } = entry.contentRect;
+    set(prependWidth, `${width + left + offset}px`);
+  });
+  useResizeObserver(append, (entries) => {
+    const [entry] = entries;
+    assert(entry);
+    const { width, right } = entry.contentRect;
+    set(appendWidth, `${width + right + offset}px`);
+  });
+  return { prependWidth, appendWidth };
+}
+export {
+  usePrependAppendWidth
+};
+//# sourceMappingURL=use-prepend-append-width.js.map

package/dist/composables/forms/use-prepend-append-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prepend-append-width.js","sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n  prependWidth: Ref<string>;\n  appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n  prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n  append: Readonly<ShallowRef<HTMLDivElement | null>>,\n  offset: number = 0,\n): PrependAppendWidth {\n  const prependWidth = shallowRef<string>('0px');\n  const appendWidth = shallowRef<string>('0px');\n\n  useResizeObserver(prepend, (entries) => {\n    const [entry] = entries;\n    assert(entry);\n    const { width, left } = entry.contentRect;\n    set(prependWidth, `${width + left + offset}px`);\n  });\n\n  useResizeObserver(append, (entries) => {\n    const [entry] = entries;\n    assert(entry);\n    const { width, right } = entry.contentRect;\n    set(appendWidth, `${width + right + offset}px`);\n  });\n\n  return { prependWidth, appendWidth };\n}\n"],"names":[],"mappings":";;;;AAQO,SAAS,sBACd,SACA,QACA,SAAiB,GACG;AACpB,QAAM,eAAe,WAAmB,KAAK;AAC7C,QAAM,cAAc,WAAmB,KAAK;AAE5C,oBAAkB,SAAS,CAAC,YAAY;AACtC,UAAM,CAAC,KAAK,IAAI;AAChB,WAAO,KAAK;AACZ,UAAM,EAAE,OAAO,KAAA,IAAS,MAAM;AAC9B,QAAI,cAAc,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,EAChD,CAAC;AAED,oBAAkB,QAAQ,CAAC,YAAY;AACrC,UAAM,CAAC,KAAK,IAAI;AAChB,WAAO,KAAK;AACZ,UAAM,EAAE,OAAO,MAAA,IAAU,MAAM;AAC/B,QAAI,aAAa,GAAG,QAAQ,QAAQ,MAAM,IAAI;AAAA,EAChD,CAAC;AAED,SAAO,EAAE,cAAc,YAAA;AACzB;"}

package/dist/composables/popper.js

@@ -1,6 +1,6 @@
 import { createPopper } from "@popperjs/core";
 import { useResizeObserver, isDefined, unrefElement } from "@vueuse/core";
-import { ref, computed, onMounted, watchEffect } from "vue";
+import { ref, shallowRef, computed, onMounted, watchEffect } from "vue";
 import { useTimeoutManager } from "./timeout-manager.js";
 import { get, set } from "@vueuse/shared";
 const DEFAULT_POPPER_OPTIONS = {
@@ -15,13 +15,13 @@ const DEFAULT_POPPER_OPTIONS = {
   scroll: true,
   strategy: "absolute"
 };
-function usePopper(options, disabled = ref(false), openDelay = ref(0), closeDelay = ref(0), virtualReference) {
+function usePopper(options, disabled = shallowRef(false), openDelay = shallowRef(0), closeDelay = shallowRef(0), virtualReference) {
   const reference = ref();
   const popper = ref();
   const instance = ref();
-  const open = ref(false);
-  const popperEnter = ref(false);
-  const leavePending = ref(false);
+  const open = shallowRef(false);
+  const popperEnter = shallowRef(false);
+  const leavePending = shallowRef(false);
   const openTimeoutManager = useTimeoutManager();
   const closeTimeoutManager = useTimeoutManager();
   const onPopperLeave = () => {
@@ -37,9 +37,12 @@ function usePopper(options, disabled = ref(false), openDelay = ref(0), closeDela
     set(leavePending, false);
     if (!openTimeoutManager.isActive()) {
       set(popperEnter, true);
-      openTimeoutManager.create(() => {
-        set(open, true);
-      }, immediate ? 0 : get(openDelay));
+      openTimeoutManager.create(
+        () => {
+          set(open, true);
+        },
+        immediate ? 0 : get(openDelay)
+      );
     }
   };
   const onClose = (immediate = false) => {
@@ -47,11 +50,14 @@ function usePopper(options, disabled = ref(false), openDelay = ref(0), closeDela
       return;
     openTimeoutManager.clear();
     if (!closeTimeoutManager.isActive()) {
-      closeTimeoutManager.create(() => {
-        if (!get(open))
-          onPopperLeave();
-        set(open, false);
-      }, immediate ? 0 : get(closeDelay));
+      closeTimeoutManager.create(
+        () => {
+          if (!get(open))
+            onPopperLeave();
+          set(open, false);
+        },
+        immediate ? 0 : get(closeDelay)
+      );
     }
   };
   const onLeavePending = () => {
@@ -68,40 +74,48 @@ function usePopper(options, disabled = ref(false), openDelay = ref(0), closeDela
       resize = DEFAULT_POPPER_OPTIONS.resize,
       scroll = DEFAULT_POPPER_OPTIONS.scroll
     } = get(options);
-    return [{
-      enabled: false,
-      name: "hide"
-    }, {
-      enabled: !locked,
-      name: "flip"
-    }, {
-      name: "preventOverflow",
-      options: {
-        padding: overflowPadding
+    return [
+      {
+        enabled: false,
+        name: "hide"
+      },
+      {
+        enabled: !locked,
+        name: "flip"
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          padding: overflowPadding
+        }
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [offsetSkid, offsetDistance]
+        }
+      },
+      {
+        name: "computeStyles",
+        options: {
+          adaptive,
+          gpuAcceleration
+        }
+      },
+      {
+        name: "eventListeners",
+        options: {
+          resize,
+          scroll
+        }
+      },
+      {
+        name: "arrow",
+        options: {
+          padding: 4
+        }
       }
-    }, {
-      name: "offset",
-      options: {
-        offset: [offsetSkid, offsetDistance]
-      }
-    }, {
-      name: "computeStyles",
-      options: {
-        adaptive,
-        gpuAcceleration
-      }
-    }, {
-      name: "eventListeners",
-      options: {
-        resize,
-        scroll
-      }
-    }, {
-      name: "arrow",
-      options: {
-        padding: 4
-      }
-    }];
+    ];
   });
   const popperConfig = computed(() => {
     const {