@rotki/ui-library 2.12.1 → 2.13.0

package/dist/composables/tables/data-table/selection.js

@@ -0,0 +1,164 @@
+import { isRow } from "./types.js";
+import { useTimeoutManager } from "../../timeout-manager.js";
+import { assert } from "../../../utils/assert.js";
+import { shallowRef, ref, watch, computed, toValue } from "vue";
+import { set, get } from "@vueuse/shared";
+import { isDefined } from "@vueuse/core";
+function useTableSelection(options, deps) {
+  const { rowAttr, multiPageSelect, disabledRows } = options;
+  const { selectedData, filtered } = deps;
+  const shiftClicked = shallowRef(false);
+  const lastSelectedIndex = shallowRef(-1);
+  const internalSelectedData = ref([]);
+  const { create: scheduleShiftSelect } = useTimeoutManager();
+  watch(selectedData, (val) => set(internalSelectedData, val), { immediate: true });
+  const visibleIdentifiers = computed(
+    () => get(filtered).filter(isRow).map((row) => row[rowAttr])
+  );
+  const selectedSet = computed(() => new Set(get(selectedData) ?? []));
+  const disabledRowKeySet = computed(() => {
+    const currentDisabledRows = toValue(disabledRows);
+    if (!currentDisabledRows || !rowAttr)
+      return /* @__PURE__ */ new Set();
+    return new Set(currentDisabledRows.map((row) => row[rowAttr]));
+  });
+  const isAllSelected = computed(() => {
+    const selectedRows = get(selectedData);
+    if (!selectedRows || selectedRows.length === 0)
+      return false;
+    const selected = get(selectedSet);
+    return get(visibleIdentifiers).every((id) => selected.has(id));
+  });
+  const indeterminate = computed(() => {
+    const selectedRows = get(selectedData);
+    if (!selectedRows)
+      return false;
+    return selectedRows.length > 0 && !get(isAllSelected);
+  });
+  function isSelected(identifier) {
+    return get(selectedSet).has(identifier);
+  }
+  function isDisabledRow(rowKey) {
+    return get(disabledRowKeySet).has(rowKey);
+  }
+  function isSelectable(rowKey) {
+    return isSelected(rowKey) || !isDisabledRow(rowKey);
+  }
+  function mustSelect(rowKey) {
+    return isSelected(rowKey) && isDisabledRow(rowKey);
+  }
+  function resetCheckboxShiftState() {
+    set(shiftClicked, false);
+    set(lastSelectedIndex, -1);
+  }
+  function onToggleAll(checked) {
+    const selectedRows = get(selectedData);
+    if (!isDefined(selectedRows))
+      return;
+    if (!multiPageSelect) {
+      if (checked)
+        set(selectedData, get(visibleIdentifiers).filter(isSelectable));
+      else set(selectedData, get(visibleIdentifiers).filter(mustSelect));
+    } else {
+      if (checked) {
+        set(
+          selectedData,
+          Array.from(/* @__PURE__ */ new Set([...selectedRows, ...get(visibleIdentifiers).filter(isSelectable)]))
+        );
+      } else {
+        const visibleSet = new Set(get(visibleIdentifiers));
+        const mustSelectSet = new Set(get(visibleIdentifiers).filter(mustSelect));
+        set(
+          selectedData,
+          selectedRows.filter((rowKey) => !visibleSet.has(rowKey) || mustSelectSet.has(rowKey))
+        );
+      }
+    }
+  }
+  function onSelect(checked, value, userAction = false) {
+    if (get(shiftClicked) && userAction)
+      return;
+    const selectedRows = get(internalSelectedData);
+    if (!selectedRows)
+      return;
+    const selected = isSelected(value);
+    if (checked && !selected) {
+      set(internalSelectedData, [...selectedRows, value]);
+    } else if (!checked && selected) {
+      set(
+        internalSelectedData,
+        [...selectedRows].filter((r) => r !== value)
+      );
+    }
+    if (userAction)
+      set(selectedData, get(internalSelectedData));
+  }
+  function onCheckboxClick(event, value, index) {
+    const currentTarget = event.currentTarget;
+    if (!(currentTarget instanceof HTMLElement))
+      return;
+    const input = currentTarget.querySelector("input");
+    const target = event.target;
+    const nodeName = target instanceof HTMLElement ? target.nodeName : void 0;
+    const shiftKey = event.shiftKey;
+    set(shiftClicked, shiftKey);
+    if (input && nodeName !== "INPUT") {
+      if (shiftKey) {
+        scheduleShiftSelect(() => {
+          let lastIndex = get(lastSelectedIndex);
+          if (lastIndex === -1)
+            lastIndex = index;
+          const tableData = get(filtered);
+          const lastSelectedData = tableData[lastIndex];
+          assert(lastSelectedData);
+          if (isRow(lastSelectedData)) {
+            const valueToApply = isSelected(lastSelectedData[rowAttr]);
+            if (lastIndex === index) {
+              onSelect(!valueToApply, value);
+            } else {
+              const from = Math.min(lastIndex, index);
+              const to = Math.max(lastIndex, index);
+              for (let i = from; i <= to; i++) {
+                const currSelectedData = tableData[i];
+                assert(currSelectedData);
+                if (isRow(currSelectedData) && !isDisabledRow(currSelectedData[rowAttr]))
+                  onSelect(valueToApply, currSelectedData[rowAttr]);
+              }
+            }
+            set(lastSelectedIndex, index);
+            set(selectedData, get(internalSelectedData));
+          }
+        }, 1);
+      } else {
+        set(lastSelectedIndex, index);
+      }
+    }
+  }
+  function deselectRemovedRows() {
+    const currentSelected = get(selectedData);
+    if (!currentSelected)
+      return;
+    const visibleSet = new Set(get(visibleIdentifiers));
+    const remaining = currentSelected.filter((key) => visibleSet.has(key));
+    if (remaining.length !== currentSelected.length)
+      set(selectedData, remaining);
+  }
+  return {
+    visibleIdentifiers,
+    isAllSelected,
+    indeterminate,
+    isSelected,
+    isDisabledRow,
+    isSelectable,
+    mustSelect,
+    onToggleAll,
+    onSelect,
+    onCheckboxClick,
+    deselectRemovedRows,
+    resetCheckboxShiftState
+  };
+}
+export {
+  useTableSelection
+};
+//# sourceMappingURL=selection.js.map

