@rotki/ui-library 2.21.0 → 2.22.0

package/dist/composables/forms/category-picker/use-category-picker.d.ts

@@ -0,0 +1,76 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { type KeyOfType } from '../../../composables/dropdown-menu.js';
+/**
+ * A resolved category and the items that belong to it.
+ */
+export interface CategoryGroup<TItem> {
+    category: string;
+    items: TItem[];
+}
+/**
+ * A single entry in the category rail. `category` is `null` for the synthetic
+ * "All" pseudo-category, which aggregates every currently visible item.
+ */
+export interface CategoryRailEntry {
+    category: string | null;
+    label: string;
+    count: number;
+}
+/**
+ * A row rendered in the detail pane. Item rows carry a running `index` used for
+ * `aria-activedescendant`; header rows are visual separators shown in the
+ * flattened "All" view and never receive focus.
+ */
+export type DetailRow<TItem> = {
+    type: 'header';
+    category: string;
+} | {
+    type: 'item';
+    item: TItem;
+    index: number;
+};
+export interface UseCategoryPickerOptions<TValue, TItem> {
+    /** The full catalogue of selectable items. */
+    items: MaybeRefOrGetter<TItem[]>;
+    /** Resolve an item's category label. */
+    categoryOf: (item: TItem) => string;
+    /** Property whose value becomes the model value. */
+    keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;
+    /** Property (or getter) that produces an item's display text. */
+    textAttr?: keyof TItem | ((item: TItem) => string);
+    /** The current search query. */
+    search: Ref<string>;
+    /** Whether the search query is applied. */
+    searchable: MaybeRefOrGetter<boolean>;
+    /** Custom predicate receiving the resolved category as the third argument. */
+    filter?: MaybeRefOrGetter<((item: TItem, query: string, category: string) => boolean) | undefined>;
+    /** Whether the synthetic "All" pseudo-category is offered. */
+    showAll: MaybeRefOrGetter<boolean>;
+    /** Label used for the "All" pseudo-category. */
+    allLabel: MaybeRefOrGetter<string>;
+    /** The picker's current selection. */
+    modelValue: Ref<TValue | undefined>;
+}
+export interface UseCategoryPickerReturn<TItem> {
+    getText: (item: TItem) => string | undefined;
+    getIdentifier: (item: TItem) => any;
+    filteredGroups: Ref<CategoryGroup<TItem>[]>;
+    railEntries: Ref<CategoryRailEntry[]>;
+    activeCategory: Readonly<Ref<string | null>>;
+    detailGroups: Ref<CategoryGroup<TItem>[]>;
+    detailRows: Ref<DetailRow<TItem>[]>;
+    detailItems: Ref<TItem[]>;
+    isEmpty: Ref<boolean>;
+    setActiveCategory: (category: string | null) => void;
+    syncActiveToSelection: () => void;
+    isSelected: (item: TItem) => boolean;
+    categoryOf: (item: TItem) => string;
+}
+/**
+ * Owns the grouping, filtering and selection state for `RuiCategoryPicker`.
+ *
+ * The component keeps DOM concerns (focus, keyboard, scrolling); this composable
+ * keeps the data: which categories exist, which survive the current search, and
+ * which items belong in the detail pane for the active category.
+ */
+export declare function useCategoryPicker<TValue, TItem>(options: UseCategoryPickerOptions<TValue, TItem>): UseCategoryPickerReturn<TItem>;

package/dist/composables/forms/category-picker/use-category-picker.js

@@ -0,0 +1,141 @@
+import { useDropdownOptionProperty } from "../../dropdown-menu.js";
+import { computed, readonly, shallowRef, toValue, watch } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/composables/forms/category-picker/use-category-picker.ts
+/**
+* Owns the grouping, filtering and selection state for `RuiCategoryPicker`.
+*
+* The component keeps DOM concerns (focus, keyboard, scrolling); this composable
+* keeps the data: which categories exist, which survive the current search, and
+* which items belong in the detail pane for the active category.
+*/
+function useCategoryPicker(options) {
+	const { allLabel, categoryOf, filter, items, keyAttr, modelValue, search, searchable, showAll, textAttr } = options;
+	const { getIdentifier, getText } = useDropdownOptionProperty({
+		keyAttr,
+		textAttr
+	});
+	function defaultFilter(item, query, category) {
+		const needle = query.toLowerCase();
+		return (getText(item) ?? "").toLowerCase().includes(needle) || category.toLowerCase().includes(needle);
+	}
+	const allGroups = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const item of toValue(items)) {
+			const category = categoryOf(item);
+			const bucket = map.get(category);
+			if (bucket) bucket.push(item);
+			else map.set(category, [item]);
+		}
+		return Array.from(map, ([category, groupItems]) => ({
+			category,
+			items: groupItems
+		}));
+	});
+	const query = computed(() => get(search).trim());
+	const filteredGroups = computed(() => {
+		const currentQuery = get(query);
+		if (!toValue(searchable) || !currentQuery) return get(allGroups);
+		const filterFn = toValue(filter) ?? defaultFilter;
+		return get(allGroups).map((group) => ({
+			category: group.category,
+			items: group.items.filter((item) => filterFn(item, currentQuery, group.category))
+		})).filter((group) => group.items.length > 0);
+	});
+	const railEntries = computed(() => {
+		const groups = get(filteredGroups);
+		const entries = [];
+		if (toValue(showAll)) {
+			const total = groups.reduce((sum, group) => sum + group.items.length, 0);
+			entries.push({
+				category: null,
+				count: total,
+				label: toValue(allLabel)
+			});
+		}
+		for (const group of groups) entries.push({
+			category: group.category,
+			count: group.items.length,
+			label: group.category
+		});
+		return entries;
+	});
+	const activeCategory = shallowRef(null);
+	function firstCategory() {
+		return get(filteredGroups)[0]?.category ?? null;
+	}
+	function fallbackCategory() {
+		return toValue(showAll) ? null : firstCategory();
+	}
+	function setActiveCategory(category) {
+		set(activeCategory, category);
+	}
+	watch(filteredGroups, (groups) => {
+		const active = get(activeCategory);
+		if (active === null) return;
+		if (!groups.some((group) => group.category === active)) set(activeCategory, fallbackCategory());
+	});
+	watch(query, (current, previous) => {
+		if (current && !previous && toValue(showAll)) set(activeCategory, null);
+	});
+	const detailGroups = computed(() => {
+		const groups = get(filteredGroups);
+		const active = get(activeCategory);
+		if (active === null) return groups;
+		const match = groups.find((group) => group.category === active);
+		return match ? [match] : [];
+	});
+	const detailItems = computed(() => get(detailGroups).flatMap((group) => group.items));
+	const detailRows = computed(() => {
+		const groups = get(detailGroups);
+		const flattened = get(activeCategory) === null && groups.length > 1;
+		const rows = [];
+		let index = 0;
+		for (const group of groups) {
+			if (flattened) rows.push({
+				type: "header",
+				category: group.category
+			});
+			for (const item of group.items) rows.push({
+				index: index++,
+				item,
+				type: "item"
+			});
+		}
+		return rows;
+	});
+	const isEmpty = computed(() => get(detailItems).length === 0);
+	function isSelected(item) {
+		const value = get(modelValue);
+		if (value === void 0) return false;
+		return getIdentifier(item) === value;
+	}
+	function syncActiveToSelection() {
+		const value = get(modelValue);
+		if (value === void 0) {
+			set(activeCategory, fallbackCategory());
+			return;
+		}
+		const selected = toValue(items).find((item) => getIdentifier(item) === value);
+		set(activeCategory, selected ? categoryOf(selected) : fallbackCategory());
+	}
+	return {
+		activeCategory: readonly(activeCategory),
+		categoryOf,
+		detailGroups,
+		detailItems,
+		detailRows,
+		filteredGroups,
+		getIdentifier,
+		getText,
+		isEmpty,
+		isSelected,
+		railEntries,
+		setActiveCategory,
+		syncActiveToSelection
+	};
+}
+//#endregion
+export { useCategoryPicker };
+
+//# sourceMappingURL=use-category-picker.js.map

