@rotki/ui-library 2.21.0 → 2.22.0

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

@@ -0,0 +1,55 @@
+import type { TableColumn } from '../../../components/tables/RuiTableHead.vue';
+import { type GroupHeader } from '../../../composables/tables/data-table/types.js';
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        filtered: (T | GroupHeader<T>)[];
+        loading: boolean;
+        noData: boolean;
+        empty: {
+            label?: string;
+            description?: string;
+        };
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: Partial<Record<`item.${string}`, (props: {
+        column: TableColumn<T>;
+        row: T;
+        index: number;
+    }) => any> & {
+        'body.prepend'?: (props: {
+            colspan: number;
+        }) => any;
+        'body.append'?: (props: {
+            colspan: number;
+        }) => any;
+        'group.header'?: (props: {
+            colspan: number;
+            header: GroupHeader<T>;
+            isOpen: boolean;
+            toggle: () => void;
+        }) => any;
+        'group.header.content'?: (props: {
+            header: GroupHeader<T>;
+            groupKey: string;
+        }) => any;
+        'expanded-item'?: (props: {
+            row: T;
+            index: number;
+        }) => any;
+        'no-data'?: () => any;
+        'empty-description'?: () => any;
+    }>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,78 @@
+import { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from "./context.js";
+import RuiDataTableEmptyRow_default from "./RuiDataTableEmptyRow.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";
+//#region src/components/tables/data-table/RuiDataTableBody.vue?vue&type=script&setup=true&lang.ts
+var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableBody",
+	props: {
+		filtered: {},
+		loading: { type: Boolean },
+		noData: { type: Boolean },
+		empty: {}
+	},
+	setup(__props) {
+		const { classes, colspan } = useDataTableStyling();
+		const { itemSlotKeys } = useDataTableColumns();
+		const { getRowId } = useDataTableRowIdentity();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tbody", { class: normalizeClass(unref(classes).tbody) }, [
+				_ctx.$slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", {
+					key: 0,
+					colspan: unref(colspan)
+				}) : 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}`,
+						row
+					}, createSlots({ _: 2 }, [_ctx.$slots["group.header"] ? {
+						name: "group.header",
+						fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header", mergeProps({ ref_for: true }, slotData))]),
+						key: "0"
+					} : void 0, _ctx.$slots["group.header.content"] ? {
+						name: "group.header.content",
+						fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header.content", mergeProps({ ref_for: true }, slotData))]),
+						key: "1"
+					} : void 0]), 1032, ["row"])) : (openBlock(), createBlock(RuiDataTableRow_default, {
+						key: `row-${unref(getRowId)(row)}`,
+						row,
+						index
+					}, createSlots({ _: 2 }, [renderList(unref(itemSlotKeys), (key) => {
+						return {
+							name: `item.${key}`,
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, `item.${key}`, mergeProps({ ref_for: true }, slotData))])
+						};
+					}), _ctx.$slots["expanded-item"] ? {
+						name: "expanded-item",
+						fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", mergeProps({ ref_for: true }, slotData))]),
+						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,
+					empty: __props.empty
+				}, createSlots({ _: 2 }, [_ctx.$slots["no-data"] ? {
+					name: "no-data",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "no-data")]),
+					key: "0"
+				} : void 0, _ctx.$slots["empty-description"] ? {
+					name: "empty-description",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
+					key: "1"
+				} : void 0]), 1032, ["empty"])) : createCommentVNode("", true),
+				_ctx.$slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", {
+					key: 3,
+					colspan: unref(colspan)
+				}) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableBody_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableBody.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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;;uBAI9C,mBAwFQ,SAAA,EAxFA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,KAAK,EAAA,GAAA;IAGlBA,KAAAA,OAAM,kBADd,WAIE,KAAA,QAAA,gBAAA;;KAFC,SAAS,MAAA,OAAA;;sBAGZ,mBAsDW,UAAA,MAAA,WAtDsB,QAAA,WAAf,KAAK,UAAK;8DAEjB,MAAA,KAAA,CAAK,CAAC,GAAG,KAAA,UAAA,GADlB,YAyBuB,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;+BAGEA,KAAAA,OAAM,kBAAA;YACX;mBAAc,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;iBAIZA,KAAAA,OAAM,0BAAA;YACX;mBAAsB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;mDAItB,YA0BkB,yBAAA;MAxBf,KAAG,OAAS,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;0CAGQ,MAAA,YAAA,IAAP,QAAG;;qBACD;oBAAS,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OADjB,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;SAIZA,KAAAA,OAAM,mBAAA;YACX;mBAAe,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;IAKM,QAAA,WAAW,QAAA,UAAA,UAAA,GAAzC,YAAmD,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAAA,UAAA,GAD5B,YAkBuB,8BAAA;;KAhBpB,OAAO,QAAA;8BAGAA,KAAAA,OAAM,aAAA;WACX;uBAGsB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;gBAGjBA,KAAAA,OAAM,uBAAA;WACX;uBAGgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BA,KAAAA,OAAM,iBADd,WAIE,KAAA,QAAA,eAAA;;KAFC,SAAS,MAAA,OAAA"}

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

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

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

@@ -0,0 +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 } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\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'\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else>\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.d.ts

@@ -0,0 +1,30 @@
+import type { TableColumn } from '../../../components/tables/RuiTableHead.vue';
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        column: TableColumn<T>;
+        row: T;
+        index: number;
+        rowId?: T[keyof T];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            column: TableColumn<T>;
+            row: T;
+            index: number;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,54 @@
+import { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from "./context.js";
+import RuiExpandButton_default from "../RuiExpandButton.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/tables/data-table/RuiDataTableCell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["colspan", "rowspan"];
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "shrink-0 text-left font-medium text-rui-text-secondary",
+	"data-id": "cell-label"
+};
+var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableCell",
+	props: {
+		column: {},
+		row: {},
+		index: {},
+		rowId: {}
+	},
+	setup(__props) {
+		const { cellValue, columnAttr } = useDataTableColumns();
+		const { isExpanded, onToggleExpand } = useDataTableExpansion();
+		const { isMobile } = useDataTableStyling();
+		const mobileLabel = computed(() => {
+			const label = __props.column[columnAttr];
+			return label === void 0 || label === null ? "" : String(label);
+		});
+		const showMobileLabel = computed(() => get(isMobile) && __props.column.key !== "expand" && get(mobileLabel).length > 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("td", {
+				class: normalizeClass([
+					__props.column.tdClass,
+					__props.column.cellClass,
+					unref(isMobile) ? "flex items-start justify-between gap-4 text-right" : ""
+				]),
+				colspan: __props.column.colspan ?? 1,
+				rowspan: __props.column.rowspan ?? 1
+			}, [unref(showMobileLabel) ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(mobileLabel)), 1)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(isMobile) ? "min-w-0 ml-auto" : "contents") }, [renderSlot(_ctx.$slots, "default", {
+				column: __props.column,
+				row: __props.row,
+				index: __props.index
+			}, () => [__props.column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
+				key: 0,
+				expanded: __props.rowId !== void 0 && unref(isExpanded)(__props.rowId),
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpand)(__props.row))
+			}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64))])], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableCell_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableCell.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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 } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\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'\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <template v-else>\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,eAAe,oBAAuB;EACzD,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;EAEzC,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;;uBAIrH,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;OAGhB,MAAA,eAAA,KAAA,UAAA,GADR,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;YAUH,CAPG,QAAA,OAAO,QAAG,YAAA,UAAA,GADlB,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;8CAE5B,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableEmptyRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableEmptyRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\n\ndefineProps<{\n  empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<{\n  'no-data'?: () => any;\n  'empty-description'?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-empty\"\n  >\n    <Transition\n      appear\n      enter-active-class=\"transition ease-out duration-200 delay-200\"\n      enter-from-class=\"opacity-0 translate-y-1\"\n      enter-to-class=\"opacity-100 translate-y-0\"\n      leave-active-class=\"transition ease-in duration-150\"\n      leave-from-class=\"opacity-100 translate-y-0\"\n      leave-to-class=\"opacity-0 translate-y-1\"\n    >\n      <td\n        :class=\"classes.td\"\n        :colspan=\"colspan\"\n      >\n        <slot name=\"no-data\">\n          <RuiTableEmptyState\n            :label=\"empty.label\"\n            :description=\"empty.description\"\n          >\n            <template\n              v-if=\"$slots['empty-description']\"\n              #description\n            >\n              <slot name=\"empty-description\" />\n            </template>\n          </RuiTableEmptyState>\n        </slot>\n      </td>\n    </Transition>\n  </tr>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    empty: {
+        label?: string;
+        description?: string;
+    };
+};
+type __VLS_Slots = {
+    'no-data'?: () => any;
+    'empty-description'?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { useDataTableStyling } from "./context.js";
+import RuiTableEmptyState_default from "../RuiTableEmptyState.js";
+import { Transition, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/tables/data-table/RuiDataTableEmptyRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["colspan"];
+var RuiDataTableEmptyRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableEmptyRow",
+	props: { empty: {} },
+	setup(__props) {
+		const { classes, colspan } = useDataTableStyling();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", {
+				class: normalizeClass(unref(classes).trEmpty),
+				"data-id": "row-empty"
+			}, [createVNode(Transition, {
+				appear: "",
+				"enter-active-class": "transition ease-out duration-200 delay-200",
+				"enter-from-class": "opacity-0 translate-y-1",
+				"enter-to-class": "opacity-100 translate-y-0",
+				"leave-active-class": "transition ease-in duration-150",
+				"leave-from-class": "opacity-100 translate-y-0",
+				"leave-to-class": "opacity-0 translate-y-1"
+			}, {
+				default: withCtx(() => [createElementVNode("td", {
+					class: normalizeClass(unref(classes).td),
+					colspan: unref(colspan)
+				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [createVNode(RuiTableEmptyState_default, {
+					label: __props.empty.label,
+					description: __props.empty.description
+				}, createSlots({ _: 2 }, [_ctx.$slots["empty-description"] ? {
+					name: "description",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
+					key: "0"
+				} : void 0]), 1032, ["label", "description"])])], 10, _hoisted_1)]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableEmptyRow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableEmptyRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\n\ndefineProps<{\n  empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<{\n  'no-data'?: () => any;\n  'empty-description'?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-empty\"\n  >\n    <Transition\n      appear\n      enter-active-class=\"transition ease-out duration-200 delay-200\"\n      enter-from-class=\"opacity-0 translate-y-1\"\n      enter-to-class=\"opacity-100 translate-y-0\"\n      leave-active-class=\"transition ease-in duration-150\"\n      leave-from-class=\"opacity-100 translate-y-0\"\n      leave-to-class=\"opacity-0 translate-y-1\"\n    >\n      <td\n        :class=\"classes.td\"\n        :colspan=\"colspan\"\n      >\n        <slot name=\"no-data\">\n          <RuiTableEmptyState\n            :label=\"empty.label\"\n            :description=\"empty.description\"\n          >\n            <template\n              v-if=\"$slots['empty-description']\"\n              #description\n            >\n              <slot name=\"empty-description\" />\n            </template>\n          </RuiTableEmptyState>\n        </slot>\n      </td>\n    </Transition>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;EAaA,MAAM,EAAE,SAAS,YAAY,oBAAoB;;uBAI/C,mBAgCK,MAAA;IA/BF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,OAAO;IACvB,WAAQ;OAER,YA2Ba,YAAA;IA1BX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;2BAmBV,CAjBL,mBAiBK,MAAA;KAhBF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;KACjB,SAAS,MAAA,OAAA;QAEV,WAYO,KAAA,QAAA,WAAA,CAAA,SAAA,CAXL,YAUqB,4BAAA;KATlB,OAAO,QAAA,MAAM;KACb,aAAa,QAAA,MAAM;8BAGZA,KAAAA,OAAM,uBAAA;WACX;uBAEgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +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// On mobile the expanded content attaches beneath its card: matching side\n// borders and a rounded, bordered bottom edge. The top border is intentionally\n// left off — the parent card's flattened bottom edge acts as the divider.\n// `!border-b` defeats the `divide-y-0` on the mobile tbody.\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":""}

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

@@ -0,0 +1,26 @@
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        row: T;
+        index: number;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'expanded-item': (props: {
+            row: T;
+            index: number;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,31 @@
+import { useDataTableStyling } from "./context.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#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";
+var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableExpandedRow",
+	props: {
+		row: {},
+		index: {}
+	},
+	setup(__props) {
+		const { classes, colspan, isMobile } = useDataTableStyling();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", {
+				class: normalizeClass([unref(classes).trExpandable, unref(isMobile) ? mobileExpandedClass : ""]),
+				"data-id": "row-expanded"
+			}, [createElementVNode("td", {
+				colspan: unref(colspan),
+				class: normalizeClass(unref(classes).td)
+			}, [renderSlot(_ctx.$slots, "expanded-item", {
+				row: __props.row,
+				index: __props.index
+			})], 10, _hoisted_1)], 2);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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// On mobile the expanded content attaches beneath its card: matching side\n// borders and a rounded, bordered bottom edge. The top border is intentionally\n// left off — the parent card's flattened bottom edge acts as the divider.\n// `!border-b` defeats the `divide-y-0` on the mobile tbody.\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":";;;;AAkBA,IAAM,sBAAsB;;;;;;;;EAN5B,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;;uBAUzD,mBAcK,MAAA;IAbF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,cAAc,MAAA,QAAA,IAAW,sBAAmB,EAAA,CAAA;IAC7D,WAAQ;OAER,mBASK,MAAA;IARF,SAAS,MAAA,OAAA;IACT,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;OAElB,WAIE,KAAA,QAAA,iBAAA;IAFC,KAAK,QAAA;IACL,OAAO,QAAA"}

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

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

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

@@ -0,0 +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// On mobile the group header reads as a rounded section label: separated from\n// the previous group's cards above and its own cards below, aligned to the\n// card content padding.\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":""}

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

@@ -0,0 +1,32 @@
+import type { GroupHeader } from '../../../composables/tables/data-table/types.js';
+declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        row: GroupHeader<T>;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'group.header'?: (props: {
+            colspan: number;
+            header: GroupHeader<T>;
+            isOpen: boolean;
+            toggle: () => void;
+        }) => any;
+        'group.header.content'?: (props: {
+            header: GroupHeader<T>;
+            groupKey: string;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,85 @@
+import RuiIcon_default from "../../icons/RuiIcon.js";
+import RuiButton_default from "../../buttons/button/RuiButton.js";
+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";
+//#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 mobileGroupClass = "mt-6 first:mt-0 mb-2 rounded-lg";
+var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableGroupRow",
+	props: { row: {} },
+	setup(__props) {
+		const { classes, colspan, isMobile } = useDataTableStyling();
+		const { groupExpandButtonPosition, groupKey, isExpandedGroup, onCopyGroup, onToggleExpandGroup, onUngroup } = useDataTableGrouping();
+		const isOpen = computed(() => isExpandedGroup(__props.row.group));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", {
+				class: normalizeClass([unref(classes).trGroup, unref(isMobile) ? mobileGroupClass : ""]),
+				"data-id": "row-group"
+			}, [renderSlot(_ctx.$slots, "group.header", {
+				colspan: unref(colspan),
+				header: __props.row,
+				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"]),
+				colspan: unref(colspan)
+			}, [createElementVNode("div", _hoisted_2, [
+				unref(groupExpandButtonPosition) === unref(GroupExpandButtonPosition).start ? (openBlock(), createBlock(RuiExpandButton_default, {
+					key: 0,
+					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
+				})]),
+				createVNode(RuiTooltip_default, {
+					options: { placement: "top" },
+					class: "ml-auto mr-2"
+				}, {
+					activator: withCtx(() => [createVNode(RuiButton_default, {
+						size: "sm",
+						variant: "text",
+						icon: "",
+						"data-id": "group-ungroup-button",
+						onClick: _cache[2] || (_cache[2] = ($event) => unref(onUngroup)())
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, {
+							name: "lu-trash-2",
+							size: "14"
+						})]),
+						_: 1
+					})]),
+					default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" Ungroup ", -1))]),
+					_: 1
+				}),
+				unref(groupExpandButtonPosition) === unref(GroupExpandButtonPosition).end ? (openBlock(), createBlock(RuiExpandButton_default, {
+					key: 1,
+					expanded: unref(isOpen),
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(onToggleExpandGroup)(__props.row.group, __props.row.identifier))
+				}, null, 8, ["expanded"])) : createCommentVNode("", true)
+			])], 10, _hoisted_1)])], 2);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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// On mobile the group header reads as a rounded section label: separated from\n// the previous group's cards above and its own cards below, aligned to the\n// card content padding.\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":";;;;;;;;;;AA4BA,IAAM,mBAAmB;;;;;EALzB,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;EAM3D,MAAM,EACJ,2BACA,UACA,iBACA,aACA,qBACA,cACE,qBAAwB;EAE5B,MAAM,SAAS,eAAwB,gBAAgB,QAAA,IAAI,KAAK,CAAC;;uBAI/D,mBAsEK,MAAA;IArEF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,SAAS,MAAA,QAAA,IAAW,mBAAgB,EAAA,CAAA;IACrD,WAAQ;OAGR,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;YA2DvD,CAzDL,mBAwDK,MAAA;IAvDF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,IAAI,MAAA,QAAA,IAAQ,gBAAA,MAAA,CAAA;IAC5B,SAAS,MAAA,OAAA;OAEV,mBAmDM,OAnDN,YAmDM;IAjDI,MAAA,yBAAA,MAA8B,MAAA,yBAAA,CAAyB,CAAC,SAAA,UAAA,GADhE,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;aAeJ,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;;4BAKrB,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;;6BAKf,CAHF,YAGE,iBAAA;OAFA,MAAK;OACL,MAAK;;;;4BAKb,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFa,aAEb,EAAA,EAAA,CAAA;;;IAEQ,MAAA,yBAAA,MAA8B,MAAA,yBAAA,CAAyB,CAAC,OAAA,UAAA,GADhE,YAIE,yBAAA;;KAFC,UAAU,MAAA,MAAA;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,mBAAA,CAAmB,CAAC,QAAA,IAAI,OAAO,QAAA,IAAI,UAAU"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableLoadingRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableLoadingRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr>\n    <td\n      :class=\"classes.tbodyLoader\"\n      :colspan=\"colspan\"\n      data-id=\"tbody-loader\"\n    >\n      <div :class=\"classes.tbodyLoaderContent\">\n        <RuiProgress\n          color=\"primary\"\n          variant=\"indeterminate\"\n          circular\n        />\n      </div>\n    </td>\n  </tr>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;