@rotki/ui-library 2.12.2 → 2.13.1

package/dist/composables/popper.js.map

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

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

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

package/dist/composables/sticky-header.js

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

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

@@ -1 +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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"}
+{"version":3,"file":"sticky-header.js","sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRef, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n  tableScroller: Readonly<ShallowRef<HTMLElement | null>>;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRef<boolean> = shallowRef(false),\n  offsetTop: MaybeRef<number | undefined>,\n  refs: UseStickyTableHeaderRefs,\n) {\n  const { table, tableScroller } = refs;\n  const stick = shallowRef<boolean>(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 = (): void => {\n    const root = get(table);\n\n    if (!get(sticky) || !root)\n      return;\n\n    const theadClone: HTMLHeadElement | null = root.querySelector(`${selectors.headClone} > tr`);\n\n    const head: HTMLHeadElement | null = root.querySelector(`${selectors.head} > tr`);\n\n    let resizeCleanups: (() => void)[] = [];\n\n    const observeChildTh = (): void => {\n      resizeCleanups.forEach(cleanup => cleanup());\n      resizeCleanups = [];\n\n      const columns: NodeListOf<HTMLElement> | undefined = head?.querySelectorAll(selectors.th);\n\n      const clonedColumns: NodeListOf<HTMLElement> | undefined = theadClone?.querySelectorAll(\n        selectors.th,\n      );\n\n      clonedColumns?.forEach((th: HTMLElement, i: number) => {\n        const { stop } = 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        resizeCleanups.push(stop);\n      });\n    };\n\n    useMutationObserver(\n      theadClone,\n      (mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList' || mutation.type === 'attributes')\n            observeChildTh();\n        }\n      },\n      {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      },\n    );\n\n    observeChildTh();\n  };\n\n  const toggleStickyClass = (): void => {\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(selectors.headClone);\n\n    const clonedRect: DOMRect | undefined = theadClone?.getBoundingClientRect();\n\n    const head: HTMLHeadElement | null = root.querySelector(selectors.head);\n\n    if (!clonedRect || !head || !theadClone)\n      return;\n\n    const { height: theadHeight, left: theadLeft, width: theadWidth } = 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    if (rows.length <= 1) {\n      set(stick, false);\n      head.style.left = `${borderPrecision}px`;\n      head.style.top = '0';\n      return;\n    }\n\n    const lastRowRect: DOMRect | undefined = rows.item(rows.length - 1)?.getBoundingClientRect();\n\n    if (tableTop <= top && tableBottom > top) {\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 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  let rafId: number | null = null;\n\n  function throttledToggleStickyClass(): void {\n    if (rafId !== null)\n      return;\n    rafId = requestAnimationFrame(() => {\n      toggleStickyClass();\n      rafId = null;\n    });\n  }\n\n  onMounted(() => {\n    toggleStickyClass();\n    useEventListener(tableScroller, 'scroll', throttledToggleStickyClass);\n    useEventListener(document.body, 'scroll', throttledToggleStickyClass);\n    useEventListener(window, 'resize', throttledToggleStickyClass);\n    watchCellWidth();\n  });\n\n  return {\n    stick,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { TableColumn, TableRowKey } from '../../../components/tables/RuiTableHead.vue.js';
+export interface UseTableColumnsOptions<T extends object, IdType extends keyof T> {
+    /** Column definitions for the table. When omitted, columns are inferred from row data. */
+    cols: MaybeRefOrGetter<TableColumn<T>[] | undefined>;
+    /** The property on each column definition used as the column identifier. */
+    columnAttr: keyof TableColumn<T>;
+    /** The data rows to display in the table. */
+    rows: MaybeRefOrGetter<readonly T[]>;
+    /** Whether row expansion is enabled. */
+    expandable: ComputedRef<boolean>;
+    /** The keys currently used for grouping rows. */
+    groupKeys: ComputedRef<TableRowKey<T>[]>;
+    /** The currently selected row identifiers. */
+    selectedData: Ref<T[IdType][] | undefined>;
+    /** Template slots provided to the table component. */
+    slots: Record<string, any>;
+}
+export interface UseTableColumnsReturn<T extends object> {
+    columns: ComputedRef<TableColumn<T>[]>;
+    colspan: ComputedRef<number>;
+    headerSlots: ComputedRef<`header.${string}`[]>;
+    cellValue: (row: T, key: TableColumn<T>['key']) => T[TableRowKey<T>];
+}
+export declare function useTableColumns<T extends object, IdType extends keyof T>(options: UseTableColumnsOptions<T, IdType>): UseTableColumnsReturn<T>;

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

@@ -0,0 +1,54 @@
+import { isHeaderSlot } from "./types.js";
+import { computed, toValue } from "vue";
+import { get } from "@vueuse/shared";
+function useTableColumns(options) {
+  const { cols, columnAttr, expandable, groupKeys, rows, selectedData, slots } = options;
+  const getKeys = (t) => Object.keys(t);
+  const columns = computed(() => {
+    const currentCols = toValue(cols);
+    const currentRows = toValue(rows);
+    const data = currentCols ?? getKeys(currentRows[0] ?? {}).map(
+      (key) => ({
+        key,
+        [columnAttr]: String(key)
+      })
+    );
+    const hasExpandColumn = data.some((row) => row.key === "expand");
+    if (get(expandable) && !hasExpandColumn) {
+      return [
+        ...data,
+        {
+          key: "expand",
+          sortable: false,
+          class: "w-16",
+          cellClass: "!py-0 w-16",
+          align: "end"
+        }
+      ];
+    }
+    const groupByKeys = get(groupKeys);
+    if (groupByKeys.length === 0)
+      return data;
+    return data.filter((column) => !groupByKeys.includes(column.key));
+  });
+  const colspan = computed(() => {
+    let columnLength = get(columns).length;
+    if (get(selectedData))
+      columnLength++;
+    return columnLength;
+  });
+  const headerSlots = computed(() => Object.keys(slots).filter(isHeaderSlot));
+  function cellValue(row, key) {
+    return row[key];
+  }
+  return {
+    columns,
+    colspan,
+    headerSlots,
+    cellValue
+  };
+}
+export {
+  useTableColumns
+};
+//# sourceMappingURL=columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sources":["../../../../src/composables/tables/data-table/columns.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport type {\n  NoneSortableTableColumn,\n  TableColumn,\n  TableRowKey,\n} from '@/components/tables/RuiTableHead.vue';\nimport { isHeaderSlot } from '@/composables/tables/data-table/types';\n\nexport interface UseTableColumnsOptions<T extends object, IdType extends keyof T> {\n  /** Column definitions for the table. When omitted, columns are inferred from row data. */\n  cols: MaybeRefOrGetter<TableColumn<T>[] | undefined>;\n  /** The property on each column definition used as the column identifier. */\n  columnAttr: keyof TableColumn<T>;\n  /** The data rows to display in the table. */\n  rows: MaybeRefOrGetter<readonly T[]>;\n  /** Whether row expansion is enabled. */\n  expandable: ComputedRef<boolean>;\n  /** The keys currently used for grouping rows. */\n  groupKeys: ComputedRef<TableRowKey<T>[]>;\n  /** The currently selected row identifiers. */\n  selectedData: Ref<T[IdType][] | undefined>;\n  /** Template slots provided to the table component. */\n  slots: Record<string, any>;\n}\n\nexport interface UseTableColumnsReturn<T extends object> {\n  columns: ComputedRef<TableColumn<T>[]>;\n  colspan: ComputedRef<number>;\n  headerSlots: ComputedRef<`header.${string}`[]>;\n  cellValue: (row: T, key: TableColumn<T>['key']) => T[TableRowKey<T>];\n}\n\nexport function useTableColumns<T extends object, IdType extends keyof T>(\n  options: UseTableColumnsOptions<T, IdType>,\n): UseTableColumnsReturn<T> {\n  const { cols, columnAttr, expandable, groupKeys, rows, selectedData, slots } = options;\n\n  const getKeys = <O extends object>(t: O): TableRowKey<O>[] => Object.keys(t) as TableRowKey<O>[];\n\n  const columns = computed<TableColumn<T>[]>(() => {\n    const currentCols = toValue(cols);\n    const currentRows = toValue(rows);\n    const data =\n      currentCols ??\n      getKeys(currentRows[0] ?? {}).map(\n        key =>\n          ({\n            key,\n            [columnAttr]: String(key),\n          }) satisfies NoneSortableTableColumn<T>,\n      );\n\n    const hasExpandColumn = data.some(row => row.key === 'expand');\n\n    if (get(expandable) && !hasExpandColumn) {\n      return [\n        ...data,\n        {\n          key: 'expand' as TableRowKey<T>,\n          sortable: false,\n          class: 'w-16',\n          cellClass: '!py-0 w-16',\n          align: 'end',\n        } satisfies NoneSortableTableColumn<T>,\n      ];\n    }\n\n    const groupByKeys = get(groupKeys);\n\n    if (groupByKeys.length === 0)\n      return data;\n\n    return data.filter(column => !groupByKeys.includes(column.key as TableRowKey<T>));\n  });\n\n  const colspan = computed<number>(() => {\n    let columnLength = get(columns).length;\n    if (get(selectedData))\n      columnLength++;\n\n    return columnLength;\n  });\n\n  const headerSlots = computed<`header.${string}`[]>(() => Object.keys(slots).filter(isHeaderSlot));\n\n  function cellValue(row: T, key: TableColumn<T>['key']): T[TableRowKey<T>] {\n    return row[key as TableRowKey<T>];\n  }\n\n  return {\n    columns,\n    colspan,\n    headerSlots,\n    cellValue,\n  };\n}\n"],"names":[],"mappings":";;;AAgCO,SAAS,gBACd,SAC0B;AAC1B,QAAM,EAAE,MAAM,YAAY,YAAY,WAAW,MAAM,cAAc,UAAU;AAE/E,QAAM,UAAU,CAAmB,MAA2B,OAAO,KAAK,CAAC;AAE3E,QAAM,UAAU,SAA2B,MAAM;AAC/C,UAAM,cAAc,QAAQ,IAAI;AAChC,UAAM,cAAc,QAAQ,IAAI;AAChC,UAAM,OACJ,eACA,QAAQ,YAAY,CAAC,KAAK,CAAA,CAAE,EAAE;AAAA,MAC5B,CAAA,SACG;AAAA,QACC;AAAA,QACA,CAAC,UAAU,GAAG,OAAO,GAAG;AAAA,MAAA;AAAA,IAC1B;AAGN,UAAM,kBAAkB,KAAK,KAAK,CAAA,QAAO,IAAI,QAAQ,QAAQ;AAE7D,QAAI,IAAI,UAAU,KAAK,CAAC,iBAAiB;AACvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,UACE,KAAK;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,WAAW;AAAA,UACX,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IAEJ;AAEA,UAAM,cAAc,IAAI,SAAS;AAEjC,QAAI,YAAY,WAAW;AACzB,aAAO;AAET,WAAO,KAAK,OAAO,CAAA,WAAU,CAAC,YAAY,SAAS,OAAO,GAAqB,CAAC;AAAA,EAClF,CAAC;AAED,QAAM,UAAU,SAAiB,MAAM;AACrC,QAAI,eAAe,IAAI,OAAO,EAAE;AAChC,QAAI,IAAI,YAAY;AAClB;AAEF,WAAO;AAAA,EACT,CAAC;AAED,QAAM,cAAc,SAA+B,MAAM,OAAO,KAAK,KAAK,EAAE,OAAO,YAAY,CAAC;AAEhG,WAAS,UAAU,KAAQ,KAA+C;AACxE,WAAO,IAAI,GAAqB;AAAA,EAClC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -0,0 +1,17 @@
+import type { ComputedRef, Ref } from 'vue';
+export interface UseTableExpansionOptions<T extends object, IdType extends keyof T> {
+    /** The property on each row used as the unique row identifier. */
+    rowAttr: IdType;
+    /** Whether only one row can be expanded at a time. */
+    singleExpand: boolean;
+}
+export interface UseTableExpansionDeps<T extends object> {
+    expanded: Ref<T[] | undefined>;
+    hasExpandedItemSlot: Ref<boolean>;
+}
+export interface UseTableExpansionReturn<T extends object, IdType extends keyof T> {
+    expandable: ComputedRef<boolean>;
+    isExpanded: (identifier: T[IdType]) => boolean;
+    onToggleExpand: (row: T) => void;
+}
+export declare function useTableExpansion<T extends object, IdType extends keyof T>(options: UseTableExpansionOptions<T, IdType>, deps: UseTableExpansionDeps<T>): UseTableExpansionReturn<T, IdType>;

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

@@ -0,0 +1,38 @@
+import { computed } from "vue";
+import { get, set } from "@vueuse/shared";
+function useTableExpansion(options, deps) {
+  const { rowAttr, singleExpand } = options;
+  const { expanded, hasExpandedItemSlot } = deps;
+  const expandable = computed(() => !!get(expanded) && get(hasExpandedItemSlot));
+  const expandedSet = computed(() => {
+    const expandedVal = get(expanded);
+    if (!expandedVal?.length)
+      return /* @__PURE__ */ new Set();
+    return new Set(expandedVal.map((row) => row[rowAttr]));
+  });
+  function isExpanded(identifier) {
+    return get(expandedSet).has(identifier);
+  }
+  function onToggleExpand(row) {
+    const expandedVal = get(expanded);
+    if (!expandedVal)
+      return;
+    const key = rowAttr;
+    const rowExpanded = isExpanded(row[key]);
+    if (singleExpand)
+      return set(expanded, rowExpanded ? [] : [row]);
+    return set(
+      expanded,
+      rowExpanded ? expandedVal.filter((item) => item[key] !== row[key]) : [...expandedVal, row]
+    );
+  }
+  return {
+    expandable,
+    isExpanded,
+    onToggleExpand
+  };
+}
+export {
+  useTableExpansion
+};
+//# sourceMappingURL=expansion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expansion.js","sources":["../../../../src/composables/tables/data-table/expansion.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\n\nexport interface UseTableExpansionOptions<T extends object, IdType extends keyof T> {\n  /** The property on each row used as the unique row identifier. */\n  rowAttr: IdType;\n  /** Whether only one row can be expanded at a time. */\n  singleExpand: boolean;\n}\n\nexport interface UseTableExpansionDeps<T extends object> {\n  expanded: Ref<T[] | undefined>;\n  hasExpandedItemSlot: Ref<boolean>;\n}\n\nexport interface UseTableExpansionReturn<T extends object, IdType extends keyof T> {\n  expandable: ComputedRef<boolean>;\n  isExpanded: (identifier: T[IdType]) => boolean;\n  onToggleExpand: (row: T) => void;\n}\n\nexport function useTableExpansion<T extends object, IdType extends keyof T>(\n  options: UseTableExpansionOptions<T, IdType>,\n  deps: UseTableExpansionDeps<T>,\n): UseTableExpansionReturn<T, IdType> {\n  const { rowAttr, singleExpand } = options;\n  const { expanded, hasExpandedItemSlot } = deps;\n\n  const expandable = computed<boolean>(() => !!get(expanded) && get(hasExpandedItemSlot));\n\n  const expandedSet = computed<Set<T[IdType]>>(() => {\n    const expandedVal = get(expanded);\n    if (!expandedVal?.length)\n      return new Set<T[IdType]>();\n    return new Set<T[IdType]>(expandedVal.map(row => row[rowAttr]));\n  });\n\n  function isExpanded(identifier: T[IdType]): boolean {\n    return get(expandedSet).has(identifier);\n  }\n\n  function onToggleExpand(row: T): void {\n    const expandedVal = get(expanded);\n    if (!expandedVal)\n      return;\n\n    const key = rowAttr;\n    const rowExpanded = isExpanded(row[key]);\n\n    if (singleExpand)\n      return set(expanded, rowExpanded ? [] : [row]);\n\n    return set(\n      expanded,\n      rowExpanded ? expandedVal.filter(item => item[key] !== row[key]) : [...expandedVal, row],\n    );\n  }\n\n  return {\n    expandable,\n    isExpanded,\n    onToggleExpand,\n  };\n}\n"],"names":[],"mappings":";;AAoBO,SAAS,kBACd,SACA,MACoC;AACpC,QAAM,EAAE,SAAS,aAAA,IAAiB;AAClC,QAAM,EAAE,UAAU,oBAAA,IAAwB;AAE1C,QAAM,aAAa,SAAkB,MAAM,CAAC,CAAC,IAAI,QAAQ,KAAK,IAAI,mBAAmB,CAAC;AAEtF,QAAM,cAAc,SAAyB,MAAM;AACjD,UAAM,cAAc,IAAI,QAAQ;AAChC,QAAI,CAAC,aAAa;AAChB,iCAAW,IAAA;AACb,WAAO,IAAI,IAAe,YAAY,IAAI,SAAO,IAAI,OAAO,CAAC,CAAC;AAAA,EAChE,CAAC;AAED,WAAS,WAAW,YAAgC;AAClD,WAAO,IAAI,WAAW,EAAE,IAAI,UAAU;AAAA,EACxC;AAEA,WAAS,eAAe,KAAc;AACpC,UAAM,cAAc,IAAI,QAAQ;AAChC,QAAI,CAAC;AACH;AAEF,UAAM,MAAM;AACZ,UAAM,cAAc,WAAW,IAAI,GAAG,CAAC;AAEvC,QAAI;AACF,aAAO,IAAI,UAAU,cAAc,CAAA,IAAK,CAAC,GAAG,CAAC;AAE/C,WAAO;AAAA,MACL;AAAA,MACA,cAAc,YAAY,OAAO,CAAA,SAAQ,KAAK,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,aAAa,GAAG;AAAA,IAAA;AAAA,EAE3F;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -0,0 +1,29 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { GroupData, TableRowKey, TableRowKeyData } from '../../../components/tables/RuiTableHead.vue.js';
+import { type GroupedTableRow } from '../../../composables/tables/data-table/types.js';
+export interface UseTableGroupingOptions<T extends object, IdType extends keyof T> {
+    /** The property on each row used as the unique row identifier. */
+    rowAttr: IdType;
+}
+export interface UseTableGroupingDeps<T extends object> {
+    group: Ref<TableRowKeyData<T>>;
+    collapsed: Ref<T[] | undefined>;
+    sorted: ComputedRef<T[]>;
+    emitCopyGroup: (value: GroupData<T>) => void;
+}
+export interface UseTableGroupingReturn<T extends object> {
+    groupKeys: ComputedRef<TableRowKey<T>[]>;
+    groupKey: ComputedRef<string>;
+    isGrouped: ComputedRef<boolean>;
+    mappedGroups: ComputedRef<Record<string, GroupedTableRow<T>[]>>;
+    grouped: ComputedRef<GroupedTableRow<T>[]>;
+    getRowGroup: (row: T) => Partial<T>;
+    getGroupRows: (groupVal: string) => T[];
+    compareGroupsFn: (a: T, b: Partial<T>) => boolean;
+    isExpandedGroup: (value: Partial<T>) => boolean;
+    isHiddenRow: (row: GroupedTableRow<T>) => boolean;
+    onToggleExpandGroup: (group: Partial<T>, value?: string) => void;
+    onUngroup: () => void;
+    onCopyGroup: (value: GroupData<T>) => void;
+}
+export declare function useTableGrouping<T extends object, IdType extends keyof T>(options: UseTableGroupingOptions<T, IdType>, deps: UseTableGroupingDeps<T>): UseTableGroupingReturn<T>;

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

@@ -0,0 +1,136 @@
+import { isRow } from "./types.js";
+import { assert } from "../../../utils/assert.js";
+import { ref, watch, computed } from "vue";
+import { set, get } from "@vueuse/shared";
+import { isDefined } from "@vueuse/core";
+const GROUP_KEY_SEPARATOR = "\0";
+function useTableGrouping(options, deps) {
+  const { rowAttr } = options;
+  const { group, collapsed, sorted, emitCopyGroup } = deps;
+  const collapsedRows = ref([]);
+  watch(collapsed, (value) => set(collapsedRows, value ?? []), { immediate: true });
+  const groupKeys = computed(() => {
+    const groupBy = get(group);
+    if (!groupBy)
+      return [];
+    if (!Array.isArray(groupBy))
+      return [groupBy];
+    return groupBy;
+  });
+  const groupKey = computed(() => get(groupKeys).join(":"));
+  const isGrouped = computed(() => !!get(groupKey));
+  const collapsedIdentifierSet = computed(
+    () => new Set(get(collapsedRows).map((row) => row[rowAttr]))
+  );
+  const collapsedGroupKeySet = computed(() => {
+    const grouping = get(groupKeys);
+    if (grouping.length === 0)
+      return /* @__PURE__ */ new Set();
+    const seen = /* @__PURE__ */ new Set();
+    for (const row of get(collapsedRows)) {
+      const groupVal = grouping.map((key) => row[key]).filter(isDefined).join(GROUP_KEY_SEPARATOR);
+      seen.add(groupVal);
+    }
+    return seen;
+  });
+  function getRowGroup(row) {
+    const result = {};
+    for (const key of get(groupKeys)) {
+      result[key] = row[key];
+    }
+    return result;
+  }
+  function compareGroupsFn(a, b) {
+    const grouping = get(groupKeys);
+    if (grouping.length === 0)
+      return false;
+    return grouping.every((key) => a[key] === b[key]);
+  }
+  function isExpandedGroup(value) {
+    const groupVal = Object.values(value).filter(isDefined).join(GROUP_KEY_SEPARATOR);
+    return !get(collapsedGroupKeySet).has(groupVal);
+  }
+  function isHiddenRow(row) {
+    if (!get(isGrouped))
+      return false;
+    if (!isRow(row))
+      return false;
+    return get(collapsedIdentifierSet).has(row[rowAttr]);
+  }
+  const mappedGroups = computed(() => {
+    if (!get(isGrouped))
+      return {};
+    const result = get(sorted);
+    const identifier = rowAttr;
+    return result.reduce((acc, row) => {
+      if (!isDefined(row[identifier]) || row[identifier] === "")
+        return acc;
+      const rowGroup = getRowGroup(row);
+      const groupVal = Object.values(rowGroup).filter(isDefined).join(GROUP_KEY_SEPARATOR);
+      if (!acc[groupVal]) {
+        acc[groupVal] = [
+          {
+            __header__: true,
+            group: rowGroup,
+            identifier: groupVal
+          }
+        ];
+      }
+      acc[groupVal].push(row);
+      return acc;
+    }, {});
+  });
+  const grouped = computed(() => {
+    const result = get(sorted);
+    const groupByKey = get(groupKey);
+    if (!groupByKey)
+      return result;
+    return Object.values(get(mappedGroups)).flat();
+  });
+  function getGroupRows(groupVal) {
+    if (!get(isGrouped))
+      return [];
+    const groupRows = get(mappedGroups)[groupVal];
+    assert(groupRows);
+    return groupRows.filter(isRow);
+  }
+  function onToggleExpandGroup(groupPartial, value) {
+    if (!value)
+      return;
+    const currentCollapsed = get(collapsedRows);
+    const groupExpanded = isExpandedGroup(groupPartial);
+    const groupRows = getGroupRows(value);
+    set(
+      collapsedRows,
+      groupExpanded ? [...currentCollapsed, ...groupRows] : currentCollapsed.filter((row) => !compareGroupsFn(row, groupPartial))
+    );
+    set(collapsed, get(collapsedRows));
+  }
+  function onUngroup() {
+    set(collapsedRows, []);
+    set(collapsed, []);
+    set(group, Array.isArray(get(group)) ? [] : void 0);
+  }
+  function onCopyGroup(value) {
+    emitCopyGroup(value);
+  }
+  return {
+    groupKeys,
+    groupKey,
+    isGrouped,
+    mappedGroups,
+    grouped,
+    getRowGroup,
+    getGroupRows,
+    compareGroupsFn,
+    isExpandedGroup,
+    isHiddenRow,
+    onToggleExpandGroup,
+    onUngroup,
+    onCopyGroup
+  };
+}
+export {
+  useTableGrouping
+};
+//# sourceMappingURL=grouping.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grouping.js","sources":["../../../../src/composables/tables/data-table/grouping.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport type { GroupData, TableRowKey, TableRowKeyData } from '@/components/tables/RuiTableHead.vue';\nimport {\n  type GroupedTableRow,\n  type GroupHeader,\n  isRow,\n} from '@/composables/tables/data-table/types';\nimport { assert } from '@/utils/assert';\n\nexport interface UseTableGroupingOptions<T extends object, IdType extends keyof T> {\n  /** The property on each row used as the unique row identifier. */\n  rowAttr: IdType;\n}\n\nexport interface UseTableGroupingDeps<T extends object> {\n  group: Ref<TableRowKeyData<T>>;\n  collapsed: Ref<T[] | undefined>;\n  sorted: ComputedRef<T[]>;\n  emitCopyGroup: (value: GroupData<T>) => void;\n}\n\nexport interface UseTableGroupingReturn<T extends object> {\n  groupKeys: ComputedRef<TableRowKey<T>[]>;\n  groupKey: ComputedRef<string>;\n  isGrouped: ComputedRef<boolean>;\n  mappedGroups: ComputedRef<Record<string, GroupedTableRow<T>[]>>;\n  grouped: ComputedRef<GroupedTableRow<T>[]>;\n  getRowGroup: (row: T) => Partial<T>;\n  getGroupRows: (groupVal: string) => T[];\n  compareGroupsFn: (a: T, b: Partial<T>) => boolean;\n  isExpandedGroup: (value: Partial<T>) => boolean;\n  isHiddenRow: (row: GroupedTableRow<T>) => boolean;\n  onToggleExpandGroup: (group: Partial<T>, value?: string) => void;\n  onUngroup: () => void;\n  onCopyGroup: (value: GroupData<T>) => void;\n}\n\n// Null character separator prevents false collisions when group values contain commas\nconst GROUP_KEY_SEPARATOR = '\\0';\n\nexport function useTableGrouping<T extends object, IdType extends keyof T>(\n  options: UseTableGroupingOptions<T, IdType>,\n  deps: UseTableGroupingDeps<T>,\n): UseTableGroupingReturn<T> {\n  const { rowAttr } = options;\n  const { group, collapsed, sorted, emitCopyGroup } = deps;\n\n  const collapsedRows: Ref<T[]> = ref([]);\n\n  watch(collapsed, value => set(collapsedRows, value ?? []), { immediate: true });\n\n  const groupKeys: ComputedRef<TableRowKey<T>[]> = computed(() => {\n    const groupBy = get(group);\n\n    if (!groupBy)\n      return [];\n\n    if (!Array.isArray(groupBy))\n      return [groupBy];\n\n    return groupBy;\n  });\n\n  const groupKey = computed<string>(() => get(groupKeys).join(':'));\n\n  const isGrouped = computed<boolean>(() => !!get(groupKey));\n\n  const collapsedIdentifierSet = computed<Set<T[IdType]>>(\n    () => new Set(get(collapsedRows).map(row => row[rowAttr])),\n  );\n\n  const collapsedGroupKeySet = computed<Set<string>>(() => {\n    const grouping = get(groupKeys);\n    if (grouping.length === 0)\n      return new Set<string>();\n\n    const seen = new Set<string>();\n    for (const row of get(collapsedRows)) {\n      const groupVal = grouping\n        .map(key => row[key])\n        .filter(isDefined)\n        .join(GROUP_KEY_SEPARATOR);\n      seen.add(groupVal);\n    }\n    return seen;\n  });\n\n  function getRowGroup(row: T): Partial<T> {\n    const result: Partial<T> = {};\n    for (const key of get(groupKeys)) {\n      result[key] = row[key];\n    }\n    return result;\n  }\n\n  function compareGroupsFn(a: T, b: Partial<T>): boolean {\n    const grouping = get(groupKeys);\n    if (grouping.length === 0)\n      return false;\n\n    return grouping.every(key => a[key] === b[key]);\n  }\n\n  function isExpandedGroup(value: Partial<T>): boolean {\n    const groupVal = Object.values(value).filter(isDefined).join(GROUP_KEY_SEPARATOR);\n    return !get(collapsedGroupKeySet).has(groupVal);\n  }\n\n  function isHiddenRow(row: GroupedTableRow<T>): boolean {\n    if (!get(isGrouped))\n      return false;\n    if (!isRow(row))\n      return false;\n    return get(collapsedIdentifierSet).has(row[rowAttr]);\n  }\n\n  const mappedGroups = computed<Record<string, GroupedTableRow<T>[]>>(() => {\n    if (!get(isGrouped))\n      return {};\n\n    const result = get(sorted);\n    const identifier = rowAttr;\n\n    return result.reduce((acc: Record<string, GroupedTableRow<T>[]>, row) => {\n      if (!isDefined(row[identifier]) || row[identifier] === '')\n        return acc;\n\n      const rowGroup = getRowGroup(row);\n      const groupVal = Object.values(rowGroup).filter(isDefined).join(GROUP_KEY_SEPARATOR);\n      if (!acc[groupVal]) {\n        acc[groupVal] = [\n          {\n            __header__: true,\n            group: rowGroup,\n            identifier: groupVal,\n          } satisfies GroupHeader<T>,\n        ];\n      }\n\n      acc[groupVal].push(row);\n\n      return acc;\n    }, {});\n  });\n\n  const grouped = computed<GroupedTableRow<T>[]>(() => {\n    const result = get(sorted);\n    const groupByKey = get(groupKey);\n\n    if (!groupByKey)\n      return result;\n\n    return Object.values(get(mappedGroups)).flat();\n  });\n\n  function getGroupRows(groupVal: string): T[] {\n    if (!get(isGrouped))\n      return [];\n\n    const groupRows = get(mappedGroups)[groupVal];\n    assert(groupRows);\n    return groupRows.filter(isRow);\n  }\n\n  function onToggleExpandGroup(groupPartial: Partial<T>, value?: string): void {\n    if (!value)\n      return;\n\n    const currentCollapsed = get(collapsedRows);\n\n    const groupExpanded = isExpandedGroup(groupPartial);\n\n    const groupRows = getGroupRows(value);\n\n    set(\n      collapsedRows,\n      groupExpanded\n        ? [...currentCollapsed, ...groupRows]\n        : currentCollapsed.filter(row => !compareGroupsFn(row, groupPartial)),\n    );\n\n    set(collapsed, get(collapsedRows));\n  }\n\n  function onUngroup(): void {\n    set(collapsedRows, []);\n\n    set(collapsed, []);\n    set(group, Array.isArray(get(group)) ? [] : undefined);\n  }\n\n  function onCopyGroup(value: GroupData<T>): void {\n    emitCopyGroup(value);\n  }\n\n  return {\n    groupKeys,\n    groupKey,\n    isGrouped,\n    mappedGroups,\n    grouped,\n    getRowGroup,\n    getGroupRows,\n    compareGroupsFn,\n    isExpandedGroup,\n    isHiddenRow,\n    onToggleExpandGroup,\n    onUngroup,\n    onCopyGroup,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { TableSortData } from '../../../components/tables/RuiTableHead.vue.js';
+import type { TablePaginationData } from '../../../components/tables/RuiTablePagination.vue.js';
+import type { TableOptions as TableDefaultOptions } from '../../../composables/defaults/table.js';
+import { type GroupedTableRow } from '../../../composables/tables/data-table/types.js';
+export interface UseTablePaginationOptions {
+    /** The default number of items displayed per page. */
+    itemsPerPage: number;
+    /** Whether pagination is managed externally (e.g. server-side). */
+    paginationModifiersExternal: boolean | undefined;
+    /** Whether to share the items-per-page setting across all tables. */
+    globalItemsPerPage: boolean | undefined;
+}
+export interface UseTablePaginationDeps<T extends object> {
+    pagination: Ref<TablePaginationData | undefined>;
+    grouped: ComputedRef<GroupedTableRow<T>[]>;
+    isHiddenRow: (row: GroupedTableRow<T>) => boolean;
+    sort: Ref<TableSortData<T>>;
+    emitUpdateOptions: (options: {
+        sort?: TableSortData<T>;
+        pagination?: TablePaginationData;
+    }) => void;
+    tableDefaults: TableDefaultOptions;
+}
+export interface UseTablePaginationReturn<T extends object> {
+    paginationData: Ref<TablePaginationData>;
+    filtered: ComputedRef<GroupedTableRow<T>[]>;
+    itemsLength: Ref<number>;
+    globalItemsPerPageSettings: ComputedRef<boolean>;
+    setInternalTotal: (items: GroupedTableRow<T>[]) => void;
+    resetPagination: () => void;
+}
+export declare function useTablePagination<T extends object>(options: UseTablePaginationOptions, deps: UseTablePaginationDeps<T>): UseTablePaginationReturn<T>;