@rotki/ui-library 2.14.1 → 2.16.0

package/dist/composables/popper.js

@@ -1,178 +1,23 @@
-import { createPopper } from "@popperjs/core";
-import { useResizeObserver, isDefined, unrefElement } from "@vueuse/core";
-import { ref, shallowRef, computed, onMounted, watchEffect } from "vue";
-import { useTimeoutManager } from "./timeout-manager.js";
-import { get, set } from "@vueuse/shared";
-const DEFAULT_POPPER_OPTIONS = {
-  adaptive: true,
-  gpuAcceleration: true,
-  locked: false,
-  offsetDistance: 8,
-  offsetSkid: 0,
-  overflowPadding: 8,
-  placement: "bottom",
-  resize: true,
-  scroll: true,
-  strategy: "absolute"
-};
-function usePopper(options, disabled = shallowRef(false), openDelay = shallowRef(0), closeDelay = shallowRef(0), virtualReference) {
-  const reference = ref();
-  const popper = ref();
-  const instance = ref();
-  const open = shallowRef(false);
-  const popperEnter = shallowRef(false);
-  const leavePending = shallowRef(false);
-  const openTimeoutManager = useTimeoutManager();
-  const closeTimeoutManager = useTimeoutManager();
-  const onPopperLeave = () => {
-    set(popperEnter, false);
-  };
-  const updatePopper = async () => {
-    await get(instance)?.update();
-  };
-  const onOpen = (immediate = false) => {
-    if (get(disabled))
-      return;
-    closeTimeoutManager.clear();
-    set(leavePending, false);
-    if (!openTimeoutManager.isActive()) {
-      set(popperEnter, true);
-      openTimeoutManager.create(
-        () => {
-          set(open, true);
-        },
-        immediate ? 0 : get(openDelay)
-      );
-    }
-  };
-  const onClose = (immediate = false) => {
-    if (get(disabled))
-      return;
-    openTimeoutManager.clear();
-    if (!closeTimeoutManager.isActive()) {
-      closeTimeoutManager.create(
-        () => {
-          if (!get(open))
-            onPopperLeave();
-          set(open, false);
-        },
-        immediate ? 0 : get(closeDelay)
-      );
-    }
-  };
-  const onLeavePending = () => {
-    set(leavePending, true);
-  };
-  const modifiers = computed(() => {
-    const {
-      adaptive = DEFAULT_POPPER_OPTIONS.adaptive,
-      gpuAcceleration = DEFAULT_POPPER_OPTIONS.gpuAcceleration,
-      locked = DEFAULT_POPPER_OPTIONS.locked,
-      offsetDistance = DEFAULT_POPPER_OPTIONS.offsetDistance,
-      offsetSkid = DEFAULT_POPPER_OPTIONS.offsetSkid,
-      overflowPadding = DEFAULT_POPPER_OPTIONS.overflowPadding,
-      resize = DEFAULT_POPPER_OPTIONS.resize,
-      scroll = DEFAULT_POPPER_OPTIONS.scroll
-    } = get(options);
-    return [
-      {
-        enabled: false,
-        name: "hide"
-      },
-      {
-        enabled: !locked,
-        name: "flip"
-      },
-      {
-        name: "preventOverflow",
-        options: {
-          padding: overflowPadding
-        }
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [offsetSkid, offsetDistance]
-        }
-      },
-      {
-        name: "computeStyles",
-        options: {
-          adaptive,
-          gpuAcceleration
-        }
-      },
-      {
-        name: "eventListeners",
-        options: {
-          resize,
-          scroll
-        }
-      },
-      {
-        name: "arrow",
-        options: {
-          padding: 4
-        }
-      }
-    ];
-  });
-  const popperConfig = computed(() => {
-    const {
-      placement = DEFAULT_POPPER_OPTIONS.placement,
-      strategy = DEFAULT_POPPER_OPTIONS.strategy
-    } = get(options);
-    return {
-      modifiers: get(modifiers),
-      placement,
-      strategy
-    };
-  });
-  function getValidElements() {
-    if (!get(popper) || !get(reference) && !get(virtualReference)) {
-      return null;
-    }
-    const popperEl = unrefElement(popper);
-    const referenceEl = get(virtualReference) || unrefElement(reference);
-    if (!(popperEl instanceof HTMLElement) || !referenceEl) {
-      return null;
-    }
-    return { popperEl, referenceEl };
-  }
-  function initializePopper(onInvalidate) {
-    const elements = getValidElements();
-    if (!elements)
-      return;
-    const { popperEl, referenceEl } = elements;
-    const value = createPopper(referenceEl, popperEl, get(popperConfig));
-    set(instance, value);
-    onInvalidate(value.destroy);
-  }
-  useResizeObserver([reference, popper], async () => {
-    if (isDefined(instance))
-      await get(instance).update();
-  });
-  onMounted(() => {
-    watchEffect((onInvalidate) => {
-      initializePopper(onInvalidate);
-    });
-  });
-  return {
-    instance,
-    leavePending,
-    onClose,
-    onLeavePending,
-    onOpen,
-    onPopperLeave,
-    open,
-    popper,
-    popperEnter,
-    reference,
-    updatePopper
-  };
+import { Placement, Strategy } from "./floating.js";
+//#region src/composables/popper.ts
+/** @deprecated Use FloatingOptions directly. Will be removed in next major. */
+function toFloatingOptions(opts) {
+	return {
+		autoUpdate: {
+			resize: opts.resize ?? true,
+			scroll: opts.scroll ?? true
+		},
+		flip: !(opts.locked ?? false),
+		offset: {
+			crossAxis: opts.offsetSkid ?? 0,
+			mainAxis: opts.offsetDistance ?? 8
+		},
+		placement: opts.placement ?? Placement.bottom,
+		shiftPadding: opts.overflowPadding ?? 8,
+		strategy: opts.strategy ?? Strategy.absolute
+	};
 }
