@rotki/ui-library 2.25.0 → 2.26.0

package/dist/components/tables/data-table/RuiDataTableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableExpandedRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableExpandedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\ndefineProps<{\n  row: T;\n  index: number;\n}>();\n\ndefineSlots<{\n  'expanded-item': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the expanded content attaches beneath its card: matching side\n * borders and a rounded, bordered bottom edge. It carries no top border, since\n * the parent card's flattened bottom edge is the divider, and `!border-b`\n * defeats the `divide-y-0` on the mobile tbody.\n */\nconst mobileExpandedClass = 'block border-x !border-b border-black/[0.12] dark:border-white/[0.12] rounded-b-lg mb-3 overflow-hidden';\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trExpandable, isMobile ? mobileExpandedClass : '']\"\n    data-id=\"row-expanded\"\n  >\n    <td\n      :colspan=\"colspan\"\n      :class=\"classes.td\"\n    >\n      <slot\n        name=\"expanded-item\"\n        :row=\"row\"\n        :index=\"index\"\n      />\n    </td>\n  </tr>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableExpandedRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableExpandedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\ndefineProps<{\n  row: T;\n  index: number;\n}>();\n\ndefineSlots<{\n  'expanded-item': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the expanded content attaches beneath its card: matching side\n * borders and a rounded, bordered bottom edge. It carries no top border, since\n * the parent card's flattened bottom edge is the divider, and `!border-b`\n * defeats the `divide-y-0` on the mobile tbody.\n */\nconst mobileExpandedClass = 'block border-x !border-b border-black/[0.12] dark:border-white/[0.12] rounded-b-lg mb-3 overflow-hidden';\n\n/**\n * Caps the panel to the table's visible width, less the cell's 16px sides, and\n * pins it to the left edge while the table scrolls sideways. Wider content,\n * such as a nested table, scrolls inside its own scroller. Where the table\n * resets `--rui-table-viewport` the calc is invalid and the width stays auto.\n */\nconst panelStyle = { width: 'calc(var(--rui-table-viewport) - 2rem)' };\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trExpandable, isMobile ? mobileExpandedClass : '']\"\n    data-id=\"row-expanded\"\n  >\n    <td\n      :colspan=\"colspan\"\n      :class=\"classes.td\"\n    >\n      <div\n        :class=\"{ 'sticky left-4': !isMobile }\"\n        :style=\"panelStyle\"\n        data-id=\"expanded-panel\"\n      >\n        <slot\n          name=\"expanded-item\"\n          :row=\"row\"\n          :index=\"index\"\n        />\n      </div>\n    </td>\n  </tr>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,12 @@ import { createElementBlock, createElementVNode, defineComponent, normalizeClass
 //#region src/components/tables/data-table/RuiDataTableExpandedRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["colspan"];
 var mobileExpandedClass = "block border-x !border-b border-black/[0.12] dark:border-white/[0.12] rounded-b-lg mb-3 overflow-hidden";
+/**
+* Caps the panel to the table's visible width, less the cell's 16px sides, and
+* pins it to the left edge while the table scrolls sideways. Wider content,
+* such as a nested table, scrolls inside its own scroller. Where the table
+* resets `--rui-table-viewport` the calc is invalid and the width stays auto.
+*/
 var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableExpandedRow",
 	props: {
@@ -17,6 +23,7 @@ var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__P
 		* the parent card's flattened bottom edge is the divider, and `!border-b`
 		* defeats the `divide-y-0` on the mobile tbody.
 		*/
+		const panelStyle = { width: "calc(var(--rui-table-viewport) - 2rem)" };
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("tr", {
 				class: normalizeClass([unref(classes).trExpandable, unref(isMobile) ? mobileExpandedClass : ""]),
@@ -24,10 +31,14 @@ var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__P
 			}, [createElementVNode("td", {
 				colspan: unref(colspan),
 				class: normalizeClass(unref(classes).td)
+			}, [createElementVNode("div", {
+				class: normalizeClass({ "sticky left-4": !unref(isMobile) }),
+				style: panelStyle,
+				"data-id": "expanded-panel"
 			}, [renderSlot(_ctx.$slots, "expanded-item", {
 				row: __props.row,
 				index: __props.index
-			})], 10, _hoisted_1)], 2);
+			})], 2)], 10, _hoisted_1)], 2);
 		};
 	}
 });

package/dist/components/tables/data-table/RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableExpandedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\ndefineProps<{\n  row: T;\n  index: number;\n}>();\n\ndefineSlots<{\n  'expanded-item': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the expanded content attaches beneath its card: matching side\n * borders and a rounded, bordered bottom edge. It carries no top border, since\n * the parent card's flattened bottom edge is the divider, and `!border-b`\n * defeats the `divide-y-0` on the mobile tbody.\n */\nconst mobileExpandedClass = 'block border-x !border-b border-black/[0.12] dark:border-white/[0.12] rounded-b-lg mb-3 overflow-hidden';\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trExpandable, isMobile ? mobileExpandedClass : '']\"\n    data-id=\"row-expanded\"\n  >\n    <td\n      :colspan=\"colspan\"\n      :class=\"classes.td\"\n    >\n      <slot\n        name=\"expanded-item\"\n        :row=\"row\"\n        :index=\"index\"\n      />\n    </td>\n  </tr>\n</template>\n"],"mappings":";;;;AAoBA,IAAM,sBAAsB;;;;;;;;EAR5B,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;;;;;;;;GAYzD,OAAA,UAAA,GAAA,mBAcK,MAAA;IAbF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,cAAc,MAAA,QAAA,IAAW,sBAAmB,EAAA,CAAA;IAC7D,WAAQ;GAER,GAAA,CAAA,mBASK,MAAA;IARF,SAAS,MAAA,OAAA;IACT,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;GAElB,GAAA,CAAA,WAIE,KAAA,QAAA,iBAAA;IAFC,KAAK,QAAA;IACL,OAAO,QAAA"}
+{"version":3,"file":"RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableExpandedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\ndefineProps<{\n  row: T;\n  index: number;\n}>();\n\ndefineSlots<{\n  'expanded-item': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the expanded content attaches beneath its card: matching side\n * borders and a rounded, bordered bottom edge. It carries no top border, since\n * the parent card's flattened bottom edge is the divider, and `!border-b`\n * defeats the `divide-y-0` on the mobile tbody.\n */\nconst mobileExpandedClass = 'block border-x !border-b border-black/[0.12] dark:border-white/[0.12] rounded-b-lg mb-3 overflow-hidden';\n\n/**\n * Caps the panel to the table's visible width, less the cell's 16px sides, and\n * pins it to the left edge while the table scrolls sideways. Wider content,\n * such as a nested table, scrolls inside its own scroller. Where the table\n * resets `--rui-table-viewport` the calc is invalid and the width stays auto.\n */\nconst panelStyle = { width: 'calc(var(--rui-table-viewport) - 2rem)' };\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trExpandable, isMobile ? mobileExpandedClass : '']\"\n    data-id=\"row-expanded\"\n  >\n    <td\n      :colspan=\"colspan\"\n      :class=\"classes.td\"\n    >\n      <div\n        :class=\"{ 'sticky left-4': !isMobile }\"\n        :style=\"panelStyle\"\n        data-id=\"expanded-panel\"\n      >\n        <slot\n          name=\"expanded-item\"\n          :row=\"row\"\n          :index=\"index\"\n        />\n      </div>\n    </td>\n  </tr>\n</template>\n"],"mappings":";;;;AAoBA,IAAM,sBAAsB;;;;;;;;;;;;;;EAR5B,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;;;;;;;EAgB3D,MAAM,aAAa,EAAE,OAAO,yCAAyC;;GAInE,OAAA,UAAA,GAAA,mBAoBK,MAAA;IAnBF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,cAAc,MAAA,QAAA,IAAW,sBAAmB,EAAA,CAAA;IAC7D,WAAQ;GAER,GAAA,CAAA,mBAeK,MAAA;IAdF,SAAS,MAAA,OAAA;IACT,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;GAElB,GAAA,CAAA,mBAUM,OAAA;IATH,OAAK,eAAA,EAAA,iBAAA,CAAsB,MAAA,QAAA,EAAQ,CAAA;IACnC,OAAO;IACR,WAAQ;GAER,GAAA,CAAA,WAIE,KAAA,QAAA,iBAAA;IAFC,KAAK,QAAA;IACL,OAAO,QAAA"}

