@rotki/ui-library 2.8.1 → 2.8.2

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

@@ -0,0 +1,129 @@
+import { get, set } from "@vueuse/shared";
+import { assert } from "../../../utils/assert.js";
+import { computed } 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);
+    for (const item of optionsData) {
+      map.set(deps.getIdentifier(item), item);
+    }
+    return map;
+  });
+  function convertModelValueToArray(modelValueData) {
+    if (!modelValueData)
+      return [];
+    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];
+  }
+  function filterValuesByOptions(valueArray, optionsMapData, customValue, returnObject) {
+    const filtered = [];
+    filtered.length = valueArray.length;
+    let index = 0;
+    for (const val of valueArray) {
+      const identifier = deps.getIdentifier(val);
+      const inOptions = optionsMapData.get(identifier);
+      if (inOptions) {
+        filtered[index++] = inOptions;
+      } else if (customValue) {
+        filtered[index++] = deps.textValueToProperValue(val, returnObject);
+      }
+    }
+    filtered.length = index;
+    return filtered;
+  }
+  function filterValuesByIdentifier(valueArray, optionsMapData, customValue, returnObject) {
+    const filtered = [];
+    filtered.length = valueArray.length;
+    let index = 0;
+    for (const val of valueArray) {
+      const inOptions = optionsMapData.get(val);
+      if (inOptions) {
+        filtered[index++] = inOptions;
+      } else if (customValue) {
+        filtered[index++] = deps.textValueToProperValue(val, returnObject);
+      }
+    }
+    filtered.length = index;
+    return filtered;
+  }
+  function processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue, shouldUpdateInternalSearch) {
+    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();
+      return filtered;
+    }
+    const val = filtered[0];
+    assert(val);
+    if (shouldUpdateInternalSearch)
+      deps.updateInternalSearch(deps.getText(val));
+    return [val];
+  }
+  function processStandardValue(modelValueData, optionsMapData, returnObject, customValue, shouldUpdateInternalSearch) {
+    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;
+  }
+  function onUpdateModelValue(value2) {
+    set(modelValue, value2);
+  }
+  function setSelected(selected) {
+    const keyAttr = get(opts.keyAttr);
+    const returnObject = get(opts.returnObject);
+    const selection = keyAttr && !returnObject ? selected.map((item) => item[keyAttr]) : selected;
+    if (get(multiple))
+      return onUpdateModelValue(selection);
+    if (selection.length === 0)
+      return onUpdateModelValue(void 0);
+    return onUpdateModelValue(selection[0]);
+  }
+  const value = computed({
+    get: () => {
+      const modelValueData = get(modelValue);
+      const keyAttr = get(opts.keyAttr);
+      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
+      );
+    },
+    set: (selected) => {
+      setSelected(selected);
+    }
+  });
+  return {
+    setSelected,
+    value
+  };
+}
+export {
+  useAutoCompleteValue
+};
+//# sourceMappingURL=value.js.map

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

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

package/dist/composables/icons.js

@@ -0,0 +1,60 @@
+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";
+const requiredIcons = [
+  LuChevronsUpDown,
+  LuEllipsis,
+  LuTriangleAlert,
+  LuX,
+  LuInfo,
+  LuArrowUp,
+  LuArrowDown,
+  LuArrowLeft,
+  LuArrowRight,
+  LuChevronUp,
+  LuChevronDown,
+  LuChevronLeft,
+  LuChevronRight,
+  LuChevronsLeft,
+  LuChevronsRight,
+  LuCircleAlert,
+  LuEye,
+  LuEyeOff,
+  LuCheck,
+  LuCircleX,
+  LuCircleCheck,
+  LuCheckboxBlank,
+  LuCheckboxFill,
+  LuCheckboxIndeterminateFill,
+  LuCheckboxBlankCircle,
+  LuCheckboxBlankCircleFill,
+  LuRadioButtonFill,
+  LuClock
+];
+const IconsSymbol = Symbol.for("rui:icons");
+function createIconDefaults(options) {
+  const iconsToAdd = options?.registeredIcons || [];
+  return {
+    registeredIcons: {
+      ...Object.fromEntries(
+        [
+          ...requiredIcons,
+          ...iconsToAdd
+        ].map(({ components, name }) => [name, components])
+      )
+    }
+  };
+}
+function useIcons() {
+  const icons = inject(IconsSymbol);
+  assert(icons, "Could not find icons injection");
+  return icons;
+}
+export {
+  IconsSymbol,
+  createIconDefaults,
+  useIcons
+};
+//# sourceMappingURL=icons.js.map