-export {
-  DEFAULT_POPPER_OPTIONS,
-  usePopper
-};
-//# sourceMappingURL=popper.js.map
+//#endregion
+export { toFloatingOptions };
+
+//# sourceMappingURL=popper.js.map

package/dist/composables/popper.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"popper.js","names":[],"sources":["../../src/composables/popper.ts"],"sourcesContent":["import { type FloatingOptions, Placement, Strategy } from './floating';\n\n/** @deprecated Use FloatingOptions instead */\nexport interface PopperOptions {\n  locked?: boolean;\n  overflowPadding?: number;\n  offsetDistance?: number;\n  offsetSkid?: number;\n  placement?: Placement;\n  strategy?: Strategy;\n  gpuAcceleration?: boolean;\n  adaptive?: boolean;\n  scroll?: boolean;\n  resize?: boolean;\n}\n\n/** @deprecated Use FloatingOptions directly. Will be removed in next major. */\nexport function toFloatingOptions(opts: PopperOptions): FloatingOptions {\n  return {\n    autoUpdate: {\n      resize: opts.resize ?? true,\n      scroll: opts.scroll ?? true,\n    },\n    flip: !(opts.locked ?? false),\n    offset: {\n      crossAxis: opts.offsetSkid ?? 0,\n      mainAxis: opts.offsetDistance ?? 8,\n    },\n    placement: opts.placement ?? Placement.bottom,\n    shiftPadding: opts.overflowPadding ?? 8,\n    strategy: opts.strategy ?? Strategy.absolute,\n  };\n}\n"],"mappings":";;;AAiBA,SAAgB,kBAAkB,MAAsC;AACtE,QAAO;EACL,YAAY;GACV,QAAQ,KAAK,UAAU;GACvB,QAAQ,KAAK,UAAU;GACxB;EACD,MAAM,EAAE,KAAK,UAAU;EACvB,QAAQ;GACN,WAAW,KAAK,cAAc;GAC9B,UAAU,KAAK,kBAAkB;GAClC;EACD,WAAW,KAAK,aAAa,UAAU;EACvC,cAAc,KAAK,mBAAmB;EACtC,UAAU,KAAK,YAAY,SAAS;EACrC"}

package/dist/composables/sticky-header.js

@@ -1,163 +1,152 @@
-import { shallowRef, onMounted, readonly, toValue } from "vue";
+import { onMounted, readonly, shallowRef, toValue } from "vue";
 import { useEventListener, useMutationObserver, useResizeObserver } from "@vueuse/core";
