@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:!px-1 [&_input]:!text-xs [&_input]:!leading-5',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: '!text-xs !pl-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: '!min-h-7',\n        pageInput: '[&_input]:!py-1',\n      },\n      false: {\n        select: '!min-h-8',\n        pageInput: '[&_input]:!py-1.5',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        variant=\"outlined\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        variant=\"outlined\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        variant=\"outlined\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n    ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: 'text-xs! pl-3!',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: 'min-h-7!',\n        pageInput: '[&_input]:py-1!',\n      },\n      false: {\n        select: 'min-h-8!',\n        pageInput: '[&_input]:py-1.5!',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 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 = {

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\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":""}
+{"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-rui-divider rounded-b-rui-card 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    <!-- an inset on every side: the cell's 16px sides, matched top and bottom instead of a row's dense padding -->\n    <td\n      :colspan=\"colspan\"\n      class=\"py-4\"\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

@@ -2,7 +2,7 @@ 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 mobileExpandedClass = "block border-x border-b! border-rui-divider rounded-b-rui-card 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,
@@ -20,7 +20,7 @@ var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__P
 		/**
 		* On mobile the expanded content attaches beneath its card: matching side
 		* borders and a rounded, bordered bottom edge. It carries no top border, since
-		* the parent card's flattened bottom edge is the divider, and `!border-b`
+		* 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)" };
@@ -30,7 +30,7 @@ var RuiDataTableExpandedRow_vue_vue_type_script_setup_true_lang_default = /*@__P
 				"data-id": "row-expanded"
 			}, [createElementVNode("td", {
 				colspan: unref(colspan),
-				class: normalizeClass(unref(classes).td)
+				class: normalizeClass(["py-4", unref(classes).td])
 			}, [createElementVNode("div", {
 				class: normalizeClass({ "sticky left-4": !unref(isMobile) }),
 				style: panelStyle,

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\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"}
+{"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-rui-divider rounded-b-rui-card 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    <!-- an inset on every side: the cell's 16px sides, matched top and bottom instead of a row's dense padding -->\n    <td\n      :colspan=\"colspan\"\n      class=\"py-4\"\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,mBAsBK,MAAA;IArBF,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,cAAc,MAAA,QAAA,IAAW,sBAAmB,EAAA,CAAA;IAC7D,WAAQ;GAGR,GAAA,CAAA,mBAgBK,MAAA;IAfF,SAAS,MAAA,OAAA;IACV,OAAK,eAAA,CAAC,QACE,MAAA,OAAA,CAAO,CAAC,EAAE,CAAA;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  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":""}
+{"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-rui-card';\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            aria-label=\"Expand group\"\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-rui-hover 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              aria-label=\"Copy group\"\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                aria-label=\"Ungroup\"\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            aria-label=\"Expand group\"\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

@@ -1,3 +1,4 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import RuiTooltip_default from "../../overlays/tooltip/RuiTooltip.js";
@@ -5,7 +6,6 @@ import { useDataTableGrouping, useDataTableStyling } from "./context.js";
 import RuiExpandButton_default from "../RuiExpandButton.js";
 import { GroupExpandButtonPosition } from "../table-props.js";
 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" };
@@ -16,10 +16,10 @@ var _hoisted_3 = {
 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",
+	class: "rounded-full bg-rui-hover px-2 text-caption text-rui-text-secondary",
 	"data-id": "group-size"
 };
-var mobileGroupClass = "mt-6 first:mt-0 mb-2 rounded-lg";
+var mobileGroupClass = "mt-6 first:mt-0 mb-2 rounded-rui-card";
 var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableGroupRow",
 	props: { row: {} },
@@ -55,12 +55,13 @@ 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(["!px-4 !py-2", [unref(classes).td, { "h-auto": !unref(isMobile) }]]),
+				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",
+					"aria-label": "Expand group",
 					expanded: unref(isOpen),
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpandGroup)(__props.row.group, __props.row.identifier))
 				}, null, 8, ["expanded"])) : createCommentVNode("", true),
@@ -77,6 +78,7 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 						variant: "text",
 						icon: "",
 						"data-id": "group-copy-button",
+						"aria-label": "Copy group",
 						onClick: _cache[1] || (_cache[1] = ($event) => unref(onCopyGroup)(__props.row))
 					}, {
 						default: withCtx(() => [createVNode(RuiIcon_default, {
@@ -95,6 +97,7 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 						variant: "text",
 						icon: "",
 						"data-id": "group-ungroup-button",
+						"aria-label": "Ungroup",
 						onClick: _cache[2] || (_cache[2] = ($event) => unref(onUngroup)())
 					}, {
 						default: withCtx(() => [createVNode(RuiIcon_default, {
@@ -109,6 +112,7 @@ var RuiDataTableGroupRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				unref(groupExpandButtonPosition) === unref(GroupExpandButtonPosition).end ? (openBlock(), createBlock(RuiExpandButton_default, {
 					key: 1,
 					class: "-mr-1.5",
+					"aria-label": "Expand group",
 					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  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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"}
+{"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-rui-card';\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            aria-label=\"Expand group\"\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-rui-hover 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              aria-label=\"Copy group\"\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                aria-label=\"Ungroup\"\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            aria-label=\"Expand group\"\n            :expanded=\"isOpen\"\n            @click=\"onToggleExpandGroup(row.group, row.identifier)\"\n          />\n        </div>\n      </td>\n    </slot>\n  </tr>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableMobileSort.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableMobileSort.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { SortColumn, TableColumn, TableRowKey } from '@/components/tables/RuiTableHead.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { SortDirection } from '@/components/tables/table-props';\n\nconst {\n  columns,\n  columnAttr = 'label',\n  sortedMap,\n  dense = false,\n} = defineProps<{\n  columns: TableColumn<T>[];\n  columnAttr?: keyof TableColumn<T>;\n  sortedMap: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  dense?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  sort: [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst sortableColumns = computed<TableColumn<T>[]>(() => columns.filter(column => column.sortable));\n\nfunction columnLabel(column: TableColumn<T>): string {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? String(column.key) : String(label);\n}\n\nfunction sortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key as TableRowKey<T>]?.direction;\n}\n\nfunction isActive(key: TableColumn<T>['key']): boolean {\n  return (key as TableRowKey<T>) in sortedMap;\n}\n\nconst activeLabel = computed<string>(() => {\n  const active = get(sortableColumns).filter(column => isActive(column.key));\n  if (active.length === 0)\n    return 'Sort';\n  if (active.length === 1)\n    return columnLabel(active[0]!);\n  return `${active.length} sorts`;\n});\n\n/**\n * Emits the column's configured default direction, as RuiTableHead does, so\n * the sort composable runs the same asc, desc, none cycle on repeat taps.\n */\nfunction onSelect(column: TableColumn<T>): void {\n  emit('sort', {\n    key: column.key as TableRowKey<T>,\n    direction: (column.direction as SortDirection | undefined) ?? SortDirection.asc,\n  });\n}\n</script>\n\n<template>\n  <RuiMenu\n    :dense=\"dense\"\n    :options=\"{ placement: 'bottom-end' }\"\n    data-id=\"table-mobile-sort\"\n  >\n    <template #activator=\"{ attrs }\">\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        variant=\"outlined\"\n        v-bind=\"attrs\"\n        data-id=\"table-mobile-sort-activator\"\n      >\n        <template #prepend>\n          <RuiIcon\n            name=\"lu-arrow-up-down\"\n            size=\"18\"\n          />\n        </template>\n        {{ activeLabel }}\n      </RuiButton>\n    </template>\n    <div class=\"py-1 min-w-40\">\n      <RuiButton\n        v-for=\"column in sortableColumns\"\n        :key=\"column.key.toString()\"\n        variant=\"text\"\n        size=\"sm\"\n        class=\"!justify-between w-full !rounded-none\"\n        :data-id=\"`table-mobile-sort-option-${column.key}`\"\n        :data-active=\"isActive(column.key)\"\n        :data-direction=\"sortDirection(column.key)\"\n        @click=\"onSelect(column)\"\n      >\n        {{ columnLabel(column) }}\n        <template #append>\n          <RuiIcon\n            v-if=\"isActive(column.key)\"\n            name=\"lu-arrow-down\"\n            :class=\"sortDirection(column.key) === 'asc' ? 'rotate-180' : ''\"\n            size=\"16\"\n          />\n          <span\n            v-else\n            class=\"w-4\"\n          />\n        </template>\n      </RuiButton>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableMobileSort.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableMobileSort.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { SortColumn, TableColumn, TableRowKey } from '@/components/tables/RuiTableHead.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { SortDirection } from '@/components/tables/table-props';\n\nconst {\n  columns,\n  columnAttr = 'label',\n  sortedMap,\n  dense = false,\n} = defineProps<{\n  columns: TableColumn<T>[];\n  columnAttr?: keyof TableColumn<T>;\n  sortedMap: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  dense?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  sort: [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst sortableColumns = computed<TableColumn<T>[]>(() => columns.filter(column => column.sortable));\n\nfunction columnLabel(column: TableColumn<T>): string {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? String(column.key) : String(label);\n}\n\nfunction sortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key as TableRowKey<T>]?.direction;\n}\n\nfunction isActive(key: TableColumn<T>['key']): boolean {\n  return (key as TableRowKey<T>) in sortedMap;\n}\n\nconst activeLabel = computed<string>(() => {\n  const active = get(sortableColumns).filter(column => isActive(column.key));\n  if (active.length === 0)\n    return 'Sort';\n  if (active.length === 1)\n    return columnLabel(active[0]!);\n  return `${active.length} sorts`;\n});\n\n/**\n * Emits the column's configured default direction, as RuiTableHead does, so\n * the sort composable runs the same asc, desc, none cycle on repeat taps.\n */\nfunction onSelect(column: TableColumn<T>): void {\n  emit('sort', {\n    key: column.key as TableRowKey<T>,\n    direction: (column.direction as SortDirection | undefined) ?? SortDirection.asc,\n  });\n}\n</script>\n\n<template>\n  <RuiMenu\n    :dense=\"dense\"\n    :options=\"{ placement: 'bottom-end' }\"\n    data-id=\"table-mobile-sort\"\n  >\n    <template #activator=\"{ attrs }\">\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        variant=\"outlined\"\n        v-bind=\"attrs\"\n        data-id=\"table-mobile-sort-activator\"\n      >\n        <template #prepend>\n          <RuiIcon\n            name=\"lu-arrow-up-down\"\n            size=\"18\"\n          />\n        </template>\n        {{ activeLabel }}\n      </RuiButton>\n    </template>\n    <div class=\"py-1 min-w-40\">\n      <RuiButton\n        v-for=\"column in sortableColumns\"\n        :key=\"column.key.toString()\"\n        variant=\"text\"\n        size=\"sm\"\n        class=\"justify-between! w-full rounded-none!\"\n        :data-id=\"`table-mobile-sort-option-${column.key}`\"\n        :data-active=\"isActive(column.key)\"\n        :data-direction=\"sortDirection(column.key)\"\n        @click=\"onSelect(column)\"\n      >\n        {{ columnLabel(column) }}\n        <template #append>\n          <RuiIcon\n            v-if=\"isActive(column.key)\"\n            name=\"lu-arrow-down\"\n            :class=\"sortDirection(column.key) === 'asc' ? 'rotate-180' : ''\"\n            size=\"16\"\n          />\n          <span\n            v-else\n            class=\"w-4\"\n          />\n        </template>\n      </RuiButton>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
 import { SortDirection } from "../table-props.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/tables/data-table/RuiDataTableMobileSort.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "py-1 min-w-40" };
 var _hoisted_2 = {
@@ -73,7 +73,7 @@ var RuiDataTableMobileSort_vue_vue_type_script_setup_true_lang_default = /*@__PU
 						key: column.key.toString(),
 						variant: "text",
 						size: "sm",
-						class: "!justify-between w-full !rounded-none",
+						class: "justify-between! w-full rounded-none!",
 						"data-id": `table-mobile-sort-option-${column.key}`,
 						"data-active": isActive(column.key),
 						"data-direction": sortDirection(column.key),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableMobileSort.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { SortColumn, TableColumn, TableRowKey } from '@/components/tables/RuiTableHead.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { SortDirection } from '@/components/tables/table-props';\n\nconst {\n  columns,\n  columnAttr = 'label',\n  sortedMap,\n  dense = false,\n} = defineProps<{\n  columns: TableColumn<T>[];\n  columnAttr?: keyof TableColumn<T>;\n  sortedMap: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  dense?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  sort: [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst sortableColumns = computed<TableColumn<T>[]>(() => columns.filter(column => column.sortable));\n\nfunction columnLabel(column: TableColumn<T>): string {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? String(column.key) : String(label);\n}\n\nfunction sortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key as TableRowKey<T>]?.direction;\n}\n\nfunction isActive(key: TableColumn<T>['key']): boolean {\n  return (key as TableRowKey<T>) in sortedMap;\n}\n\nconst activeLabel = computed<string>(() => {\n  const active = get(sortableColumns).filter(column => isActive(column.key));\n  if (active.length === 0)\n    return 'Sort';\n  if (active.length === 1)\n    return columnLabel(active[0]!);\n  return `${active.length} sorts`;\n});\n\n/**\n * Emits the column's configured default direction, as RuiTableHead does, so\n * the sort composable runs the same asc, desc, none cycle on repeat taps.\n */\nfunction onSelect(column: TableColumn<T>): void {\n  emit('sort', {\n    key: column.key as TableRowKey<T>,\n    direction: (column.direction as SortDirection | undefined) ?? SortDirection.asc,\n  });\n}\n</script>\n\n<template>\n  <RuiMenu\n    :dense=\"dense\"\n    :options=\"{ placement: 'bottom-end' }\"\n    data-id=\"table-mobile-sort\"\n  >\n    <template #activator=\"{ attrs }\">\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        variant=\"outlined\"\n        v-bind=\"attrs\"\n        data-id=\"table-mobile-sort-activator\"\n      >\n        <template #prepend>\n          <RuiIcon\n            name=\"lu-arrow-up-down\"\n            size=\"18\"\n          />\n        </template>\n        {{ activeLabel }}\n      </RuiButton>\n    </template>\n    <div class=\"py-1 min-w-40\">\n      <RuiButton\n        v-for=\"column in sortableColumns\"\n        :key=\"column.key.toString()\"\n        variant=\"text\"\n        size=\"sm\"\n        class=\"!justify-between w-full !rounded-none\"\n        :data-id=\"`table-mobile-sort-option-${column.key}`\"\n        :data-active=\"isActive(column.key)\"\n        :data-direction=\"sortDirection(column.key)\"\n        @click=\"onSelect(column)\"\n      >\n        {{ columnLabel(column) }}\n        <template #append>\n          <RuiIcon\n            v-if=\"isActive(column.key)\"\n            name=\"lu-arrow-down\"\n            :class=\"sortDirection(column.key) === 'asc' ? 'rotate-180' : ''\"\n            size=\"16\"\n          />\n          <span\n            v-else\n            class=\"w-4\"\n          />\n        </template>\n      </RuiButton>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,OAAO;EAIb,MAAM,kBAAkB,eAAiC,QAAA,QAAQ,QAAO,WAAU,OAAO,QAAQ,CAAC;EAElG,SAAS,YAAY,QAAgC;GACnD,MAAM,QAAQ,OAAO,QAAA;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,GAAG,IAAI,OAAO,KAAK;EAClF;EAEA,SAAS,cAAc,KAAuD;GAC5E,OAAO,QAAA,UAAU,IAAsB,EAAE;EAC3C;EAEA,SAAS,SAAS,KAAqC;GACrD,OAAQ,OAA0B,QAAA;EACpC;EAEA,MAAM,cAAc,eAAuB;GACzC,MAAM,SAAS,IAAI,eAAe,CAAC,CAAC,QAAO,WAAU,SAAS,OAAO,GAAG,CAAC;GACzE,IAAI,OAAO,WAAW,GACpB,OAAO;GACT,IAAI,OAAO,WAAW,GACpB,OAAO,YAAY,OAAO,EAAG;GAC/B,OAAO,GAAG,OAAO,OAAO;EAC1B,CAAC;;;;;EAMD,SAAS,SAAS,QAA8B;GAC9C,KAAK,QAAQ;IACX,KAAK,OAAO;IACZ,WAAY,OAAO,aAA2C,cAAc;GAC9E,CAAC;EACH;;GAIE,OAAA,UAAA,GAAA,YAgDU,iBAAA;IA/CP,OAAO,QAAA;IACP,SAAS,EAAA,WAAA,aAAA;IACV,WAAQ;;IAEG,WAAS,SAcN,EAdU,YAAK,CAC3B,YAaY,mBAbZ,WAaY;KAZT,MAAM,QAAA,QAAK,OAAU,KAAA;KACtB,SAAQ;IACA,GAAA,OAAK,EACb,WAAQ,8BAA6B,CAAA,GAAA;KAE1B,SAAO,cAId,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;KAEE,SAAA,cACX,CADW,gBAAA,MACX,gBAAG,MAAA,WAAA,CAAW,GAAA,CAAA,CAAA,CAAA;;;IAGlB,SAAA,cA0BM,CA1BN,mBA0BM,OA1BN,YA0BM,EAzBJ,UAAA,IAAA,GAAA,mBAwBY,UAAA,MAAA,WAvBO,MAAA,eAAA,IAAV,WAAM;KADf,OAAA,UAAA,GAAA,YAwBY,mBAAA;MAtBT,KAAK,OAAO,IAAI,SAAQ;MACzB,SAAQ;MACR,MAAK;MACL,OAAM;MACL,WAAO,4BAA8B,OAAO;MAC5C,eAAa,SAAS,OAAO,GAAG;MAChC,kBAAgB,cAAc,OAAO,GAAG;MACxC,UAAK,WAAE,SAAS,MAAM;;MAGZ,QAAM,cAMb,CAJM,SAAS,OAAO,GAAG,KAD3B,UAAA,GAAA,YAKE,iBAAA;;OAHA,MAAK;OACJ,OAAK,eAAE,cAAc,OAAO,GAAG,MAAA,QAAA,eAAA,EAAA;OAChC,MAAK;MAEP,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,MAAA,UAAA,GAAA,mBAGE,QAHF,UAGE,EAAA,CAAA;MAXJ,SAAA,cAAyB,CAAtB,gBAAA,gBAAA,YAAY,MAAM,CAAA,IAAI,KACzB,CAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableMobileSort.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { SortColumn, TableColumn, TableRowKey } from '@/components/tables/RuiTableHead.vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { SortDirection } from '@/components/tables/table-props';\n\nconst {\n  columns,\n  columnAttr = 'label',\n  sortedMap,\n  dense = false,\n} = defineProps<{\n  columns: TableColumn<T>[];\n  columnAttr?: keyof TableColumn<T>;\n  sortedMap: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  dense?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  sort: [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst sortableColumns = computed<TableColumn<T>[]>(() => columns.filter(column => column.sortable));\n\nfunction columnLabel(column: TableColumn<T>): string {\n  const label = column[columnAttr];\n  return label === undefined || label === null ? String(column.key) : String(label);\n}\n\nfunction sortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key as TableRowKey<T>]?.direction;\n}\n\nfunction isActive(key: TableColumn<T>['key']): boolean {\n  return (key as TableRowKey<T>) in sortedMap;\n}\n\nconst activeLabel = computed<string>(() => {\n  const active = get(sortableColumns).filter(column => isActive(column.key));\n  if (active.length === 0)\n    return 'Sort';\n  if (active.length === 1)\n    return columnLabel(active[0]!);\n  return `${active.length} sorts`;\n});\n\n/**\n * Emits the column's configured default direction, as RuiTableHead does, so\n * the sort composable runs the same asc, desc, none cycle on repeat taps.\n */\nfunction onSelect(column: TableColumn<T>): void {\n  emit('sort', {\n    key: column.key as TableRowKey<T>,\n    direction: (column.direction as SortDirection | undefined) ?? SortDirection.asc,\n  });\n}\n</script>\n\n<template>\n  <RuiMenu\n    :dense=\"dense\"\n    :options=\"{ placement: 'bottom-end' }\"\n    data-id=\"table-mobile-sort\"\n  >\n    <template #activator=\"{ attrs }\">\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        variant=\"outlined\"\n        v-bind=\"attrs\"\n        data-id=\"table-mobile-sort-activator\"\n      >\n        <template #prepend>\n          <RuiIcon\n            name=\"lu-arrow-up-down\"\n            size=\"18\"\n          />\n        </template>\n        {{ activeLabel }}\n      </RuiButton>\n    </template>\n    <div class=\"py-1 min-w-40\">\n      <RuiButton\n        v-for=\"column in sortableColumns\"\n        :key=\"column.key.toString()\"\n        variant=\"text\"\n        size=\"sm\"\n        class=\"justify-between! w-full rounded-none!\"\n        :data-id=\"`table-mobile-sort-option-${column.key}`\"\n        :data-active=\"isActive(column.key)\"\n        :data-direction=\"sortDirection(column.key)\"\n        @click=\"onSelect(column)\"\n      >\n        {{ columnLabel(column) }}\n        <template #append>\n          <RuiIcon\n            v-if=\"isActive(column.key)\"\n            name=\"lu-arrow-down\"\n            :class=\"sortDirection(column.key) === 'asc' ? 'rotate-180' : ''\"\n            size=\"16\"\n          />\n          <span\n            v-else\n            class=\"w-4\"\n          />\n        </template>\n      </RuiButton>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,OAAO;EAIb,MAAM,kBAAkB,eAAiC,QAAA,QAAQ,QAAO,WAAU,OAAO,QAAQ,CAAC;EAElG,SAAS,YAAY,QAAgC;GACnD,MAAM,QAAQ,OAAO,QAAA;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,GAAG,IAAI,OAAO,KAAK;EAClF;EAEA,SAAS,cAAc,KAAuD;GAC5E,OAAO,QAAA,UAAU,IAAsB,EAAE;EAC3C;EAEA,SAAS,SAAS,KAAqC;GACrD,OAAQ,OAA0B,QAAA;EACpC;EAEA,MAAM,cAAc,eAAuB;GACzC,MAAM,SAAS,IAAI,eAAe,CAAC,CAAC,QAAO,WAAU,SAAS,OAAO,GAAG,CAAC;GACzE,IAAI,OAAO,WAAW,GACpB,OAAO;GACT,IAAI,OAAO,WAAW,GACpB,OAAO,YAAY,OAAO,EAAG;GAC/B,OAAO,GAAG,OAAO,OAAO;EAC1B,CAAC;;;;;EAMD,SAAS,SAAS,QAA8B;GAC9C,KAAK,QAAQ;IACX,KAAK,OAAO;IACZ,WAAY,OAAO,aAA2C,cAAc;GAC9E,CAAC;EACH;;GAIE,OAAA,UAAA,GAAA,YAgDU,iBAAA;IA/CP,OAAO,QAAA;IACP,SAAS,EAAA,WAAA,aAAA;IACV,WAAQ;;IAEG,WAAS,SAcN,EAdU,YAAK,CAC3B,YAaY,mBAbZ,WAaY;KAZT,MAAM,QAAA,QAAK,OAAU,KAAA;KACtB,SAAQ;IACA,GAAA,OAAK,EACb,WAAQ,8BAA6B,CAAA,GAAA;KAE1B,SAAO,cAId,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;KAEE,SAAA,cACX,CADW,gBAAA,MACX,gBAAG,MAAA,WAAA,CAAW,GAAA,CAAA,CAAA,CAAA;;;IAGlB,SAAA,cA0BM,CA1BN,mBA0BM,OA1BN,YA0BM,EAzBJ,UAAA,IAAA,GAAA,mBAwBY,UAAA,MAAA,WAvBO,MAAA,eAAA,IAAV,WAAM;KADf,OAAA,UAAA,GAAA,YAwBY,mBAAA;MAtBT,KAAK,OAAO,IAAI,SAAQ;MACzB,SAAQ;MACR,MAAK;MACL,OAAM;MACL,WAAO,4BAA8B,OAAO;MAC5C,eAAa,SAAS,OAAO,GAAG;MAChC,kBAAgB,cAAc,OAAO,GAAG;MACxC,UAAK,WAAE,SAAS,MAAM;;MAGZ,QAAM,cAMb,CAJM,SAAS,OAAO,GAAG,KAD3B,UAAA,GAAA,YAKE,iBAAA;;OAHA,MAAK;OACJ,OAAK,eAAE,cAAc,OAAO,GAAG,MAAA,QAAA,eAAA,EAAA;OAChC,MAAK;MAEP,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,MAAA,UAAA,GAAA,mBAGE,QAHF,UAGE,EAAA,CAAA;MAXJ,SAAA,cAAyB,CAAtB,gBAAA,gBAAA,YAAY,MAAM,CAAA,IAAI,KACzB,CAAA,CAAA,CAAA"}

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

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

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

@@ -1,10 +1,11 @@
+import { get, set, useTimeoutFn } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { usePreferredReducedMotion } from "../../../vendor/@vueuse/core/dist/index.js";
 import RuiCheckbox_default from "../../forms/checkbox/RuiCheckbox.js";
 import { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from "./context.js";
 import RuiExpandButton_default from "../RuiExpandButton.js";
 import RuiDataTableCell_default from "./RuiDataTableCell.js";
 import RuiDataTableExpandedRow_default from "./RuiDataTableExpandedRow.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
-import { get } from "@vueuse/shared";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
 //#region src/components/tables/data-table/RuiDataTableRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-selected"];
 var _hoisted_2 = { key: 1 };
@@ -12,6 +13,7 @@ var _hoisted_3 = {
 	key: 2,
 	class: "flex items-center gap-1 min-w-0"
 };
+var PANEL_LEAVE_MS = 100;
 var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiDataTableRow",
 	props: {
@@ -29,6 +31,36 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const selected = computed(() => isSelected(get(rowId)));
 		const disabled = computed(() => isDisabledRow(get(rowId)));
 		const expanded = computed(() => get(expandable) && !!slots["expanded-item"] && isExpanded(get(rowId)));
+		/** How long a closing panel stays to fade out; matches its `duration-100`. */
+		const reducedMotion = usePreferredReducedMotion();
+		/**
+		* Whether the panel is in the DOM, which outlasts `expanded` by its fade-out.
+		*
+		* @remarks
+		* Not a `<Transition>`: test utilities stub that with an element, which lands inside the consumer's
+		* `<tbody>` and shifts every `tr:nth-child` its specs count. The fade-in is CSS `@starting-style`.
+		*/
+		const panelShown = ref(get(expanded));
+		const panelClosing = ref(false);
+		const { start: finishClosing, stop: cancelClosing } = useTimeoutFn(() => {
+			set(panelShown, false);
+			set(panelClosing, false);
+		}, PANEL_LEAVE_MS, { immediate: false });
+		watch(expanded, (open) => {
+			if (open) {
+				cancelClosing();
+				set(panelClosing, false);
+				set(panelShown, true);
+				return;
+			}
+			if (!get(panelShown)) return;
+			if (get(reducedMotion) === "reduce") {
+				set(panelShown, false);
+				return;
+			}
+			set(panelClosing, true);
+			finishClosing();
+		});
 		const rowClass = computed(() => typeof itemClass === "string" ? itemClass : itemClass(__props.row));
 		/** Selection wins over the open-panel shade, so a selected row still reads as selected. */
 		const stateClass = computed(() => {
@@ -73,7 +105,7 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		/** Room for each floating action, about one small icon button wide. */
 		const firstRowInset = computed(() => get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : void 0);
 		/**
-		* `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise
+		* `border-y!` defeats the `divide-y-0` on the mobile tbody, which otherwise
 		* zeroes the top and bottom border on every card except the first. An expanded
 		* card flattens its bottom edge so the expanded panel attaches flush beneath
 		* it.
@@ -82,8 +114,8 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* own utilities rather than emitting conflicting ones.
 		*/
 		const mobileCardClass = computed(() => {
-			const shared = "relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden";
-			return get(expanded) ? `${shared} rounded-t-lg mb-0` : `${shared} rounded-lg mb-3 last:mb-0`;
+			const shared = "relative flex flex-col border border-y! border-rui-divider overflow-hidden";
+			return get(expanded) ? `${shared} rounded-t-rui-card mb-0` : `${shared} rounded-rui-card mb-3 last:mb-0`;
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("tr", {
@@ -96,11 +128,12 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"data-id": "row"
 			}, [unref(showMobileHeader) ? (openBlock(), createElementBlock("td", {
 				key: 0,
-				class: normalizeClass(unref(compactMobileHeader) ? "absolute top-0 right-0 z-[1] flex items-center gap-1 px-2 py-1" : "flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]"),
+				class: normalizeClass(unref(compactMobileHeader) ? "absolute top-0 right-0 z-1 flex items-center gap-1 px-2 py-1" : "flex items-center justify-between gap-2 px-4 py-2 border-b border-rui-divider"),
 				"data-id": "mobile-card-header"
 			}, [unref(selectedData) ? (openBlock(), createBlock(RuiCheckbox_default, {
 				key: 0,
 				"data-id": `table-toggle-check-${__props.index}`,
+				"aria-label": "Select row",
 				"model-value": unref(selected),
 				disabled: unref(disabled),
 				size: unref(dense) ? "sm" : void 0,
@@ -131,6 +164,7 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				rowspan: "1"
 			}, [createVNode(RuiCheckbox_default, {
 				"data-id": `table-toggle-check-${__props.index}`,
+				"aria-label": "Select row",
 				"model-value": unref(selected),
 				disabled: unref(disabled),
 				size: unref(dense) ? "sm" : void 0,
@@ -163,15 +197,20 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"row-id",
 					"style"
 				]);
-			}), 128))], 10, _hoisted_1), unref(expanded) ? (openBlock(), createBlock(RuiDataTableExpandedRow_default, {
+			}), 128))], 10, _hoisted_1), unref(panelShown) ? (openBlock(), createBlock(RuiDataTableExpandedRow_default, {
 				key: 0,
+				class: normalizeClass(["transition-opacity starting:opacity-0 motion-reduce:transition-none", unref(panelClosing) ? "opacity-0 duration-100 ease-in" : "duration-150 ease-out"]),
 				row: __props.row,
 				index: __props.index
 			}, createSlots({ _: 2 }, [slots["expanded-item"] ? {
 				name: "expanded-item",
 				fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", normalizeProps(guardReactiveProps(slotData)))]),
 				key: "0"
-			} : void 0]), 1032, ["row", "index"])) : createCommentVNode("", true)], 64);
+			} : void 0]), 1032, [
+				"class",
+				"row",
+				"index"
+			])) : createCommentVNode("", true)], 64);
 		};
 	}
 });