package/dist/composables/tables/data-table/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sources":["../../../../src/composables/tables/data-table/selection.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { type GroupedTableRow, isRow } from '@/composables/tables/data-table/types';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { assert } from '@/utils/assert';\n\nexport interface UseTableSelectionOptions<T extends object, IdType extends keyof T> {\n  /** The property on each row used as the unique row identifier. */\n  rowAttr: IdType;\n  /** Whether selection persists across pages. */\n  multiPageSelect: boolean;\n  /** Rows that cannot be selected or deselected by the user. */\n  disabledRows: MaybeRefOrGetter<readonly T[] | undefined>;\n}\n\nexport interface UseTableSelectionDeps<T extends object, IdType extends keyof T> {\n  selectedData: Ref<T[IdType][] | undefined>;\n  filtered: ComputedRef<GroupedTableRow<T>[]>;\n}\n\nexport interface UseTableSelectionReturn<T extends object, IdType extends keyof T> {\n  visibleIdentifiers: ComputedRef<T[IdType][]>;\n  isAllSelected: ComputedRef<boolean>;\n  indeterminate: ComputedRef<boolean>;\n  isSelected: (identifier: T[IdType]) => boolean;\n  isDisabledRow: (rowKey: T[IdType]) => boolean;\n  isSelectable: (rowKey: T[IdType]) => boolean;\n  mustSelect: (rowKey: T[IdType]) => boolean;\n  onToggleAll: (checked: boolean) => void;\n  onSelect: (checked: boolean, value: T[IdType], userAction?: boolean) => void;\n  onCheckboxClick: (event: MouseEvent, value: T[IdType], index: number) => void;\n  deselectRemovedRows: () => void;\n  resetCheckboxShiftState: () => void;\n}\n\nexport function useTableSelection<T extends object, IdType extends keyof T>(\n  options: UseTableSelectionOptions<T, IdType>,\n  deps: UseTableSelectionDeps<T, IdType>,\n): UseTableSelectionReturn<T, IdType> {\n  const { rowAttr, multiPageSelect, disabledRows } = options;\n  const { selectedData, filtered } = deps;\n\n  const shiftClicked: Ref<boolean> = shallowRef(false);\n  const lastSelectedIndex: Ref<number> = shallowRef(-1);\n  const internalSelectedData: Ref<T[IdType][]> = ref([]);\n  const { create: scheduleShiftSelect } = useTimeoutManager();\n\n  // Sync external selection model to internal state\n  watch(selectedData, val => set(internalSelectedData, val), { immediate: true });\n\n  const visibleIdentifiers = computed<T[IdType][]>(() =>\n    get(filtered)\n      .filter(isRow)\n      .map(row => row[rowAttr]),\n  );\n\n  const selectedSet = computed<Set<T[IdType]>>(() => new Set(get(selectedData) ?? []));\n\n  const disabledRowKeySet = computed<Set<T[IdType]>>(() => {\n    const currentDisabledRows = toValue(disabledRows);\n    if (!currentDisabledRows || !rowAttr)\n      return new Set<T[IdType]>();\n    return new Set<T[IdType]>(currentDisabledRows.map((row: T) => row[rowAttr]));\n  });\n\n  const isAllSelected = computed<boolean>(() => {\n    const selectedRows = get(selectedData);\n    if (!selectedRows || selectedRows.length === 0)\n      return false;\n\n    const selected = get(selectedSet);\n    return get(visibleIdentifiers).every(id => selected.has(id));\n  });\n\n  const indeterminate = computed<boolean>(() => {\n    const selectedRows = get(selectedData);\n    if (!selectedRows)\n      return false;\n\n    return selectedRows.length > 0 && !get(isAllSelected);\n  });\n\n  function isSelected(identifier: T[IdType]): boolean {\n    return get(selectedSet).has(identifier);\n  }\n\n  function isDisabledRow(rowKey: T[IdType]): boolean {\n    return get(disabledRowKeySet).has(rowKey);\n  }\n\n  function isSelectable(rowKey: T[IdType]): boolean {\n    return isSelected(rowKey) || !isDisabledRow(rowKey);\n  }\n\n  function mustSelect(rowKey: T[IdType]): boolean {\n    return isSelected(rowKey) && isDisabledRow(rowKey);\n  }\n\n  function resetCheckboxShiftState(): void {\n    set(shiftClicked, false);\n    set(lastSelectedIndex, -1);\n  }\n\n  function onToggleAll(checked: boolean): void {\n    const selectedRows = get(selectedData);\n\n    if (!isDefined(selectedRows))\n      return;\n\n    if (!multiPageSelect) {\n      if (checked)\n        set(selectedData, get(visibleIdentifiers).filter(isSelectable));\n      else set(selectedData, get(visibleIdentifiers).filter(mustSelect));\n    }\n    else {\n      if (checked) {\n        set(\n          selectedData,\n          Array.from(new Set([...selectedRows, ...get(visibleIdentifiers).filter(isSelectable)])),\n        );\n      }\n      else {\n        const visibleSet = new Set(get(visibleIdentifiers));\n        const mustSelectSet = new Set(get(visibleIdentifiers).filter(mustSelect));\n        set(\n          selectedData,\n          selectedRows.filter(rowKey => !visibleSet.has(rowKey) || mustSelectSet.has(rowKey)),\n        );\n      }\n    }\n  }\n\n  function onSelect(checked: boolean, value: T[IdType], userAction: boolean = false): void {\n    if (get(shiftClicked) && userAction)\n      return;\n\n    const selectedRows = get(internalSelectedData);\n    if (!selectedRows)\n      return;\n\n    const selected = isSelected(value);\n\n    if (checked && !selected) {\n      set(internalSelectedData, [...selectedRows, value]);\n    }\n    else if (!checked && selected) {\n      set(\n        internalSelectedData,\n        [...selectedRows].filter(r => r !== value),\n      );\n    }\n\n    if (userAction)\n      set(selectedData, get(internalSelectedData));\n  }\n\n  function onCheckboxClick(event: MouseEvent, value: T[IdType], index: number): void {\n    const currentTarget = event.currentTarget;\n    if (!(currentTarget instanceof HTMLElement))\n      return;\n\n    const input = currentTarget.querySelector('input');\n    const target = event.target;\n    const nodeName = target instanceof HTMLElement ? target.nodeName : undefined;\n\n    const shiftKey = event.shiftKey;\n    set(shiftClicked, shiftKey);\n\n    if (input && nodeName !== 'INPUT') {\n      if (shiftKey) {\n        scheduleShiftSelect(() => {\n          let lastIndex = get(lastSelectedIndex);\n          if (lastIndex === -1)\n            lastIndex = index;\n          const tableData = get(filtered);\n          const lastSelectedData = tableData[lastIndex];\n          assert(lastSelectedData);\n\n          if (isRow(lastSelectedData)) {\n            const valueToApply = isSelected(lastSelectedData[rowAttr]);\n\n            if (lastIndex === index) {\n              onSelect(!valueToApply, value);\n            }\n            else {\n              const from = Math.min(lastIndex, index);\n              const to = Math.max(lastIndex, index);\n\n              for (let i = from; i <= to; i++) {\n                const currSelectedData = tableData[i];\n                assert(currSelectedData);\n                if (isRow(currSelectedData) && !isDisabledRow(currSelectedData[rowAttr]))\n                  onSelect(valueToApply, currSelectedData[rowAttr]);\n              }\n            }\n\n            set(lastSelectedIndex, index);\n            set(selectedData, get(internalSelectedData));\n          }\n        }, 1);\n      }\n      else {\n        set(lastSelectedIndex, index);\n      }\n    }\n  }\n\n  function deselectRemovedRows(): void {\n    const currentSelected = get(selectedData);\n    if (!currentSelected)\n      return;\n\n    const visibleSet = new Set(get(visibleIdentifiers));\n    const remaining = currentSelected.filter(key => visibleSet.has(key));\n\n    if (remaining.length !== currentSelected.length)\n      set(selectedData, remaining);\n  }\n\n  return {\n    visibleIdentifiers,\n    isAllSelected,\n    indeterminate,\n    isSelected,\n    isDisabledRow,\n    isSelectable,\n    mustSelect,\n    onToggleAll,\n    onSelect,\n    onCheckboxClick,\n    deselectRemovedRows,\n    resetCheckboxShiftState,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/composables/tables/data-table/sort.d.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { SortColumn, TableRowKey, TableSortData } from '../../../components/tables/RuiTableHead.vue.js';
+import type { TablePaginationData } from '../../../components/tables/RuiTablePagination.vue.js';
+export interface UseTableSortOptions<T extends object> {
+    /** The data rows to sort. */
+    rows: MaybeRefOrGetter<readonly T[]>;
+    /** The current search query used to filter rows before sorting. */
+    search: MaybeRefOrGetter<string>;
+    /** Whether sorting is managed externally (e.g. server-side). */
+    sortModifiersExternal: boolean | undefined;
+}
+export interface UseTableSortDeps<T extends object> {
+    sort: Ref<TableSortData<T>>;
+    pagination: Ref<TablePaginationData | undefined>;
+    emitUpdateOptions: (options: {
+        sort?: TableSortData<T>;
+        pagination?: TablePaginationData;
+    }) => void;
+}
+export interface UseTableSortReturn<T extends object> {
+    sortData: ComputedRef<TableSortData<T>>;
+    sortedMap: ComputedRef<Partial<Record<TableRowKey<T>, SortColumn<T>>>>;
+    searchData: ComputedRef<T[]>;
+    sorted: ComputedRef<T[]>;
+    isSortedBy: (key: TableRowKey<T>) => boolean;
+    getSortIndex: (key: TableRowKey<T>) => number;
+    onSort: (payload: {
+        key: TableRowKey<T>;
+        direction?: 'asc' | 'desc';
+    }) => void;
+}
+export declare function useTableSort<T extends object>(options: UseTableSortOptions<T>, deps: UseTableSortDeps<T>): UseTableSortReturn<T>;

package/dist/composables/tables/data-table/sort.js

@@ -0,0 +1,136 @@
+import { assert } from "../../../utils/assert.js";
+import { computed, toValue } from "vue";
+import { set, get } from "@vueuse/shared";
+const SORT_COLLATOR = new Intl.Collator(void 0, { sensitivity: "accent", usage: "sort" });
+function useTableSort(options, deps) {
+  const { rows, search, sortModifiersExternal } = options;
+  const { sort, pagination, emitUpdateOptions } = deps;
+  const getKeys = (t) => Object.keys(t);
+  const sortData = computed({
+    get() {
+      return get(sort);
+    },
+    set(value) {
+      set(sort, value);
+      emitUpdateOptions({
+        sort: value,
+        pagination: get(pagination)
+      });
+    }
+  });
+  const sortedMap = computed(() => {
+    const mapped = {};
+    const sortBy = get(sortData);
+    if (!sortBy)
+      return mapped;
+    if (!Array.isArray(sortBy)) {
+      if (sortBy.column)
+        mapped[sortBy.column] = sortBy;
+      return mapped;
+    }
+    return sortBy.reduce((acc, curr) => {
+      if (!curr.column)
+        return acc;
+      acc[curr.column] = curr;
+      return acc;
+    }, mapped);
+  });
+  const searchData = computed(() => {
+    const currentRows = toValue(rows);
+    const query = toValue(search)?.toLocaleLowerCase();
+    if (!query)
+      return [...currentRows];
+    return currentRows.filter(
+      (row) => getKeys(row).some((key) => `${row[key]}`.toLocaleLowerCase().includes(query))
+    );
+  });
+  const sorted = computed(() => {
+    const sortBy = get(sortData);
+    if (!sortBy || sortModifiersExternal)
+      return get(searchData);
+    const data = [...get(searchData)];
+    const sortFn = (by) => {
+      data.sort((a, b) => {
+        const column = by.column;
+        if (!column)
+          return 0;
+        let [aValue, bValue] = [a[column], b[column]];
+        if (by.direction === "desc")
+          [aValue, bValue] = [bValue, aValue];
+        const aNumber = Number(aValue);
+        const bNumber = Number(bValue);
+        if (!isNaN(aNumber) && !isNaN(bNumber))
+          return aNumber - bNumber;
+        return SORT_COLLATOR.compare(`${aValue}`, `${bValue}`);
+      });
+    };
+    if (!Array.isArray(sortBy))
+      sortFn(sortBy);
+    else [...sortBy].reverse().forEach(sortFn);
+    return data;
+  });
+  function isSortedBy(key) {
+    return key in get(sortedMap);
+  }
+  function getSortIndex(key) {
+    const sortBy = get(sortData);
+    if (!sortBy || !Array.isArray(sortBy) || !isSortedBy(key))
+      return -1;
+    return sortBy.findIndex((s) => s.column === key);
+  }
+  function onSort({ key, direction }) {
+    const sortBy = get(sortData);
+    if (!sortBy)
+      return;
+    if (!Array.isArray(sortBy)) {
+      if (isSortedBy(key)) {
+        const newDirection = !direction || direction === "asc" ? "desc" : "asc";
+        if (sortBy.direction === newDirection) {
+          set(sortData, { ...sortBy, column: void 0, direction: "asc" });
+        } else {
+          set(sortData, {
+            ...sortBy,
+            direction: sortBy.direction === "asc" ? "desc" : "asc"
+          });
+        }
+      } else {
+        set(sortData, { column: key, direction: direction || "asc" });
+      }
+      return;
+    }
+    if (isSortedBy(key)) {
+      const newDirection = !direction || direction === "asc" ? "desc" : "asc";
+      const index = getSortIndex(key);
+      const sortByCol = sortBy[index];
+      assert(sortByCol);
+      if (sortByCol.direction === newDirection) {
+        set(
+          sortData,
+          sortBy.filter((_, i) => i !== index)
+        );
+      } else {
+        set(
+          sortData,
+          sortBy.map(
+            (col, i) => i === index ? { ...col, direction: col.direction === "asc" ? "desc" : "asc" } : col
+          )
+        );
+      }
+    } else {
+      set(sortData, [...sortBy, { column: key, direction: direction || "asc" }]);
+    }
+  }
+  return {
+    sortData,
+    sortedMap,
+    searchData,
+    sorted,
+    isSortedBy,
+    getSortIndex,
+    onSort
+  };
+}
+export {
+  useTableSort
+};
+//# sourceMappingURL=sort.js.map

package/dist/composables/tables/data-table/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sources":["../../../../src/composables/tables/data-table/sort.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport type { SortColumn, TableRowKey, TableSortData } from '@/components/tables/RuiTableHead.vue';\nimport type { TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\nimport { assert } from '@/utils/assert';\n\nconst SORT_COLLATOR = new Intl.Collator(undefined, { sensitivity: 'accent', usage: 'sort' });\n\nexport interface UseTableSortOptions<T extends object> {\n  /** The data rows to sort. */\n  rows: MaybeRefOrGetter<readonly T[]>;\n  /** The current search query used to filter rows before sorting. */\n  search: MaybeRefOrGetter<string>;\n  /** Whether sorting is managed externally (e.g. server-side). */\n  sortModifiersExternal: boolean | undefined;\n}\n\nexport interface UseTableSortDeps<T extends object> {\n  sort: Ref<TableSortData<T>>;\n  pagination: Ref<TablePaginationData | undefined>;\n  emitUpdateOptions: (options: {\n    sort?: TableSortData<T>;\n    pagination?: TablePaginationData;\n  }) => void;\n}\n\nexport interface UseTableSortReturn<T extends object> {\n  sortData: ComputedRef<TableSortData<T>>;\n  sortedMap: ComputedRef<Partial<Record<TableRowKey<T>, SortColumn<T>>>>;\n  searchData: ComputedRef<T[]>;\n  sorted: ComputedRef<T[]>;\n  isSortedBy: (key: TableRowKey<T>) => boolean;\n  getSortIndex: (key: TableRowKey<T>) => number;\n  onSort: (payload: { key: TableRowKey<T>; direction?: 'asc' | 'desc' }) => void;\n}\n\nexport function useTableSort<T extends object>(\n  options: UseTableSortOptions<T>,\n  deps: UseTableSortDeps<T>,\n): UseTableSortReturn<T> {\n  const { rows, search, sortModifiersExternal } = options;\n  const { sort, pagination, emitUpdateOptions } = deps;\n\n  const getKeys = <O extends object>(t: O): TableRowKey<O>[] => Object.keys(t) as TableRowKey<O>[];\n\n  const sortData = computed<TableSortData<T>>({\n    get(): TableSortData<T> {\n      return get(sort);\n    },\n    set(value: TableSortData<T>) {\n      set(sort, value);\n      emitUpdateOptions({\n        sort: value,\n        pagination: get(pagination),\n      });\n    },\n  });\n\n  const sortedMap = computed<Partial<Record<TableRowKey<T>, SortColumn<T>>>>(() => {\n    const mapped: Partial<Record<TableRowKey<T>, SortColumn<T>>> = {};\n    const sortBy = get(sortData);\n    if (!sortBy)\n      return mapped;\n\n    if (!Array.isArray(sortBy)) {\n      if (sortBy.column)\n        mapped[sortBy.column] = sortBy;\n\n      return mapped;\n    }\n\n    return sortBy.reduce((acc, curr) => {\n      if (!curr.column)\n        return acc;\n\n      acc[curr.column] = curr;\n      return acc;\n    }, mapped);\n  });\n\n  const searchData = computed<T[]>(() => {\n    const currentRows = toValue(rows);\n    const query = toValue(search)?.toLocaleLowerCase();\n    if (!query)\n      return [...currentRows];\n\n    return currentRows.filter(row =>\n      getKeys(row).some(key => `${row[key]}`.toLocaleLowerCase().includes(query)),\n    );\n  });\n\n  const sorted: ComputedRef<T[]> = computed(() => {\n    const sortBy = get(sortData);\n    if (!sortBy || sortModifiersExternal)\n      return get(searchData);\n\n    const data = [...get(searchData)];\n\n    const sortFn = (by: SortColumn<T>): void => {\n      data.sort((a, b) => {\n        const column = by.column;\n        if (!column)\n          return 0;\n\n        let [aValue, bValue] = [a[column], b[column]];\n        if (by.direction === 'desc')\n          [aValue, bValue] = [bValue, aValue];\n\n        const aNumber = Number(aValue);\n        const bNumber = Number(bValue);\n        if (!isNaN(aNumber) && !isNaN(bNumber))\n          return aNumber - bNumber;\n\n        return SORT_COLLATOR.compare(`${aValue}`, `${bValue}`);\n      });\n    };\n\n    if (!Array.isArray(sortBy))\n      sortFn(sortBy);\n    else [...sortBy].reverse().forEach(sortFn);\n\n    return data;\n  });\n\n  function isSortedBy(key: TableRowKey<T>): boolean {\n    return key in get(sortedMap);\n  }\n\n  function getSortIndex(key: TableRowKey<T>): number {\n    const sortBy = get(sortData);\n\n    if (!sortBy || !Array.isArray(sortBy) || !isSortedBy(key))\n      return -1;\n\n    return sortBy.findIndex(s => s.column === key);\n  }\n\n  function onSort({ key, direction }: { key: TableRowKey<T>; direction?: 'asc' | 'desc' }): void {\n    const sortBy = get(sortData);\n    if (!sortBy)\n      return;\n\n    if (!Array.isArray(sortBy)) {\n      if (isSortedBy(key)) {\n        const newDirection = !direction || direction === 'asc' ? 'desc' : 'asc';\n\n        if (sortBy.direction === newDirection) {\n          set(sortData, { ...sortBy, column: undefined, direction: 'asc' });\n        }\n        else {\n          set(sortData, {\n            ...sortBy,\n            direction: sortBy.direction === 'asc' ? 'desc' : 'asc',\n          });\n        }\n      }\n      else {\n        set(sortData, { column: key, direction: direction || 'asc' });\n      }\n      return;\n    }\n\n    if (isSortedBy(key)) {\n      const newDirection = !direction || direction === 'asc' ? 'desc' : 'asc';\n\n      const index = getSortIndex(key);\n      const sortByCol = sortBy[index];\n      assert(sortByCol);\n\n      if (sortByCol.direction === newDirection) {\n        set(\n          sortData,\n          sortBy.filter((_, i) => i !== index),\n        );\n      }\n      else {\n        set(\n          sortData,\n          sortBy.map((col, i) =>\n            i === index ? { ...col, direction: col.direction === 'asc' ? 'desc' : 'asc' } : col,\n          ),\n        );\n      }\n    }\n    else {\n      set(sortData, [...sortBy, { column: key, direction: direction || 'asc' }]);\n    }\n  }\n\n  return {\n    sortData,\n    sortedMap,\n    searchData,\n    sorted,\n    isSortedBy,\n    getSortIndex,\n    onSort,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/composables/tables/data-table/types.d.ts

@@ -0,0 +1,14 @@
+import type { TableSortData } from '../../../components/tables/RuiTableHead.vue.js';
+import type { TablePaginationData } from '../../../components/tables/RuiTablePagination.vue.js';
+export interface TableOptions<T> {
+    pagination?: TablePaginationData;
+    sort?: TableSortData<T>;
+}
+export interface GroupHeader<T> {
+    __header__: true;
+    identifier: string;
+    group: Partial<T>;
+}
+export type GroupedTableRow<T> = T | GroupHeader<T>;
+export declare function isRow<T extends object>(item: GroupedTableRow<T>): item is T;
+export declare function isHeaderSlot(slotName: string): slotName is `header.${string}`;

package/dist/composables/tables/data-table/types.js

@@ -0,0 +1,11 @@
+function isRow(item) {
+  return !("__header__" in item);
+}
+function isHeaderSlot(slotName) {
+  return slotName.startsWith("header.");
+}
+export {
+  isHeaderSlot,
+  isRow
+};
+//# sourceMappingURL=types.js.map

package/dist/composables/tables/data-table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/composables/tables/data-table/types.ts"],"sourcesContent":["import type { TableSortData } from '@/components/tables/RuiTableHead.vue';\nimport type { TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\n\nexport interface TableOptions<T> {\n  pagination?: TablePaginationData;\n  sort?: TableSortData<T>;\n}\n\nexport interface GroupHeader<T> {\n  __header__: true;\n  identifier: string;\n  group: Partial<T>;\n}\n\nexport type GroupedTableRow<T> = T | GroupHeader<T>;\n\nexport function isRow<T extends object>(item: GroupedTableRow<T>): item is T {\n  return !('__header__' in item);\n}\n\nexport function isHeaderSlot(slotName: string): slotName is `header.${string}` {\n  return slotName.startsWith('header.');\n}\n"],"names":[],"mappings":"AAgBO,SAAS,MAAwB,MAAqC;AAC3E,SAAO,EAAE,gBAAgB;AAC3B;AAEO,SAAS,aAAa,UAAkD;AAC7E,SAAO,SAAS,WAAW,SAAS;AACtC;"}

package/dist/composables/theme.js

@@ -1,5 +1,5 @@
-import { createSharedComposable, getSSRHandler, useColorMode } from "@vueuse/core";
-import { ref, computed, watch } from "vue";
+import { createSharedComposable, getSSRHandler, defaultWindow, useColorMode } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { defaultTheme, ThemeMode } from "../types/theme.js";
 import { get, set } from "@vueuse/shared";
 const config = ref({ ...defaultTheme });
@@ -7,7 +7,9 @@ const useRotkiTheme = createSharedComposable(() => {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector, attribute, value) => {
-      const el = typeof selector === "string" ? window?.document.querySelector(selector) : null;
+      if (typeof selector !== "string" || !defaultWindow)
+        return;
+      const el = defaultWindow.document.querySelector(selector);
       if (!el)
         return;
       el.setAttribute(attribute, value);
@@ -44,24 +46,6 @@ const useRotkiTheme = createSharedComposable(() => {
   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,

package/dist/composables/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { getSSRHandler, 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 updateHTMLAttrs = getSSRHandler(\n    'updateHTMLAttrs',\n    (selector, attribute, value) => {\n      const el = typeof selector === 'string' ? window?.document.querySelector(selector) : null;\n      if (!el)\n        return;\n      el.setAttribute(attribute, value);\n    },\n  );\n\n  const { state, store } = useColorMode<ThemeMode>({\n    onChanged(mode, defaultHandler) {\n      defaultHandler(mode);\n      updateHTMLAttrs('html', 'data-theme', mode);\n    },\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): void => {\n    set(store, mode || ThemeMode.auto);\n  };\n\n  /**\n   * toggle between auto|light|dark\n   */\n  const toggleThemeMode = (): void => {\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): void => {\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): void => {\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,kBAAkB;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,WAAW,UAAU;AAC9B,YAAM,KAAK,OAAO,aAAa,WAAW,QAAQ,SAAS,cAAc,QAAQ,IAAI;AACrF,UAAI,CAAC;AACH;AACF,SAAG,aAAa,WAAW,KAAK;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,sBAAgB,QAAQ,cAAc,IAAI;AAAA,IAC5C;AAAA,EAAA,CACD;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,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,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,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,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;"}
+{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { defaultWindow, getSSRHandler, useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\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 updateHTMLAttrs = getSSRHandler(\n    'updateHTMLAttrs',\n    (selector, attribute, value) => {\n      if (typeof selector !== 'string' || !defaultWindow)\n        return;\n\n      const el = defaultWindow.document.querySelector(selector);\n      if (!el)\n        return;\n\n      el.setAttribute(attribute, value);\n    },\n  );\n\n  const { state, store } = useColorMode<ThemeMode>({\n    onChanged(mode, defaultHandler) {\n      defaultHandler(mode);\n      updateHTMLAttrs('html', 'data-theme', mode);\n    },\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): void => {\n    set(store, mode || ThemeMode.auto);\n  };\n\n  /**\n   * toggle between auto|light|dark\n   */\n  const toggleThemeMode = (): void => {\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): void => {\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): void => {\n    switchThemeScheme(options.mode ?? ThemeMode.auto);\n    setThemeConfig(options.config ?? { ...defaultTheme });\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":[],"mappings":";;;;AAWA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,WAAW,UAAU;AAC9B,UAAI,OAAO,aAAa,YAAY,CAAC;AACnC;AAEF,YAAM,KAAK,cAAc,SAAS,cAAc,QAAQ;AACxD,UAAI,CAAC;AACH;AAEF,SAAG,aAAa,WAAW,KAAK;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,sBAAgB,QAAQ,cAAc,IAAI;AAAA,IAC5C;AAAA,EAAA,CACD;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,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,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,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAAA,EACtD;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.d.ts

@@ -1,5 +1,7 @@
-export declare function useTimeoutManager(): {
+interface UseTimeoutManagerReturn {
     clear: () => void;
     create: (callback: () => void, delay: number) => void;
     isActive: () => boolean;
-};
+}
+export declare function useTimeoutManager(): UseTimeoutManagerReturn;
+export {};

package/dist/composables/timeout-manager.js

@@ -1,5 +1,5 @@
 import { get, set } from "@vueuse/shared";
-import { ref } from "vue";
+import { ref, onScopeDispose } from "vue";
 function useTimeoutManager() {
   const timeout = ref();
   const clear = () => {
@@ -13,6 +13,7 @@ function useTimeoutManager() {
     set(timeout, setTimeout(callback, delay));
   };
   const isActive = () => !!get(timeout);
+  onScopeDispose(clear);
   return { clear, create, isActive };
 }
 export {

package/dist/composables/timeout-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeout-manager.js","sources":["../../src/composables/timeout-manager.ts"],"sourcesContent":["import { get, set } from '@vueuse/shared';\nimport { ref } from 'vue';\n\nexport function useTimeoutManager() {\n  const timeout = ref<NodeJS.Timeout>();\n\n  const clear = () => {\n    if (get(timeout)) {\n      clearTimeout(get(timeout));\n      set(timeout, undefined);\n    }\n  };\n\n  const create = (callback: () => void, delay: number) => {\n    clear();\n    set(timeout, setTimeout(callback, delay));\n  };\n\n  const isActive = () => !!get(timeout);\n\n  return { clear, create, isActive };\n}\n"],"names":[],"mappings":";;AAGO,SAAS,oBAAoB;AAClC,QAAM,UAAU,IAAA;AAEhB,QAAM,QAAQ,MAAM;AAClB,QAAI,IAAI,OAAO,GAAG;AAChB,mBAAa,IAAI,OAAO,CAAC;AACzB,UAAI,SAAS,MAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,UAAsB,UAAkB;AACtD,UAAA;AACA,QAAI,SAAS,WAAW,UAAU,KAAK,CAAC;AAAA,EAC1C;AAEA,QAAM,WAAW,MAAM,CAAC,CAAC,IAAI,OAAO;AAEpC,SAAO,EAAE,OAAO,QAAQ,SAAA;AAC1B;"}
+{"version":3,"file":"timeout-manager.js","sources":["../../src/composables/timeout-manager.ts"],"sourcesContent":["import { get, set } from '@vueuse/shared';\nimport { onScopeDispose, ref } from 'vue';\n\ninterface UseTimeoutManagerReturn {\n  clear: () => void;\n  create: (callback: () => void, delay: number) => void;\n  isActive: () => boolean;\n}\n\nexport function useTimeoutManager(): UseTimeoutManagerReturn {\n  const timeout = ref<NodeJS.Timeout>();\n\n  const clear = (): void => {\n    if (get(timeout)) {\n      clearTimeout(get(timeout));\n      set(timeout, undefined);\n    }\n  };\n\n  const create = (callback: () => void, delay: number): void => {\n    clear();\n    set(timeout, setTimeout(callback, delay));\n  };\n\n  const isActive = (): boolean => !!get(timeout);\n\n  onScopeDispose(clear);\n\n  return { clear, create, isActive };\n}\n"],"names":[],"mappings":";;AASO,SAAS,oBAA6C;AAC3D,QAAM,UAAU,IAAA;AAEhB,QAAM,QAAQ,MAAY;AACxB,QAAI,IAAI,OAAO,GAAG;AAChB,mBAAa,IAAI,OAAO,CAAC;AACzB,UAAI,SAAS,MAAS;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,UAAsB,UAAwB;AAC5D,UAAA;AACA,QAAI,SAAS,WAAW,UAAU,KAAK,CAAC;AAAA,EAC1C;AAEA,QAAM,WAAW,MAAe,CAAC,CAAC,IAAI,OAAO;AAE7C,iBAAe,KAAK;AAEpB,SAAO,EAAE,OAAO,QAAQ,SAAA;AAC1B;"}

package/dist/icons/icons_1.d.ts

@@ -66,7 +66,6 @@ export declare const LuAlarmSmoke: GeneratedIcon;
 export declare const LuAlbum: GeneratedIcon;
 export declare const LuAlignCenterHorizontal: GeneratedIcon;
 export declare const LuAlignCenterVertical: GeneratedIcon;
-export declare const LuAlignCenter: GeneratedIcon;
 export declare const LuAlignEndHorizontal: GeneratedIcon;
 export declare const LuAlignEndVertical: GeneratedIcon;
 export declare const LuAlignHorizontalDistributeCenter: GeneratedIcon;
@@ -77,9 +76,6 @@ export declare const LuAlignHorizontalJustifyEnd: GeneratedIcon;
 export declare const LuAlignHorizontalJustifyStart: GeneratedIcon;
 export declare const LuAlignHorizontalSpaceAround: GeneratedIcon;
 export declare const LuAlignHorizontalSpaceBetween: GeneratedIcon;
-export declare const LuAlignJustify: GeneratedIcon;
-export declare const LuAlignLeft: GeneratedIcon;
-export declare const LuAlignRight: GeneratedIcon;
 export declare const LuAlignStartHorizontal: GeneratedIcon;
 export declare const LuAlignStartVertical: GeneratedIcon;
 export declare const LuAlignVerticalDistributeCenter: GeneratedIcon;
@@ -179,6 +175,7 @@ export declare const LuBadgeTurkishLira: GeneratedIcon;
 export declare const LuBadgeX: GeneratedIcon;
 export declare const LuBadge: GeneratedIcon;
 export declare const LuBaggageClaim: GeneratedIcon;
+export declare const LuBalloon: GeneratedIcon;
 export declare const LuBan: GeneratedIcon;
 export declare const LuBanana: GeneratedIcon;
 export declare const LuBandage: GeneratedIcon;
@@ -223,6 +220,7 @@ export declare const LuBinary: GeneratedIcon;
 export declare const LuBinoculars: GeneratedIcon;
 export declare const LuBiohazard: GeneratedIcon;
 export declare const LuBird: GeneratedIcon;
+export declare const LuBirdhouse: GeneratedIcon;
 export declare const LuBitcoin: GeneratedIcon;
 export declare const LuBlend: GeneratedIcon;
 export declare const LuBlinds: GeneratedIcon;
@@ -253,6 +251,7 @@ export declare const LuBookOpenCheck: GeneratedIcon;
 export declare const LuBookOpenText: GeneratedIcon;
 export declare const LuBookOpen: GeneratedIcon;
 export declare const LuBookPlus: GeneratedIcon;
+export declare const LuBookSearch: GeneratedIcon;
 export declare const LuBookText: GeneratedIcon;
 export declare const LuBookType: GeneratedIcon;
 export declare const LuBookUp2: GeneratedIcon;
@@ -322,11 +321,13 @@ export declare const LuCalendarSync: GeneratedIcon;
 export declare const LuCalendarX2: GeneratedIcon;
 export declare const LuCalendarX: GeneratedIcon;
 export declare const LuCalendar: GeneratedIcon;
+export declare const LuCalendars: GeneratedIcon;
 export declare const LuCameraOff: GeneratedIcon;
 export declare const LuCamera: GeneratedIcon;
 export declare const LuCandyCane: GeneratedIcon;
 export declare const LuCandyOff: GeneratedIcon;
 export declare const LuCandy: GeneratedIcon;
+export declare const LuCannabisOff: GeneratedIcon;
 export declare const LuCannabis: GeneratedIcon;
 export declare const LuCaptionsOff: GeneratedIcon;
 export declare const LuCaptions: GeneratedIcon;
@@ -372,6 +373,12 @@ export declare const LuCheckLine: GeneratedIcon;
 export declare const LuCheck: GeneratedIcon;
 export declare const LuChefHat: GeneratedIcon;
 export declare const LuCherry: GeneratedIcon;
+export declare const LuChessBishop: GeneratedIcon;
+export declare const LuChessKing: GeneratedIcon;
+export declare const LuChessKnight: GeneratedIcon;
+export declare const LuChessPawn: GeneratedIcon;
+export declare const LuChessQueen: GeneratedIcon;
+export declare const LuChessRook: GeneratedIcon;
 export declare const LuChevronDown: GeneratedIcon;
 export declare const LuChevronFirst: GeneratedIcon;
 export declare const LuChevronLast: GeneratedIcon;
@@ -422,6 +429,7 @@ export declare const LuCircleParkingOff: GeneratedIcon;
 export declare const LuCircleParking: GeneratedIcon;
 export declare const LuCirclePause: GeneratedIcon;
 export declare const LuCirclePercent: GeneratedIcon;
+export declare const LuCirclePile: GeneratedIcon;
 export declare const LuCirclePlay: GeneratedIcon;
 export declare const LuCirclePlus: GeneratedIcon;
 export declare const LuCirclePoundSterling: GeneratedIcon;
@@ -466,11 +474,13 @@ export declare const LuClock9: GeneratedIcon;
 export declare const LuClockAlert: GeneratedIcon;
 export declare const LuClockArrowDown: GeneratedIcon;
 export declare const LuClockArrowUp: GeneratedIcon;
+export declare const LuClockCheck: GeneratedIcon;
 export declare const LuClockFading: GeneratedIcon;
 export declare const LuClockPlus: GeneratedIcon;
 export declare const LuClock: GeneratedIcon;
 export declare const LuClosedCaption: GeneratedIcon;
 export declare const LuCloudAlert: GeneratedIcon;
+export declare const LuCloudBackup: GeneratedIcon;
 export declare const LuCloudCheck: GeneratedIcon;
 export declare const LuCloudCog: GeneratedIcon;
 export declare const LuCloudDownload: GeneratedIcon;
@@ -486,16 +496,6 @@ export declare const LuCloudRain: GeneratedIcon;
 export declare const LuCloudSnow: GeneratedIcon;
 export declare const LuCloudSunRain: GeneratedIcon;
 export declare const LuCloudSun: GeneratedIcon;
+export declare const LuCloudSync: GeneratedIcon;
 export declare const LuCloudUpload: GeneratedIcon;
 export declare const LuCloud: GeneratedIcon;
-export declare const LuCloudy: GeneratedIcon;
-export declare const LuClover: GeneratedIcon;
-export declare const LuClub: GeneratedIcon;
-export declare const LuCodeXml: GeneratedIcon;
-export declare const LuCode: GeneratedIcon;
-export declare const LuCodepen: GeneratedIcon;
-export declare const LuCodesandbox: GeneratedIcon;
-export declare const LuCoffee: GeneratedIcon;
-export declare const LuCog: GeneratedIcon;
-export declare const LuCoins: GeneratedIcon;
-export declare const LuColumns2: GeneratedIcon;