package/dist/components/tables/data-table/RuiDataTableGroupRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableGroupRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableGroupRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\nimport { useDataTableGrouping, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\n\nconst { row } = defineProps<{\n  row: GroupHeader<T>;\n}>();\n\ndefineSlots<{\n  'group.header'?: (props: {\n    colspan: number;\n    header: GroupHeader<T>;\n    isOpen: boolean;\n    toggle: () => void;\n  }) => any;\n  'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the group header reads as a rounded section label, separated from\n * the previous group's cards above and its own below, aligned to the card\n * content padding.\n */\nconst mobileGroupClass = 'mt-6 first:mt-0 mb-2 rounded-lg';\nconst {\n  groupExpandButtonPosition,\n  groupKey,\n  isExpandedGroup,\n  onCopyGroup,\n  onToggleExpandGroup,\n  onUngroup,\n} = useDataTableGrouping<T>();\n\nconst isOpen = computed<boolean>(() => isExpandedGroup(row.group));\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trGroup, isMobile ? mobileGroupClass : '']\"\n    data-id=\"row-group\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      name=\"group.header\"\n      :colspan=\"colspan\"\n      :header=\"row\"\n      :is-open=\"isOpen\"\n      :toggle=\"() => onToggleExpandGroup(row.group, row.identifier)\"\n    >\n      <td\n        :class=\"[classes.td, isMobile ? '!px-4 !py-2' : '!p-2']\"\n        :colspan=\"colspan\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.start\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :group-key=\"groupKey ?? ''\"\n            name=\"group.header.content\"\n            :header=\"row\"\n          >\n            <span>{{ groupKey }}: {{ row.identifier }}</span>\n            <RuiButton\n              size=\"sm\"\n              variant=\"text\"\n              icon\n              data-id=\"group-copy-button\"\n              @click=\"onCopyGroup(row)\"\n            >\n              <RuiIcon\n                name=\"lu-copy\"\n                size=\"16\"\n              />\n            </RuiButton>\n          </slot>\n          <RuiTooltip\n            :options=\"{ placement: 'top' }\"\n            class=\"ml-auto mr-2\"\n          >\n            <template #activator>\n              <RuiButton\n                size=\"sm\"\n                variant=\"text\"\n                icon\n                data-id=\"group-ungroup-button\"\n                @click=\"onUngroup()\"\n              >\n                <RuiIcon\n                  name=\"lu-trash-2\"\n                  size=\"14\"\n                />\n              </RuiButton>\n            </template>\n            Ungroup\n          </RuiTooltip>\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.end\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n        </div>\n      </td>\n    </slot>\n  </tr>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableGroupRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableGroupRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\nimport { useDataTableGrouping, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\n\nconst { row } = defineProps<{\n  row: GroupHeader<T>;\n}>();\n\ndefineSlots<{\n  'group.header'?: (props: {\n    colspan: number;\n    header: GroupHeader<T>;\n    isOpen: boolean;\n    toggle: () => void;\n  }) => any;\n  'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the group header reads as a rounded section label, separated from\n * the previous group's cards above and its own below, aligned to the card\n * content padding.\n */\nconst mobileGroupClass = 'mt-6 first:mt-0 mb-2 rounded-lg';\nconst {\n  getGroupSize,\n  groupExpandButtonPosition,\n  groupKey,\n  groupLabels,\n  isExpandedGroup,\n  onCopyGroup,\n  onToggleExpandGroup,\n  onUngroup,\n} = useDataTableGrouping<T>();\n\nconst isOpen = computed<boolean>(() => isExpandedGroup(row.group));\nconst groupSize = computed<number>(() => getGroupSize(row.identifier));\n\n/** One label/value pair per grouped column, e.g. `Username: amartin`. */\nconst groupParts = computed<{ key: string; label: string; value: string }[]>(() => {\n  const values = new Map<string, unknown>(Object.entries(row.group));\n  return get(groupLabels).map(({ key, label }) => {\n    const value = values.get(key);\n    return { key, label, value: value === undefined || value === null ? '' : String(value) };\n  });\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trGroup, isMobile ? mobileGroupClass : '']\"\n    data-id=\"row-group\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      name=\"group.header\"\n      :colspan=\"colspan\"\n      :header=\"row\"\n      :is-open=\"isOpen\"\n      :toggle=\"() => onToggleExpandGroup(row.group, row.identifier)\"\n    >\n      <td\n        class=\"!px-4 !py-2\"\n        :class=\"[classes.td, { 'h-auto': !isMobile }]\"\n        :colspan=\"colspan\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <!-- the edge controls pull in by their own padding so their icons sit on the cell grid -->\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.start\"\n            class=\"-ml-1.5\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :group-key=\"groupKey ?? ''\"\n            name=\"group.header.content\"\n            :header=\"row\"\n          >\n            <span\n              class=\"flex flex-wrap items-baseline gap-x-3\"\n              data-id=\"group-label\"\n            >\n              <span\n                v-for=\"part in groupParts\"\n                :key=\"part.key\"\n              >\n                <span class=\"text-rui-text-secondary\">{{ part.label }}:</span>\n                <span class=\"font-medium ml-1\">{{ part.value }}</span>\n              </span>\n            </span>\n            <span\n              class=\"rounded-full bg-black/[0.06] dark:bg-white/[0.08] px-2 text-caption text-rui-text-secondary\"\n              data-id=\"group-size\"\n            >\n              {{ groupSize }}\n            </span>\n            <RuiButton\n              size=\"sm\"\n              variant=\"text\"\n              icon\n              data-id=\"group-copy-button\"\n              @click=\"onCopyGroup(row)\"\n            >\n              <RuiIcon\n                name=\"lu-copy\"\n                size=\"16\"\n              />\n            </RuiButton>\n          </slot>\n          <RuiTooltip\n            :options=\"{ placement: 'top' }\"\n            class=\"ml-auto\"\n            :class=\"{ '-mr-1.5': groupExpandButtonPosition !== GroupExpandButtonPosition.end }\"\n          >\n            <template #activator>\n              <RuiButton\n                size=\"sm\"\n                variant=\"text\"\n                icon\n                data-id=\"group-ungroup-button\"\n                @click=\"onUngroup()\"\n              >\n                <RuiIcon\n                  name=\"lu-ungroup\"\n                  size=\"16\"\n                />\n              </RuiButton>\n            </template>\n            Ungroup\n          </RuiTooltip>\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.end\"\n            class=\"-mr-1.5\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n        </div>\n      </td>\n    </slot>\n  </tr>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js

@@ -4,10 +4,21 @@ import RuiTooltip_default from "../../overlays/tooltip/RuiTooltip.js";
 import { useDataTableGrouping, useDataTableStyling } from "./context.js";
 import RuiExpandButton_default from "../RuiExpandButton.js";
 import { GroupExpandButtonPosition } from "../table-props.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { get } from "@vueuse/shared";
 //#region src/components/tables/data-table/RuiDataTableGroupRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["colspan"];
 var _hoisted_2 = { class: "flex items-center gap-2" };
+var _hoisted_3 = {
+	class: "flex flex-wrap items-baseline gap-x-3",
+	"data-id": "group-label"
+};
+var _hoisted_4 = { class: "text-rui-text-secondary" };
+var _hoisted_5 = { class: "font-medium ml-1" };
+var _hoisted_6 = {
+	class: "rounded-full bg-black/[0.06] dark:bg-white/[0.08] px-2 text-caption text-rui-text-secondary",
+	"data-id": "group-size"
+};
 var mobileGroupClass = "mt-6 first:mt-0 mb-2 rounded-lg";
 var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableGroupRow",
@@ -19,8 +30,21 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		* the previous group's cards above and its own below, aligned to the card
 		* content padding.
 		*/
-		const { groupExpandButtonPosition, groupKey, isExpandedGroup, onCopyGroup, onToggleExpandGroup, onUngroup } = useDataTableGrouping();
+		const { getGroupSize, groupExpandButtonPosition, groupKey, groupLabels, isExpandedGroup, onCopyGroup, onToggleExpandGroup, onUngroup } = useDataTableGrouping();
 		const isOpen = computed(() => isExpandedGroup(__props.row.group));
+		const groupSize = computed(() => getGroupSize(__props.row.identifier));
+		/** One label/value pair per grouped column, e.g. `Username: amartin`. */
+		const groupParts = computed(() => {
+			const values = new Map(Object.entries(__props.row.group));
+			return get(groupLabels).map(({ key, label }) => {
+				const value = values.get(key);
+				return {
+					key,
+					label,
+					value: value === void 0 || value === null ? "" : String(value)
+				};
+			});
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("tr", {
 				class: normalizeClass([unref(classes).trGroup, unref(isMobile) ? mobileGroupClass : ""]),
@@ -31,33 +55,40 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				isOpen: unref(isOpen),
 				toggle: () => unref(onToggleExpandGroup)(__props.row.group, __props.row.identifier)
 			}, () => [createElementVNode("td", {
-				class: normalizeClass([unref(classes).td, unref(isMobile) ? "!px-4 !py-2" : "!p-2"]),
+				class: normalizeClass(["!px-4 !py-2", [unref(classes).td, { "h-auto": !unref(isMobile) }]]),
 				colspan: unref(colspan)
 			}, [createElementVNode("div", _hoisted_2, [
 				unref(groupExpandButtonPosition) === unref(GroupExpandButtonPosition).start ? (openBlock(), createBlock(RuiExpandButton_default, {
 					key: 0,
+					class: "-ml-1.5",
 					expanded: unref(isOpen),
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpandGroup)(__props.row.group, __props.row.identifier))
 				}, null, 8, ["expanded"])) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "group.header.content", {
 					groupKey: unref(groupKey) ?? "",
 					header: __props.row
-				}, () => [createElementVNode("span", null, toDisplayString(unref(groupKey)) + ": " + toDisplayString(__props.row.identifier), 1), createVNode(RuiButton_default, {
-					size: "sm",
-					variant: "text",
-					icon: "",
-					"data-id": "group-copy-button",
-					onClick: _cache[1] || (_cache[1] = ($event) => unref(onCopyGroup)(__props.row))
-				}, {
-					default: withCtx(() => [createVNode(RuiIcon_default, {
-						name: "lu-copy",
-						size: "16"
-					})]),
-					_: 1
-				})]),
+				}, () => [
+					createElementVNode("span", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(groupParts), (part) => {
+						return openBlock(), createElementBlock("span", { key: part.key }, [createElementVNode("span", _hoisted_4, toDisplayString(part.label) + ":", 1), createElementVNode("span", _hoisted_5, toDisplayString(part.value), 1)]);
+					}), 128))]),
+					createElementVNode("span", _hoisted_6, toDisplayString(unref(groupSize)), 1),
+					createVNode(RuiButton_default, {
+						size: "sm",
+						variant: "text",
+						icon: "",
+						"data-id": "group-copy-button",
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(onCopyGroup)(__props.row))
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, {
+							name: "lu-copy",
+							size: "16"
+						})]),
+						_: 1
+					})
+				]),
 				createVNode(RuiTooltip_default, {
 					options: { placement: "top" },
-					class: "ml-auto mr-2"
+					class: normalizeClass(["ml-auto", { "-mr-1.5": unref(groupExpandButtonPosition) !== unref(GroupExpandButtonPosition).end }])
 				}, {
 					activator: withCtx(() => [createVNode(RuiButton_default, {
 						size: "sm",
@@ -67,16 +98,17 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 						onClick: _cache[2] || (_cache[2] = ($event) => unref(onUngroup)())
 					}, {
 						default: withCtx(() => [createVNode(RuiIcon_default, {
-							name: "lu-trash-2",
-							size: "14"
+							name: "lu-ungroup",
+							size: "16"
 						})]),
 						_: 1
 					})]),
 					default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" Ungroup ", -1))]),
 					_: 1