-import { set, get } from "@vueuse/shared";
-const SELECTORS = {
-  head: ":scope > thead[data-id=head-main]",
-  headClone: ":scope > thead[data-id=head-clone]",
-  row: ":scope > tbody > tr:not([hidden])",
-  th: ":scope > th"
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/sticky-header.ts
+var SELECTORS = {
+	head: ":scope > thead[data-id=head-main]",
+	headClone: ":scope > thead[data-id=head-clone]",
+	row: ":scope > tbody > tr:not([hidden])",
+	th: ":scope > th"
 };
-const BORDER_PRECISION = -0.5;
+var BORDER_PRECISION = -.5;
 function queryHeadRow(root, selector) {
-  return root.querySelector(`${selector} > tr`);
+	return root.querySelector(`${selector} > tr`);
 }
 function queryColumns(row) {
-  if (!row)
-    return [];
-  return Array.from(row.querySelectorAll(SELECTORS.th));
-}
-function clearColumnWidths(columns) {
-  for (const column of columns)
-    column.style.width = "";
+	if (!row) return [];
+	return Array.from(row.querySelectorAll(SELECTORS.th));
 }
 function readColumnWidths(columns) {
-  return columns.map((col) => col.getBoundingClientRect().width);
+	return columns.map((col) => col.getBoundingClientRect().width);
 }
 function applyColumnWidths(columns, widths) {
-  for (const [i, column] of columns.entries()) {
-    const width = widths[i];
-    if (width !== void 0)
-      column.style.width = `${width}px`;
-  }
+	for (const [i, column] of columns.entries()) {
+		const width = widths[i];
+		if (width !== void 0) column.style.width = `${width}px`;
+	}
 }
 function positionHeadAtRest(head) {
-  head.style.left = `${BORDER_PRECISION}px`;
-  head.style.top = "0";
+	head.style.left = `${BORDER_PRECISION}px`;
+	head.style.top = "0";
 }
 function positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top }) {
-  head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;
-  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;
-  head.style.top = isNearBottom ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px` : `${top}px`;
+	head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;
+	const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;
+	head.style.top = isNearBottom ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px` : `${top}px`;
 }
 function isInStickyRange(tableRect, top) {
-  return tableRect.top <= top && tableRect.bottom > top;
+	return tableRect.top <= top && tableRect.bottom > top;
 }
 function getLastRowHeight(root) {
-  const rows = root.querySelectorAll(SELECTORS.row);
-  if (rows.length <= 1)
-    return void 0;
-  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;
+	const rows = root.querySelectorAll(SELECTORS.row);
+	if (rows.length <= 1) return void 0;
+	return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;
 }