package/dist/composables/icons.js.map

@@ -0,0 +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,OAAO,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/index.d.ts

@@ -1,3 +1,3 @@
-export { useBreakpoint } from '../composables/breakpoint';
-export { useIcons } from '../composables/icons';
-export { useRotkiTheme } from '../composables/theme';
+export { useBreakpoint } from '../composables/breakpoint.js';
+export { useIcons } from '../composables/icons.js';
+export { useRotkiTheme } from '../composables/theme.js';

package/dist/composables/index.js

@@ -0,0 +1,9 @@
+import { useBreakpoint } from "./breakpoint.js";
+import { useIcons } from "./icons.js";
+import { useRotkiTheme } from "./theme.js";
+export {
+  useBreakpoint,
+  useIcons,
+  useRotkiTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/composables/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/composables/popper.js

@@ -0,0 +1,164 @@
+import { createPopper } from "@popperjs/core";
+import { useResizeObserver, isDefined, unrefElement } from "@vueuse/core";
+import { ref, computed, onMounted, watchEffect } from "vue";
+import { useTimeoutManager } from "./timeout-manager.js";
+import { get, set } from "@vueuse/shared";
+const DEFAULT_POPPER_OPTIONS = {
+  adaptive: true,
+  gpuAcceleration: true,
+  locked: false,
+  offsetDistance: 8,
+  offsetSkid: 0,
+  overflowPadding: 8,
+  placement: "bottom",
+  resize: true,
+  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);
+  const openTimeoutManager = useTimeoutManager();
+  const closeTimeoutManager = useTimeoutManager();
+  const onPopperLeave = () => {
+    set(popperEnter, false);
+  };
+  const updatePopper = async () => {
+    await get(instance)?.update();
+  };
+  const onOpen = (immediate = false) => {
+    if (get(disabled))
+      return;
+    closeTimeoutManager.clear();
+    set(leavePending, false);
+    if (!openTimeoutManager.isActive()) {
+      set(popperEnter, true);
+      openTimeoutManager.create(() => {
+        set(open, true);
+      }, immediate ? 0 : get(openDelay));
+    }
+  };
+  const onClose = (immediate = false) => {
+    if (get(disabled))
+      return;
+    openTimeoutManager.clear();
+    if (!closeTimeoutManager.isActive()) {
+      closeTimeoutManager.create(() => {
+        if (!get(open))
+          onPopperLeave();
+        set(open, false);
+      }, immediate ? 0 : get(closeDelay));
+    }
+  };
+  const onLeavePending = () => {
+    set(leavePending, true);
+  };
+  const modifiers = computed(() => {
+    const {
+      adaptive = DEFAULT_POPPER_OPTIONS.adaptive,
+      gpuAcceleration = DEFAULT_POPPER_OPTIONS.gpuAcceleration,
+      locked = DEFAULT_POPPER_OPTIONS.locked,
+      offsetDistance = DEFAULT_POPPER_OPTIONS.offsetDistance,
+      offsetSkid = DEFAULT_POPPER_OPTIONS.offsetSkid,
+      overflowPadding = DEFAULT_POPPER_OPTIONS.overflowPadding,
+      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
+      }
+    }, {
+      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 {
+      placement = DEFAULT_POPPER_OPTIONS.placement,
+      strategy = DEFAULT_POPPER_OPTIONS.strategy
+    } = get(options);
+    return {
+      modifiers: get(modifiers),
+      placement,
+      strategy
+    };
+  });
+  function getValidElements() {
+    if (!get(popper) || !get(reference) && !get(virtualReference)) {
+      return null;
+    }
+    const popperEl = unrefElement(popper);
+    const referenceEl = get(virtualReference) || unrefElement(reference);
+    if (!(popperEl instanceof HTMLElement) || !referenceEl) {
+      return null;
+    }
+    return { popperEl, referenceEl };
+  }
+  function initializePopper(onInvalidate) {
+    const elements = getValidElements();
+    if (!elements)
+      return;
+    const { popperEl, referenceEl } = elements;
+    const value = createPopper(referenceEl, popperEl, get(popperConfig));
+    set(instance, value);
+    onInvalidate(value.destroy);
+  }
+  useResizeObserver([reference, popper], async () => {
+    if (isDefined(instance))
+      await get(instance).update();
+  });
+  onMounted(() => {
+    watchEffect((onInvalidate) => {
+      initializePopper(onInvalidate);
+    });
+  });
+  return {
+    instance,
+    leavePending,
+    onClose,
+    onLeavePending,
+    onOpen,
+    onPopperLeave,
+    open,
+    popper,
+    popperEnter,
+    reference,
+    updatePopper
+  };
+}
+export {
+  DEFAULT_POPPER_OPTIONS,
+  usePopper
+};
+//# sourceMappingURL=popper.js.map