-				}),
+				}, 8, ["class"]),
 				unref(groupExpandButtonPosition) === unref(GroupExpandButtonPosition).end ? (openBlock(), createBlock(RuiExpandButton_default, {
 					key: 1,
+					class: "-mr-1.5",
 					expanded: unref(isOpen),
 					onClick: _cache[3] || (_cache[3] = ($event) => unref(onToggleExpandGroup)(__props.row.group, __props.row.identifier))
 				}, null, 8, ["expanded"])) : createCommentVNode("", true)

package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableGroupRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\nimport { useDataTableGrouping, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\n\nconst { row } = defineProps<{\n  row: GroupHeader<T>;\n}>();\n\ndefineSlots<{\n  'group.header'?: (props: {\n    colspan: number;\n    header: GroupHeader<T>;\n    isOpen: boolean;\n    toggle: () => void;\n  }) => any;\n  'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the group header reads as a rounded section label, separated from\n * the previous group's cards above and its own below, aligned to the card\n * content padding.\n */\nconst mobileGroupClass = 'mt-6 first:mt-0 mb-2 rounded-lg';\nconst {\n  groupExpandButtonPosition,\n  groupKey,\n  isExpandedGroup,\n  onCopyGroup,\n  onToggleExpandGroup,\n  onUngroup,\n} = useDataTableGrouping<T>();\n\nconst isOpen = computed<boolean>(() => isExpandedGroup(row.group));\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trGroup, isMobile ? mobileGroupClass : '']\"\n    data-id=\"row-group\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      name=\"group.header\"\n      :colspan=\"colspan\"\n      :header=\"row\"\n      :is-open=\"isOpen\"\n      :toggle=\"() => onToggleExpandGroup(row.group, row.identifier)\"\n    >\n      <td\n        :class=\"[classes.td, isMobile ? '!px-4 !py-2' : '!p-2']\"\n        :colspan=\"colspan\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.start\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :group-key=\"groupKey ?? ''\"\n            name=\"group.header.content\"\n            :header=\"row\"\n          >\n            <span>{{ groupKey }}: {{ row.identifier }}</span>\n            <RuiButton\n              size=\"sm\"\n              variant=\"text\"\n              icon\n              data-id=\"group-copy-button\"\n              @click=\"onCopyGroup(row)\"\n            >\n              <RuiIcon\n                name=\"lu-copy\"\n                size=\"16\"\n              />\n            </RuiButton>\n          </slot>\n          <RuiTooltip\n            :options=\"{ placement: 'top' }\"\n            class=\"ml-auto mr-2\"\n          >\n            <template #activator>\n              <RuiButton\n                size=\"sm\"\n                variant=\"text\"\n                icon\n                data-id=\"group-ungroup-button\"\n                @click=\"onUngroup()\"\n              >\n                <RuiIcon\n                  name=\"lu-trash-2\"\n                  size=\"14\"\n                />\n              </RuiButton>\n            </template>\n            Ungroup\n          </RuiTooltip>\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.end\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n        </div>\n      </td>\n    </slot>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;;AA8BA,IAAM,mBAAmB;;;;;EAPzB,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;;;;;;EAQ3D,MAAM,EACJ,2BACA,UACA,iBACA,aACA,qBACA,cACE,qBAAwB;EAE5B,MAAM,SAAS,eAAwB,gBAAgB,QAAA,IAAI,KAAK,CAAC;;GAI/D,OAAA,UAAA,GAAA,mBAsEK,MAAA;IArEF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,SAAS,MAAA,QAAA,IAAW,mBAAgB,EAAA,CAAA;IACrD,WAAQ;GAGR,GAAA,CAAA,WAgEO,KAAA,QAAA,gBAAA;IA9DJ,SAAS,MAAA,OAAA;IACT,QAAQ,QAAA;IACR,QAAS,MAAA,MAAA;IACT,cAAc,MAAA,mBAAA,CAAmB,CAAC,QAAA,IAAI,OAAO,QAAA,IAAI,UAAU;GAL9D,SAgEO,CAzDL,mBAwDK,MAAA;IAvDF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,IAAI,MAAA,QAAA,IAAQ,gBAAA,MAAA,CAAA;IAC5B,SAAS,MAAA,OAAA;GAEV,GAAA,CAAA,mBAmDM,OAnDN,YAmDM;IAjDI,MAAA,yBAAA,MAA8B,MAAA,yBAAA,CAAyB,CAAC,SADhE,UAAA,GAAA,YAIE,yBAAA;;KAFC,UAAU,MAAA,MAAA;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,mBAAA,CAAmB,CAAC,QAAA,IAAI,OAAO,QAAA,IAAI,UAAU;;IAGvD,WAkBO,KAAA,QAAA,wBAAA;KAjBJ,UAAW,MAAA,QAAA,KAAQ;KAEnB,QAAQ,QAAA;IAHX,SAkBO,CAbL,mBAAiD,QAAA,MAAA,gBAAxC,MAAA,QAAA,CAAQ,IAAG,OAAE,gBAAG,QAAA,IAAI,UAAU,GAAA,CAAA,GACvC,YAWY,mBAAA;KAVV,MAAK;KACL,SAAQ;KACR,MAAA;KACA,WAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,QAAA,GAAG;;KAEvB,SAAA,cAGE,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;;;IAIX,YAmBa,oBAAA;KAlBV,SAAS,EAAA,WAAA,MAAA;KACV,OAAM;;KAEK,WAAS,cAYN,CAXZ,YAWY,mBAAA;MAVV,MAAK;MACL,SAAQ;MACR,MAAA;MACA,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAA,CAAS,CAAA;;MAEjB,SAAA,cAGE,CAHF,YAGE,iBAAA;OAFA,MAAK;OACL,MAAK;;;;KAGA,SAAA,cAEb,CAFa,OAAA,OAAA,OAAA,KAAA,gBAAA,aAEb,EAAA,EAAA,CAAA;;;IAEQ,MAAA,yBAAA,MAA8B,MAAA,yBAAA,CAAyB,CAAC,OADhE,UAAA,GAAA,YAIE,yBAAA;;KAFC,UAAU,MAAA,MAAA;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,mBAAA,CAAmB,CAAC,QAAA,IAAI,OAAO,QAAA,IAAI,UAAU"}
+{"version":3,"file":"RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableGroupRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiTooltip from '@/components/overlays/tooltip/RuiTooltip.vue';\nimport { useDataTableGrouping, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\n\nconst { row } = defineProps<{\n  row: GroupHeader<T>;\n}>();\n\ndefineSlots<{\n  'group.header'?: (props: {\n    colspan: number;\n    header: GroupHeader<T>;\n    isOpen: boolean;\n    toggle: () => void;\n  }) => any;\n  'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the group header reads as a rounded section label, separated from\n * the previous group's cards above and its own below, aligned to the card\n * content padding.\n */\nconst mobileGroupClass = 'mt-6 first:mt-0 mb-2 rounded-lg';\nconst {\n  getGroupSize,\n  groupExpandButtonPosition,\n  groupKey,\n  groupLabels,\n  isExpandedGroup,\n  onCopyGroup,\n  onToggleExpandGroup,\n  onUngroup,\n} = useDataTableGrouping<T>();\n\nconst isOpen = computed<boolean>(() => isExpandedGroup(row.group));\nconst groupSize = computed<number>(() => getGroupSize(row.identifier));\n\n/** One label/value pair per grouped column, e.g. `Username: amartin`. */\nconst groupParts = computed<{ key: string; label: string; value: string }[]>(() => {\n  const values = new Map<string, unknown>(Object.entries(row.group));\n  return get(groupLabels).map(({ key, label }) => {\n    const value = values.get(key);\n    return { key, label, value: value === undefined || value === null ? '' : String(value) };\n  });\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[classes.trGroup, isMobile ? mobileGroupClass : '']\"\n    data-id=\"row-group\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      name=\"group.header\"\n      :colspan=\"colspan\"\n      :header=\"row\"\n      :is-open=\"isOpen\"\n      :toggle=\"() => onToggleExpandGroup(row.group, row.identifier)\"\n    >\n      <td\n        class=\"!px-4 !py-2\"\n        :class=\"[classes.td, { 'h-auto': !isMobile }]\"\n        :colspan=\"colspan\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <!-- the edge controls pull in by their own padding so their icons sit on the cell grid -->\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.start\"\n            class=\"-ml-1.5\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :group-key=\"groupKey ?? ''\"\n            name=\"group.header.content\"\n            :header=\"row\"\n          >\n            <span\n              class=\"flex flex-wrap items-baseline gap-x-3\"\n              data-id=\"group-label\"\n            >\n              <span\n                v-for=\"part in groupParts\"\n                :key=\"part.key\"\n              >\n                <span class=\"text-rui-text-secondary\">{{ part.label }}:</span>\n                <span class=\"font-medium ml-1\">{{ part.value }}</span>\n              </span>\n            </span>\n            <span\n              class=\"rounded-full bg-black/[0.06] dark:bg-white/[0.08] px-2 text-caption text-rui-text-secondary\"\n              data-id=\"group-size\"\n            >\n              {{ groupSize }}\n            </span>\n            <RuiButton\n              size=\"sm\"\n              variant=\"text\"\n              icon\n              data-id=\"group-copy-button\"\n              @click=\"onCopyGroup(row)\"\n            >\n              <RuiIcon\n                name=\"lu-copy\"\n                size=\"16\"\n              />\n            </RuiButton>\n          </slot>\n          <RuiTooltip\n            :options=\"{ placement: 'top' }\"\n            class=\"ml-auto\"\n            :class=\"{ '-mr-1.5': groupExpandButtonPosition !== GroupExpandButtonPosition.end }\"\n          >\n            <template #activator>\n              <RuiButton\n                size=\"sm\"\n                variant=\"text\"\n                icon\n                data-id=\"group-ungroup-button\"\n                @click=\"onUngroup()\"\n              >\n                <RuiIcon\n                  name=\"lu-ungroup\"\n                  size=\"16\"\n                />\n              </RuiButton>\n            </template>\n            Ungroup\n          </RuiTooltip>\n          <RuiExpandButton\n            v-if=\"groupExpandButtonPosition === GroupExpandButtonPosition.end\"\n            class=\"-mr-1.5\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n        </div>\n      </td>\n    </slot>\n  </tr>\n</template>\n"],"mappings":"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"}