+/**
+* Setup sticky table header
+*/
 function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs) {
-  const { table, tableScroller } = tableRefs;
-  const stick = shallowRef(false);
-  let resizeCleanups = [];
-  let syncOuterRafId = null;
-  let syncInnerRafId = null;
-  let rafId = null;
-  function cleanupResizeObservers() {
-    for (const cleanup of resizeCleanups)
-      cleanup();
-    resizeCleanups = [];
-  }
-  function cancelPendingSync() {
-    if (syncOuterRafId !== null)
-      cancelAnimationFrame(syncOuterRafId);
-    if (syncInnerRafId !== null)
-      cancelAnimationFrame(syncInnerRafId);
-    syncOuterRafId = null;
-    syncInnerRafId = null;
-  }
-  function scheduleSyncWidths(cloneColumns, mainColumns) {
-    cancelPendingSync();
-    syncOuterRafId = requestAnimationFrame(() => {
-      syncOuterRafId = null;
-      clearColumnWidths(mainColumns);
-      syncInnerRafId = requestAnimationFrame(() => {
-        syncInnerRafId = null;
-        applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));
-      });
-    });
-  }
-  function observeColumnResizes(cloneColumns, mainColumns) {
-    cleanupResizeObservers();
-    for (const th of cloneColumns) {
-      const { stop } = useResizeObserver(th, () => {
-        scheduleSyncWidths(cloneColumns, mainColumns);
-      });
-      resizeCleanups.push(stop);
-    }
-  }
-  function watchCellWidth() {
-    const root = get(table);
-    if (!toValue(sticky) || !root)
-      return;
-    const cloneRow = queryHeadRow(root, SELECTORS.headClone);
-    const mainRow = queryHeadRow(root, SELECTORS.head);
-    const cloneColumns = queryColumns(cloneRow);
-    const mainColumns = queryColumns(mainRow);
-    useMutationObserver(cloneRow, (mutations) => {
-      const hasRelevantMutation = mutations.some(
-        (m) => m.type === "childList" || m.type === "attributes"
-      );
-      if (hasRelevantMutation)
-        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));
-    }, { attributes: true, childList: true, subtree: true });
-    observeColumnResizes(cloneColumns, mainColumns);
-  }
-  function queryStickyElements() {
-    const root = get(table);
-    if (!toValue(sticky) || !root)
-      return void 0;
-    const theadClone = root.querySelector(SELECTORS.headClone);
-    const head = root.querySelector(SELECTORS.head);
-    if (!theadClone || !head)
-      return void 0;
-    return { head, root, theadClone };
-  }
-  function toggleStickyClass() {
-    const elements = queryStickyElements();
-    if (!elements)
-      return;
-    const { head, root, theadClone } = elements;
-    const clonedRect = theadClone.getBoundingClientRect();
-    const tableRect = root.getBoundingClientRect();
-    const top = toValue(offsetTop) ?? 0;
-    head.style.width = `${clonedRect.width}px`;
-    const lastRowHeight = getLastRowHeight(root);
-    if (lastRowHeight === void 0) {
-      set(stick, false);
-      positionHeadAtRest(head);
-      return;
-    }
-    if (isInStickyRange(tableRect, top)) {
-      set(stick, true);
-      positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top });
-    } else {
-      set(stick, false);
-      positionHeadAtRest(head);
-    }
-  }
-  function throttledToggleStickyClass() {
-    if (rafId !== null)
-      return;
-    rafId = requestAnimationFrame(() => {
-      toggleStickyClass();
-      rafId = null;
-    });
-  }
-  onMounted(() => {
-    toggleStickyClass();
-    useEventListener(tableScroller, "scroll", throttledToggleStickyClass);
-    useEventListener(document.body, "scroll", throttledToggleStickyClass);
-    useEventListener(window, "resize", throttledToggleStickyClass);
-    watchCellWidth();
-  });
-  return {
-    stick: readonly(stick)
-  };
+	const { table, tableScroller } = tableRefs;
+	const stick = shallowRef(false);
+	let resizeCleanups = [];
+	let syncRafId = null;
+	let rafId = null;
+	function cleanupResizeObservers() {
+		for (const cleanup of resizeCleanups) cleanup();
+		resizeCleanups = [];
+	}
+	function cancelPendingSync() {
+		if (syncRafId !== null) cancelAnimationFrame(syncRafId);
+		syncRafId = null;
+	}
+	function scheduleSyncWidths(cloneColumns, mainColumns) {
+		cancelPendingSync();
+		syncRafId = requestAnimationFrame(() => {
+			syncRafId = null;
+			applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));
+		});
+	}
+	function observeColumnResizes(cloneColumns, mainColumns) {
+		cleanupResizeObservers();
+		for (const th of cloneColumns) {
+			const { stop } = useResizeObserver(th, () => {
+				scheduleSyncWidths(cloneColumns, mainColumns);
+			});
+			resizeCleanups.push(stop);
+		}
+	}
+	function watchCellWidth() {
+		const root = get$1(table);
+		if (!toValue(sticky) || !root) return;
+		const cloneRow = queryHeadRow(root, SELECTORS.headClone);
+		const mainRow = queryHeadRow(root, SELECTORS.head);
+		const cloneColumns = queryColumns(cloneRow);
+		const mainColumns = queryColumns(mainRow);
+		useMutationObserver(cloneRow, (mutations) => {
+			if (mutations.some((m) => m.type === "childList" || m.type === "attributes")) observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));
+		}, {
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+		observeColumnResizes(cloneColumns, mainColumns);
+	}
+	function queryStickyElements() {
+		const root = get$1(table);
+		if (!toValue(sticky) || !root) return void 0;
+		const theadClone = root.querySelector(SELECTORS.headClone);
+		const head = root.querySelector(SELECTORS.head);
+		if (!theadClone || !head) return void 0;
+		return {
+			head,
+			root,
+			theadClone
+		};
+	}
+	function toggleStickyClass() {
+		const elements = queryStickyElements();
+		if (!elements) return;
+		const { head, root, theadClone } = elements;
+		const clonedRect = theadClone.getBoundingClientRect();
+		const tableRect = root.getBoundingClientRect();
+		const top = toValue(offsetTop) ?? 0;
+		head.style.width = `${clonedRect.width}px`;
+		const lastRowHeight = getLastRowHeight(root);
+		if (lastRowHeight === void 0) {
+			set$1(stick, false);
+			positionHeadAtRest(head);
+			return;
+		}
+		if (isInStickyRange(tableRect, top)) {
+			set$1(stick, true);
+			positionHeadStuck(head, {
+				clonedRect,
+				lastRowHeight,
+				tableRect,
+				top
+			});
+		} else {
+			set$1(stick, false);
+			positionHeadAtRest(head);
+		}
+	}
+	function throttledToggleStickyClass() {
+		if (rafId !== null) return;
+		rafId = requestAnimationFrame(() => {
+			toggleStickyClass();
+			rafId = null;
+		});
+	}
+	onMounted(() => {
+		toggleStickyClass();
+		useEventListener(tableScroller, "scroll", throttledToggleStickyClass);
+		useEventListener(document.body, "scroll", throttledToggleStickyClass);
+		useEventListener(window, "resize", throttledToggleStickyClass);
+		watchCellWidth();
+	});
+	return { stick: readonly(stick) };
 }
