@rotki/ui-library 2.15.0 → 2.16.0

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

@@ -1,139 +1,119 @@
+import { nextTick, readonly, ref, toValue, watch } from "vue";
 import { get, set } from "@vueuse/shared";
-import { ref, watch, nextTick } from "vue";
+//#region src/composables/forms/auto-complete/keyboard-navigation.ts
 function useAutoCompleteKeyboardNavigation(options, deps) {
-  const focusedValueIndex = ref(-1);
-  const chipElementsCache = ref(/* @__PURE__ */ new Map());
-  function setValueFocus(index) {
-    set(focusedValueIndex, index);
-  }
-  function moveSelectedValueHighlight(event, next) {
-    const multiple = get(options.multiple);
-    const internalSearchValue = get(deps.internalSearch);
-    if (!multiple || internalSearchValue.length > 0)
-      return;
-    event.preventDefault();
-    const total = get(deps.value).length;
-    let current = get(focusedValueIndex);
-    if (current === -1) {
-      set(focusedValueIndex, next ? 0 : total - 1);
-      return;
-    }
-    const move = next ? 1 : -1;
-    current += move;
-    if (current < 0 || current >= total) {
-      set(focusedValueIndex, -1);
-      set(deps.searchInputFocused, true);
-    } else {
-      set(focusedValueIndex, current);
-    }
-  }
-  function onEnter(event) {
-    const filteredOptions = get(deps.filteredOptions);
-    const highlightedIndex = get(deps.highlightedIndex);
-    const isOpen = get(deps.isOpen);
-    const customValue = get(options.customValue);
-    const multiple = get(options.multiple);
-    const value = get(deps.value);
-    const internalSearch = get(deps.internalSearch);
-    if (customValue && internalSearch && isOpen) {
-      let hasExactMatch = false;
-      if (highlightedIndex > -1 && highlightedIndex < filteredOptions.length) {
-        const highlightedOption = filteredOptions[highlightedIndex];
-        if (typeof highlightedOption === "string") {
-          hasExactMatch = highlightedOption === internalSearch;
-        } else if (highlightedOption && typeof highlightedOption === "object") {
-          hasExactMatch = (deps.getText(highlightedOption) ?? "") === internalSearch;
-        }
-      }
-      if (!hasExactMatch) {
-        deps.setSearchAsValue();
-        if (!multiple)
-          set(deps.isOpen, false);
-        event.preventDefault();
-        return;
-      }
-    }
-    if (filteredOptions.length > 0 && highlightedIndex > -1 && isOpen) {
-      deps.applyHighlighted();
-      event.preventDefault();
-    } else if (filteredOptions.length === 0 && customValue && internalSearch) {
-      deps.setSearchAsValue();
-      if (!multiple)
-        set(deps.isOpen, false);
-      event.preventDefault();
-    } else if (!isOpen && value.length === 0) {
-      set(deps.isOpen, true);
-      event.preventDefault();
-    } else {
-      const activator = get(deps.activator);
-      const form = activator?.closest("form");
-      if (form) {
-        form.dispatchEvent(new Event("submit"));
-      }
-    }
-  }
-  function onTab(event) {
-    const isOpen = get(deps.isOpen);
-    const filteredOptions = get(deps.filteredOptions);
-    const highlightedIndex = get(deps.highlightedIndex);
-    const multiple = get(options.multiple);
-    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {
-      deps.applyHighlighted();
-      event.preventDefault();
-    }
-  }
-  function onInputDeletePressed() {
-    const internalSearch = get(deps.internalSearch);
-    const value = get(deps.value);
-    const total = value.length;
-    const multiple = get(options.multiple);
-    if (!internalSearch && total > 0) {
-      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, () => {
-    setValueFocus(-1);
-    get(chipElementsCache).clear();
-  });
-  watch(focusedValueIndex, async (index) => {
-    const multiple = get(options.multiple);
-    if (index === -1 || !multiple)
-      return;
-    await nextTick(() => {
-      const cache = get(chipElementsCache);
-      let activeChip = cache.get(index);
-      if (!activeChip) {
-        const activator = get(deps.activator);
-        const element = activator?.querySelector(`[data-index="${index}"]`);
-        if (element) {
-          activeChip = element;
-          cache.set(index, element);
-        }
-      }
-      if (activeChip && "focus" in activeChip && typeof activeChip.focus === "function")
-        activeChip.focus();
-    });
-  });
-  return {
-    focusedValueIndex,
-    moveSelectedValueHighlight,
-    onEnter,
-    onInputDeletePressed,
-    onTab,
-    setValueFocus
-  };
+	const focusedValueIndex = ref(-1);
+	function setValueFocus(index) {
+		set(focusedValueIndex, index);
+	}
+	function moveSelectedValueHighlight(event, next) {
+		const multiple = toValue(options.multiple);
+		const internalSearchValue = get(deps.internalSearch);
+		if (!multiple || internalSearchValue.length > 0) return;
+		event.preventDefault();
+		const total = get(deps.value).length;
+		let current = get(focusedValueIndex);
+		if (current === -1) {
+			set(focusedValueIndex, next ? 0 : total - 1);
+			return;
+		}
+		current += next ? 1 : -1;
+		if (current < 0 || current >= total) {
+			set(focusedValueIndex, -1);
+			set(deps.searchInputFocused, true);
+		} else set(focusedValueIndex, current);
+	}
+	function highlightedMatchesSearch(filteredOptions, highlightedIndex, search) {
+		if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length) return false;
+		const option = filteredOptions[highlightedIndex];
+		if (typeof option === "string") return option === search;
+		if (option && typeof option === "object") return (deps.getText(option) ?? "") === search;
+		return false;
+	}
+	function applyCustomValue(event, multiple) {
+		deps.setSearchAsValue();
+		if (!multiple) set(deps.isOpen, false);
+		event.preventDefault();
+	}
+	function submitClosestForm() {
+		(get(deps.activator)?.closest("form"))?.dispatchEvent(new Event("submit"));
+	}
+	function handleOpenMenuEnter(event) {
+		const filteredOptions = get(deps.filteredOptions);
+		const highlightedIndex = get(deps.highlightedIndex);
+		const customValue = toValue(options.customValue);
+		const multiple = toValue(options.multiple);
+		const internalSearch = get(deps.internalSearch);
+		if (get(deps.userNavigated) && highlightedIndex > -1 && filteredOptions.length > 0) {
+			deps.applyHighlighted();
+			event.preventDefault();
+			return true;
+		}
+		if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {
+			applyCustomValue(event, multiple);
+			return true;
+		}
+		if (highlightedIndex > -1 && filteredOptions.length > 0) {
+			deps.applyHighlighted();
+			event.preventDefault();
+			return true;
+		}
+		if (filteredOptions.length === 0 && customValue && internalSearch) {
+			applyCustomValue(event, multiple);
+			return true;
+		}
+		return false;
+	}
+	function onEnter(event) {
+		if (get(deps.isOpen) && handleOpenMenuEnter(event)) return;
+		if (!get(deps.isOpen) && get(deps.value).length === 0) {
+			set(deps.isOpen, true);
+			return event.preventDefault();
+		}
+		submitClosestForm();
+	}
+	function onTab(event) {
+		const isOpen = get(deps.isOpen);
+		const filteredOptions = get(deps.filteredOptions);
+		const highlightedIndex = get(deps.highlightedIndex);
+		const multiple = toValue(options.multiple);
+		if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {
+			deps.applyHighlighted();
+			event.preventDefault();
+		}
+	}
+	function onInputDeletePressed() {
+		const internalSearch = get(deps.internalSearch);
+		const value = get(deps.value);
+		const total = value.length;
+		const multiple = toValue(options.multiple);
+		if (!internalSearch && total > 0) if (multiple) if (toValue(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, () => {
+		setValueFocus(-1);
+	});
+	watch(focusedValueIndex, async (index) => {
+		const multiple = toValue(options.multiple);
+		if (index === -1 || !multiple) return;
+		await nextTick(() => {
+			(get(deps.activator)?.querySelector(`[data-index="${index}"]`))?.focus();
+		});
+	});
+	return {
+		focusedValueIndex: readonly(focusedValueIndex),
+		moveSelectedValueHighlight,
+		onEnter,
+		onInputDeletePressed,
+		onTab,
+		setValueFocus
+	};
 }
-export {
-  useAutoCompleteKeyboardNavigation
-};
-//# sourceMappingURL=keyboard-navigation.js.map
+//#endregion
+export { useAutoCompleteKeyboardNavigation };
+
+//# sourceMappingURL=keyboard-navigation.js.map

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, 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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"}
+{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<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  userNavigated: Ref<boolean>;\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: Readonly<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\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(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 highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const customValue = toValue(options.customValue);\n    const multiple = toValue(options.multiple);\n    const internalSearch = get(deps.internalSearch);\n\n    const userNavigated = get(deps.userNavigated);\n\n    if (userNavigated && highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    if (highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (filteredOptions.length === 0 && customValue && internalSearch) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    return false;\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen) && handleOpenMenuEnter(event))\n      return;\n\n    // Nothing selected, menu closed: open menu\n    if (!get(deps.isOpen) && get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Fallback: submit parent form\n    submitClosestForm();\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 = toValue(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 = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(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\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    focusedValueIndex: readonly(focusedValueIndex),\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}

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

@@ -1,26 +1,27 @@
-import type { MaybeRef, Ref } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
 export interface UseAutoCompleteSearchOptions<TItem> {
     /** The property used as the unique identifier for each item. */
-    keyAttr?: MaybeRef<keyof TItem | undefined>;
+    keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;
     /** The property used to display text for each item. */
-    textAttr?: MaybeRef<keyof TItem | undefined>;
+    textAttr?: MaybeRefOrGetter<keyof TItem | undefined>;
     /** Whether to disable client-side filtering of options. */
-    noFilter?: MaybeRef<boolean>;
+    noFilter?: MaybeRefOrGetter<boolean>;
     /** Custom filter function to match items against the search query. */
-    filter?: MaybeRef<((item: TItem, queryText: string) => boolean) | undefined>;
+    filter?: MaybeRefOrGetter<((item: TItem, queryText: string) => boolean) | undefined>;
     /** Whether custom (free-text) values are allowed. */
-    customValue?: MaybeRef<boolean>;
+    customValue?: MaybeRefOrGetter<boolean>;
     /** Whether to hide the custom value option from the dropdown. */
-    hideCustomValue?: MaybeRef<boolean>;
+    hideCustomValue?: MaybeRefOrGetter<boolean>;
     /** Whether to return the full item object instead of just the key. */
-    returnObject?: MaybeRef<boolean>;
+    returnObject?: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteSearchReturn<TItem> {
-    internalSearch: Ref<string>;
+    internalSearch: Readonly<Ref<string>>;
     debouncedInternalSearch: Readonly<Ref<string>>;
     filteredOptions: Readonly<Ref<TItem[]>>;
     justOpened: Ref<boolean>;
     updateInternalSearch: (value?: string) => void;
     textValueToProperValue: (val: any, returnObject?: boolean) => TItem;
 }
-export declare function useAutoCompleteSearch<TItem>(options: MaybeRef<TItem[]>, searchModel: Ref<string>, opts: UseAutoCompleteSearchOptions<TItem>): UseAutoCompleteSearchReturn<TItem>;
+export declare function useAutoCompleteSearch<TItem>(options: MaybeRefOrGetter<TItem[]>, searchModel: Ref<string>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access
+opts: UseAutoCompleteSearchOptions<TItem>): UseAutoCompleteSearchReturn<TItem>;

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

@@ -1,95 +1,84 @@
-import { get, set } from "@vueuse/shared";
 import { getTextToken } from "../../../utils/helpers.js";
-import { shallowRef, computed, watch, onUnmounted } from "vue";
+import { computed, onUnmounted, readonly, shallowRef, toValue, watch } from "vue";
 import { refDebounced } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/forms/auto-complete/search.ts
 function useAutoCompleteSearch(options, searchModel, opts) {
-  const internalSearch = shallowRef("");
-  const debouncedInternalSearch = refDebounced(internalSearch, 50);
-  const justOpened = shallowRef(false);
-  const MAX_CACHE_SIZE = 500;
-  const tokenCache = /* @__PURE__ */ new Map();
-  const getCachedTextToken = (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;
-  };
-  const filteredOptions = computed(() => {
-    const search = get(debouncedInternalSearch);
-    const optionsValue = get(options);
-    const noFilter = get(opts.noFilter);
-    if (noFilter || !search || get(justOpened))
-      return optionsValue;
-    const keyAttr = get(opts.keyAttr);
-    const textAttr = get(opts.textAttr);
-    const filter = get(opts.filter);
-    const searchToken = getCachedTextToken(search);
-    const usedFilter = filter || ((item) => {
-      if (!item)
-        return false;
-      const keywords = [getCachedTextToken(keyAttr ? String(item[keyAttr]) : item.toString())];
-      if (textAttr && typeof item === "object")
-        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);
-    const hideCustomValue = get(opts.hideCustomValue);
-    if (!customValue || hideCustomValue || !search) {
-      return filtered;
-    }
-    const isCustomValueIncluded = filtered.some((item) => {
-      if (!item) {
-        return false;
-      }
-      const val = textAttr ? item[textAttr] : item.toString();
-      return val === search;
-    });
-    if (isCustomValueIncluded) {
-      return filtered;
-    }
-    return [textValueToProperValue(search, {
-      keyAttr,
-      returnObject: get(opts.returnObject),
-      textAttr
-    }), ...filtered];
-  });
-  function textValueToProperValue(val, options2) {
-    const { keyAttr, returnObject, textAttr } = options2;
-    if (!keyAttr || returnObject)
-      return val;
-    return {
-      [keyAttr]: val,
-      ...textAttr ? { [textAttr]: val } : {}
-    };
-  }
-  function updateInternalSearch(value = "") {
-    set(searchModel, value);
-    set(internalSearch, value);
-  }
-  watch(searchModel, (search) => {
-    set(internalSearch, search);
-  }, { immediate: true });
-  onUnmounted(() => {
-    tokenCache.clear();
-  });
-  return {
-    debouncedInternalSearch,
-    filteredOptions,
-    internalSearch,
-    justOpened,
-    textValueToProperValue: (val, returnObjectOverride = false) => textValueToProperValue(val, {
-      keyAttr: get(opts.keyAttr),
-      returnObject: returnObjectOverride || get(opts.returnObject),
-      textAttr: get(opts.textAttr)
-    }),
-    updateInternalSearch
-  };
+	const internalSearch = shallowRef("");
+	const debouncedInternalSearch = refDebounced(internalSearch, 50);
+	const justOpened = shallowRef(false);
+	const MAX_CACHE_SIZE = 100;
+	const tokenCache = /* @__PURE__ */ new Map();
+	const getCachedTextToken = (text) => {
+		const cached = tokenCache.get(text);
+		if (cached !== void 0) return cached;
+		if (tokenCache.size >= MAX_CACHE_SIZE) {
+			const oldest = tokenCache.keys().next().value;
+			if (oldest !== void 0) tokenCache.delete(oldest);
+		}
+		const token = getTextToken(text);
+		tokenCache.set(text, token);
+		return token;
+	};
+	const filteredOptions = computed(() => {
+		const search = get$1(debouncedInternalSearch);
+		const optionsValue = toValue(options);
+		if (toValue(opts.noFilter) || !search || get$1(justOpened)) return optionsValue;
+		const keyAttr = toValue(opts.keyAttr);
+		const textAttr = toValue(opts.textAttr);
+		const filter = toValue(opts.filter);
+		const searchToken = getCachedTextToken(search);
+		const filtered = filter ? optionsValue.filter((item) => filter(item, search)) : optionsValue.filter((item) => {
+			if (!item) return false;
+			const keywords = [getCachedTextToken(keyAttr ? String(item[keyAttr]) : item.toString())];
+			if (textAttr && typeof item === "object") keywords.push(getCachedTextToken(String(item[textAttr])));
+			return keywords.some((keyword) => keyword.includes(searchToken));
+		});
+		const customValue = toValue(opts.customValue);
+		const hideCustomValue = toValue(opts.hideCustomValue);
+		if (!customValue || hideCustomValue || !search) return filtered;
+		if (filtered.some((item) => {
+			if (!item) return false;
+			return (textAttr ? item[textAttr] : item.toString()) === search;
+		})) return filtered;
+		return [textValueToProperValue(search, {
+			keyAttr,
+			returnObject: toValue(opts.returnObject),
+			textAttr
+		}), ...filtered];
+	});
+	function textValueToProperValue(val, options) {
+		const { keyAttr, returnObject, textAttr } = options;
+		if (!keyAttr || returnObject) return val;
+		return {
+			[keyAttr]: val,
+			...textAttr ? { [textAttr]: val } : {}
+		};
+	}
+	function updateInternalSearch(value = "") {
+		set$1(searchModel, value);
+		set$1(internalSearch, value);
+	}
+	watch(searchModel, (search) => {
+		set$1(internalSearch, search);
+	}, { immediate: true });
+	onUnmounted(() => {
+		tokenCache.clear();
+	});
+	return {
+		debouncedInternalSearch,
+		filteredOptions,
+		internalSearch: readonly(internalSearch),
+		justOpened,
+		textValueToProperValue: (val, returnObjectOverride = false) => textValueToProperValue(val, {
+			keyAttr: toValue(opts.keyAttr),
+			returnObject: returnObjectOverride || toValue(opts.returnObject),
+			textAttr: toValue(opts.textAttr)
+		}),
+		updateInternalSearch
+	};
 }
-export {
-  useAutoCompleteSearch
-};
-//# sourceMappingURL=search.js.map
+//#endregion
+export { useAutoCompleteSearch };
+
+//# sourceMappingURL=search.js.map

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  /** 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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"}
+{"version":3,"file":"search.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/search.ts"],"sourcesContent":["import type { MaybeRefOrGetter, 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?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** The property used to display text for each item. */\n  textAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to disable client-side filtering of options. */\n  noFilter?: MaybeRefOrGetter<boolean>;\n  /** Custom filter function to match items against the search query. */\n  filter?: MaybeRefOrGetter<((item: TItem, queryText: string) => boolean) | undefined>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n  /** Whether to hide the custom value option from the dropdown. */\n  hideCustomValue?: MaybeRefOrGetter<boolean>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteSearchReturn<TItem> {\n  internalSearch: Readonly<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: MaybeRefOrGetter<TItem[]>,\n  searchModel: Ref<string>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\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  // Map iteration order is insertion order, so deleting the first key\n  // gives us simple LRU eviction without a separate data structure.\n  const MAX_CACHE_SIZE = 100;\n  const tokenCache = new Map<string, string>();\n  const getCachedTextToken = (text: string): string => {\n    const cached = tokenCache.get(text);\n    if (cached !== undefined)\n      return cached;\n\n    if (tokenCache.size >= MAX_CACHE_SIZE) {\n      const oldest = tokenCache.keys().next().value;\n      if (oldest !== undefined)\n        tokenCache.delete(oldest);\n    }\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 = toValue(options);\n\n    const noFilter = toValue(opts.noFilter);\n    if (noFilter || !search || get(justOpened))\n      return optionsValue;\n\n    const keyAttr = toValue(opts.keyAttr);\n    const textAttr = toValue(opts.textAttr);\n    const filter = toValue(opts.filter);\n\n    // Cache the search token once\n    const searchToken = getCachedTextToken(search);\n\n    const filtered = filter\n      ? optionsValue.filter(item => filter(item, search))\n      : optionsValue.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 customValue = toValue(opts.customValue);\n    const hideCustomValue = toValue(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: toValue(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: readonly(internalSearch),\n    justOpened, // eslint-disable-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused and component setValue\n    textValueToProperValue: (val: any, returnObjectOverride: boolean = false) => textValueToProperValue(val, {\n      keyAttr: toValue(opts.keyAttr),\n      returnObject: returnObjectOverride || toValue(opts.returnObject),\n      textAttr: toValue(opts.textAttr),\n    }),\n    updateInternalSearch,\n  };\n}\n"],"mappings":";;;;;AA8BA,SAAgB,sBACd,SACA,aACA,MACoC;CACpC,MAAM,iBAAiB,WAAmB,GAAG;CAC7C,MAAM,0BAA0B,aAAa,gBAAgB,GAAG;CAChE,MAAM,aAAa,WAAoB,MAAM;CAK7C,MAAM,iBAAiB;CACvB,MAAM,6BAAa,IAAI,KAAqB;CAC5C,MAAM,sBAAsB,SAAyB;EACnD,MAAM,SAAS,WAAW,IAAI,KAAK;AACnC,MAAI,WAAW,KAAA,EACb,QAAO;AAET,MAAI,WAAW,QAAQ,gBAAgB;GACrC,MAAM,SAAS,WAAW,MAAM,CAAC,MAAM,CAAC;AACxC,OAAI,WAAW,KAAA,EACb,YAAW,OAAO,OAAO;;EAG7B,MAAM,QAAQ,aAAa,KAAK;AAChC,aAAW,IAAI,MAAM,MAAM;AAC3B,SAAO;;CAGT,MAAM,kBAAkB,eAAwB;EAC9C,MAAM,SAAS,MAAI,wBAAwB;EAC3C,MAAM,eAAe,QAAQ,QAAQ;AAGrC,MADiB,QAAQ,KAAK,SAAS,IACvB,CAAC,UAAU,MAAI,WAAW,CACxC,QAAO;EAET,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,WAAW,QAAQ,KAAK,SAAS;EACvC,MAAM,SAAS,QAAQ,KAAK,OAAO;EAGnC,MAAM,cAAc,mBAAmB,OAAO;EAE9C,MAAM,WAAW,SACb,aAAa,QAAO,SAAQ,OAAO,MAAM,OAAO,CAAC,GACjD,aAAa,QAAQ,SAAS;AAC5B,OAAI,CAAC,KACH,QAAO;GAET,MAAM,WAAqB,CAAC,mBAAmB,UAAU,OAAQ,KAAa,SAAS,GAAG,KAAK,UAAU,CAAC,CAAC;AAE3G,OAAI,YAAY,OAAO,SAAS,SAC9B,UAAS,KAAK,mBAAmB,OAAQ,KAAa,UAAU,CAAC,CAAC;AAEpE,UAAO,SAAS,MAAK,YAAW,QAAQ,SAAS,YAAY,CAAC;IAC9D;EAEN,MAAM,cAAc,QAAQ,KAAK,YAAY;EAC7C,MAAM,kBAAkB,QAAQ,KAAK,gBAAgB;AACrD,MAAI,CAAC,eAAe,mBAAmB,CAAC,OACtC,QAAO;AAaT,MAT8B,SAAS,MAAM,SAAS;AACpD,OAAI,CAAC,KACH,QAAO;AAIT,WADY,WAAY,KAAa,YAAY,KAAK,UAAU,MACjD;IACf,CAGA,QAAO;AAGT,SAAO,CAAC,uBAAuB,QAAQ;GACrC;GACA,cAAc,QAAQ,KAAK,aAAa;GACxC;GACD,CAAC,EAAE,GAAG,SAAS;GAChB;CAEF,SAAS,uBAAuB,KAAU,SAA2F;EACnI,MAAM,EAAE,SAAS,cAAc,aAAa;AAC5C,MAAI,CAAC,WAAW,aACd,QAAO;AAET,SAAO;IACJ,UAAU;GACX,GACE,WACI,GAAG,WAAW,KAAK,GACnB,EAAA;GAEP;;CAGH,SAAS,qBAAqB,QAAgB,IAAU;AACtD,QAAI,aAAa,MAAM;AACvB,QAAI,gBAAgB,MAAM;;AAG5B,OAAM,cAAc,WAAW;AAC7B,QAAI,gBAAgB,OAAO;IAC1B,EAAE,WAAW,MAAM,CAAC;AAGvB,mBAAkB;AAChB,aAAW,OAAO;GAClB;AAEF,QAAO;EACL;EACA;EACA,gBAAgB,SAAS,eAAe;EACxC;EACA,yBAAyB,KAAU,uBAAgC,UAAU,uBAAuB,KAAK;GACvG,SAAS,QAAQ,KAAK,QAAQ;GAC9B,cAAc,wBAAwB,QAAQ,KAAK,aAAa;GAChE,UAAU,QAAQ,KAAK,SAAA;GACxB,CAAC;EACF;EACD"}

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

@@ -1,11 +1,11 @@
-import type { ComputedRef, MaybeRef, Ref } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
 export interface UseAutoCompleteValueOptions<TItem> {
     /** The property used as the unique identifier for each item. */
-    keyAttr?: MaybeRef<keyof TItem | undefined>;
+    keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;
     /** Whether to return the full item object instead of just the key. */
-    returnObject?: MaybeRef<boolean>;
+    returnObject?: MaybeRefOrGetter<boolean>;
     /** Whether custom (free-text) values are allowed. */
-    customValue?: MaybeRef<boolean>;
+    customValue?: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteValueReturn<TItem> {
     value: ComputedRef<TItem[]>;
@@ -15,9 +15,10 @@ export interface UseAutoCompleteValueDeps<TItem> {
     getIdentifier: (item: TItem) => any;
     getText: (item: TItem) => string | undefined;
     textValueToProperValue: (val: any, returnObject?: boolean) => TItem;
-    shouldApplyValueAsSearch: MaybeRef<boolean>;
-    isOpen: MaybeRef<boolean>;
-    multiple: MaybeRef<boolean>;
+    shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;
+    isOpen: MaybeRefOrGetter<boolean>;
+    multiple: MaybeRefOrGetter<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>;
+export declare function useAutoCompleteValue<TValue, TItem>(modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access
+options: MaybeRefOrGetter<TItem[]>, opts: UseAutoCompleteValueOptions<TItem>, deps: UseAutoCompleteValueDeps<TItem>): UseAutoCompleteValueReturn<TItem>;