package/dist/components/tables/data-table/RuiDataTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/** Selection wins over the open-panel shade, so a selected row still reads as selected. */\nconst stateClass = computed<string>(() => {\n  if (get(selected))\n    return get(classes).trSelected;\n  if (get(expanded))\n    return get(classes).trExpandedParent;\n  return get(classes).tr;\n});\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * Without a selection checkbox the header bar would hold only the pinned\n * actions, so they float in the card's top-right corner instead and the first\n * field row makes room for them.\n */\nconst compactMobileHeader = computed<boolean>(() =>\n  get(showMobileHeader) && !get(selectedData) && get(bodyColumns).length > 0,\n);\n\n/** Room for each floating action, about one small icon button wide. */\nconst firstRowInset = computed<Record<string, string> | undefined>(() =>\n  get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : undefined,\n);\n\n/**\n * `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[stateClass, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      :class=\"compactMobileHeader\n        ? 'absolute top-0 right-0 z-[1] flex items-center gap-1 px-2 py-1'\n        : 'flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]'\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else-if=\"!compactMobileHeader\" />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n      :style=\"subIndex === 0 ? firstRowInset : undefined\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js

@@ -3,17 +3,12 @@ import { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, us
 import RuiExpandButton_default from "../RuiExpandButton.js";
 import RuiDataTableCell_default from "./RuiDataTableCell.js";
 import RuiDataTableExpandedRow_default from "./RuiDataTableExpandedRow.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/tables/data-table/RuiDataTableRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-selected"];
