@rotki/ui-library 2.12.1 → 2.13.0

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/icons.js

@@ -1,8 +1,8 @@
 import { LuChevronsUpDown, LuArrowUp, LuArrowDown, LuArrowLeft, LuArrowRight, LuChevronUp, LuChevronDown, LuChevronLeft, LuChevronRight, LuChevronsLeft, LuChevronsRight, LuCircleAlert, LuCheck, LuCircleX, LuCircleCheck, LuCheckboxBlank, LuCheckboxFill, LuCheckboxIndeterminateFill, LuCheckboxBlankCircle, LuCheckboxBlankCircleFill, LuRadioButtonFill, LuClock } from "../icons/icons_1.js";
 import { LuEllipsis, LuInfo, LuEye, LuEyeOff } from "../icons/icons_2.js";
 import { LuTriangleAlert, LuX } from "../icons/icons_4.js";
-import { inject } from "vue";
 import { assert } from "../utils/assert.js";
+import { inject } from "vue";
 const requiredIcons = [
   LuChevronsUpDown,
   LuEllipsis,

package/dist/composables/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":["../../src/composables/icons.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport {\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuArrowUp,\n  LuCheck,\n  LuCheckboxBlank,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuChevronsUpDown,\n  LuChevronUp,\n  LuCircleAlert,\n  LuCircleCheck,\n  LuCircleX,\n  LuClock,\n  LuEllipsis,\n  LuEye,\n  LuEyeOff,\n  LuInfo,\n  LuRadioButtonFill,\n  LuTriangleAlert,\n  LuX,\n} from '@/icons';\n\nconst requiredIcons: GeneratedIcon[] = [\n  LuChevronsUpDown,\n  LuEllipsis,\n  LuTriangleAlert,\n  LuX,\n  LuInfo,\n  LuArrowUp,\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuChevronUp,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuCircleAlert,\n  LuEye,\n  LuEyeOff,\n  LuCheck,\n  LuCircleX,\n  LuCircleCheck,\n  LuCheckboxBlank,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuRadioButtonFill,\n  LuClock,\n];\n\nexport interface IconsOptions {\n  registeredIcons: GeneratedIcon[];\n}\n\nexport interface UseIconsReturn {\n  registeredIcons: Readonly<Record<string, [string, Record<string, string>][]>>;\n}\n\nexport const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');\n\nexport function createIconDefaults(options?: Partial<IconsOptions>): UseIconsReturn {\n  const iconsToAdd = options?.registeredIcons || [];\n  return {\n    registeredIcons: {\n      ...Object.fromEntries(\n        [\n          ...requiredIcons,\n          ...iconsToAdd,\n        ].map(({ components, name }) => [name, components]),\n      ),\n    },\n  };\n}\n\nexport function useIcons(): UseIconsReturn {\n  const icons = inject(IconsSymbol);\n  assert(icons, 'Could not find icons injection');\n  return icons;\n}\n"],"names":[],"mappings":";;;;;AAiCA,MAAM,gBAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAUO,MAAM,cAA4C,uBAAO,IAAI,WAAW;AAExE,SAAS,mBAAmB,SAAiD;AAClF,QAAM,aAAa,SAAS,mBAAmB,CAAA;AAC/C,SAAO;AAAA,IACL,iBAAiB;AAAA,MACf,GAAG,OAAO;AAAA,QACR;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,QAAA,EACH,IAAI,CAAC,EAAE,YAAY,WAAW,CAAC,MAAM,UAAU,CAAC;AAAA,MAAA;AAAA,IACpD;AAAA,EACF;AAEJ;AAEO,SAAS,WAA2B;AACzC,QAAM,QAAQ,OAAO,WAAW;AAChC,SAAO,OAAO,gCAAgC;AAC9C,SAAO;AACT;"}
+{"version":3,"file":"icons.js","sources":["../../src/composables/icons.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport {\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuArrowUp,\n  LuCheck,\n  LuCheckboxBlank,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuChevronsUpDown,\n  LuChevronUp,\n  LuCircleAlert,\n  LuCircleCheck,\n  LuCircleX,\n  LuClock,\n  LuEllipsis,\n  LuEye,\n  LuEyeOff,\n  LuInfo,\n  LuRadioButtonFill,\n  LuTriangleAlert,\n  LuX,\n} from '@/icons';\nimport { assert } from '@/utils/assert';\n\nconst requiredIcons: GeneratedIcon[] = [\n  LuChevronsUpDown,\n  LuEllipsis,\n  LuTriangleAlert,\n  LuX,\n  LuInfo,\n  LuArrowUp,\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuChevronUp,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuCircleAlert,\n  LuEye,\n  LuEyeOff,\n  LuCheck,\n  LuCircleX,\n  LuCircleCheck,\n  LuCheckboxBlank,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuRadioButtonFill,\n  LuClock,\n];\n\nexport interface IconsOptions {\n  registeredIcons: GeneratedIcon[];\n}\n\nexport interface UseIconsReturn {\n  registeredIcons: Readonly<Record<string, [string, Record<string, string>][]>>;\n}\n\nexport const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');\n\nexport function createIconDefaults(options?: Partial<IconsOptions>): UseIconsReturn {\n  const iconsToAdd = options?.registeredIcons || [];\n  return {\n    registeredIcons: {\n      ...Object.fromEntries(\n        [\n          ...requiredIcons,\n          ...iconsToAdd,\n        ].map(({ components, name }) => [name, components]),\n      ),\n    },\n  };\n}\n\nexport function useIcons(): UseIconsReturn {\n  const icons = inject(IconsSymbol);\n  assert(icons, 'Could not find icons injection');\n  return icons;\n}\n"],"names":[],"mappings":";;;;;AAkCA,MAAM,gBAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAUO,MAAM,cAA4C,uBAAO,IAAI,WAAW;AAExE,SAAS,mBAAmB,SAAiD;AAClF,QAAM,aAAa,SAAS,mBAAmB,CAAA;AAC/C,SAAO;AAAA,IACL,iBAAiB;AAAA,MACf,GAAG,OAAO;AAAA,QACR;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,QAAA,EACH,IAAI,CAAC,EAAE,YAAY,WAAW,CAAC,MAAM,UAAU,CAAC;AAAA,MAAA;AAAA,IACpD;AAAA,EACF;AAEJ;AAEO,SAAS,WAA2B;AACzC,QAAM,QAAQ,OAAO,WAAW;AAChC,SAAO,OAAO,gCAAgC;AAC9C,SAAO;AACT;"}

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) {
-  const reference = ref(void 0);
-  const popper = ref(void 0);
-  const instance = ref(void 0);
-  const open = ref(false);
-  const popperEnter = ref(false);
-  const leavePending = ref(false);
+function usePopper(options, disabled = shallowRef(false), openDelay = shallowRef(0), closeDelay = shallowRef(0), virtualReference) {
+  const reference = ref();
+  const popper = ref();
+  const instance = ref();
+  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 {

package/dist/composables/popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"popper.js","sources":["../../src/composables/popper.ts"],"sourcesContent":["import { createPopper, type Instance, type Placement, type PositioningStrategy, type VirtualElement } from '@popperjs/core';\nimport { type MaybeElement, unrefElement } from '@vueuse/core';\nimport { onMounted, type Ref, ref, watchEffect } from 'vue';\nimport { useTimeoutManager } from './timeout-manager';\n\nexport interface PopperOptions {\n  locked?: boolean;\n  overflowPadding?: number;\n  offsetDistance?: number;\n  offsetSkid?: number;\n  placement?: Placement;\n  strategy?: PositioningStrategy;\n  gpuAcceleration?: boolean;\n  adaptive?: boolean;\n  scroll?: boolean;\n  resize?: boolean;\n}\n\nexport const DEFAULT_POPPER_OPTIONS: PopperOptions = {\n  adaptive: true,\n  gpuAcceleration: true,\n  locked: false,\n  offsetDistance: 8,\n  offsetSkid: 0,\n  overflowPadding: 8,\n  placement: 'bottom',\n  resize: true,\n  scroll: true,\n  strategy: 'absolute',\n};\n\ninterface UsePopperReturn {\n  instance: Ref<Instance | undefined>;\n  leavePending: Ref<boolean>;\n  onClose: (immediate?: boolean) => void;\n  onLeavePending: () => void;\n  onOpen: (immediate?: boolean) => void;\n  onPopperLeave: () => void;\n  open: Ref<boolean, boolean>;\n  popper: Ref<MaybeElement>;\n  popperEnter: Ref<boolean>;\n  reference: Ref<HTMLElement | undefined>;\n  updatePopper: () => Promise<void>;\n}\n\nexport function usePopper(\n  options: Ref<PopperOptions>,\n  disabled: Ref<boolean> = ref(false),\n  openDelay: Ref<number> = ref(0),\n  closeDelay: Ref<number> = ref(0),\n  virtualReference?: Ref<Element | VirtualElement>,\n): UsePopperReturn {\n  const reference = ref<HTMLElement | undefined>(undefined);\n  const popper = ref<MaybeElement | undefined>(undefined);\n  const instance = ref<Instance | undefined>(undefined);\n  const open = ref<boolean>(false);\n  const popperEnter = ref<boolean>(false);\n  const leavePending = ref<boolean>(false);\n\n  const openTimeoutManager = useTimeoutManager();\n  const closeTimeoutManager = useTimeoutManager();\n\n  const onPopperLeave = () => {\n    set(popperEnter, false);\n  };\n\n  const updatePopper = async (): Promise<void> => {\n    await get(instance)?.update();\n  };\n\n  const onOpen = (immediate = false) => {\n    if (get(disabled))\n      return;\n\n    closeTimeoutManager.clear();\n\n    set(leavePending, false);\n    if (!openTimeoutManager.isActive()) {\n      set(popperEnter, true);\n\n      openTimeoutManager.create(() => {\n        set(open, true);\n      }, immediate ? 0 : get(openDelay));\n    }\n  };\n\n  const onClose = (immediate = false) => {\n    if (get(disabled))\n      return;\n\n    openTimeoutManager.clear();\n\n    if (!closeTimeoutManager.isActive()) {\n      closeTimeoutManager.create(() => {\n        if (!get(open))\n          onPopperLeave();\n\n        set(open, false);\n      }, immediate ? 0 : get(closeDelay));\n    }\n  };\n\n  const onLeavePending = () => {\n    set(leavePending, true);\n  };\n\n  const modifiers = computed(() => {\n    const {\n      adaptive = DEFAULT_POPPER_OPTIONS.adaptive,\n      gpuAcceleration = DEFAULT_POPPER_OPTIONS.gpuAcceleration,\n      locked = DEFAULT_POPPER_OPTIONS.locked,\n      offsetDistance = DEFAULT_POPPER_OPTIONS.offsetDistance,\n      offsetSkid = DEFAULT_POPPER_OPTIONS.offsetSkid,\n      overflowPadding = DEFAULT_POPPER_OPTIONS.overflowPadding,\n      resize = DEFAULT_POPPER_OPTIONS.resize,\n      scroll = DEFAULT_POPPER_OPTIONS.scroll,\n    } = get(options);\n\n    return [{\n      enabled: false,\n      name: 'hide',\n    }, {\n      enabled: !locked,\n      name: 'flip',\n    }, {\n      name: 'preventOverflow',\n      options: {\n        padding: overflowPadding,\n      },\n    }, {\n      name: 'offset',\n      options: {\n        offset: [offsetSkid, offsetDistance],\n      },\n    }, {\n      name: 'computeStyles',\n      options: {\n        adaptive,\n        gpuAcceleration,\n      },\n    }, {\n      name: 'eventListeners',\n      options: {\n        resize,\n        scroll,\n      },\n    }, {\n      name: 'arrow',\n      options: {\n        padding: 4,\n      },\n    }];\n  });\n\n  const popperConfig = computed(() => {\n    const {\n      placement = DEFAULT_POPPER_OPTIONS.placement,\n      strategy = DEFAULT_POPPER_OPTIONS.strategy,\n    } = get(options);\n\n    return {\n      modifiers: get(modifiers),\n      placement,\n      strategy,\n    };\n  });\n\n  function getValidElements(): { popperEl: HTMLElement; referenceEl: Element | VirtualElement } | null {\n    if (!get(popper) || (!get(reference) && !get(virtualReference))) {\n      return null;\n    }\n\n    const popperEl = unrefElement(popper);\n    const referenceEl = get(virtualReference) || unrefElement(reference);\n\n    if (!(popperEl instanceof HTMLElement) || !referenceEl) {\n      return null;\n    }\n\n    return { popperEl, referenceEl };\n  }\n\n  function initializePopper(onInvalidate: (cleanupFn: () => void) => void) {\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popperEl, referenceEl } = elements;\n\n    const value = createPopper(referenceEl, popperEl, get(popperConfig));\n\n    set(instance, value);\n    onInvalidate(value.destroy);\n  }\n\n  useResizeObserver([reference, popper], async () => {\n    if (isDefined(instance))\n      await get(instance).update();\n  });\n\n  onMounted(() => {\n    watchEffect((onInvalidate) => {\n      initializePopper(onInvalidate);\n    });\n  });\n\n  return {\n    instance,\n    leavePending,\n    onClose,\n    onLeavePending,\n    onOpen,\n    onPopperLeave,\n    open,\n    popper,\n    popperEnter,\n    reference,\n    updatePopper,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"popper.js","sources":["../../src/composables/popper.ts"],"sourcesContent":["import {\n  createPopper,\n  type Instance,\n  type Placement,\n  type PositioningStrategy,\n  type StrictModifiers,\n  type VirtualElement,\n} from '@popperjs/core';\nimport { type MaybeElement, unrefElement } from '@vueuse/core';\nimport { onMounted, type Ref, ref, watchEffect } from 'vue';\nimport { useTimeoutManager } from './timeout-manager';\n\nexport interface PopperOptions {\n  locked?: boolean;\n  overflowPadding?: number;\n  offsetDistance?: number;\n  offsetSkid?: number;\n  placement?: Placement;\n  strategy?: PositioningStrategy;\n  gpuAcceleration?: boolean;\n  adaptive?: boolean;\n  scroll?: boolean;\n  resize?: boolean;\n}\n\nexport const DEFAULT_POPPER_OPTIONS: PopperOptions = {\n  adaptive: true,\n  gpuAcceleration: true,\n  locked: false,\n  offsetDistance: 8,\n  offsetSkid: 0,\n  overflowPadding: 8,\n  placement: 'bottom',\n  resize: true,\n  scroll: true,\n  strategy: 'absolute',\n};\n\ninterface UsePopperReturn {\n  instance: Ref<Instance | undefined>;\n  leavePending: Ref<boolean>;\n  onClose: (immediate?: boolean) => void;\n  onLeavePending: () => void;\n  onOpen: (immediate?: boolean) => void;\n  onPopperLeave: () => void;\n  open: Ref<boolean, boolean>;\n  popper: Ref<MaybeElement>;\n  popperEnter: Ref<boolean>;\n  reference: Ref<HTMLElement | undefined>;\n  updatePopper: () => Promise<void>;\n}\n\nexport function usePopper(\n  options: Ref<PopperOptions>,\n  disabled: Ref<boolean> = shallowRef(false),\n  openDelay: Ref<number> = shallowRef(0),\n  closeDelay: Ref<number> = shallowRef(0),\n  virtualReference?: Ref<Element | VirtualElement>,\n): UsePopperReturn {\n  const reference = ref<HTMLElement>();\n  const popper = ref<MaybeElement>();\n  const instance = ref<Instance>();\n  const open = shallowRef<boolean>(false);\n  const popperEnter = shallowRef<boolean>(false);\n  const leavePending = shallowRef<boolean>(false);\n\n  const openTimeoutManager = useTimeoutManager();\n  const closeTimeoutManager = useTimeoutManager();\n\n  const onPopperLeave = (): void => {\n    set(popperEnter, false);\n  };\n\n  const updatePopper = async (): Promise<void> => {\n    await get(instance)?.update();\n  };\n\n  const onOpen = (immediate: boolean = false): void => {\n    if (get(disabled))\n      return;\n\n    closeTimeoutManager.clear();\n\n    set(leavePending, false);\n    if (!openTimeoutManager.isActive()) {\n      set(popperEnter, true);\n\n      openTimeoutManager.create(\n        () => {\n          set(open, true);\n        },\n        immediate ? 0 : get(openDelay),\n      );\n    }\n  };\n\n  const onClose = (immediate: boolean = false): void => {\n    if (get(disabled))\n      return;\n\n    openTimeoutManager.clear();\n\n    if (!closeTimeoutManager.isActive()) {\n      closeTimeoutManager.create(\n        () => {\n          if (!get(open))\n            onPopperLeave();\n\n          set(open, false);\n        },\n        immediate ? 0 : get(closeDelay),\n      );\n    }\n  };\n\n  const onLeavePending = (): void => {\n    set(leavePending, true);\n  };\n\n  const modifiers = computed<StrictModifiers[]>(() => {\n    const {\n      adaptive = DEFAULT_POPPER_OPTIONS.adaptive,\n      gpuAcceleration = DEFAULT_POPPER_OPTIONS.gpuAcceleration,\n      locked = DEFAULT_POPPER_OPTIONS.locked,\n      offsetDistance = DEFAULT_POPPER_OPTIONS.offsetDistance,\n      offsetSkid = DEFAULT_POPPER_OPTIONS.offsetSkid,\n      overflowPadding = DEFAULT_POPPER_OPTIONS.overflowPadding,\n      resize = DEFAULT_POPPER_OPTIONS.resize,\n      scroll = DEFAULT_POPPER_OPTIONS.scroll,\n    } = get(options);\n\n    return [\n      {\n        enabled: false,\n        name: 'hide',\n      },\n      {\n        enabled: !locked,\n        name: 'flip',\n      },\n      {\n        name: 'preventOverflow',\n        options: {\n          padding: overflowPadding,\n        },\n      },\n      {\n        name: 'offset',\n        options: {\n          offset: [offsetSkid, offsetDistance],\n        },\n      },\n      {\n        name: 'computeStyles',\n        options: {\n          adaptive,\n          gpuAcceleration,\n        },\n      },\n      {\n        name: 'eventListeners',\n        options: {\n          resize,\n          scroll,\n        },\n      },\n      {\n        name: 'arrow',\n        options: {\n          padding: 4,\n        },\n      },\n    ];\n  });\n\n  const popperConfig = computed<{\n    modifiers: StrictModifiers[];\n    placement: Placement | undefined;\n    strategy: PositioningStrategy | undefined;\n  }>(() => {\n    const {\n      placement = DEFAULT_POPPER_OPTIONS.placement,\n      strategy = DEFAULT_POPPER_OPTIONS.strategy,\n    } = get(options);\n\n    return {\n      modifiers: get(modifiers),\n      placement,\n      strategy,\n    };\n  });\n\n  function getValidElements(): {\n    popperEl: HTMLElement;\n    referenceEl: Element | VirtualElement;\n  } | null {\n    if (!get(popper) || (!get(reference) && !get(virtualReference))) {\n      return null;\n    }\n\n    const popperEl = unrefElement(popper);\n    const referenceEl = get(virtualReference) || unrefElement(reference);\n\n    if (!(popperEl instanceof HTMLElement) || !referenceEl) {\n      return null;\n    }\n\n    return { popperEl, referenceEl };\n  }\n\n  function initializePopper(onInvalidate: (cleanupFn: () => void) => void): void {\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popperEl, referenceEl } = elements;\n\n    const value = createPopper(referenceEl, popperEl, get(popperConfig));\n\n    set(instance, value);\n    onInvalidate(value.destroy);\n  }\n\n  useResizeObserver([reference, popper], async () => {\n    if (isDefined(instance))\n      await get(instance).update();\n  });\n\n  onMounted(() => {\n    watchEffect((onInvalidate) => {\n      initializePopper(onInvalidate);\n    });\n  });\n\n  return {\n    instance,\n    leavePending,\n    onClose,\n    onLeavePending,\n    onOpen,\n    onPopperLeave,\n    open,\n    popper,\n    popperEnter,\n    reference,\n    updatePopper,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/composables/sticky-header.d.ts

@@ -1,9 +1,11 @@
-import type { MaybeRef } from 'vue';
+import type { MaybeRef, ShallowRef } from 'vue';
+export interface UseStickyTableHeaderRefs {
+    table: Readonly<ShallowRef<HTMLTableElement | null>>;
+    tableScroller: Readonly<ShallowRef<HTMLElement | null>>;
+}
 /**
  * Setup sticky table header
  */
-export declare function useStickyTableHeader(sticky?: MaybeRef<boolean>, offsetTop?: MaybeRef<number>): {
-    stick: globalThis.Ref<boolean, boolean>;
-    table: globalThis.Ref<HTMLTableElement | null, HTMLTableElement | null>;
-    tableScroller: globalThis.Ref<HTMLElement | null, HTMLElement | null>;
+export declare function useStickyTableHeader(sticky: MaybeRef<boolean> | undefined, offsetTop: MaybeRef<number | undefined>, refs: UseStickyTableHeaderRefs): {
+    stick: ShallowRef<boolean>;
 };

package/dist/composables/sticky-header.js

@@ -1,11 +1,10 @@
 import { assert } from "../utils/assert.js";
-import { ref, onMounted } from "vue";
+import { shallowRef, onMounted } from "vue";
 import { get, set } from "@vueuse/shared";
 import { useEventListener, useMutationObserver, useResizeObserver } from "@vueuse/core";
-function useStickyTableHeader(sticky = ref(false), offsetTop) {
-  const table = ref(null);
-  const tableScroller = ref(null);
-  const stick = ref(false);
+function useStickyTableHeader(sticky = shallowRef(false), offsetTop, refs) {
+  const { table, tableScroller } = refs;
+  const stick = shallowRef(false);
   const borderPrecision = -0.5;
   const selectors = {
     head: ":scope > thead[data-id=head-main]",
@@ -17,17 +16,18 @@ function useStickyTableHeader(sticky = ref(false), offsetTop) {
     const root = get(table);
     if (!get(sticky) || !root)
       return;
-    const theadClone = root.querySelector(
-      `${selectors.headClone} > tr`
-    );
-    const head = root.querySelector(`${selectors.head} > tr`) ?? null;
+    const theadClone = root.querySelector(`${selectors.headClone} > tr`);
+    const head = root.querySelector(`${selectors.head} > tr`);
+    let resizeCleanups = [];
     const observeChildTh = () => {
-      const columns = head?.querySelectorAll(
+      resizeCleanups.forEach((cleanup) => cleanup());
+      resizeCleanups = [];
+      const columns = head?.querySelectorAll(selectors.th);
+      const clonedColumns = theadClone?.querySelectorAll(
         selectors.th
       );
-      const clonedColumns = theadClone?.querySelectorAll(selectors.th);
       clonedColumns?.forEach((th, i) => {
-        useResizeObserver(th, (entries) => {
+        const { stop } = useResizeObserver(th, (entries) => {
           const entry = entries[0];
           assert(entry);
           const cellRect = entry.target.getBoundingClientRect();
@@ -35,18 +35,23 @@ function useStickyTableHeader(sticky = ref(false), offsetTop) {
           if (column)
             column.style.width = `${cellRect.width}px`;
         });
+        resizeCleanups.push(stop);
       });
     };
-    useMutationObserver(theadClone, (mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList" || mutation.type === "attributes")
-          observeChildTh();
+    useMutationObserver(
+      theadClone,
+      (mutationsList) => {
+        for (const mutation of mutationsList) {
+          if (mutation.type === "childList" || mutation.type === "attributes")
+            observeChildTh();
+        }
+      },
+      {
+        attributes: true,
+        childList: true,
+        subtree: true
       }
-    }, {
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
+    );
     observeChildTh();
   };
   const toggleStickyClass = () => {
@@ -54,49 +59,54 @@ function useStickyTableHeader(sticky = ref(false), offsetTop) {
     if (!get(sticky) || !root)
       return;
     const rect = root.getBoundingClientRect();
-    const theadClone = root.querySelector(
-      selectors.headClone
-    );
+    const theadClone = root.querySelector(selectors.headClone);
     const clonedRect = theadClone?.getBoundingClientRect();
-    const head = root.querySelector(selectors.head) ?? null;
-    const headRect = head?.getBoundingClientRect();
-    if (!rect || !clonedRect || !head || !theadClone || !headRect)
+    const head = root.querySelector(selectors.head);
+    if (!clonedRect || !head || !theadClone)
       return;
-    const {
-      height: theadHeight,
-      left: theadLeft,
-      width: theadWidth
-    } = clonedRect;
+    const { height: theadHeight, left: theadLeft, width: theadWidth } = clonedRect;
     const { bottom: tableBottom, top: tableTop } = rect;
     const top = get(offsetTop) ?? 0;
     head.style.width = `${theadWidth}px`;
     const rows = root.querySelectorAll(selectors.row);
+    if (rows.length <= 1) {
+      set(stick, false);
+      head.style.left = `${borderPrecision}px`;
+      head.style.top = "0";
+      return;
+    }
     const lastRowRect = rows.item(rows.length - 1)?.getBoundingClientRect();
-    if (tableTop <= top && tableBottom > top && rows.length > 1) {
+    if (tableTop <= top && tableBottom > top) {
       set(stick, true);
       head.style.left = `${theadLeft + borderPrecision}px`;
       const lastRowHeight = lastRowRect?.height ?? 0;
       if (tableBottom <= lastRowHeight + theadHeight + top)
         head.style.top = `${tableBottom - lastRowHeight - theadHeight}px`;
-      else
-        head.style.top = `${top}px`;
+      else head.style.top = `${top}px`;
     } else {
       set(stick, false);
       head.style.left = `${borderPrecision}px`;
       head.style.top = "0";
     }
   };
+  let rafId = null;
+  function throttledToggleStickyClass() {
+    if (rafId !== null)
+      return;
+    rafId = requestAnimationFrame(() => {
+      toggleStickyClass();
+      rafId = null;
+    });
+  }
   onMounted(() => {
     toggleStickyClass();
-    useEventListener(tableScroller, "scroll", toggleStickyClass);
-    useEventListener(document.body, "scroll", toggleStickyClass);
-    useEventListener(window, "resize", toggleStickyClass);
+    useEventListener(tableScroller, "scroll", throttledToggleStickyClass);
+    useEventListener(document.body, "scroll", throttledToggleStickyClass);
+    useEventListener(window, "resize", throttledToggleStickyClass);
     watchCellWidth();
   });
   return {
-    stick,
-    table,
-    tableScroller
+    stick
   };
 }
 export {