-export {
-  useStickyTableHeader
-};
-//# sourceMappingURL=sticky-header.js.map
+//#endregion
+export { useStickyTableHeader };
+
+//# sourceMappingURL=sticky-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n  tableScroller: Readonly<ShallowRef<HTMLElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst 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} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction clearColumnWidths(columns: HTMLElement[]): void {\n  for (const column of columns)\n    column.style.width = '';\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  head.style.top = isNearBottom\n    ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px`\n    : `${top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table, tableScroller } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncOuterRafId: number | null = null;\n  let syncInnerRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncOuterRafId !== null)\n      cancelAnimationFrame(syncOuterRafId);\n    if (syncInnerRafId !== null)\n      cancelAnimationFrame(syncInnerRafId);\n    syncOuterRafId = null;\n    syncInnerRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    syncOuterRafId = requestAnimationFrame(() => {\n      syncOuterRafId = null;\n      clearColumnWidths(mainColumns);\n\n      // Wait one frame for the clone to settle to its natural width after clearing\n      syncInnerRafId = requestAnimationFrame(() => {\n        syncInnerRafId = null;\n        applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n      });\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const top = toValue(offsetTop) ?? 0;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\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: readonly(stick),\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sticky-header.js","names":[],"sources":["../../src/composables/sticky-header.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\nexport interface UseStickyTableHeaderRefs {\n  table: Readonly<ShallowRef<HTMLTableElement | null>>;\n  tableScroller: Readonly<ShallowRef<HTMLElement | null>>;\n}\n\ninterface StickyElements {\n  head: HTMLElement;\n  theadClone: HTMLElement;\n  root: HTMLTableElement;\n}\n\ninterface UseStickyTableHeaderReturn {\n  stick: Readonly<Ref<boolean>>;\n}\n\nconst 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} as const;\n\nconst BORDER_PRECISION = -0.5;\n\nfunction queryHeadRow(root: HTMLTableElement, selector: string): HTMLTableRowElement | null {\n  return root.querySelector(`${selector} > tr`);\n}\n\nfunction queryColumns(row: HTMLTableRowElement | null): HTMLElement[] {\n  if (!row)\n    return [];\n  return Array.from(row.querySelectorAll<HTMLElement>(SELECTORS.th));\n}\n\nfunction readColumnWidths(columns: HTMLElement[]): number[] {\n  return columns.map(col => col.getBoundingClientRect().width);\n}\n\nfunction applyColumnWidths(columns: HTMLElement[], widths: number[]): void {\n  for (const [i, column] of columns.entries()) {\n    const width = widths[i];\n    if (width !== undefined)\n      column.style.width = `${width}px`;\n  }\n}\n\nfunction positionHeadAtRest(head: HTMLElement): void {\n  head.style.left = `${BORDER_PRECISION}px`;\n  head.style.top = '0';\n}\n\ninterface StuckPosition {\n  clonedRect: DOMRect;\n  tableRect: DOMRect;\n  lastRowHeight: number;\n  top: number;\n}\n\nfunction positionHeadStuck(head: HTMLElement, { clonedRect, lastRowHeight, tableRect, top }: StuckPosition): void {\n  head.style.left = `${clonedRect.left + BORDER_PRECISION}px`;\n\n  const isNearBottom = tableRect.bottom <= lastRowHeight + clonedRect.height + top;\n  head.style.top = isNearBottom\n    ? `${tableRect.bottom - lastRowHeight - clonedRect.height}px`\n    : `${top}px`;\n}\n\nfunction isInStickyRange(tableRect: DOMRect, top: number): boolean {\n  return tableRect.top <= top && tableRect.bottom > top;\n}\n\nfunction getLastRowHeight(root: HTMLTableElement): number | undefined {\n  const rows = root.querySelectorAll(SELECTORS.row);\n  if (rows.length <= 1)\n    return undefined;\n  return rows.item(rows.length - 1)?.getBoundingClientRect().height ?? 0;\n}\n\n/**\n * Setup sticky table header\n */\nexport function useStickyTableHeader(\n  sticky: MaybeRefOrGetter<boolean> = shallowRef(false),\n  offsetTop: MaybeRefOrGetter<number | undefined>,\n  tableRefs: UseStickyTableHeaderRefs,\n): UseStickyTableHeaderReturn {\n  const { table, tableScroller } = tableRefs;\n  const stick = shallowRef<boolean>(false);\n\n  let resizeCleanups: (() => void)[] = [];\n  let syncRafId: number | null = null;\n  let rafId: number | null = null;\n\n  function cleanupResizeObservers(): void {\n    for (const cleanup of resizeCleanups)\n      cleanup();\n    resizeCleanups = [];\n  }\n\n  function cancelPendingSync(): void {\n    if (syncRafId !== null)\n      cancelAnimationFrame(syncRafId);\n    syncRafId = null;\n  }\n\n  function scheduleSyncWidths(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cancelPendingSync();\n\n    // Single-frame sync: the main thead is position absolute/fixed so clearing\n    // its widths is unnecessary — clone widths are independent of main widths.\n    syncRafId = requestAnimationFrame(() => {\n      syncRafId = null;\n      applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));\n    });\n  }\n\n  function observeColumnResizes(cloneColumns: HTMLElement[], mainColumns: HTMLElement[]): void {\n    cleanupResizeObservers();\n\n    for (const th of cloneColumns) {\n      const { stop } = useResizeObserver(th, () => {\n        scheduleSyncWidths(cloneColumns, mainColumns);\n      });\n      resizeCleanups.push(stop);\n    }\n  }\n\n  function watchCellWidth(): void {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return;\n\n    const cloneRow = queryHeadRow(root, SELECTORS.headClone);\n    const mainRow = queryHeadRow(root, SELECTORS.head);\n    const cloneColumns = queryColumns(cloneRow);\n    const mainColumns = queryColumns(mainRow);\n\n    useMutationObserver(cloneRow, (mutations) => {\n      const hasRelevantMutation = mutations.some(\n        m => m.type === 'childList' || m.type === 'attributes',\n      );\n      if (hasRelevantMutation)\n        observeColumnResizes(queryColumns(cloneRow), queryColumns(mainRow));\n    }, { attributes: true, childList: true, subtree: true });\n\n    observeColumnResizes(cloneColumns, mainColumns);\n  }\n\n  function queryStickyElements(): StickyElements | undefined {\n    const root = get(table);\n    if (!toValue(sticky) || !root)\n      return undefined;\n\n    const theadClone = root.querySelector<HTMLElement>(SELECTORS.headClone);\n    const head = root.querySelector<HTMLElement>(SELECTORS.head);\n    if (!theadClone || !head)\n      return undefined;\n\n    return { head, root, theadClone };\n  }\n\n  function toggleStickyClass(): void {\n    const elements = queryStickyElements();\n    if (!elements)\n      return;\n\n    const { head, root, theadClone } = elements;\n    const clonedRect = theadClone.getBoundingClientRect();\n    const tableRect = root.getBoundingClientRect();\n    const top = toValue(offsetTop) ?? 0;\n\n    head.style.width = `${clonedRect.width}px`;\n\n    const lastRowHeight = getLastRowHeight(root);\n    if (lastRowHeight === undefined) {\n      set(stick, false);\n      positionHeadAtRest(head);\n      return;\n    }\n\n    if (isInStickyRange(tableRect, top)) {\n      set(stick, true);\n      positionHeadStuck(head, { clonedRect, lastRowHeight, tableRect, top });\n    }\n    else {\n      set(stick, false);\n      positionHeadAtRest(head);\n    }\n  }\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: readonly(stick),\n  };\n}\n"],"mappings":";;;;AAiBA,IAAM,YAAY;CAChB,MAAM;CACN,WAAW;CACX,KAAK;CACL,IAAI;CACL;AAED,IAAM,mBAAmB;AAEzB,SAAS,aAAa,MAAwB,UAA8C;AAC1F,QAAO,KAAK,cAAc,GAAG,SAAS,OAAO;;AAG/C,SAAS,aAAa,KAAgD;AACpE,KAAI,CAAC,IACH,QAAO,EAAE;AACX,QAAO,MAAM,KAAK,IAAI,iBAA8B,UAAU,GAAG,CAAC;;AAGpE,SAAS,iBAAiB,SAAkC;AAC1D,QAAO,QAAQ,KAAI,QAAO,IAAI,uBAAuB,CAAC,MAAM;;AAG9D,SAAS,kBAAkB,SAAwB,QAAwB;AACzE,MAAK,MAAM,CAAC,GAAG,WAAW,QAAQ,SAAS,EAAE;EAC3C,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,KAAA,EACZ,QAAO,MAAM,QAAQ,GAAG,MAAM;;;AAIpC,SAAS,mBAAmB,MAAyB;AACnD,MAAK,MAAM,OAAO,GAAG,iBAAiB;AACtC,MAAK,MAAM,MAAM;;AAUnB,SAAS,kBAAkB,MAAmB,EAAE,YAAY,eAAe,WAAW,OAA4B;AAChH,MAAK,MAAM,OAAO,GAAG,WAAW,OAAO,iBAAiB;CAExD,MAAM,eAAe,UAAU,UAAU,gBAAgB,WAAW,SAAS;AAC7E,MAAK,MAAM,MAAM,eACb,GAAG,UAAU,SAAS,gBAAgB,WAAW,OAAO,MACxD,GAAG,IAAI;;AAGb,SAAS,gBAAgB,WAAoB,KAAsB;AACjE,QAAO,UAAU,OAAO,OAAO,UAAU,SAAS;;AAGpD,SAAS,iBAAiB,MAA4C;CACpE,MAAM,OAAO,KAAK,iBAAiB,UAAU,IAAI;AACjD,KAAI,KAAK,UAAU,EACjB,QAAO,KAAA;AACT,QAAO,KAAK,KAAK,KAAK,SAAS,EAAE,EAAE,uBAAuB,CAAC,UAAU;;;;;AAMvE,SAAgB,qBACd,SAAoC,WAAW,MAAM,EACrD,WACA,WAC4B;CAC5B,MAAM,EAAE,OAAO,kBAAkB;CACjC,MAAM,QAAQ,WAAoB,MAAM;CAExC,IAAI,iBAAiC,EAAE;CACvC,IAAI,YAA2B;CAC/B,IAAI,QAAuB;CAE3B,SAAS,yBAA+B;AACtC,OAAK,MAAM,WAAW,eACpB,UAAS;AACX,mBAAiB,EAAE;;CAGrB,SAAS,oBAA0B;AACjC,MAAI,cAAc,KAChB,sBAAqB,UAAU;AACjC,cAAY;;CAGd,SAAS,mBAAmB,cAA6B,aAAkC;AACzF,qBAAmB;AAInB,cAAY,4BAA4B;AACtC,eAAY;AACZ,qBAAkB,aAAa,iBAAiB,aAAa,CAAC;IAC9D;;CAGJ,SAAS,qBAAqB,cAA6B,aAAkC;AAC3F,0BAAwB;AAExB,OAAK,MAAM,MAAM,cAAc;GAC7B,MAAM,EAAE,SAAS,kBAAkB,UAAU;AAC3C,uBAAmB,cAAc,YAAY;KAC7C;AACF,kBAAe,KAAK,KAAK;;;CAI7B,SAAS,iBAAuB;EAC9B,MAAM,OAAO,MAAI,MAAM;AACvB,MAAI,CAAC,QAAQ,OAAO,IAAI,CAAC,KACvB;EAEF,MAAM,WAAW,aAAa,MAAM,UAAU,UAAU;EACxD,MAAM,UAAU,aAAa,MAAM,UAAU,KAAK;EAClD,MAAM,eAAe,aAAa,SAAS;EAC3C,MAAM,cAAc,aAAa,QAAQ;AAEzC,sBAAoB,WAAW,cAAc;AAI3C,OAH4B,UAAU,MACpC,MAAK,EAAE,SAAS,eAAe,EAAE,SAAS,aAC3C,CAEC,sBAAqB,aAAa,SAAS,EAAE,aAAa,QAAQ,CAAC;KACpE;GAAE,YAAY;GAAM,WAAW;GAAM,SAAS;GAAM,CAAC;AAExD,uBAAqB,cAAc,YAAY;;CAGjD,SAAS,sBAAkD;EACzD,MAAM,OAAO,MAAI,MAAM;AACvB,MAAI,CAAC,QAAQ,OAAO,IAAI,CAAC,KACvB,QAAO,KAAA;EAET,MAAM,aAAa,KAAK,cAA2B,UAAU,UAAU;EACvE,MAAM,OAAO,KAAK,cAA2B,UAAU,KAAK;AAC5D,MAAI,CAAC,cAAc,CAAC,KAClB,QAAO,KAAA;AAET,SAAO;GAAE;GAAM;GAAM;GAAY;;CAGnC,SAAS,oBAA0B;EACjC,MAAM,WAAW,qBAAqB;AACtC,MAAI,CAAC,SACH;EAEF,MAAM,EAAE,MAAM,MAAM,eAAe;EACnC,MAAM,aAAa,WAAW,uBAAuB;EACrD,MAAM,YAAY,KAAK,uBAAuB;EAC9C,MAAM,MAAM,QAAQ,UAAU,IAAI;AAElC,OAAK,MAAM,QAAQ,GAAG,WAAW,MAAM;EAEvC,MAAM,gBAAgB,iBAAiB,KAAK;AAC5C,MAAI,kBAAkB,KAAA,GAAW;AAC/B,SAAI,OAAO,MAAM;AACjB,sBAAmB,KAAK;AACxB;;AAGF,MAAI,gBAAgB,WAAW,IAAI,EAAE;AACnC,SAAI,OAAO,KAAK;AAChB,qBAAkB,MAAM;IAAE;IAAY;IAAe;IAAW;IAAK,CAAC;SAEnE;AACH,SAAI,OAAO,MAAM;AACjB,sBAAmB,KAAK;;;CAI5B,SAAS,6BAAmC;AAC1C,MAAI,UAAU,KACZ;AACF,UAAQ,4BAA4B;AAClC,sBAAmB;AACnB,WAAQ;IACR;;AAGJ,iBAAgB;AACd,qBAAmB;AACnB,mBAAiB,eAAe,UAAU,2BAA2B;AACrE,mBAAiB,SAAS,MAAM,UAAU,2BAA2B;AACrE,mBAAiB,QAAQ,UAAU,2BAA2B;AAC9D,kBAAgB;GAChB;AAEF,QAAO,EACL,OAAO,SAAS,MAAM,EACvB"}

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

@@ -1,5 +1,5 @@
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
-import type { TableColumn, TableRowKey } from '../../../components/tables/RuiTableHead.vue.js';
+import type { TableColumn, TableRowKey } from '../../../components/tables/RuiTableHead.vue';
 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>;