package/dist/composables/popper.js.map

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

package/dist/composables/sticky-header.js

@@ -0,0 +1,105 @@
+import { assert } from "../utils/assert.js";
+import { ref, 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);
+  const borderPrecision = -0.5;
+  const selectors = {
+    head: ":scope > thead[data-id=head-main]",
+    headClone: ":scope > thead[data-id=head-clone]",
+    row: ":scope > tbody > tr:not([hidden])",
+    th: ":scope > th"
+  };
+  const watchCellWidth = () => {
+    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 observeChildTh = () => {
+      const columns = head?.querySelectorAll(
+        selectors.th
+      );
+      const clonedColumns = theadClone?.querySelectorAll(selectors.th);
+      clonedColumns?.forEach((th, i) => {
+        useResizeObserver(th, (entries) => {
+          const entry = entries[0];
+          assert(entry);
+          const cellRect = entry.target.getBoundingClientRect();
+          const column = columns?.item(i);
+          if (column)
+            column.style.width = `${cellRect.width}px`;
+        });
+      });
+    };
+    useMutationObserver(theadClone, (mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList" || mutation.type === "attributes")
+          observeChildTh();
+      }
+    }, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    observeChildTh();
+  };
+  const toggleStickyClass = () => {
+    const root = get(table);
+    if (!get(sticky) || !root)
+      return;
+    const rect = root.getBoundingClientRect();
+    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)
+      return;
+    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);
+    const lastRowRect = rows.item(rows.length - 1)?.getBoundingClientRect();
+    if (tableTop <= top && tableBottom > top && rows.length > 1) {
+      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 {
+      set(stick, false);
+      head.style.left = `${borderPrecision}px`;
+      head.style.top = "0";
+    }
+  };
+  onMounted(() => {
+    toggleStickyClass();
+    useEventListener(tableScroller, "scroll", toggleStickyClass);
+    useEventListener(document.body, "scroll", toggleStickyClass);
+    useEventListener(window, "resize", toggleStickyClass);
+    watchCellWidth();
+  });
+  return {
+    stick,
+    table,
+    tableScroller
+  };
+}
+export {
+  useStickyTableHeader
+};
+//# sourceMappingURL=sticky-header.js.map

