@rotki/ui-library 2.25.1 → 2.26.1

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

@@ -1,26 +1,62 @@
 import { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from "./context.js";
 import RuiDataTableEmptyRow_default from "./RuiDataTableEmptyRow.js";
+import RuiDataTableErrorRow_default from "./RuiDataTableErrorRow.js";
 import RuiDataTableGroupRow_default from "./RuiDataTableGroupRow.js";
 import RuiDataTableLoadingRow_default from "./RuiDataTableLoadingRow.js";
 import RuiDataTableRow_default from "./RuiDataTableRow.js";
 import { isRow } from "../../../composables/tables/data-table/types.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, unref, withCtx } from "vue";
 //#region src/components/tables/data-table/RuiDataTableBody.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-stale"];
 var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableBody",
 	props: {
 		filtered: {},
 		loading: { type: Boolean },
 		noData: { type: Boolean },
-		empty: {}
+		empty: {},
+		error: {},
+		errorTitle: {},
+		retryText: {}
 	},
-	setup(__props) {
+	emits: ["retry"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
 		const { classes, colspan } = useDataTableStyling();
 		const { itemSlotKeys } = useDataTableColumns();
 		const { getRowId } = useDataTableRowIdentity();
+		/**
+		* Loading outranks a failure, which outranks the empty state: rows that did
+		* not arrive are not rows that are not there. Rows kept from an earlier read
+		* stay below the error.
+		*/
+		const showError = computed(() => !!__props.error && !__props.loading);
+		/**
+		* Rows shown while a read is in flight are the previous result, so they dim
+		* until it lands. An empty table shows its loading row instead, undimmed.
+		*/
+		const stale = computed(() => __props.loading && !__props.noData);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("tbody", { class: normalizeClass(unref(classes).tbody) }, [
+			return openBlock(), createElementBlock("tbody", {
+				class: normalizeClass(["transition-opacity duration-150", [unref(classes).tbody, { "opacity-50": unref(stale) }]]),
+				"data-stale": unref(stale) || void 0
+			}, [
 				_ctx.$slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", { colspan: unref(colspan) }, void 0, void 0, 0) : createCommentVNode("", true),
+				unref(showError) ? (openBlock(), createBlock(RuiDataTableErrorRow_default, {
+					key: 1,
+					message: __props.error,
+					title: __props.errorTitle,
+					"retry-text": __props.retryText,
+					onRetry: _cache[0] || (_cache[0] = ($event) => emit("retry"))
+				}, createSlots({ _: 2 }, [_ctx.$slots.error ? {
+					name: "error",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "error")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"message",
+					"title",
+					"retry-text"
+				])) : createCommentVNode("", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filtered, (row, index) => {
 					return openBlock(), createElementBlock(Fragment, null, [!unref(isRow)(row) ? (openBlock(), createBlock(RuiDataTableGroupRow_default, {
 						key: `group-${row.identifier}`,
@@ -48,9 +84,9 @@ var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						key: "0"
 					} : void 0]), 1032, ["row", "index"]))], 64);
 				}), 256)),
-				__props.loading && __props.noData ? (openBlock(), createBlock(RuiDataTableLoadingRow_default, { key: 1 })) : createCommentVNode("", true),
-				__props.noData && __props.empty && !__props.loading ? (openBlock(), createBlock(RuiDataTableEmptyRow_default, {
-					key: 2,
+				__props.loading && __props.noData ? (openBlock(), createBlock(RuiDataTableLoadingRow_default, { key: 2 })) : createCommentVNode("", true),
+				__props.noData && __props.empty && !__props.loading && !unref(showError) ? (openBlock(), createBlock(RuiDataTableEmptyRow_default, {
+					key: 3,
 					empty: __props.empty
 				}, createSlots({ _: 2 }, [_ctx.$slots["no-data"] ? {
 					name: "no-data",
@@ -61,8 +97,8 @@ var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
 					key: "1"
 				} : void 0]), 1032, ["empty"])) : createCommentVNode("", true),
-				_ctx.$slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", { colspan: unref(colspan) }, void 0, void 0, 3) : createCommentVNode("", true)
-			], 2);
+				_ctx.$slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", { colspan: unref(colspan) }, void 0, void 0, 4) : createCommentVNode("", true)
+			], 10, _hoisted_1);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\ndefineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\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    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n</script>\n\n<template>\n  <tbody :class=\"classes.tbody\">\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\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      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,SAAS,YAAY,oBAAoB;EACjD,MAAM,EAAE,iBAAiB,oBAAuB;EAChD,MAAM,EAAE,aAAa,wBAA2B;;GAI9C,OAAA,UAAA,GAAA,mBAwFQ,SAAA,EAxFA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,KAAK,EAAA,GAAA;IAGlBA,KAAAA,OAAM,kBADd,WAIE,KAAA,QAAA,gBAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAGnB,UAAA,IAAA,GAAA,mBAsDW,UAAA,MAAA,WAtDsB,QAAA,WAAf,KAAK,UAAK;KAEjB,OAAA,UAAA,GAAA,mBAAA,UAAA,MAAA,CAAA,CAAA,MAAA,KAAA,CAAK,CAAC,GAAG,KADlB,UAAA,GAAA,YAyBuB,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;KAGEA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,kBAAA;MACX,MAAA;MAGD,IAAA,SAHe,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAIZA,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,0BAAA;MACX,MAAA;MAGD,IAAA,SAHuB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAItB,IAAA,KAAA,CAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,MAAA,UAAA,GAAA,YA0BkB,yBAAA;MAxBf,KAAG,OAAS,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;KAGQ,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,MAAA,YAAA,IAAP,QAAG;;OACD,MAAA,QAAA;OAGT,IAAA,SAHkB,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OADjB,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAIZA,CAAAA,GAAAA,KAAAA,OAAM,mBAAA;MACX,MAAA;MAGD,IAAA,SAHgB,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;IAKM,QAAA,WAAW,QAAA,UAAzC,UAAA,GAAA,YAAmD,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAD5B,UAAA,GAAA,YAkBuB,8BAAA;;KAhBpB,OAAO,QAAA;IAGAA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,aAAA;KACX,MAAA;KAGD,IAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGjBA,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,uBAAA;KACX,MAAA;KAGD,IAAA,cAAiC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BA,KAAAA,OAAM,iBADd,WAIE,KAAA,QAAA,eAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}
+{"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableErrorRow from '@/components/tables/data-table/RuiDataTableErrorRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nconst { error, loading, noData } = defineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n  error: string;\n  errorTitle: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\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    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n    'error'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n\n/**\n * Loading outranks a failure, which outranks the empty state: rows that did\n * not arrive are not rows that are not there. Rows kept from an earlier read\n * stay below the error.\n */\nconst showError = computed<boolean>(() => !!error && !loading);\n\n/**\n * Rows shown while a read is in flight are the previous result, so they dim\n * until it lands. An empty table shows its loading row instead, undimmed.\n */\nconst stale = computed<boolean>(() => loading && !noData);\n</script>\n\n<template>\n  <tbody\n    class=\"transition-opacity duration-150\"\n    :class=\"[classes.tbody, { 'opacity-50': stale }]\"\n    :data-stale=\"stale || undefined\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <RuiDataTableErrorRow\n      v-if=\"showError\"\n      :message=\"error\"\n      :title=\"errorTitle\"\n      :retry-text=\"retryText\"\n      @retry=\"emit('retry')\"\n    >\n      <template\n        v-if=\"$slots.error\"\n        #error\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"error\" />\n      </template>\n    </RuiDataTableErrorRow>\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\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      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading && !showError\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableCell.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n/**\n * The built-in toggle is only a fallback for a consumer that does not drive\n * the expand column itself. One that provides `#item.expand` owns the decision\n * per row, rendering nothing for a row that cannot expand among them, so an\n * empty slot must not fall back to a toggle they deliberately withheld.\n */\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableCell.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column, row } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n/**\n * The built-in toggle is only a fallback for a consumer that does not drive\n * the expand column itself. One that provides `#item.expand` owns the decision\n * per row, rendering nothing for a row that cannot expand among them, so an\n * empty slot must not fall back to a toggle they deliberately withheld.\n */\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n\n/** A stacked card shows a placeholder for an empty value rather than a bare label. */\nconst showMobilePlaceholder = computed<boolean>(() => {\n  if (!get(showMobileLabel))\n    return false;\n  const value = cellValue(row, column.key);\n  return value === undefined || value === null || value === '';\n});\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left text-caption text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <span\n          v-else-if=\"showMobilePlaceholder\"\n          class=\"text-rui-text-disabled\"\n          data-id=\"cell-placeholder\"\n        >\n          –\n        </span>\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":""}

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

@@ -7,9 +7,14 @@ var _hoisted_1 = ["colspan", "rowspan"];
 var _hoisted_2 = {
 	key: 0,
 	"aria-hidden": "true",
-	class: "shrink-0 text-left font-medium text-rui-text-secondary",
+	class: "shrink-0 text-left text-caption text-rui-text-secondary",
 	"data-id": "cell-label"
 };
+var _hoisted_3 = {
+	key: 1,
+	class: "text-rui-text-disabled",
+	"data-id": "cell-placeholder"
+};
 var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableCell",
 	props: {
@@ -34,6 +39,12 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			return label === void 0 || label === null ? "" : String(label);
 		});
 		const showMobileLabel = computed(() => get(isMobile) && __props.column.key !== "expand" && get(mobileLabel).length > 0);
+		/** A stacked card shows a placeholder for an empty value rather than a bare label. */
+		const showMobilePlaceholder = computed(() => {
+			if (!get(showMobileLabel)) return false;
+			const value = cellValue(__props.row, __props.column.key);
+			return value === void 0 || value === null || value === "";
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("td", {
 				class: normalizeClass([
@@ -51,7 +62,7 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				key: 0,
 				expanded: __props.rowId !== void 0 && unref(isExpanded)(__props.rowId),
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpand)(__props.row))
-			}, null, 8, ["expanded"])) : __props.column.key !== "expand" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64)) : createCommentVNode("", true)])], 2)], 10, _hoisted_1);
+			}, null, 8, ["expanded"])) : unref(showMobilePlaceholder) ? (openBlock(), createElementBlock("span", _hoisted_3, " – ")) : __props.column.key !== "expand" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64)) : createCommentVNode("", true)])], 2)], 10, _hoisted_1);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n/**\n * The built-in toggle is only a fallback for a consumer that does not drive\n * the expand column itself. One that provides `#item.expand` owns the decision\n * per row, rendering nothing for a row that cannot expand among them, so an\n * empty slot must not fall back to a toggle they deliberately withheld.\n */\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,YAAY,iBAAiB,oBAAuB;EACvE,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;;;;;;;EAQzC,MAAM,mBAAmB,eAAwB,aAAa,IAAI,QAAQ,CAAC;EAE3E,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;GAIrH,OAAA,UAAA,GAAA,mBAiCK,MAAA;IAhCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;GAGhB,GAAA,CAAA,MAAA,eAAA,KADR,UAAA,GAAA,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAeM,OAAA,EAfA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAaO,KAAA,QAAA,WAAA;IAZJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;GAHV,SAaO,CAPG,QAAA,OAAO,QAAG,YAAA,CAAkB,MAAA,gBAAA,KADpC,UAAA,GAAA,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;GAEP,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,KAAA,QAAA,OAAO,QAAG,YAA/B,UAAA,GAAA,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CADN,gBAAA,gBAAA,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column, row } = defineProps<{\n  column: TableColumn<T>;\n  row: T;\n  index: number;\n  rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n  default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n/**\n * The built-in toggle is only a fallback for a consumer that does not drive\n * the expand column itself. One that provides `#item.expand` owns the decision\n * per row, rendering nothing for a row that cannot expand among them, so an\n * empty slot must not fall back to a toggle they deliberately withheld.\n */\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n\n/** A stacked card shows a placeholder for an empty value rather than a bare label. */\nconst showMobilePlaceholder = computed<boolean>(() => {\n  if (!get(showMobileLabel))\n    return false;\n  const value = cellValue(row, column.key);\n  return value === undefined || value === null || value === '';\n});\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left text-caption text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <span\n          v-else-if=\"showMobilePlaceholder\"\n          class=\"text-rui-text-disabled\"\n          data-id=\"cell-placeholder\"\n        >\n          –\n        </span>\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,YAAY,iBAAiB,oBAAuB;EACvE,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;;;;;;;EAQzC,MAAM,mBAAmB,eAAwB,aAAa,IAAI,QAAQ,CAAC;EAE3E,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;EAGvH,MAAM,wBAAwB,eAAwB;GACpD,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO;GACT,MAAM,QAAQ,UAAU,QAAA,KAAK,QAAA,OAAO,GAAG;GACvC,OAAO,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;EAC5D,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAwCK,MAAA;IAvCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;GAGhB,GAAA,CAAA,MAAA,eAAA,KADR,UAAA,GAAA,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAsBM,OAAA,EAtBA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAoBO,KAAA,QAAA,WAAA;IAnBJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;GAHV,SAoBO,CAdG,QAAA,OAAO,QAAG,YAAA,CAAkB,MAAA,gBAAA,KADpC,UAAA,GAAA,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;GAGf,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,KAAA,MAAA,qBAAA,KADb,UAAA,GAAA,mBAMO,QANP,YAIC,KAED,KACqB,QAAA,OAAO,QAAG,YAA/B,UAAA,GAAA,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CADN,gBAAA,gBAAA,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

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

@@ -0,0 +1,7 @@
+import RuiDataTableErrorRow_vue_vue_type_script_setup_true_lang_default from "./RuiDataTableErrorRow.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tables/data-table/RuiDataTableErrorRow.vue
+var RuiDataTableErrorRow_default = RuiDataTableErrorRow_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiDataTableErrorRow_default as default };
+
+//# sourceMappingURL=RuiDataTableErrorRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableErrorRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableErrorRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\n\ndefineProps<{\n  message: string;\n  title: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  error?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-error\"\n  >\n    <td\n      :class=\"classes.td\"\n      :colspan=\"colspan\"\n    >\n      <slot name=\"error\">\n        <RuiTableErrorState\n          :action-text=\"retryText\"\n          :message=\"message\"\n          :title=\"title\"\n          @action=\"emit('retry')\"\n        />\n      </slot>\n    </td>\n  </tr>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableErrorRow.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    message: string;
+    title: string;
+    retryText: string;
+};
+type __VLS_Slots = {
+    error?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,40 @@
+import { useDataTableStyling } from "./context.js";
+import RuiTableErrorState_default from "../RuiTableErrorState.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region src/components/tables/data-table/RuiDataTableErrorRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["colspan"];
+var RuiDataTableErrorRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableErrorRow",
+	props: {
+		message: {},
+		title: {},
+		retryText: {}
+	},
+	emits: ["retry"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { classes, colspan } = useDataTableStyling();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", {
+				class: normalizeClass(unref(classes).trEmpty),
+				"data-id": "row-error"
+			}, [createElementVNode("td", {
+				class: normalizeClass(unref(classes).td),
+				colspan: unref(colspan)
+			}, [renderSlot(_ctx.$slots, "error", {}, () => [createVNode(RuiTableErrorState_default, {
+				"action-text": __props.retryText,
+				message: __props.message,
+				title: __props.title,
+				onAction: _cache[0] || (_cache[0] = ($event) => emit("retry"))
+			}, null, 8, [
+				"action-text",
+				"message",
+				"title"
+			])])], 10, _hoisted_1)], 2);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableErrorRow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableErrorRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableErrorRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableErrorRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\n\ndefineProps<{\n  message: string;\n  title: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  error?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-error\"\n  >\n    <td\n      :class=\"classes.td\"\n      :colspan=\"colspan\"\n    >\n      <slot name=\"error\">\n        <RuiTableErrorState\n          :action-text=\"retryText\"\n          :message=\"message\"\n          :title=\"title\"\n          @action=\"emit('retry')\"\n        />\n      </slot>\n    </td>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAUA,MAAM,OAAO;EAQb,MAAM,EAAE,SAAS,YAAY,oBAAoB;;GAI/C,OAAA,UAAA,GAAA,mBAiBK,MAAA;IAhBF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,OAAO;IACvB,WAAQ;GAER,GAAA,CAAA,mBAYK,MAAA;IAXF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;IACjB,SAAS,MAAA,OAAA;GAEV,GAAA,CAAA,WAOO,KAAA,QAAA,SAAA,CAAA,SAAA,CANL,YAKE,4BAAA;IAJC,eAAa,QAAA;IACb,SAAS,QAAA;IACT,OAAO,QAAA;IACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA"}

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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"}