package/dist/composables/forms/category-picker/use-category-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-category-picker.js","names":[],"sources":["../../../../src/composables/forms/category-picker/use-category-picker.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from 'vue';\nimport { type KeyOfType, useDropdownOptionProperty } from '@/composables/dropdown-menu';\n\n/**\n * A resolved category and the items that belong to it.\n */\nexport interface CategoryGroup<TItem> {\n  category: string;\n  items: TItem[];\n}\n\n/**\n * A single entry in the category rail. `category` is `null` for the synthetic\n * \"All\" pseudo-category, which aggregates every currently visible item.\n */\nexport interface CategoryRailEntry {\n  category: string | null;\n  label: string;\n  count: number;\n}\n\n/**\n * A row rendered in the detail pane. Item rows carry a running `index` used for\n * `aria-activedescendant`; header rows are visual separators shown in the\n * flattened \"All\" view and never receive focus.\n */\nexport type DetailRow<TItem>\n  = | { type: 'header'; category: string }\n    | { type: 'item'; item: TItem; index: number };\n\nexport interface UseCategoryPickerOptions<TValue, TItem> {\n  /** The full catalogue of selectable items. */\n  items: MaybeRefOrGetter<TItem[]>;\n  /** Resolve an item's category label. */\n  categoryOf: (item: TItem) => string;\n  /** Property whose value becomes the model value. */\n  keyAttr?: KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>;\n  /** Property (or getter) that produces an item's display text. */\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  /** The current search query. */\n  search: Ref<string>;\n  /** Whether the search query is applied. */\n  searchable: MaybeRefOrGetter<boolean>;\n  /** Custom predicate receiving the resolved category as the third argument. */\n  filter?: MaybeRefOrGetter<((item: TItem, query: string, category: string) => boolean) | undefined>;\n  /** Whether the synthetic \"All\" pseudo-category is offered. */\n  showAll: MaybeRefOrGetter<boolean>;\n  /** Label used for the \"All\" pseudo-category. */\n  allLabel: MaybeRefOrGetter<string>;\n  /** The picker's current selection. */\n  modelValue: Ref<TValue | undefined>;\n}\n\nexport interface UseCategoryPickerReturn<TItem> {\n  getText: (item: TItem) => string | undefined;\n  getIdentifier: (item: TItem) => any;\n  filteredGroups: Ref<CategoryGroup<TItem>[]>;\n  railEntries: Ref<CategoryRailEntry[]>;\n  activeCategory: Readonly<Ref<string | null>>;\n  detailGroups: Ref<CategoryGroup<TItem>[]>;\n  detailRows: Ref<DetailRow<TItem>[]>;\n  detailItems: Ref<TItem[]>;\n  isEmpty: Ref<boolean>;\n  setActiveCategory: (category: string | null) => void;\n  syncActiveToSelection: () => void;\n  isSelected: (item: TItem) => boolean;\n  categoryOf: (item: TItem) => string;\n}\n\n/**\n * Owns the grouping, filtering and selection state for `RuiCategoryPicker`.\n *\n * The component keeps DOM concerns (focus, keyboard, scrolling); this composable\n * keeps the data: which categories exist, which survive the current search, and\n * which items belong in the detail pane for the active category.\n */\nexport function useCategoryPicker<TValue, TItem>(\n  options: UseCategoryPickerOptions<TValue, TItem>,\n): UseCategoryPickerReturn<TItem> {\n  const { allLabel, categoryOf, filter, items, keyAttr, modelValue, search, searchable, showAll, textAttr } = options;\n\n  const { getIdentifier, getText } = useDropdownOptionProperty<TValue, TItem>({\n    keyAttr,\n    textAttr,\n  });\n\n  function defaultFilter(item: TItem, query: string, category: string): boolean {\n    const needle = query.toLowerCase();\n    const text = (getText(item) ?? '').toLowerCase();\n    return text.includes(needle) || category.toLowerCase().includes(needle);\n  }\n\n  // All items grouped by category, preserving first-seen category order.\n  const allGroups = computed<CategoryGroup<TItem>[]>(() => {\n    const map = new Map<string, TItem[]>();\n    for (const item of toValue(items)) {\n      const category = categoryOf(item);\n      const bucket = map.get(category);\n      if (bucket)\n        bucket.push(item);\n      else\n        map.set(category, [item]);\n    }\n    return Array.from(map, ([category, groupItems]) => ({ category, items: groupItems }));\n  });\n\n  const query = computed<string>(() => get(search).trim());\n\n  const filteredGroups = computed<CategoryGroup<TItem>[]>(() => {\n    const currentQuery = get(query);\n    if (!toValue(searchable) || !currentQuery)\n      return get(allGroups);\n\n    const filterFn = toValue(filter) ?? defaultFilter;\n    return get(allGroups)\n      .map(group => ({\n        category: group.category,\n        items: group.items.filter(item => filterFn(item, currentQuery, group.category)),\n      }))\n      .filter(group => group.items.length > 0);\n  });\n\n  const railEntries = computed<CategoryRailEntry[]>(() => {\n    const groups = get(filteredGroups);\n    const entries: CategoryRailEntry[] = [];\n\n    if (toValue(showAll)) {\n      const total = groups.reduce((sum, group) => sum + group.items.length, 0);\n      entries.push({ category: null, count: total, label: toValue(allLabel) });\n    }\n\n    for (const group of groups)\n      entries.push({ category: group.category, count: group.items.length, label: group.category });\n\n    return entries;\n  });\n\n  const activeCategory = shallowRef<string | null>(null);\n\n  function firstCategory(): string | null {\n    return get(filteredGroups)[0]?.category ?? null;\n  }\n\n  function fallbackCategory(): string | null {\n    return toValue(showAll) ? null : firstCategory();\n  }\n\n  function setActiveCategory(category: string | null): void {\n    set(activeCategory, category);\n  }\n\n  // Keep the active category valid as the search narrows the rail. If the\n  // active category disappears, fall back to \"All\" (when shown) or the first\n  // remaining category.\n  watch(filteredGroups, (groups) => {\n    const active = get(activeCategory);\n    if (active === null)\n      return;\n    if (!groups.some(group => group.category === active))\n      set(activeCategory, fallbackCategory());\n  });\n\n  // When the user starts typing, surface matches across every category so the\n  // top hit is global rather than scoped to whatever category was active.\n  watch(query, (current, previous) => {\n    if (current && !previous && toValue(showAll))\n      set(activeCategory, null);\n  });\n\n  const detailGroups = computed<CategoryGroup<TItem>[]>(() => {\n    const groups = get(filteredGroups);\n    const active = get(activeCategory);\n    if (active === null)\n      return groups;\n    const match = groups.find(group => group.category === active);\n    return match ? [match] : [];\n  });\n\n  const detailItems = computed<TItem[]>(() => get(detailGroups).flatMap(group => group.items));\n\n  const detailRows = computed<DetailRow<TItem>[]>(() => {\n    const groups = get(detailGroups);\n    const flattened = get(activeCategory) === null && groups.length > 1;\n    const rows: DetailRow<TItem>[] = [];\n    let index = 0;\n    for (const group of groups) {\n      if (flattened)\n        rows.push({ type: 'header', category: group.category });\n      for (const item of group.items)\n        rows.push({ index: index++, item, type: 'item' });\n    }\n    return rows;\n  });\n\n  const isEmpty = computed<boolean>(() => get(detailItems).length === 0);\n\n  function isSelected(item: TItem): boolean {\n    const value = get(modelValue);\n    if (value === undefined)\n      return false;\n    return getIdentifier(item) === value;\n  }\n\n  // Point the rail at the selected item's category so it is visible on open.\n  function syncActiveToSelection(): void {\n    const value = get(modelValue);\n    if (value === undefined) {\n      set(activeCategory, fallbackCategory());\n      return;\n    }\n    const selected = toValue(items).find(item => getIdentifier(item) === value);\n    set(activeCategory, selected ? categoryOf(selected) : fallbackCategory());\n  }\n\n  return {\n    activeCategory: readonly(activeCategory),\n    categoryOf,\n    detailGroups,\n    detailItems,\n    detailRows,\n    filteredGroups,\n    getIdentifier,\n    getText,\n    isEmpty,\n    isSelected,\n    railEntries,\n    setActiveCategory,\n    syncActiveToSelection,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/forms/use-prepend-append-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n  prependWidth: Ref<string>;\n  appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n  prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n  append: Readonly<ShallowRef<HTMLDivElement | null>>,\n  offset: number = 0,\n): PrependAppendWidth {\n  const prependWidth = shallowRef<string>('0px');\n  const appendWidth = shallowRef<string>('0px');\n\n  // Measure the element's outer (border-box) width so callers get the full\n  // space the prepend/append region occupies — including both left and\n  // right padding. The previous `contentRect.width + contentRect.left` form\n  // added padding-left but silently dropped padding-right, so a prepend\n  // slot styled with `pr-3` (only) reported 12px short of its real width\n  // and the floated label landed under the icon's trailing padding instead\n  // of aligned with the input text.\n  useResizeObserver(prepend, () => {\n    const target = get(prepend);\n    assert(target);\n    set(prependWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  useResizeObserver(append, () => {\n    const target = get(append);\n    assert(target);\n    set(appendWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  return { prependWidth, appendWidth };\n}\n"],"mappings":";;;;;AAQA,SAAgB,sBACd,SACA,QACA,SAAiB,GACG;CACpB,MAAM,eAAe,WAAmB,MAAM;CAC9C,MAAM,cAAc,WAAmB,MAAM;AAS7C,mBAAkB,eAAe;EAC/B,MAAM,SAAS,MAAI,QAAQ;AAC3B,SAAO,OAAO;AACd,QAAI,cAAc,GAAG,OAAO,cAAc,OAAO,IAAI;GACrD;AAEF,mBAAkB,cAAc;EAC9B,MAAM,SAAS,MAAI,OAAO;AAC1B,SAAO,OAAO;AACd,QAAI,aAAa,GAAG,OAAO,cAAc,OAAO,IAAI;GACpD;AAEF,QAAO;EAAE;EAAc;EAAa"}
+{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n  prependWidth: Ref<string>;\n  appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n  prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n  append: Readonly<ShallowRef<HTMLDivElement | null>>,\n  offset: number = 0,\n): PrependAppendWidth {\n  const prependWidth = shallowRef<string>('0px');\n  const appendWidth = shallowRef<string>('0px');\n\n  // Measure the element's outer (border-box) width so callers get the full\n  // space the prepend/append region occupies — including both left and\n  // right padding. The previous `contentRect.width + contentRect.left` form\n  // added padding-left but silently dropped padding-right, so a prepend\n  // slot styled with `pr-3` (only) reported 12px short of its real width\n  // and the floated label landed under the icon's trailing padding instead\n  // of aligned with the input text.\n  useResizeObserver(prepend, () => {\n    const target = get(prepend);\n    assert(target);\n    set(prependWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  useResizeObserver(append, () => {\n    const target = get(append);\n    assert(target);\n    set(appendWidth, `${target.offsetWidth + offset}px`);\n  });\n\n  return { prependWidth, appendWidth };\n}\n"],"mappings":";;;;;AAQA,SAAgB,sBACd,SACA,QACA,SAAiB,GACG;CACpB,MAAM,eAAe,WAAmB,KAAK;CAC7C,MAAM,cAAc,WAAmB,KAAK;CAS5C,kBAAkB,eAAe;EAC/B,MAAM,SAAS,MAAI,OAAO;EAC1B,OAAO,MAAM;EACb,MAAI,cAAc,GAAG,OAAO,cAAc,OAAO,GAAG;CACtD,CAAC;CAED,kBAAkB,cAAc;EAC9B,MAAM,SAAS,MAAI,MAAM;EACzB,OAAO,MAAM;EACb,MAAI,aAAa,GAAG,OAAO,cAAc,OAAO,GAAG;CACrD,CAAC;CAED,OAAO;EAAE;EAAc;CAAY;AACrC"}

package/dist/composables/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":[],"sources":["../../src/composables/icons.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport {\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuArrowUp,\n  LuCheck,\n  LuCheckboxBlank,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuChevronsUpDown,\n  LuChevronUp,\n  LuCircleAlert,\n  LuCircleCheck,\n  LuCircleX,\n  LuClock,\n  LuEllipsis,\n  LuEye,\n  LuEyeOff,\n  LuInfo,\n  LuRadioButtonFill,\n  LuTriangleAlert,\n  LuX,\n} from '@/icons';\nimport { assert } from '@/utils/assert';\n\nconst requiredIcons: GeneratedIcon[] = [\n  LuChevronsUpDown,\n  LuEllipsis,\n  LuTriangleAlert,\n  LuX,\n  LuInfo,\n  LuArrowUp,\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuChevronUp,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuCircleAlert,\n  LuEye,\n  LuEyeOff,\n  LuCheck,\n  LuCircleX,\n  LuCircleCheck,\n  LuCheckboxBlank,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuRadioButtonFill,\n  LuClock,\n];\n\nexport interface IconsOptions {\n  registeredIcons: GeneratedIcon[];\n}\n\nexport interface UseIconsReturn {\n  registeredIcons: Readonly<Record<string, [string, Record<string, string>][]>>;\n}\n\nexport const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');\n\nexport function createIconDefaults(options?: Partial<IconsOptions>): UseIconsReturn {\n  const iconsToAdd = options?.registeredIcons || [];\n  return {\n    registeredIcons: {\n      ...Object.fromEntries(\n        [\n          ...requiredIcons,\n          ...iconsToAdd,\n        ].map(({ components, name }) => [name, components]),\n      ),\n    },\n  };\n}\n\nexport function useIcons(): UseIconsReturn {\n  const icons = inject(IconsSymbol);\n  assert(icons, 'Could not find icons injection');\n  return icons;\n}\n"],"mappings":";;;;;;AAkCA,IAAM,gBAAiC;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAUD,IAAa,cAA4C,OAAO,IAAI,YAAY;AAEhF,SAAgB,mBAAmB,SAAiD;CAClF,MAAM,aAAa,SAAS,mBAAmB,EAAE;AACjD,QAAO,EACL,iBAAiB,EACf,GAAG,OAAO,YACR,CACE,GAAG,eACH,GAAG,WACJ,CAAC,KAAK,EAAE,YAAY,WAAW,CAAC,MAAM,WAAW,CAAC,CACpD,EACF,EACF;;AAGH,SAAgB,WAA2B;CACzC,MAAM,QAAQ,OAAO,YAAY;AACjC,QAAO,OAAO,iCAAiC;AAC/C,QAAO"}
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/composables/icons.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport {\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuArrowUp,\n  LuCheck,\n  LuCheckboxBlank,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuChevronsUpDown,\n  LuChevronUp,\n  LuCircleAlert,\n  LuCircleCheck,\n  LuCircleX,\n  LuClock,\n  LuEllipsis,\n  LuEye,\n  LuEyeOff,\n  LuInfo,\n  LuRadioButtonFill,\n  LuTriangleAlert,\n  LuX,\n} from '@/icons';\nimport { assert } from '@/utils/assert';\n\nconst requiredIcons: GeneratedIcon[] = [\n  LuChevronsUpDown,\n  LuEllipsis,\n  LuTriangleAlert,\n  LuX,\n  LuInfo,\n  LuArrowUp,\n  LuArrowDown,\n  LuArrowLeft,\n  LuArrowRight,\n  LuChevronUp,\n  LuChevronDown,\n  LuChevronLeft,\n  LuChevronRight,\n  LuChevronsLeft,\n  LuChevronsRight,\n  LuCircleAlert,\n  LuEye,\n  LuEyeOff,\n  LuCheck,\n  LuCircleX,\n  LuCircleCheck,\n  LuCheckboxBlank,\n  LuCheckboxFill,\n  LuCheckboxIndeterminateFill,\n  LuCheckboxBlankCircle,\n  LuCheckboxBlankCircleFill,\n  LuRadioButtonFill,\n  LuClock,\n];\n\nexport interface IconsOptions {\n  registeredIcons: GeneratedIcon[];\n}\n\nexport interface UseIconsReturn {\n  registeredIcons: Readonly<Record<string, [string, Record<string, string>][]>>;\n}\n\nexport const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');\n\nexport function createIconDefaults(options?: Partial<IconsOptions>): UseIconsReturn {\n  const iconsToAdd = options?.registeredIcons || [];\n  return {\n    registeredIcons: {\n      ...Object.fromEntries(\n        [\n          ...requiredIcons,\n          ...iconsToAdd,\n        ].map(({ components, name }) => [name, components]),\n      ),\n    },\n  };\n}\n\nexport function useIcons(): UseIconsReturn {\n  const icons = inject(IconsSymbol);\n  assert(icons, 'Could not find icons injection');\n  return icons;\n}\n"],"mappings":";;;;;;AAkCA,IAAM,gBAAiC;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAUA,IAAa,cAA4C,OAAO,IAAI,WAAW;AAE/E,SAAgB,mBAAmB,SAAiD;CAClF,MAAM,aAAa,SAAS,mBAAmB,CAAC;CAChD,OAAO,EACL,iBAAiB,EACf,GAAG,OAAO,YACR,CACE,GAAG,eACH,GAAG,UACL,CAAC,CAAC,KAAK,EAAE,YAAY,WAAW,CAAC,MAAM,UAAU,CAAC,CACpD,EACF,EACF;AACF;AAEA,SAAgB,WAA2B;CACzC,MAAM,QAAQ,OAAO,WAAW;CAChC,OAAO,OAAO,gCAAgC;CAC9C,OAAO;AACT"}

package/dist/composables/popper.js.map

@@ -1 +1 @@
-{"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"}
+{"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;CACtE,OAAO;EACL,YAAY;GACV,QAAQ,KAAK,UAAU;GACvB,QAAQ,KAAK,UAAU;EACzB;EACA,MAAM,EAAE,KAAK,UAAU;EACvB,QAAQ;GACN,WAAW,KAAK,cAAc;GAC9B,UAAU,KAAK,kBAAkB;EACnC;EACA,WAAW,KAAK,aAAa,UAAU;EACvC,cAAc,KAAK,mBAAmB;EACtC,UAAU,KAAK,YAAY,SAAS;CACtC;AACF"}

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

@@ -1 +1 @@
-{"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":"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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":"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"}

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

@@ -15,11 +15,17 @@ export interface UseTableColumnsOptions<T extends object, IdType extends keyof T
     selectedData: Ref<T[IdType][] | undefined>;
     /** Template slots provided to the table component. */
     slots: Record<string, any>;
+    /** Pre-computes td class per column to avoid per-cell tv() calls. */
+    tdResolver?: (options: {
+        class?: string;
+    }) => string;
+    /** Whether the table is currently rendered in its stacked mobile layout. */
+    isMobile?: MaybeRefOrGetter<boolean>;
 }
 export interface UseTableColumnsReturn<T extends object> {
     columns: ComputedRef<TableColumn<T>[]>;
     colspan: ComputedRef<number>;
-    headerSlots: ComputedRef<`header.${string}`[]>;
+    headerSlots: `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

@@ -1,35 +1,43 @@
-import { isHeaderSlot } from "./types.js";
+import { TableAlign, getAlignClass } from "../../../components/tables/table-props.js";
+import { getObjectKeys, isHeaderSlot } from "./types.js";
 import { computed, toValue } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/composables/tables/data-table/columns.ts
 function useTableColumns(options) {
-	const { cols, columnAttr, expandable, groupKeys, rows, selectedData, slots } = options;
-	const getKeys = (t) => Object.keys(t);
+	const { cols, columnAttr, expandable, groupKeys, isMobile, rows, selectedData, slots, tdResolver } = options;
+	function attachTdClass(columnList) {
+		if (!tdResolver) return columnList;
+		return columnList.map((col) => ({
+			...col,
+			tdClass: tdResolver({ class: getAlignClass(col.align) })
+		}));
+	}
 	const columns = computed(() => {
 		const currentCols = toValue(cols);
 		const currentRows = toValue(rows);
-		const data = currentCols ?? getKeys(currentRows[0] ?? {}).map((key) => ({
+		const allColumns = currentCols ?? getObjectKeys(currentRows[0] ?? {}).map((key) => ({
 			key,
 			[columnAttr]: String(key)
 		}));
+		const data = toValue(isMobile) ? allColumns.filter((column) => !column.mobileHidden) : allColumns;
 		const hasExpandColumn = data.some((row) => row.key === "expand");
-		if (get(expandable) && !hasExpandColumn) return [...data, {
+		if (get(expandable) && !hasExpandColumn) return attachTdClass([...data, {
 			key: "expand",
 			sortable: false,
 			class: "w-16",
 			cellClass: "!py-0 w-16",
-			align: "end"
-		}];
+			align: TableAlign.end
+		}]);
 		const groupByKeys = get(groupKeys);
-		if (groupByKeys.length === 0) return data;
-		return data.filter((column) => !groupByKeys.includes(column.key));
+		if (groupByKeys.length === 0) return attachTdClass(data);
+		return attachTdClass(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));
+	const headerSlots = Object.keys(slots).filter(isHeaderSlot);
 	function cellValue(row, key) {
 		return row[key];
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"columns.js","names":[],"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"],"mappings":";;;;AAgCA,SAAgB,gBACd,SAC0B;CAC1B,MAAM,EAAE,MAAM,YAAY,YAAY,WAAW,MAAM,cAAc,UAAU;CAE/E,MAAM,WAA6B,MAA2B,OAAO,KAAK,EAAE;CAE5E,MAAM,UAAU,eAAiC;EAC/C,MAAM,cAAc,QAAQ,KAAK;EACjC,MAAM,cAAc,QAAQ,KAAK;EACjC,MAAM,OACJ,eACA,QAAQ,YAAY,MAAM,EAAE,CAAC,CAAC,KAC5B,SACG;GACC;IACC,aAAa,OAAO,IAAA;GACtB,EACJ;EAEH,MAAM,kBAAkB,KAAK,MAAK,QAAO,IAAI,QAAQ,SAAS;AAE9D,MAAI,IAAI,WAAW,IAAI,CAAC,gBACtB,QAAO,CACL,GAAG,MACH;GACE,KAAK;GACL,UAAU;GACV,OAAO;GACP,WAAW;GACX,OAAO;GACR,CACF;EAGH,MAAM,cAAc,IAAI,UAAU;AAElC,MAAI,YAAY,WAAW,EACzB,QAAO;AAET,SAAO,KAAK,QAAO,WAAU,CAAC,YAAY,SAAS,OAAO,IAAsB,CAAC;GACjF;CAEF,MAAM,UAAU,eAAuB;EACrC,IAAI,eAAe,IAAI,QAAQ,CAAC;AAChC,MAAI,IAAI,aAAa,CACnB;AAEF,SAAO;GACP;CAEF,MAAM,cAAc,eAAqC,OAAO,KAAK,MAAM,CAAC,OAAO,aAAa,CAAC;CAEjG,SAAS,UAAU,KAAQ,KAA+C;AACxE,SAAO,IAAI;;AAGb,QAAO;EACL;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"columns.js","names":[],"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 { getAlignClass, TableAlign } from '@/components/tables/table-props';\nimport { getObjectKeys, 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  /** Pre-computes td class per column to avoid per-cell tv() calls. */\n  tdResolver?: (options: { class?: string }) => string;\n  /** Whether the table is currently rendered in its stacked mobile layout. */\n  isMobile?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseTableColumnsReturn<T extends object> {\n  columns: ComputedRef<TableColumn<T>[]>;\n  colspan: ComputedRef<number>;\n  headerSlots: `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, isMobile, rows, selectedData, slots, tdResolver } = options;\n\n  function attachTdClass(columnList: TableColumn<T>[]): TableColumn<T>[] {\n    if (!tdResolver)\n      return columnList;\n\n    return columnList.map(col => ({\n      ...col,\n      tdClass: tdResolver({ class: getAlignClass(col.align) }),\n    }));\n  }\n\n  const columns = computed<TableColumn<T>[]>(() => {\n    const currentCols = toValue(cols);\n    const currentRows = toValue(rows);\n    const allColumns =\n      currentCols ??\n      getObjectKeys(currentRows[0] ?? {}).map(\n        key =>\n          ({\n            key,\n            [columnAttr]: String(key),\n          }) satisfies NoneSortableTableColumn<T>,\n      );\n\n    const data = toValue(isMobile)\n      ? allColumns.filter(column => !column.mobileHidden)\n      : allColumns;\n\n    const hasExpandColumn = data.some(row => row.key === 'expand');\n\n    if (get(expandable) && !hasExpandColumn) {\n      return attachTdClass([\n        ...data,\n        {\n          key: 'expand' as TableRowKey<T>,\n          sortable: false,\n          class: 'w-16',\n          cellClass: '!py-0 w-16',\n          align: TableAlign.end,\n        } satisfies NoneSortableTableColumn<T>,\n      ]);\n    }\n\n    const groupByKeys = get(groupKeys);\n\n    if (groupByKeys.length === 0)\n      return attachTdClass(data);\n\n    return attachTdClass(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  // Slot keys are static for the component lifetime — no reactivity needed\n  const headerSlots: `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"],"mappings":";;;;;AAqCA,SAAgB,gBACd,SAC0B;CAC1B,MAAM,EAAE,MAAM,YAAY,YAAY,WAAW,UAAU,MAAM,cAAc,OAAO,eAAe;CAErG,SAAS,cAAc,YAAgD;EACrE,IAAI,CAAC,YACH,OAAO;EAET,OAAO,WAAW,KAAI,SAAQ;GAC5B,GAAG;GACH,SAAS,WAAW,EAAE,OAAO,cAAc,IAAI,KAAK,EAAE,CAAC;EACzD,EAAE;CACJ;CAEA,MAAM,UAAU,eAAiC;EAC/C,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,cAAc,QAAQ,IAAI;EAChC,MAAM,aACJ,eACA,cAAc,YAAY,MAAM,CAAC,CAAC,CAAC,CAAC,KAClC,SACG;GACC;IACC,aAAa,OAAO,GAAG;EAC1B,EACJ;EAEF,MAAM,OAAO,QAAQ,QAAQ,IACzB,WAAW,QAAO,WAAU,CAAC,OAAO,YAAY,IAChD;EAEJ,MAAM,kBAAkB,KAAK,MAAK,QAAO,IAAI,QAAQ,QAAQ;EAE7D,IAAI,IAAI,UAAU,KAAK,CAAC,iBACtB,OAAO,cAAc,CACnB,GAAG,MACH;GACE,KAAK;GACL,UAAU;GACV,OAAO;GACP,WAAW;GACX,OAAO,WAAW;EACpB,CACF,CAAC;EAGH,MAAM,cAAc,IAAI,SAAS;EAEjC,IAAI,YAAY,WAAW,GACzB,OAAO,cAAc,IAAI;EAE3B,OAAO,cAAc,KAAK,QAAO,WAAU,CAAC,YAAY,SAAS,OAAO,GAAqB,CAAC,CAAC;CACjG,CAAC;CAED,MAAM,UAAU,eAAuB;EACrC,IAAI,eAAe,IAAI,OAAO,CAAC,CAAC;EAChC,IAAI,IAAI,YAAY,GAClB;EAEF,OAAO;CACT,CAAC;CAGD,MAAM,cAAoC,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,YAAY;CAEhF,SAAS,UAAU,KAAQ,KAA+C;EACxE,OAAO,IAAI;CACb;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"expansion.js","names":[],"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}\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 } = deps;\n\n  // `expandable` only tracks whether the consumer has wired a two-way\n  // `expanded` model. Whether an `#expanded-item` slot is present is\n  // checked fresh in the template (`!!$slots['expanded-item']`) so that\n  // consumers which gate the slot with `v-if` (e.g. only after data\n  // loads) don't get stuck on the first-render slot snapshot — Vue's\n  // `slots` object is not reactive to property access inside a computed.\n  const expandable = computed<boolean>(() => !!get(expanded));\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"],"mappings":";;;AAmBA,SAAgB,kBACd,SACA,MACoC;CACpC,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,EAAE,aAAa;CAQrB,MAAM,aAAa,eAAwB,CAAC,CAAC,IAAI,SAAS,CAAC;CAE3D,MAAM,cAAc,eAA+B;EACjD,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,aAAa,OAChB,wBAAO,IAAI,KAAgB;AAC7B,SAAO,IAAI,IAAe,YAAY,KAAI,QAAO,IAAI,SAAS,CAAC;GAC/D;CAEF,SAAS,WAAW,YAAgC;AAClD,SAAO,IAAI,YAAY,CAAC,IAAI,WAAW;;CAGzC,SAAS,eAAe,KAAc;EACpC,MAAM,cAAc,IAAI,SAAS;AACjC,MAAI,CAAC,YACH;EAEF,MAAM,MAAM;EACZ,MAAM,cAAc,WAAW,IAAI,KAAK;AAExC,MAAI,aACF,QAAO,IAAI,UAAU,cAAc,EAAE,GAAG,CAAC,IAAI,CAAC;AAEhD,SAAO,IACL,UACA,cAAc,YAAY,QAAO,SAAQ,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC,GAAG,aAAa,IAAI,CACzF;;AAGH,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"expansion.js","names":[],"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}\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 } = deps;\n\n  // `expandable` only tracks whether the consumer has wired a two-way\n  // `expanded` model. Whether an `#expanded-item` slot is present is\n  // checked fresh in the template (`!!$slots['expanded-item']`) so that\n  // consumers which gate the slot with `v-if` (e.g. only after data\n  // loads) don't get stuck on the first-render slot snapshot — Vue's\n  // `slots` object is not reactive to property access inside a computed.\n  const expandable = computed<boolean>(() => !!get(expanded));\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"],"mappings":";;;AAmBA,SAAgB,kBACd,SACA,MACoC;CACpC,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,EAAE,aAAa;CAQrB,MAAM,aAAa,eAAwB,CAAC,CAAC,IAAI,QAAQ,CAAC;CAE1D,MAAM,cAAc,eAA+B;EACjD,MAAM,cAAc,IAAI,QAAQ;EAChC,IAAI,CAAC,aAAa,QAChB,uBAAO,IAAI,IAAe;EAC5B,OAAO,IAAI,IAAe,YAAY,KAAI,QAAO,IAAI,QAAQ,CAAC;CAChE,CAAC;CAED,SAAS,WAAW,YAAgC;EAClD,OAAO,IAAI,WAAW,CAAC,CAAC,IAAI,UAAU;CACxC;CAEA,SAAS,eAAe,KAAc;EACpC,MAAM,cAAc,IAAI,QAAQ;EAChC,IAAI,CAAC,aACH;EAEF,MAAM,MAAM;EACZ,MAAM,cAAc,WAAW,IAAI,IAAI;EAEvC,IAAI,cACF,OAAO,IAAI,UAAU,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;EAE/C,OAAO,IACL,UACA,cAAc,YAAY,QAAO,SAAQ,KAAK,SAAS,IAAI,IAAI,IAAI,CAAC,GAAG,aAAa,GAAG,CACzF;CACF;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF"}

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

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { GroupData, TableRowKey, TableRowKeyData } from '../../../components/tables/RuiTableHead.vue';
+import type { TableRowKey, TableRowKeyData } from '../../../components/tables/RuiTableHead.vue';
 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. */
@@ -8,15 +8,14 @@ export interface UseTableGroupingOptions<T extends object, IdType extends keyof
 export interface UseTableGroupingDeps<T extends object> {
     group: Ref<TableRowKeyData<T>>;
     collapsed: Ref<T[] | undefined>;
-    sorted: ComputedRef<T[]>;
-    emitCopyGroup: (value: GroupData<T>) => void;
+    sorted: ComputedRef<readonly T[]>;
 }
 export interface UseTableGroupingReturn<T extends object> {
     groupKeys: ComputedRef<TableRowKey<T>[]>;
-    groupKey: ComputedRef<string>;
+    groupKey: ComputedRef<string | undefined>;
     isGrouped: ComputedRef<boolean>;
     mappedGroups: ComputedRef<Record<string, GroupedTableRow<T>[]>>;
-    grouped: ComputedRef<GroupedTableRow<T>[]>;
+    grouped: ComputedRef<readonly GroupedTableRow<T>[]>;
     getRowGroup: (row: T) => Partial<T>;
     getGroupRows: (groupVal: string) => T[];
     compareGroupsFn: (a: T, b: Partial<T>) => boolean;
@@ -24,6 +23,5 @@ export interface UseTableGroupingReturn<T extends object> {
     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

@@ -1,5 +1,5 @@
 import { assert } from "../../../utils/assert.js";
-import { isRow } from "./types.js";
+import { GROUP_HEADER_BRAND, isRow } from "./types.js";
 import { computed, ref, watch } from "vue";
 import { isDefined } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
@@ -7,7 +7,7 @@ import { get as get$1, set as set$1 } from "@vueuse/shared";
 var GROUP_KEY_SEPARATOR = "\0";
 function useTableGrouping(options, deps) {
 	const { rowAttr } = options;
-	const { group, collapsed, sorted, emitCopyGroup } = deps;
+	const { group, collapsed, sorted } = deps;
 	const collapsedRows = ref([]);
 	watch(collapsed, (value) => set$1(collapsedRows, value ?? []), { immediate: true });
 	const groupKeys = computed(() => {
@@ -16,17 +16,16 @@ function useTableGrouping(options, deps) {
 		if (!Array.isArray(groupBy)) return [groupBy];
 		return groupBy;
 	});
-	const groupKey = computed(() => get$1(groupKeys).join(":"));
-	const isGrouped = computed(() => !!get$1(groupKey));
+	const groupKey = computed(() => {
+		return get$1(groupKeys).join(":") || void 0;
+	});
+	const isGrouped = computed(() => get$1(groupKey) !== void 0);
 	const collapsedIdentifierSet = computed(() => new Set(get$1(collapsedRows).map((row) => row[rowAttr])));
 	const collapsedGroupKeySet = computed(() => {
 		const grouping = get$1(groupKeys);
 		if (grouping.length === 0) return /* @__PURE__ */ new Set();
 		const seen = /* @__PURE__ */ new Set();
-		for (const row of get$1(collapsedRows)) {
-			const groupVal = grouping.map((key) => row[key]).filter(isDefined).join(GROUP_KEY_SEPARATOR);
-			seen.add(groupVal);
-		}
+		for (const row of get$1(collapsedRows)) seen.add(computeGroupKey(row, grouping));
 		return seen;
 	});
 	function getRowGroup(row) {
@@ -40,7 +39,13 @@ function useTableGrouping(options, deps) {
 		return grouping.every((key) => a[key] === b[key]);
 	}
 	function isExpandedGroup(value) {
-		const groupVal = Object.values(value).filter(isDefined).join(GROUP_KEY_SEPARATOR);
+		const grouping = get$1(groupKeys);
+		let groupVal = "";
+		for (const gk of grouping) {
+			if (groupVal) groupVal += GROUP_KEY_SEPARATOR;
+			const val = value[gk];
+			groupVal += isDefined(val) ? val : "";
+		}
 		return !get$1(collapsedGroupKeySet).has(groupVal);
 	}
 	function isHiddenRow(row) {
@@ -48,27 +53,40 @@ function useTableGrouping(options, deps) {
 		if (!isRow(row)) return false;
 		return get$1(collapsedIdentifierSet).has(row[rowAttr]);
 	}
+	function computeGroupKey(row, grouping) {
+		let key = "";
+		for (const gk of grouping) {
+			if (key) key += GROUP_KEY_SEPARATOR;
+			const val = row[gk];
+			key += isDefined(val) ? val : "";
+		}
+		return key;
+	}
 	const mappedGroups = computed(() => {
-		if (!get$1(isGrouped)) return {};
+		const grouping = get$1(groupKeys);
+		if (grouping.length === 0) return {};
 		const result = get$1(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);
+		const acc = {};
+		for (const row of result) {
+			if (!isDefined(row[identifier]) || row[identifier] === "") continue;
+			const groupVal = computeGroupKey(row, grouping);
 			if (!acc[groupVal]) acc[groupVal] = [{
-				__header__: true,
-				group: rowGroup,
+				[GROUP_HEADER_BRAND]: true,
+				group: getRowGroup(row),
 				identifier: groupVal
 			}];
 			acc[groupVal].push(row);
-			return acc;
-		}, {});
+		}
+		return acc;
 	});
 	const grouped = computed(() => {
 		const result = get$1(sorted);
 		if (!get$1(groupKey)) return result;
-		return Object.values(get$1(mappedGroups)).flat();
+		const groups = get$1(mappedGroups);
+		const out = [];
+		for (const items of Object.values(groups)) for (const item of items) out.push(item);
+		return out;
 	});
 	function getGroupRows(groupVal) {
 		if (!get$1(isGrouped)) return [];
@@ -89,9 +107,6 @@ function useTableGrouping(options, deps) {
 		set$1(collapsed, []);
 		set$1(group, Array.isArray(get$1(group)) ? [] : void 0);
 	}
-	function onCopyGroup(value) {
-		emitCopyGroup(value);
-	}
 	return {
 		groupKeys,
 		groupKey,
@@ -104,8 +119,7 @@ function useTableGrouping(options, deps) {
 		isExpandedGroup,
 		isHiddenRow,
 		onToggleExpandGroup,
-		onUngroup,
-		onCopyGroup
+		onUngroup
 	};
 }
 //#endregion