@rotki/ui-library 2.8.1 → 2.8.3

package/dist/composables/dropdown-menu.js

@@ -0,0 +1,218 @@
+import { computed, ref, watch, nextTick } from "vue";
+import { get, set } from "@vueuse/shared";
+import { useVirtualList, useArrayMap, watchOnce } from "@vueuse/core";
+function useDropdownOptionProperty({
+  keyAttr,
+  textAttr
+}) {
+  function getText(item) {
+    if (textAttr) {
+      if (typeof textAttr === "function")
+        return textAttr(item);
+      else
+        return item[textAttr]?.toString();
+    }
+    return item?.toString();
+  }
+  function getIdentifier(item) {
+    if (keyAttr)
+      return item[keyAttr];
+    return item;
+  }
+  return {
+    getIdentifier,
+    getText
+  };
+}
+function useDropdownMenu({
+  appendWidth,
+  autoFocus,
+  autoSelectFirst,
+  dense,
+  disabled = ref(false),
+  hideSelected,
+  itemHeight = 48,
+  keyAttr,
+  menuRef,
+  options: allOptions,
+  overscan = 5,
+  prependWidth,
+  setValue,
+  textAttr,
+  value
+}) {
+  const options = computed(() => {
+    const options2 = get(allOptions);
+    if (!hideSelected)
+      return options2;
+    return options2.filter((item) => !isActiveItem(item));
+  });
+  const { getIdentifier, getText } = useDropdownOptionProperty({
+    keyAttr,
+    textAttr
+  });
+  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList(
+    options,
+    {
+      itemHeight,
+      overscan
+    }
+  );
+  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));
+  const isOpen = ref(false);
+  const valueKey = computed(() => {
+    const selected = get(value);
+    if (!keyAttr || !selected)
+      return selected;
+    return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
+  });
+  const highlightedIndex = ref(get(autoSelectFirst) ? 0 : -1);
+  const menuWidth = computed(() => {
+    const widths = { max: 0, min: 0 };
+    const maxWidth = 30;
+    const paddingX = 1.5;
+    const fontMultiplier = get(dense) ? 12 : 13;
+    get(options).forEach((option) => {
+      const length = getText(option)?.toString()?.length ?? 0;
+      if (widths.min === 0 && widths.max === 0) {
+        widths.min = length;
+        widths.max = length;
+      } else if (length < widths.min) {
+        widths.min = length;
+      } else if (length > widths.max) {
+        widths.max = length;
+      }
+    });
+    const difference = widths.max - widths.min;
+    function computeValue(width) {
+      const additionalWidths = (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);
+      return `${Math.min(width * fontMultiplier / 16 + paddingX + additionalWidths, maxWidth)}rem`;
+    }
+    if (difference <= 5)
+      return computeValue(widths.max);
+    return computeValue(widths.min + difference / 2);
+  });
+  function toggle(state = false) {
+    set(isOpen, state);
+  }
+  function itemIndexInValue(item) {
+    const val = get(value);
+    const selected = Array.isArray(val) ? val : val ? [val] : [];
+    if (selected.length === 0)
+      return -1;
+    return selected.findIndex((selectedItem) => {
+      if (keyAttr)
+        return selectedItem[keyAttr] === item[keyAttr];
+      return selectedItem === item;
+    });
+  }
+  function isActiveItem(item) {
+    return itemIndexInValue(item) !== -1;
+  }
+  async function adjustScrollByHighlightedIndex(smooth = false) {
+    const index = get(highlightedIndex);
+    if (index > -1) {
+      await nextTick(() => {
+        const container = get(menuRef)?.parentElement;
+        if (container) {
+          const highlightedElem = get(menuRef).getElementsByClassName("highlighted")[0];
+          if (highlightedElem) {
+            highlightedElem.scrollIntoView?.({ behavior: smooth ? "smooth" : "auto", block: "nearest" });
+            if (get(autoFocus) && "focus" in highlightedElem && typeof highlightedElem.focus === "function")
+              highlightedElem?.focus();
+          } else {
+            scrollTo(index);
+            if (get(autoFocus)) {
+              const elem = get(menuRef).getElementsByClassName("highlighted")[0];
+              if (elem && "focus" in elem && typeof elem.focus === "function")
+                elem.focus();
+            }
+          }
+        }
+      });
+    }
+  }
+  async function updateOpen(open) {
+    await nextTick(() => {
+      if (open) {
+        const val = get(value);
+        if (Array.isArray(val) && val.length > 0 || !!val) {
+          const index = get(options).findIndex(isActiveItem);
+          if (index > -1)
+            set(highlightedIndex, index);
+        }
+        watchOnce(list, async () => {
+          await adjustScrollByHighlightedIndex();
+        });
+      }
+    });
+  }
+  watch([isOpen, disabled], async ([open, _]) => {
+    await updateOpen(open);
+  });
+  watch(highlightedIndex, async (curr, prev) => {
+    if (curr !== prev)
+      await adjustScrollByHighlightedIndex(true);
+  });
+  watch(options, async () => {
+    if (get(highlightedIndex) !== -1) {
+      if (get(autoSelectFirst)) {
+        set(highlightedIndex, 0);
+        await adjustScrollByHighlightedIndex();
+      } else {
+        set(highlightedIndex, -1);
+        scrollTo(0);
+      }
+    } else {
+      scrollTo(0);
+    }
+  });
+  const moveHighlight = (up) => {
+    if (!get(isOpen)) {
+      toggle(true);
+      return;
+    }
+    let position = get(highlightedIndex);
+    const move = up ? -1 : 1;
+    position += move;
+    const total = get(options).length;
+    if (position >= total)
+      set(highlightedIndex, 0);
+    else if (position < 0)
+      set(highlightedIndex, total - 1);
+    else
+      set(highlightedIndex, position);
+  };
+  const applyHighlighted = () => {
+    if (!setValue || !get(isOpen))
+      return;
+    const highlightedIndexVal = get(highlightedIndex);
+    if (highlightedIndexVal === -1)
+      return;
+    const entry = get(options).find((_data, index) => highlightedIndexVal === index);
+    if (entry)
+      setValue(entry);
+  };
+  return {
+    applyHighlighted,
+    containerProps,
+    getIdentifier,
+    getText,
+    highlightedIndex,
+    isActiveItem,
+    isOpen,
+    itemIndexInValue,
+    menuWidth,
+    moveHighlight,
+    optionsWithSelectedHidden: options,
+    renderedData,
+    toggle,
+    valueKey,
+    wrapperProps
+  };
+}
+export {
+  useDropdownMenu,
+  useDropdownOptionProperty
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/composables/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { Ref } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V\n        ? P\n        : V extends T[P]\n          ? P\n          : never]: any\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: Ref<TItem[]>;\n  dense?: Ref<boolean>;\n  disabled?: Ref<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  autoFocus?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n\n      else\n        return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(item: TItem): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoFocus,\n  autoSelectFirst,\n  dense,\n  disabled = ref(false),\n  hideSelected,\n  itemHeight = 48,\n  keyAttr,\n  menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n}: DropdownOptions<TValue, TItem>) {\n  const options = computed(() => {\n    const options = get(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  const { getIdentifier, getText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(\n    options,\n    {\n      itemHeight,\n      overscan,\n    },\n  );\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = ref(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n\n  const menuWidth = computed(() => {\n    const widths = { max: 0, min: 0 };\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = get(dense) ? 12 : 13;\n\n    get(options).forEach((option) => {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (widths.min === 0 && widths.max === 0) {\n        widths.min = length;\n        widths.max = length;\n      }\n      else if (length < widths.min) {\n        widths.min = length;\n      }\n      else if (length > widths.max) {\n        widths.max = length;\n      }\n    });\n\n    const difference = widths.max - widths.min;\n\n    function computeValue(width: number) {\n      const additionalWidths = (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(widths.max);\n\n    return computeValue(widths.min + difference / 2);\n  });\n\n  function toggle(state: boolean = false) {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = Array.isArray(val) ? val : (val ? [val] : []);\n\n    if (selected.length === 0)\n      return -1;\n\n    return selected.findIndex((selectedItem) => {\n      if (keyAttr)\n        return selectedItem[keyAttr] === item[keyAttr];\n      return selectedItem === item;\n    });\n  }\n\n  function isActiveItem(item: TItem): boolean {\n    return itemIndexInValue(item) !== -1;\n  }\n\n  async function adjustScrollByHighlightedIndex(smooth: boolean = false) {\n    const index = get(highlightedIndex);\n    if (index > -1) {\n      await nextTick(() => {\n        const container = get(menuRef)?.parentElement;\n        if (container) {\n          const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];\n\n          if (highlightedElem) {\n            highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });\n            if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')\n              highlightedElem?.focus();\n          }\n          else {\n            scrollTo(index);\n            if (get(autoFocus)) {\n              const elem = get(menuRef).getElementsByClassName('highlighted')[0];\n              if (elem && 'focus' in elem && typeof elem.focus === 'function')\n                elem.focus();\n            }\n          }\n        }\n      });\n    }\n  }\n\n  async function updateOpen(open: boolean) {\n    await nextTick(() => {\n      if (open) {\n        const val = get(value);\n\n        // set highlighted index to active item\n        if ((Array.isArray(val) && val.length > 0) || !!val) {\n          const index = get(options).findIndex(isActiveItem);\n          if (index > -1)\n            set(highlightedIndex, index);\n        }\n\n        watchOnce(list, async () => {\n          await adjustScrollByHighlightedIndex();\n        });\n      }\n    });\n  }\n\n  watch([isOpen, disabled], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(highlightedIndex, async (curr, prev) => {\n    if (curr !== prev)\n      await adjustScrollByHighlightedIndex(true);\n  });\n\n  watch(options, async () => {\n    if (get(highlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(highlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(highlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  const moveHighlight = (up: boolean) => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    let position = get(highlightedIndex);\n    const move = up ? -1 : 1;\n\n    position += move;\n\n    const total = get(options).length;\n\n    if (position >= total)\n      set(highlightedIndex, 0);\n    else if (position < 0)\n      set(highlightedIndex, total - 1);\n    else\n      set(highlightedIndex, position);\n  };\n\n  const applyHighlighted = () => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(highlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options).find((_data, index) => highlightedIndexVal === index);\n    if (entry)\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    highlightedIndex,\n    isActiveItem,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"names":["options"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { computed, nextTick } from "vue";
+import { get, set } from "@vueuse/shared";
+import { watchDebounced } from "@vueuse/core";
+function useAutoCompleteFocus(options, deps) {
+  const anyFocused = computed(
+    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin)
+  );
+  const inputClass = computed(() => {
+    const isFocused = get(anyFocused);
+    const isDisabled = get(options.disabled);
+    const shouldApply = get(options.shouldApplyValueAsSearch);
+    const hasSearch = get(deps.internalSearch);
+    if ((!isFocused || isDisabled) && !shouldApply)
+      return "w-0 h-0";
+    if (hasSearch)
+      return "flex-1 min-w-[4rem]";
+    return "flex-1 min-w-0";
+  });
+  async function setInputFocus() {
+    await nextTick(() => {
+      set(deps.searchInputFocused, true);
+    });
+  }
+  async function onActivatorFocused() {
+    await nextTick(() => {
+      if (!get(deps.activatorFocused)) {
+        set(deps.searchInputFocused, true);
+      }
+    });
+  }
+  function onInputFocused() {
+    set(deps.focusedValueIndex, -1);
+    const shouldApply = get(options.shouldApplyValueAsSearch);
+    if (shouldApply) {
+      const textInput = get(deps.textInput);
+      textInput?.select();
+    }
+    if (!get(deps.isOpen)) {
+      set(deps.justOpened, true);
+    }
+  }
+  watchDebounced(anyFocused, (focused) => {
+    if (!focused) {
+      set(deps.isOpen, false);
+      const customValue = get(options.customValue);
+      const filteredOptions = get(deps.filteredOptions);
+      const internalSearch = get(deps.internalSearch);
+      if (customValue && filteredOptions.length === 0 && internalSearch) {
+        deps.setSearchAsValue();
+      }
+      const shouldApply = get(options.shouldApplyValueAsSearch);
+      if (!shouldApply) {
+        deps.updateInternalSearch();
+      }
+    }
+  }, {
+    debounce: 200,
+    maxWait: 400
+  });
+  return {
+    anyFocused,
+    inputClass,
+    onActivatorFocused,
+    onInputFocused,
+    setInputFocus
+  };
+}
+export {
+  useAutoCompleteFocus
+};
+//# sourceMappingURL=focus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  customValue: MaybeRef<boolean>;\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  disabled: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps<TItem> {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  filteredOptions: Ref<TItem[]>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus<TItem>(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps<TItem>,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(() =>\n    get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = get(options.disabled);\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  // Close menu if the activator is not focused anymore\n  // Using debounced to avoid the menu closing momentarily while focus switches.\n  watchDebounced(anyFocused, (focused) => {\n    if (!focused) {\n      set(deps.isOpen, false);\n\n      const customValue = get(options.customValue);\n      const filteredOptions = get(deps.filteredOptions);\n      const internalSearch = get(deps.internalSearch);\n\n      if (customValue && filteredOptions.length === 0 && internalSearch) {\n        deps.setSearchAsValue();\n      }\n\n      const shouldApply = get(options.shouldApplyValueAsSearch);\n      if (!shouldApply) {\n        deps.updateInternalSearch();\n      }\n    }\n  }, {\n    debounce: 200,\n    maxWait: 400,\n  });\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"names":[],"mappings":";;;AA+BO,SAAS,qBACd,SACA,MAC4B;AAC5B,QAAM,aAAa;AAAA,IAAkB,MACnC,IAAI,KAAK,sBAAsB,KAAK,IAAI,KAAK,wBAAwB;AAAA,EAAA;AAGvE,QAAM,aAAa,SAAiB,MAAM;AACxC,UAAM,YAAY,IAAI,UAAU;AAChC,UAAM,aAAa,IAAI,QAAQ,QAAQ;AACvC,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAM,YAAY,IAAI,KAAK,cAAc;AAEzC,SAAK,CAAC,aAAa,eAAe,CAAC;AACjC,aAAO;AACT,QAAI;AACF,aAAO;AACT,WAAO;AAAA,EACT,CAAC;AAED,iBAAe,gBAA+B;AAC5C,UAAM,SAAS,MAAM;AACnB,UAAI,KAAK,oBAAoB,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,iBAAe,qBAAoC;AACjD,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG;AAC/B,YAAI,KAAK,oBAAoB,IAAI;AAAA,MACnC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,iBAAuB;AAC9B,QAAI,KAAK,mBAAmB,EAAE;AAE9B,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,QAAI,aAAa;AACf,YAAM,YAAY,IAAI,KAAK,SAAS;AACpC,iBAAW,OAAA;AAAA,IACb;AAEA,QAAI,CAAC,IAAI,KAAK,MAAM,GAAG;AACrB,UAAI,KAAK,YAAY,IAAI;AAAA,IAC3B;AAAA,EACF;AAIA,iBAAe,YAAY,CAAC,YAAY;AACtC,QAAI,CAAC,SAAS;AACZ,UAAI,KAAK,QAAQ,KAAK;AAEtB,YAAM,cAAc,IAAI,QAAQ,WAAW;AAC3C,YAAM,kBAAkB,IAAI,KAAK,eAAe;AAChD,YAAM,iBAAiB,IAAI,KAAK,cAAc;AAE9C,UAAI,eAAe,gBAAgB,WAAW,KAAK,gBAAgB;AACjE,aAAK,iBAAA;AAAA,MACP;AAEA,YAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAI,CAAC,aAAa;AAChB,aAAK,qBAAA;AAAA,MACP;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,CACV;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -7,7 +7,7 @@ export declare function useAutoCompleteProps<T extends object>(props: {
     getTextValue: (item: T) => string | undefined;
     isItemDisabled: (item: T) => boolean;
 };
-export * from './focus';
-export * from './keyboard-navigation';
-export * from './search';
-export * from './value';
+export * from './focus.js';
+export * from './keyboard-navigation.js';
+export * from './search.js';
+export * from './value.js';

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

@@ -0,0 +1,133 @@
+import { get, set } from "@vueuse/shared";
+import { ref, watch, nextTick } from "vue";
+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") {
+          const label = highlightedOption.label || highlightedOption.value || "";
+          hasExactMatch = label === 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)
+        set(focusedValueIndex, total - 1);
+      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
+  };
+}
+export {
+  useAutoCompleteKeyboardNavigation
+};
+//# sourceMappingURL=keyboard-navigation.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,93 @@
+import { get, set } from "@vueuse/shared";
+import { getTextToken } from "../../../utils/helpers.js";
+import { ref, computed, watch, onUnmounted } from "vue";
+import { refDebounced } from "@vueuse/core";
+function useAutoCompleteSearch(options, searchModel, opts) {
+  const internalSearch = ref("");
+  const debouncedInternalSearch = refDebounced(internalSearch, 50);
+  const justOpened = ref(false);
+  const tokenCache = /* @__PURE__ */ new Map();
+  const getCachedTextToken = (text) => {
+    if (tokenCache.has(text)) {
+      return tokenCache.get(text);
+    }
+    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 = [keyAttr ? getCachedTextToken(item[keyAttr]) : item.toString()];
+      if (textAttr && typeof item === "object")
+        keywords.push(getCachedTextToken(item[textAttr]));
+      return keywords.some((keyword) => getCachedTextToken(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
+  };
+}
+export {
+  useAutoCompleteSearch
+};
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +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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"}