-var _hoisted_2 = {
-	key: 0,
-	class: "flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]",
-	"data-id": "mobile-card-header"
-};
-var _hoisted_3 = { key: 1 };
-var _hoisted_4 = {
+var _hoisted_2 = { key: 1 };
+var _hoisted_3 = {
 	key: 2,
 	class: "flex items-center gap-1 min-w-0"
 };
@@ -35,6 +30,12 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const disabled = computed(() => isDisabledRow(get(rowId)));
 		const expanded = computed(() => get(expandable) && !!slots["expanded-item"] && isExpanded(get(rowId)));
 		const rowClass = computed(() => typeof itemClass === "string" ? itemClass : itemClass(__props.row));
+		/** Selection wins over the open-panel shade, so a selected row still reads as selected. */
+		const stateClass = computed(() => {
+			if (get(selected)) return get(classes).trSelected;
+			if (get(expanded)) return get(classes).trExpandedParent;
+			return get(classes).tr;
+		});
 		/**
 		* A column is pinned to the mobile card header when it is flagged
 		* `mobileHeader`, typically an action column, or when it is the
@@ -64,6 +65,14 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const bodyColumns = computed(() => get(isMobile) ? get(columns).filter((column) => !isMobileHeaderColumn(column)) : get(columns));
 		const showMobileHeader = computed(() => get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0));
 		/**
+		* Without a selection checkbox the header bar would hold only the pinned
+		* actions, so they float in the card's top-right corner instead and the first
+		* field row makes room for them.
+		*/
+		const compactMobileHeader = computed(() => get(showMobileHeader) && !get(selectedData) && get(bodyColumns).length > 0);
+		/** Room for each floating action, about one small icon button wide. */
+		const firstRowInset = computed(() => get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : void 0);
+		/**
 		* `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise
 		* zeroes the top and bottom border on every card except the first. An expanded
 		* card flattens its bottom edge so the expanded panel attaches flush beneath
@@ -79,13 +88,17 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("tr", {
 				class: normalizeClass([
-					unref(selected) ? unref(classes).trSelected : unref(classes).tr,
+					unref(stateClass),
 					unref(rowClass),
 					unref(isMobile) ? unref(mobileCardClass) : ""
 				]),
 				"aria-selected": unref(selectedData) ? unref(selected) : void 0,
 				"data-id": "row"
-			}, [unref(showMobileHeader) ? (openBlock(), createElementBlock("td", _hoisted_2, [unref(selectedData) ? (openBlock(), createBlock(RuiCheckbox_default, {
+			}, [unref(showMobileHeader) ? (openBlock(), createElementBlock("td", {
+				key: 0,
+				class: normalizeClass(unref(compactMobileHeader) ? "absolute top-0 right-0 z-[1] flex items-center gap-1 px-2 py-1" : "flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]"),
+				"data-id": "mobile-card-header"
+			}, [unref(selectedData) ? (openBlock(), createBlock(RuiCheckbox_default, {
 				key: 0,
 				"data-id": `table-toggle-check-${__props.index}`,
 				"model-value": unref(selected),
@@ -101,7 +114,7 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"model-value",
 				"disabled",
 				"size"
-			])) : (openBlock(), createElementBlock("span", _hoisted_3)), unref(mobileHeaderColumns).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(mobileHeaderColumns), (column, headerIndex) => {
+			])) : !unref(compactMobileHeader) ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true), unref(mobileHeaderColumns).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(mobileHeaderColumns), (column, headerIndex) => {
 				return openBlock(), createElementBlock(Fragment, { key: `header-${headerIndex}` }, [unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
 					column,
 					row: __props.row,
@@ -111,7 +124,7 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					expanded: unref(isExpanded)(unref(rowId)),
 					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
 				}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
-			}), 128))])) : createCommentVNode("", true)])) : unref(selectedData) && !unref(isMobile) ? (openBlock(), createElementBlock("td", {
+			}), 128))])) : createCommentVNode("", true)], 2)) : unref(selectedData) && !unref(isMobile) ? (openBlock(), createElementBlock("td", {
 				key: 1,
 				class: normalizeClass(unref(classes).checkbox),
 				colspan: "1",
@@ -137,7 +150,8 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					column,
 					row: __props.row,
 					index: __props.index,
-					"row-id": unref(rowId)
+					"row-id": unref(rowId),
+					style: normalizeStyle(subIndex === 0 ? unref(firstRowInset) : void 0)
 				}, createSlots({ _: 2 }, [unref(itemSlotKeys).has(column.key.toString()) ? {
 					name: "default",
 					fn: withCtx((slotData) => [renderSlot(_ctx.$slots, `item.${column.key.toString()}`, mergeProps({ ref_for: true }, slotData))]),
@@ -146,7 +160,8 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"column",
 					"row",
 					"index",
-					"row-id"
+					"row-id",
+					"style"
 				]);
 			}), 128))], 10, _hoisted_1), unref(expanded) ? (openBlock(), createBlock(RuiDataTableExpandedRow_default, {
 				key: 0,

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/** Selection wins over the open-panel shade, so a selected row still reads as selected. */\nconst stateClass = computed<string>(() => {\n  if (get(selected))\n    return get(classes).trSelected;\n  if (get(expanded))\n    return get(classes).trExpandedParent;\n  return get(classes).tr;\n});\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * Without a selection checkbox the header bar would hold only the pinned\n * actions, so they float in the card's top-right corner instead and the first\n * field row makes room for them.\n */\nconst compactMobileHeader = computed<boolean>(() =>\n  get(showMobileHeader) && !get(selectedData) && get(bodyColumns).length > 0,\n);\n\n/** Room for each floating action, about one small icon button wide. */\nconst firstRowInset = computed<Record<string, string> | undefined>(() =>\n  get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : undefined,\n);\n\n/**\n * `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[stateClass, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      :class=\"compactMobileHeader\n        ? 'absolute top-0 right-0 z-[1] flex items-center gap-1 px-2 py-1'\n        : 'flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]'\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else-if=\"!compactMobileHeader\" />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n      :style=\"subIndex === 0 ? firstRowInset : undefined\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}

package/dist/components/tables/data-table/context.d.ts

@@ -7,6 +7,8 @@ export interface DataTableClasses {
     tr: string;
     trSelected: string;
     trExpandable: string;
+    /** a row whose expanded panel is open, shaded to match the panel */
+    trExpandedParent: string;
     trGroup: string;
     trEmpty: string;
     checkbox: string;
@@ -39,9 +41,17 @@ export interface DataTableExpansionContext<T extends object = any, IdType extend
     isExpanded: (id: T[IdType]) => boolean;
     onToggleExpand: (row: T) => void;
 }