package/dist/composables/sticky-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-header.js","sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(sticky: MaybeRef<boolean> = ref(false), offsetTop?: MaybeRef<number>) {\n  const table: Ref<HTMLTableElement | null> = ref(null);\n  const tableScroller: Ref<HTMLElement | null> = ref(null);\n  const stick: Ref<boolean> = ref(false);\n  const borderPrecision = -0.5;\n  const selectors = {\n    head: ':scope > thead[data-id=head-main]',\n    headClone: ':scope > thead[data-id=head-clone]',\n    row: ':scope > tbody > tr:not([hidden])',\n    th: ':scope > th',\n  };\n\n  const watchCellWidth = () => {\n    const root = get(table);\n\n    if (!get(sticky) || !root)\n      return;\n\n    const theadClone: HTMLHeadElement | null = root.querySelector(\n      `${selectors.headClone} > tr`,\n    );\n\n    const head: HTMLHeadElement | null\n      = root.querySelector(`${selectors.head} > tr`) ?? null;\n\n    const observeChildTh = () => {\n      const columns: NodeListOf<HTMLElement> | undefined = head?.querySelectorAll(\n        selectors.th,\n      );\n\n      const clonedColumns: NodeListOf<HTMLElement> | undefined\n        = theadClone?.querySelectorAll(selectors.th);\n\n      clonedColumns?.forEach((th: HTMLElement, i: number) => {\n        useResizeObserver(th, (entries) => {\n          const entry = entries[0];\n          assert(entry);\n          const cellRect = entry.target.getBoundingClientRect();\n          const column = columns?.item(i);\n          if (column)\n            column.style.width = `${cellRect.width}px`;\n        });\n      });\n    };\n\n    useMutationObserver(theadClone, (mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList' || mutation.type === 'attributes')\n          observeChildTh();\n      }\n    }, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    // Initial setup to observe the existing th elements\n    observeChildTh();\n  };\n\n  const toggleStickyClass = () => {\n    const root = get(table);\n\n    if (!get(sticky) || !root)\n      return;\n\n    const rect = root.getBoundingClientRect();\n    const theadClone: HTMLHeadElement | null = root.querySelector(\n      selectors.headClone,\n    );\n\n    const clonedRect: DOMRect | undefined = theadClone?.getBoundingClientRect();\n\n    const head: HTMLHeadElement | null\n      = root.querySelector(selectors.head) ?? null;\n\n    const headRect: DOMRect | undefined = head?.getBoundingClientRect();\n\n    if (!rect || !clonedRect || !head || !theadClone || !headRect)\n      return;\n\n    const {\n      height: theadHeight,\n      left: theadLeft,\n      width: theadWidth,\n    } = clonedRect;\n\n    const { bottom: tableBottom, top: tableTop } = rect;\n    const top = get(offsetTop) ?? 0;\n\n    head.style.width = `${theadWidth}px`;\n\n    const rows = root.querySelectorAll(selectors.row);\n\n    const lastRowRect: DOMRect | undefined = rows\n      .item(rows.length - 1)\n      ?.getBoundingClientRect();\n\n    if (tableTop <= top && tableBottom > top && rows.length > 1) {\n      set(stick, true);\n      head.style.left = `${theadLeft + borderPrecision}px`;\n\n      const lastRowHeight = lastRowRect?.height ?? 0;\n      if (tableBottom <= lastRowHeight + theadHeight + top)\n        head.style.top = `${tableBottom - lastRowHeight - theadHeight}px`;\n      else\n        head.style.top = `${top}px`;\n    }\n    else {\n      set(stick, false);\n      head.style.left = `${borderPrecision}px`;\n      head.style.top = '0';\n    }\n  };\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(tableScroller, 'scroll', toggleStickyClass);\n    useEventListener(document.body, 'scroll', toggleStickyClass);\n    useEventListener(window, 'resize', toggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick,\n    table,\n    tableScroller,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/composables/theme.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeContent } from '../types/theme';
+import { type ThemeContent } from '../types/theme.js';
 /**
  * Theme manager
  * @returns {ThemeContent}

package/dist/composables/theme.js

@@ -0,0 +1,75 @@
+import { createSharedComposable, useColorMode } from "@vueuse/core";
+import { ref, watch, computed } from "vue";
+import { defaultTheme, ThemeMode } from "../types/theme.js";
+import { set, get } from "@vueuse/shared";
+const config = ref({ ...defaultTheme });
+const useRotkiTheme = createSharedComposable(() => {
+  const { state, store } = useColorMode();
+  const { state: attributeState } = useColorMode({
+    attribute: "data-theme"
+  });
+  watch(state, (newState) => {
+    set(attributeState, newState);
+  });
+  const isAutoControlled = computed(() => get(store) === ThemeMode.auto);
+  const isLight = computed(() => get(state) === ThemeMode.light);
+  const isDark = computed(() => get(state) === ThemeMode.dark);
+  const theme = computed(() => {
+    if (get(isLight))
+      return get(config).light;
+    return get(config).dark;
+  });
+  const switchThemeScheme = (mode) => {
+    set(store, mode || ThemeMode.auto);
+  };
+  const toggleThemeMode = () => {
+    if (get(isAutoControlled))
+      switchThemeScheme(ThemeMode.light);
+    else if (get(isLight))
+      switchThemeScheme(ThemeMode.dark);
+    else if (get(isDark))
+      switchThemeScheme(ThemeMode.auto);
+  };
+  const setThemeConfig = (newConfig) => {
+    set(config, newConfig);
+  };
+  const init = (options) => {
+    switchThemeScheme(options.mode ?? ThemeMode.auto);
+    setThemeConfig(options.config ?? { ...defaultTheme });
+    if (typeof window !== "undefined") {
+      watch([isLight, theme], ([isLight2, theme2]) => {
+        const styleVariables = /* @__PURE__ */ new Map();
+        Object.entries(theme2).forEach(([context, contextObject]) => {
+          styleVariables.set(`--rui-${context}-darker`, contextObject.darker);
+          styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);
+          styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);
+        });
+        const state2 = isLight2 ? ThemeMode.light : ThemeMode.dark;
+        styleVariables.set("--rui-text-disabled", `var(--rui-${state2}-text-disabled)`);
+        styleVariables.set("--rui-text-primary", `var(--rui-${state2}-text-primary)`);
+        styleVariables.set("--rui-text-secondary", `var(--rui-${state2}-text-secondary)`);
+        const rootStyle = document.documentElement.style;
+        styleVariables.forEach((value, variableName) => {
+          rootStyle.setProperty(variableName, value);
+        });
+      }, { immediate: true });
+    }
+  };
+  return {
+    config,
+    init,
+    isAutoControlled,
+    isDark,
+    isLight,
+    setThemeConfig,
+    state,
+    store,
+    switchThemeScheme,
+    theme,
+    toggleThemeMode
+  };
+});
+export {
+  useRotkiTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/composables/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n  type ColorIntensity,\n  defaultTheme,\n  type InitThemeOptions,\n  type ThemeConfig,\n  type ThemeContent,\n  type ThemeData,\n  ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n  const { state, store } = useColorMode<ThemeMode>();\n\n  const { state: attributeState } = useColorMode<ThemeMode>({\n    attribute: 'data-theme',\n  });\n\n  // Keep attributeState in sync with state\n  watch(state, (newState) => {\n    set(attributeState, newState);\n  });\n\n  /**\n   * whether the current theme is controlled by system or user\n   * @type {ComputedRef<boolean>}\n   */\n  const isAutoControlled: ComputedRef<boolean> = computed(() => get(store) === ThemeMode.auto);\n\n  /**\n   * truthy for light theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isLight: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.light);\n\n  /**\n   * truthy for dark theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isDark: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.dark);\n\n  /**\n   * current theme based on light or dark mode\n   * @type {ComputedRef<ThemeData>}\n   */\n  const theme: ComputedRef<ThemeData> = computed(() => {\n    if (get(isLight))\n      return get(config).light;\n\n    return get(config).dark;\n  });\n\n  /**\n   * switch theme through dark/light/auto modes\n   * @param {ThemeMode} mode\n   */\n  const switchThemeScheme = (mode: ThemeMode) => {\n    set(store, mode || ThemeMode.auto);\n  };\n\n  /**\n   * toggle between auto|light|dark\n   */\n  const toggleThemeMode = () => {\n    if (get(isAutoControlled))\n      switchThemeScheme(ThemeMode.light);\n    else if (get(isLight))\n      switchThemeScheme(ThemeMode.dark);\n    else if (get(isDark))\n      switchThemeScheme(ThemeMode.auto);\n  };\n\n  /**\n   * sets the configuration for the theme\n   * @param {ThemeConfig} newConfig\n   */\n  const setThemeConfig = (newConfig: ThemeConfig) => {\n    set(config, newConfig);\n  };\n\n  /**\n   * theme initializer, must be called once from the app's entry\n   * @param {InitThemeOptions} options\n   */\n  const init = (options: InitThemeOptions) => {\n    switchThemeScheme(options.mode ?? ThemeMode.auto);\n    setThemeConfig(options.config ?? { ...defaultTheme });\n\n    if (typeof window !== 'undefined') {\n      watch([isLight, theme], ([isLight, theme]) => {\n        const styleVariables = new Map();\n\n        // Compute context variables\n        Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {\n          styleVariables.set(`--rui-${context}-darker`, contextObject.darker);\n          styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);\n          styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);\n        });\n\n        // Determine the theme mode\n        const state = isLight ? ThemeMode.light : ThemeMode.dark;\n\n        // Add text color variables\n        styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);\n        styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);\n        styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);\n\n        // Apply all style variables in one operation\n        const rootStyle = document.documentElement.style;\n        styleVariables.forEach((value, variableName) => {\n          rootStyle.setProperty(variableName, value);\n        });\n      }, { immediate: true });\n    }\n  };\n\n  return {\n    config,\n    init,\n    isAutoControlled,\n    isDark,\n    isLight,\n    setThemeConfig,\n    state,\n    store,\n    switchThemeScheme,\n    theme,\n    toggleThemeMode,\n  };\n});\n"],"names":["isLight","theme","state"],"mappings":";;;;AAYA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,EAAE,OAAO,MAAA,IAAU,aAAA;AAEzB,QAAM,EAAE,OAAO,eAAA,IAAmB,aAAwB;AAAA,IACxD,WAAW;AAAA,EAAA,CACZ;AAGD,QAAM,OAAO,CAAC,aAAa;AACzB,QAAI,gBAAgB,QAAQ;AAAA,EAC9B,CAAC;AAMD,QAAM,mBAAyC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAM3F,QAAM,UAAgC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,KAAK;AAMnF,QAAM,SAA+B,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAMjF,QAAM,QAAgC,SAAS,MAAM;AACnD,QAAI,IAAI,OAAO;AACb,aAAO,IAAI,MAAM,EAAE;AAErB,WAAO,IAAI,MAAM,EAAE;AAAA,EACrB,CAAC;AAMD,QAAM,oBAAoB,CAAC,SAAoB;AAC7C,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,IAAI,gBAAgB;AACtB,wBAAkB,UAAU,KAAK;AAAA,aAC1B,IAAI,OAAO;AAClB,wBAAkB,UAAU,IAAI;AAAA,aACzB,IAAI,MAAM;AACjB,wBAAkB,UAAU,IAAI;AAAA,EACpC;AAMA,QAAM,iBAAiB,CAAC,cAA2B;AACjD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAA8B;AAC1C,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAEpD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,CAAC,SAAS,KAAK,GAAG,CAAC,CAACA,UAASC,MAAK,MAAM;AAC5C,cAAM,qCAAqB,IAAA;AAG3B,eAAO,QAAQA,MAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,aAAa,MAAgC;AACpF,yBAAe,IAAI,SAAS,OAAO,WAAW,cAAc,MAAM;AAClE,yBAAe,IAAI,SAAS,OAAO,YAAY,cAAc,OAAO;AACpE,yBAAe,IAAI,SAAS,OAAO,SAAS,cAAc,OAAO;AAAA,QACnE,CAAC;AAGD,cAAMC,SAAQF,WAAU,UAAU,QAAQ,UAAU;AAGpD,uBAAe,IAAI,uBAAuB,aAAaE,MAAK,iBAAiB;AAC7E,uBAAe,IAAI,sBAAsB,aAAaA,MAAK,gBAAgB;AAC3E,uBAAe,IAAI,wBAAwB,aAAaA,MAAK,kBAAkB;AAG/E,cAAM,YAAY,SAAS,gBAAgB;AAC3C,uBAAe,QAAQ,CAAC,OAAO,iBAAiB;AAC9C,oBAAU,YAAY,cAAc,KAAK;AAAA,QAC3C,CAAC;AAAA,MACH,GAAG,EAAE,WAAW,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/composables/timeout-manager.js

@@ -0,0 +1,21 @@
+import { get, set } from "@vueuse/shared";
+import { ref } from "vue";
+function useTimeoutManager() {
+  const timeout = ref();
+  const clear = () => {
+    if (get(timeout)) {
+      clearTimeout(get(timeout));
+      set(timeout, void 0);
+    }
+  };
+  const create = (callback, delay) => {
+    clear();
+    set(timeout, setTimeout(callback, delay));
+  };
+  const isActive = () => !!get(timeout);
+  return { clear, create, isActive };
+}
+export {
+  useTimeoutManager
+};
+//# sourceMappingURL=timeout-manager.js.map