+export interface DataTableGroupLabel {
+    key: string;
+    /** the grouped column's visible label, or the key when no column defines one */
+    label: string;
+}
 export interface DataTableGroupingContext<T extends object = any> {
     groupExpandButtonPosition: GroupExpandButtonPosition;
     groupKey: ComputedRef<string | undefined>;
+    groupLabels: ComputedRef<DataTableGroupLabel[]>;
+    /** the number of rows in the group, across all pages */
+    getGroupSize: (identifier: string) => number;
     isExpandedGroup: (group: Partial<T>) => boolean;
     onToggleExpandGroup: (group: Partial<T>, identifier: string) => void;
     onUngroup: () => void;

package/dist/components/tables/data-table/context.js

@@ -84,6 +84,8 @@ function provideDataTableContext(context) {
 	provideDataTableGrouping({
 		groupExpandButtonPosition: context.groupExpandButtonPosition,
 		groupKey: context.groupKey,
+		groupLabels: context.groupLabels,
+		getGroupSize: context.getGroupSize,
 		isExpandedGroup: context.isExpandedGroup,
 		onToggleExpandGroup: context.onToggleExpandGroup,
 		onUngroup: context.onUngroup,

package/dist/components/tables/data-table/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/tables/data-table/context.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport type { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\n\nexport interface DataTableClasses {\n  td: string;\n  tr: string;\n  trSelected: string;\n  trExpandable: string;\n  trGroup: string;\n  trEmpty: string;\n  checkbox: string;\n  tbody: string;\n  tbodyLoader: string;\n}\n\n// --- Per-concern context interfaces ---\n\nexport interface DataTableStylingContext {\n  classes: ComputedRef<DataTableClasses>;\n  colspan: ComputedRef<number>;\n  dense: boolean;\n  /** whether the table is currently rendered in its stacked mobile layout */\n  isMobile: ComputedRef<boolean>;\n}\n\nexport interface DataTableColumnsContext<T extends object = any> {\n  columns: ComputedRef<TableColumn<T>[]>;\n  cellValue: (row: T, key: TableColumn<T>['key']) => T[keyof T];\n  itemSlotKeys: Set<string>;\n  /** the column definition attribute used as the visible label (e.g. `label`) */\n  columnAttr: keyof TableColumn<T>;\n}\n\nexport interface DataTableSelectionContext<T extends object = any, IdType extends keyof T = keyof T> {\n  selectedData: Ref<T[IdType][] | undefined>;\n  isSelected: (id: T[IdType]) => boolean;\n  isDisabledRow: (id: T[IdType]) => boolean;\n  onSelect: (selected: boolean, id: T[IdType], userAction: boolean) => void;\n  onCheckboxClick: (event: MouseEvent, id: T[IdType], index: number) => void;\n}\n\nexport interface DataTableExpansionContext<T extends object = any, IdType extends keyof T = keyof T> {\n  expandable: ComputedRef<boolean>;\n  isExpanded: (id: T[IdType]) => boolean;\n  onToggleExpand: (row: T) => void;\n}\n\nexport interface DataTableGroupingContext<T extends object = any> {\n  groupExpandButtonPosition: GroupExpandButtonPosition;\n  groupKey: ComputedRef<string | undefined>;\n  isExpandedGroup: (group: Partial<T>) => boolean;\n  onToggleExpandGroup: (group: Partial<T>, identifier: string) => void;\n  onUngroup: () => void;\n  onCopyGroup: (header: GroupHeader<T>) => void;\n}\n\nexport interface DataTableRowIdentityContext<T extends object = any, IdType extends keyof T = keyof T> {\n  getRowId: (row: T) => T[IdType];\n  itemClass: ((item: T) => string) | string;\n}\n\n// --- Backward-compatible merged type ---\n\nexport type DataTableContext<T extends object = any, IdType extends keyof T = keyof T> =\n  DataTableStylingContext &\n  DataTableColumnsContext<T> &\n  DataTableSelectionContext<T, IdType> &\n  DataTableExpansionContext<T, IdType> &\n  DataTableGroupingContext<T> &\n  DataTableRowIdentityContext<T, IdType>;\n\n// --- Per-concern symbols ---\n\nconst DATA_TABLE_STYLING = Symbol('data-table-styling');\nconst DATA_TABLE_COLUMNS = Symbol('data-table-columns');\nconst DATA_TABLE_SELECTION = Symbol('data-table-selection');\nconst DATA_TABLE_EXPANSION = Symbol('data-table-expansion');\nconst DATA_TABLE_GROUPING = Symbol('data-table-grouping');\nconst DATA_TABLE_ROW_IDENTITY = Symbol('data-table-row-identity');\nconst DATA_TABLE_NESTED = Symbol('data-table-nested');\n\n// --- Per-concern provide/use pairs ---\n\nfunction injectOrThrow<C>(key: symbol, name: string): C {\n  const context = inject<C>(key);\n  if (context === undefined)\n    throw new Error(`${name} must be used within a RuiDataTable`);\n\n  return context;\n}\n\nexport function provideDataTableStyling(context: DataTableStylingContext): void {\n  provide(DATA_TABLE_STYLING, context);\n}\n\nexport function useDataTableStyling(): DataTableStylingContext {\n  return injectOrThrow<DataTableStylingContext>(DATA_TABLE_STYLING, 'useDataTableStyling');\n}\n\nexport function provideDataTableColumns<T extends object>(context: DataTableColumnsContext<T>): void {\n  provide(DATA_TABLE_COLUMNS, context);\n}\n\nexport function useDataTableColumns<T extends object = any>(): DataTableColumnsContext<T> {\n  return injectOrThrow<DataTableColumnsContext<T>>(DATA_TABLE_COLUMNS, 'useDataTableColumns');\n}\n\nexport function provideDataTableSelection<T extends object, IdType extends keyof T>(context: DataTableSelectionContext<T, IdType>): void {\n  provide(DATA_TABLE_SELECTION, context);\n}\n\nexport function useDataTableSelection<T extends object = any, IdType extends keyof T = keyof T>(): DataTableSelectionContext<T, IdType> {\n  return injectOrThrow<DataTableSelectionContext<T, IdType>>(DATA_TABLE_SELECTION, 'useDataTableSelection');\n}\n\nexport function provideDataTableExpansion<T extends object, IdType extends keyof T>(context: DataTableExpansionContext<T, IdType>): void {\n  provide(DATA_TABLE_EXPANSION, context);\n}\n\nexport function useDataTableExpansion<T extends object = any, IdType extends keyof T = keyof T>(): DataTableExpansionContext<T, IdType> {\n  return injectOrThrow<DataTableExpansionContext<T, IdType>>(DATA_TABLE_EXPANSION, 'useDataTableExpansion');\n}\n\nexport function provideDataTableGrouping<T extends object>(context: DataTableGroupingContext<T>): void {\n  provide(DATA_TABLE_GROUPING, context);\n}\n\nexport function useDataTableGrouping<T extends object = any>(): DataTableGroupingContext<T> {\n  return injectOrThrow<DataTableGroupingContext<T>>(DATA_TABLE_GROUPING, 'useDataTableGrouping');\n}\n\nexport function provideDataTableRowIdentity<T extends object, IdType extends keyof T>(context: DataTableRowIdentityContext<T, IdType>): void {\n  provide(DATA_TABLE_ROW_IDENTITY, context);\n}\n\nexport function useDataTableRowIdentity<T extends object = any, IdType extends keyof T = keyof T>(): DataTableRowIdentityContext<T, IdType> {\n  return injectOrThrow<DataTableRowIdentityContext<T, IdType>>(DATA_TABLE_ROW_IDENTITY, 'useDataTableRowIdentity');\n}\n\n/** Marks descendant data tables as nested (e.g. rendered inside an expanded row). */\nexport function provideDataTableNested(): void {\n  provide(DATA_TABLE_NESTED, true);\n}\n\n/** True when this data table is rendered inside another data table. */\nexport function useDataTableNested(): boolean {\n  return inject<boolean>(DATA_TABLE_NESTED, false);\n}\n\n// --- Backward-compatible facade ---\n\nexport function provideDataTableContext<T extends object, IdType extends keyof T>(context: DataTableContext<T, IdType>): void {\n  provideDataTableStyling({ classes: context.classes, colspan: context.colspan, dense: context.dense, isMobile: context.isMobile });\n  provideDataTableColumns<T>({ columns: context.columns, cellValue: context.cellValue, itemSlotKeys: context.itemSlotKeys, columnAttr: context.columnAttr });\n  provideDataTableSelection<T, IdType>({ selectedData: context.selectedData, isSelected: context.isSelected, isDisabledRow: context.isDisabledRow, onSelect: context.onSelect, onCheckboxClick: context.onCheckboxClick });\n  provideDataTableExpansion<T, IdType>({ expandable: context.expandable, isExpanded: context.isExpanded, onToggleExpand: context.onToggleExpand });\n  provideDataTableGrouping<T>({ groupExpandButtonPosition: context.groupExpandButtonPosition, groupKey: context.groupKey, isExpandedGroup: context.isExpandedGroup, onToggleExpandGroup: context.onToggleExpandGroup, onUngroup: context.onUngroup, onCopyGroup: context.onCopyGroup });\n  provideDataTableRowIdentity<T, IdType>({ getRowId: context.getRowId, itemClass: context.itemClass });\n}\n\nexport function useDataTableContext<T extends object, IdType extends keyof T = keyof T>(): DataTableContext<T, IdType> {\n  return {\n    ...useDataTableStyling(),\n    ...useDataTableColumns<T>(),\n    ...useDataTableSelection<T, IdType>(),\n    ...useDataTableExpansion<T, IdType>(),\n    ...useDataTableGrouping<T>(),\n    ...useDataTableRowIdentity<T, IdType>(),\n  };\n}\n"],"mappings":";;AA2EA,IAAM,qBAAqB,OAAO,oBAAoB;AACtD,IAAM,qBAAqB,OAAO,oBAAoB;AACtD,IAAM,uBAAuB,OAAO,sBAAsB;AAC1D,IAAM,uBAAuB,OAAO,sBAAsB;AAC1D,IAAM,sBAAsB,OAAO,qBAAqB;AACxD,IAAM,0BAA0B,OAAO,yBAAyB;AAChE,IAAM,oBAAoB,OAAO,mBAAmB;AAIpD,SAAS,cAAiB,KAAa,MAAiB;CACtD,MAAM,UAAU,OAAU,GAAG;CAC7B,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,GAAG,KAAK,oCAAoC;CAE9D,OAAO;AACT;AAEA,SAAgB,wBAAwB,SAAwC;CAC9E,QAAQ,oBAAoB,OAAO;AACrC;AAEA,SAAgB,sBAA+C;CAC7D,OAAO,cAAuC,oBAAoB,qBAAqB;AACzF;AAEA,SAAgB,wBAA0C,SAA2C;CACnG,QAAQ,oBAAoB,OAAO;AACrC;AAEA,SAAgB,sBAA0E;CACxF,OAAO,cAA0C,oBAAoB,qBAAqB;AAC5F;AAEA,SAAgB,0BAAoE,SAAqD;CACvI,QAAQ,sBAAsB,OAAO;AACvC;AAEA,SAAgB,wBAAwH;CACtI,OAAO,cAAoD,sBAAsB,uBAAuB;AAC1G;AAEA,SAAgB,0BAAoE,SAAqD;CACvI,QAAQ,sBAAsB,OAAO;AACvC;AAEA,SAAgB,wBAAwH;CACtI,OAAO,cAAoD,sBAAsB,uBAAuB;AAC1G;AAEA,SAAgB,yBAA2C,SAA4C;CACrG,QAAQ,qBAAqB,OAAO;AACtC;AAEA,SAAgB,uBAA4E;CAC1F,OAAO,cAA2C,qBAAqB,sBAAsB;AAC/F;AAEA,SAAgB,4BAAsE,SAAuD;CAC3I,QAAQ,yBAAyB,OAAO;AAC1C;AAEA,SAAgB,0BAA4H;CAC1I,OAAO,cAAsD,yBAAyB,yBAAyB;AACjH;;AAGA,SAAgB,yBAA+B;CAC7C,QAAQ,mBAAmB,IAAI;AACjC;;AAGA,SAAgB,qBAA8B;CAC5C,OAAO,OAAgB,mBAAmB,KAAK;AACjD;AAIA,SAAgB,wBAAkE,SAA4C;CAC5H,wBAAwB;EAAE,SAAS,QAAQ;EAAS,SAAS,QAAQ;EAAS,OAAO,QAAQ;EAAO,UAAU,QAAQ;CAAS,CAAC;CAChI,wBAA2B;EAAE,SAAS,QAAQ;EAAS,WAAW,QAAQ;EAAW,cAAc,QAAQ;EAAc,YAAY,QAAQ;CAAW,CAAC;CACzJ,0BAAqC;EAAE,cAAc,QAAQ;EAAc,YAAY,QAAQ;EAAY,eAAe,QAAQ;EAAe,UAAU,QAAQ;EAAU,iBAAiB,QAAQ;CAAgB,CAAC;CACvN,0BAAqC;EAAE,YAAY,QAAQ;EAAY,YAAY,QAAQ;EAAY,gBAAgB,QAAQ;CAAe,CAAC;CAC/I,yBAA4B;EAAE,2BAA2B,QAAQ;EAA2B,UAAU,QAAQ;EAAU,iBAAiB,QAAQ;EAAiB,qBAAqB,QAAQ;EAAqB,WAAW,QAAQ;EAAW,aAAa,QAAQ;CAAY,CAAC;CACpR,4BAAuC;EAAE,UAAU,QAAQ;EAAU,WAAW,QAAQ;CAAU,CAAC;AACrG"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/tables/data-table/context.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport type { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\n\nexport interface DataTableClasses {\n  td: string;\n  tr: string;\n  trSelected: string;\n  trExpandable: string;\n  /** a row whose expanded panel is open, shaded to match the panel */\n  trExpandedParent: string;\n  trGroup: string;\n  trEmpty: string;\n  checkbox: string;\n  tbody: string;\n  tbodyLoader: string;\n}\n\n// --- Per-concern context interfaces ---\n\nexport interface DataTableStylingContext {\n  classes: ComputedRef<DataTableClasses>;\n  colspan: ComputedRef<number>;\n  dense: boolean;\n  /** whether the table is currently rendered in its stacked mobile layout */\n  isMobile: ComputedRef<boolean>;\n}\n\nexport interface DataTableColumnsContext<T extends object = any> {\n  columns: ComputedRef<TableColumn<T>[]>;\n  cellValue: (row: T, key: TableColumn<T>['key']) => T[keyof T];\n  itemSlotKeys: Set<string>;\n  /** the column definition attribute used as the visible label (e.g. `label`) */\n  columnAttr: keyof TableColumn<T>;\n}\n\nexport interface DataTableSelectionContext<T extends object = any, IdType extends keyof T = keyof T> {\n  selectedData: Ref<T[IdType][] | undefined>;\n  isSelected: (id: T[IdType]) => boolean;\n  isDisabledRow: (id: T[IdType]) => boolean;\n  onSelect: (selected: boolean, id: T[IdType], userAction: boolean) => void;\n  onCheckboxClick: (event: MouseEvent, id: T[IdType], index: number) => void;\n}\n\nexport interface DataTableExpansionContext<T extends object = any, IdType extends keyof T = keyof T> {\n  expandable: ComputedRef<boolean>;\n  isExpanded: (id: T[IdType]) => boolean;\n  onToggleExpand: (row: T) => void;\n}\n\nexport interface DataTableGroupLabel {\n  key: string;\n  /** the grouped column's visible label, or the key when no column defines one */\n  label: string;\n}\n\nexport interface DataTableGroupingContext<T extends object = any> {\n  groupExpandButtonPosition: GroupExpandButtonPosition;\n  groupKey: ComputedRef<string | undefined>;\n  groupLabels: ComputedRef<DataTableGroupLabel[]>;\n  /** the number of rows in the group, across all pages */\n  getGroupSize: (identifier: string) => number;\n  isExpandedGroup: (group: Partial<T>) => boolean;\n  onToggleExpandGroup: (group: Partial<T>, identifier: string) => void;\n  onUngroup: () => void;\n  onCopyGroup: (header: GroupHeader<T>) => void;\n}\n\nexport interface DataTableRowIdentityContext<T extends object = any, IdType extends keyof T = keyof T> {\n  getRowId: (row: T) => T[IdType];\n  itemClass: ((item: T) => string) | string;\n}\n\n// --- Backward-compatible merged type ---\n\nexport type DataTableContext<T extends object = any, IdType extends keyof T = keyof T> =\n  DataTableStylingContext &\n  DataTableColumnsContext<T> &\n  DataTableSelectionContext<T, IdType> &\n  DataTableExpansionContext<T, IdType> &\n  DataTableGroupingContext<T> &\n  DataTableRowIdentityContext<T, IdType>;\n\n// --- Per-concern symbols ---\n\nconst DATA_TABLE_STYLING = Symbol('data-table-styling');\nconst DATA_TABLE_COLUMNS = Symbol('data-table-columns');\nconst DATA_TABLE_SELECTION = Symbol('data-table-selection');\nconst DATA_TABLE_EXPANSION = Symbol('data-table-expansion');\nconst DATA_TABLE_GROUPING = Symbol('data-table-grouping');\nconst DATA_TABLE_ROW_IDENTITY = Symbol('data-table-row-identity');\nconst DATA_TABLE_NESTED = Symbol('data-table-nested');\n\n// --- Per-concern provide/use pairs ---\n\nfunction injectOrThrow<C>(key: symbol, name: string): C {\n  const context = inject<C>(key);\n  if (context === undefined)\n    throw new Error(`${name} must be used within a RuiDataTable`);\n\n  return context;\n}\n\nexport function provideDataTableStyling(context: DataTableStylingContext): void {\n  provide(DATA_TABLE_STYLING, context);\n}\n\nexport function useDataTableStyling(): DataTableStylingContext {\n  return injectOrThrow<DataTableStylingContext>(DATA_TABLE_STYLING, 'useDataTableStyling');\n}\n\nexport function provideDataTableColumns<T extends object>(context: DataTableColumnsContext<T>): void {\n  provide(DATA_TABLE_COLUMNS, context);\n}\n\nexport function useDataTableColumns<T extends object = any>(): DataTableColumnsContext<T> {\n  return injectOrThrow<DataTableColumnsContext<T>>(DATA_TABLE_COLUMNS, 'useDataTableColumns');\n}\n\nexport function provideDataTableSelection<T extends object, IdType extends keyof T>(context: DataTableSelectionContext<T, IdType>): void {\n  provide(DATA_TABLE_SELECTION, context);\n}\n\nexport function useDataTableSelection<T extends object = any, IdType extends keyof T = keyof T>(): DataTableSelectionContext<T, IdType> {\n  return injectOrThrow<DataTableSelectionContext<T, IdType>>(DATA_TABLE_SELECTION, 'useDataTableSelection');\n}\n\nexport function provideDataTableExpansion<T extends object, IdType extends keyof T>(context: DataTableExpansionContext<T, IdType>): void {\n  provide(DATA_TABLE_EXPANSION, context);\n}\n\nexport function useDataTableExpansion<T extends object = any, IdType extends keyof T = keyof T>(): DataTableExpansionContext<T, IdType> {\n  return injectOrThrow<DataTableExpansionContext<T, IdType>>(DATA_TABLE_EXPANSION, 'useDataTableExpansion');\n}\n\nexport function provideDataTableGrouping<T extends object>(context: DataTableGroupingContext<T>): void {\n  provide(DATA_TABLE_GROUPING, context);\n}\n\nexport function useDataTableGrouping<T extends object = any>(): DataTableGroupingContext<T> {\n  return injectOrThrow<DataTableGroupingContext<T>>(DATA_TABLE_GROUPING, 'useDataTableGrouping');\n}\n\nexport function provideDataTableRowIdentity<T extends object, IdType extends keyof T>(context: DataTableRowIdentityContext<T, IdType>): void {\n  provide(DATA_TABLE_ROW_IDENTITY, context);\n}\n\nexport function useDataTableRowIdentity<T extends object = any, IdType extends keyof T = keyof T>(): DataTableRowIdentityContext<T, IdType> {\n  return injectOrThrow<DataTableRowIdentityContext<T, IdType>>(DATA_TABLE_ROW_IDENTITY, 'useDataTableRowIdentity');\n}\n\n/** Marks descendant data tables as nested (e.g. rendered inside an expanded row). */\nexport function provideDataTableNested(): void {\n  provide(DATA_TABLE_NESTED, true);\n}\n\n/** True when this data table is rendered inside another data table. */\nexport function useDataTableNested(): boolean {\n  return inject<boolean>(DATA_TABLE_NESTED, false);\n}\n\n// --- Backward-compatible facade ---\n\nexport function provideDataTableContext<T extends object, IdType extends keyof T>(context: DataTableContext<T, IdType>): void {\n  provideDataTableStyling({ classes: context.classes, colspan: context.colspan, dense: context.dense, isMobile: context.isMobile });\n  provideDataTableColumns<T>({ columns: context.columns, cellValue: context.cellValue, itemSlotKeys: context.itemSlotKeys, columnAttr: context.columnAttr });\n  provideDataTableSelection<T, IdType>({ selectedData: context.selectedData, isSelected: context.isSelected, isDisabledRow: context.isDisabledRow, onSelect: context.onSelect, onCheckboxClick: context.onCheckboxClick });\n  provideDataTableExpansion<T, IdType>({ expandable: context.expandable, isExpanded: context.isExpanded, onToggleExpand: context.onToggleExpand });\n  provideDataTableGrouping<T>({ groupExpandButtonPosition: context.groupExpandButtonPosition, groupKey: context.groupKey, groupLabels: context.groupLabels, getGroupSize: context.getGroupSize, isExpandedGroup: context.isExpandedGroup, onToggleExpandGroup: context.onToggleExpandGroup, onUngroup: context.onUngroup, onCopyGroup: context.onCopyGroup });\n  provideDataTableRowIdentity<T, IdType>({ getRowId: context.getRowId, itemClass: context.itemClass });\n}\n\nexport function useDataTableContext<T extends object, IdType extends keyof T = keyof T>(): DataTableContext<T, IdType> {\n  return {\n    ...useDataTableStyling(),\n    ...useDataTableColumns<T>(),\n    ...useDataTableSelection<T, IdType>(),\n    ...useDataTableExpansion<T, IdType>(),\n    ...useDataTableGrouping<T>(),\n    ...useDataTableRowIdentity<T, IdType>(),\n  };\n}\n"],"mappings":";;AAsFA,IAAM,qBAAqB,OAAO,oBAAoB;AACtD,IAAM,qBAAqB,OAAO,oBAAoB;AACtD,IAAM,uBAAuB,OAAO,sBAAsB;AAC1D,IAAM,uBAAuB,OAAO,sBAAsB;AAC1D,IAAM,sBAAsB,OAAO,qBAAqB;AACxD,IAAM,0BAA0B,OAAO,yBAAyB;AAChE,IAAM,oBAAoB,OAAO,mBAAmB;AAIpD,SAAS,cAAiB,KAAa,MAAiB;CACtD,MAAM,UAAU,OAAU,GAAG;CAC7B,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,GAAG,KAAK,oCAAoC;CAE9D,OAAO;AACT;AAEA,SAAgB,wBAAwB,SAAwC;CAC9E,QAAQ,oBAAoB,OAAO;AACrC;AAEA,SAAgB,sBAA+C;CAC7D,OAAO,cAAuC,oBAAoB,qBAAqB;AACzF;AAEA,SAAgB,wBAA0C,SAA2C;CACnG,QAAQ,oBAAoB,OAAO;AACrC;AAEA,SAAgB,sBAA0E;CACxF,OAAO,cAA0C,oBAAoB,qBAAqB;AAC5F;AAEA,SAAgB,0BAAoE,SAAqD;CACvI,QAAQ,sBAAsB,OAAO;AACvC;AAEA,SAAgB,wBAAwH;CACtI,OAAO,cAAoD,sBAAsB,uBAAuB;AAC1G;AAEA,SAAgB,0BAAoE,SAAqD;CACvI,QAAQ,sBAAsB,OAAO;AACvC;AAEA,SAAgB,wBAAwH;CACtI,OAAO,cAAoD,sBAAsB,uBAAuB;AAC1G;AAEA,SAAgB,yBAA2C,SAA4C;CACrG,QAAQ,qBAAqB,OAAO;AACtC;AAEA,SAAgB,uBAA4E;CAC1F,OAAO,cAA2C,qBAAqB,sBAAsB;AAC/F;AAEA,SAAgB,4BAAsE,SAAuD;CAC3I,QAAQ,yBAAyB,OAAO;AAC1C;AAEA,SAAgB,0BAA4H;CAC1I,OAAO,cAAsD,yBAAyB,yBAAyB;AACjH;;AAGA,SAAgB,yBAA+B;CAC7C,QAAQ,mBAAmB,IAAI;AACjC;;AAGA,SAAgB,qBAA8B;CAC5C,OAAO,OAAgB,mBAAmB,KAAK;AACjD;AAIA,SAAgB,wBAAkE,SAA4C;CAC5H,wBAAwB;EAAE,SAAS,QAAQ;EAAS,SAAS,QAAQ;EAAS,OAAO,QAAQ;EAAO,UAAU,QAAQ;CAAS,CAAC;CAChI,wBAA2B;EAAE,SAAS,QAAQ;EAAS,WAAW,QAAQ;EAAW,cAAc,QAAQ;EAAc,YAAY,QAAQ;CAAW,CAAC;CACzJ,0BAAqC;EAAE,cAAc,QAAQ;EAAc,YAAY,QAAQ;EAAY,eAAe,QAAQ;EAAe,UAAU,QAAQ;EAAU,iBAAiB,QAAQ;CAAgB,CAAC;CACvN,0BAAqC;EAAE,YAAY,QAAQ;EAAY,YAAY,QAAQ;EAAY,gBAAgB,QAAQ;CAAe,CAAC;CAC/I,yBAA4B;EAAE,2BAA2B,QAAQ;EAA2B,UAAU,QAAQ;EAAU,aAAa,QAAQ;EAAa,cAAc,QAAQ;EAAc,iBAAiB,QAAQ;EAAiB,qBAAqB,QAAQ;EAAqB,WAAW,QAAQ;EAAW,aAAa,QAAQ;CAAY,CAAC;CAC1V,4BAAuC;EAAE,UAAU,QAAQ;EAAU,WAAW,QAAQ;CAAU,CAAC;AACrG"}