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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.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":""}
+{"version":3,"file":"RuiTablePagination.js","names":["_sfc_main"],"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":""}

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 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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"}
+{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiMenuSelect","_isRef","_createBlock","RuiTextField","_withKeys","_createCommentVNode","_toDisplayString","RuiButton","_withCtx","RuiIcon"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,aAAaA,SAAgC,SAAA,YAAmB;EAUtE,MAAM,mBAAmB,GAAG;GAC1B,OAAO;IACL,SAAS;IACT,OAAO;IACP,QAAQ;IACR,WAAW;IACX,cAAc;IACd,QAAQ;IACR,WAAW;IACX,YAAY;GACd;GACA,UAAU;IAER,OAAO;KACL,MAAM;MACJ,QAAQ;MACR,WAAW;KACb;KACA,OAAO;MACL,QAAQ;MACR,WAAW;KACb;IACF;IACA,QAAQ,EACN,MAAM;KACJ,SAAS;KACT,QAAQ;KAER,cAAc;IAChB,EACF;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAAoD,iBAAiB;GAAE,OAAI,QAAA;GAAG,QAAK,QAAA;EAAE,CAAC,CAAC;EAElG,MAAM,gBAAgB,SAAS;EAE/B,MAAM,EACJ,QACA,cACA,OACA,QACA,eACA,cACA,cACA,SACA,SACA,QACA,QACA,SACA,WACE,wBAAwB,YAAY,qBAAqB,QAAA,eAAe;;;;;EAM5E,MAAM,aAAa,eAAwB,IAAI,KAAK,KAAK,CAAC;;;;;;EAO1D,MAAM,iBAAiB,eAAwB;GAC7C,MAAM,EAAE,UAAU,IAAI,UAAU;GAChC,OAAO,IAAI,UAAU,KAAK,IAAI,MAAM,CAAC,CAAC,OAAO,EAAE,YAAY,SAAS,KAAK;EAC3E,CAAC;EAED,MAAM,YAAY,IAAY,OAAO,IAAI,YAAY,CAAC,CAAC;EAEvD,MAAM,eAAe,UAAU;GAC7B,IAAI,WAAW,OAAO,KAAK,CAAC;EAC9B,CAAC;EAED,SAAS,kBAAwB;GAC/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,GAAG,EAAE;GACjD,MAAM,UAAU,IAAI,KAAK;GACzB,IAAI,CAAC,OAAO,SAAS,MAAM,KAAK,YAAY,GAAG;IAC7C,IAAI,WAAW,OAAO,IAAI,YAAY,CAAC,CAAC;IACxC;GACF;GACA,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,OAAO;GACrD,IAAI,YAAY,IAAI,YAAY,GAC9B,IAAI,cAAc,OAAO;GAC3B,IAAI,WAAW,OAAO,OAAO,CAAC;EAChC;EAEA,MAAM,UAAU,MAAM;EACtB,MAAM,WAAW,MAAM;;GAIrB,OAAAC,UAAA,GAAAC,mBA0HM,OAAA,EA1HA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;IACrBC,mBAwBM,OAAA;KAvBH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAERC,GAAAA,CAAAA,mBAKQ,SAAA;KAJL,KAAKD,MAAA,OAAA;KACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA;IACxB,GAAA,oBAED,IAAA,UAAA,GACAE,YAaEC,uBAAA;KAZC,IAAIH,MAAA,OAAA;KACI,YAAAA,MAAA,YAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;KACpB,SAASJ,MAAA,MAAA;KACT,UAAU,QAAA,WAAW,QAAA,kBAAkBA,MAAA,cAAA;KACvC,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;KAChC,OAAM;KACN,MAAK;KACL,YAAS;KACT,aAAU;KACV,gBAAA;KACA,OAAA;KACA,WAAQ;;;;;;;;IAGZC,mBA4CM,OAAA;KA3CH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KACjB,WAAQ;;KAERC,mBAKQ,SAAA;MAJL,KAAKD,MAAA,QAAA;MACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,EAAA,OAAUA,MAAA,YAAA,IAAe,KAAA,IAAS,UAAA,CAAA,CAAA;KAC1D,GAAA,UAED,IAAA,UAAA;KAEQA,MAAA,YAAA,KADRH,UAAA,GAAAQ,YAeEC,sBAAA;;MAbC,IAAIN,MAAA,QAAA;MACI,YAAAA,MAAA,SAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,SAAA,IAAA,UAAS,QAAA,SAAA;MACjB,UAAU,QAAA,WAAWJ,MAAA,UAAA;MACrB,OAAKD,eAAA,CAAGC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,CAAA;MACrB,MAAK;MACL,KAAI;MACH,KAAKA,MAAA,KAAA;MACN,WAAU;MACV,gBAAA;MACA,OAAA;MACA,WAAQ;MACP,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,gBAAe;MACrB,WAAO,OAAA,OAAA,OAAA,KAAAO,UAAA,WAAQ,gBAAe,GAAA,CAAA,OAAA,CAAA;;;;;;;KAGpBP,CAAAA,KAAAA,MAAA,MAAA,CAAM,CAAC,SAAM,KAD1BH,UAAA,GAAAQ,YAcEF,uBAAA;;MAZC,IAAIH,MAAA,QAAA;MACI,YAAAA,MAAA,YAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;MACpB,SAASJ,MAAA,MAAA;MACT,UAAU,QAAA,WAAWA,MAAA,UAAA;MACrB,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;MAChC,OAAM;MACN,MAAK;MACL,YAAS;MACT,aAAU;MACV,gBAAA;MACA,OAAA;MACA,WAAQ;;;;;;;;KAEVC,mBAEO,QAAA,EAFA,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EACrB,GAAAS,gBAAAT,MAAA,aAAA,CAAa,GAAA,CAAA;;IAGpBC,mBAkDM,OAAA;KAjDH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA;KACrB,WAAQ;;KAGC,CAAA,QAAA,UADTH,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,OAAA,CAAO,CAAA;;MAEf,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAElCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAkC,CAAlCT,YAAkCU,iBAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA;;;KAEjCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAGzB,CAAA,QAAA,UADTf,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAoC,CAApCT,YAAoCU,iBAAA,EAA3B,MAAK,oBAAmB,CAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableAppendRow.js","names":["_sfc_main"],"sources":["../../../../src/components/tables/data-table/RuiDataTableAppendRow.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  'row-append': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * Caps the content to the table's visible width, less the cell's 16px sides, and pins it to the left\n * edge while the table scrolls sideways, as the expanded panel does: a note under a wide row stays in\n * view instead of spanning the whole scroll width. Where the table resets `--rui-table-viewport`, on\n * mobile, the calc is invalid and the width stays auto.\n */\nconst contentStyle = { width: 'calc(var(--rui-table-viewport) - 2rem)' };\n</script>\n\n<template>\n  <!-- the cell drops the row height floor and the top padding: it reads as the end of the row above -->\n  <tr data-id=\"row-append\">\n    <td\n      :colspan=\"colspan\"\n      class=\"pt-0 pb-2 h-auto whitespace-normal\"\n      :class=\"classes.td\"\n    >\n      <div\n        :class=\"{ 'sticky left-4': !isMobile }\"\n        :style=\"contentStyle\"\n        data-id=\"row-append-content\"\n      >\n        <slot\n          name=\"row-append\"\n          :row=\"row\"\n          :index=\"index\"\n        />\n      </div>\n    </td>\n  </tr>\n</template>\n"],"mappings":""}

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

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

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

@@ -0,0 +1,39 @@
+import { useDataTableStyling } from "./context.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region src/components/tables/data-table/RuiDataTableAppendRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-id": "row-append" };
+var _hoisted_2 = ["colspan"];
+var RuiDataTableAppendRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiDataTableAppendRow",
+	props: {
+		row: {},
+		index: {}
+	},
+	setup(__props) {
+		const { classes, colspan, isMobile } = useDataTableStyling();
+		/**
+		* Caps the content to the table's visible width, less the cell's 16px sides, and pins it to the left
+		* edge while the table scrolls sideways, as the expanded panel does: a note under a wide row stays in
+		* view instead of spanning the whole scroll width. Where the table resets `--rui-table-viewport`, on
+		* mobile, the calc is invalid and the width stays auto.
+		*/
+		const contentStyle = { width: "calc(var(--rui-table-viewport) - 2rem)" };
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("tr", _hoisted_1, [createElementVNode("td", {
+				colspan: unref(colspan),
+				class: normalizeClass(["pt-0 pb-2 h-auto whitespace-normal", unref(classes).td])
+			}, [createElementVNode("div", {
+				class: normalizeClass({ "sticky left-4": !unref(isMobile) }),
+				style: contentStyle,
+				"data-id": "row-append-content"
+			}, [renderSlot(_ctx.$slots, "row-append", {
+				row: __props.row,
+				index: __props.index
+			})], 2)], 10, _hoisted_2)]);
+		};
+	}
+});
+//#endregion
+export { RuiDataTableAppendRow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDataTableAppendRow.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDataTableAppendRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeClass","_renderSlot"],"sources":["../../../../src/components/tables/data-table/RuiDataTableAppendRow.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  'row-append': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * Caps the content to the table's visible width, less the cell's 16px sides, and pins it to the left\n * edge while the table scrolls sideways, as the expanded panel does: a note under a wide row stays in\n * view instead of spanning the whole scroll width. Where the table resets `--rui-table-viewport`, on\n * mobile, the calc is invalid and the width stays auto.\n */\nconst contentStyle = { width: 'calc(var(--rui-table-viewport) - 2rem)' };\n</script>\n\n<template>\n  <!-- the cell drops the row height floor and the top padding: it reads as the end of the row above -->\n  <tr data-id=\"row-append\">\n    <td\n      :colspan=\"colspan\"\n      class=\"pt-0 pb-2 h-auto whitespace-normal\"\n      :class=\"classes.td\"\n    >\n      <div\n        :class=\"{ 'sticky left-4': !isMobile }\"\n        :style=\"contentStyle\"\n        data-id=\"row-append-content\"\n      >\n        <slot\n          name=\"row-append\"\n          :row=\"row\"\n          :index=\"index\"\n        />\n      </div>\n    </td>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,MAAM,EAAE,SAAS,SAAS,aAAa,oBAAoB;;;;;;;EAQ3D,MAAM,eAAe,EAAE,OAAO,yCAAyC;;GAKrE,OAAAA,UAAA,GAAAC,mBAkBK,MAlBL,YAkBK,CAjBHC,mBAgBK,MAAA;IAfF,SAASC,MAAA,OAAA;IACV,OAAKC,eAAA,CAAC,sCACED,MAAA,OAAA,CAAO,CAAC,EAAE,CAAA;GAElBD,GAAAA,CAAAA,mBAUM,OAAA;IATH,OAAKE,eAAA,EAAA,iBAAA,CAAsBD,MAAA,QAAA,EAAQ,CAAA;IACnC,OAAO;IACR,WAAQ;GAERE,GAAAA,CAAAA,WAIE,KAAA,QAAA,cAAA;IAFC,KAAK,QAAA;IACL,OAAO,QAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableBody.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableErrorRow from '@/components/tables/data-table/RuiDataTableErrorRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nconst { error, loading, noData } = defineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n  error: string;\n  errorTitle: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\n    'group.header'?: (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n    'error'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n\n/**\n * Loading outranks a failure, which outranks the empty state: rows that did\n * not arrive are not rows that are not there. Rows kept from an earlier read\n * stay below the error.\n */\nconst showError = computed<boolean>(() => !!error && !loading);\n\n/**\n * Rows shown while a read is in flight are the previous result, so they dim\n * until it lands. An empty table shows its loading row instead, undimmed.\n */\nconst stale = computed<boolean>(() => loading && !noData);\n</script>\n\n<template>\n  <tbody\n    class=\"transition-opacity duration-150\"\n    :class=\"[classes.tbody, { 'opacity-50': stale }]\"\n    :data-stale=\"stale || undefined\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <RuiDataTableErrorRow\n      v-if=\"showError\"\n      :message=\"error\"\n      :title=\"errorTitle\"\n      :retry-text=\"retryText\"\n      @retry=\"emit('retry')\"\n    >\n      <template\n        v-if=\"$slots.error\"\n        #error\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"error\" />\n      </template>\n    </RuiDataTableErrorRow>\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['expanded-item']\"\n          #expanded-item=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"expanded-item\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading && !showError\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTableBody.js","names":["_sfc_main"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableErrorRow from '@/components/tables/data-table/RuiDataTableErrorRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nconst { error, loading, noData } = defineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n  error: string;\n  errorTitle: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\n    'group.header'?: (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'row-append'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n    'error'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n\n/**\n * Loading outranks a failure, which outranks the empty state: rows that did\n * not arrive are not rows that are not there. Rows kept from an earlier read\n * stay below the error.\n */\nconst showError = computed<boolean>(() => !!error && !loading);\n\n/**\n * Rows shown while a read is in flight are the previous result, so they dim\n * until it lands. An empty table shows its loading row instead, undimmed.\n */\nconst stale = computed<boolean>(() => loading && !noData);\n</script>\n\n<template>\n  <tbody\n    class=\"transition-opacity duration-150\"\n    :class=\"[classes.tbody, { 'opacity-50': stale }]\"\n    :data-stale=\"stale || undefined\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <RuiDataTableErrorRow\n      v-if=\"showError\"\n      :message=\"error\"\n      :title=\"errorTitle\"\n      :retry-text=\"retryText\"\n      @retry=\"emit('retry')\"\n    >\n      <template\n        v-if=\"$slots.error\"\n        #error\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"error\" />\n      </template>\n    </RuiDataTableErrorRow>\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['expanded-item']\"\n          #expanded-item=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"expanded-item\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['row-append']\"\n          #row-append=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"row-append\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading && !showError\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-import type { TableColumn } from '../RuiTableHead.vue';
+import type { TableColumn } from '../RuiTableHead.vue.js';
 import { type GroupHeader } from '../../../composables/tables/data-table/types.js';
 declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
@@ -44,6 +44,10 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
             row: T;
             index: number;
         }) => any;
+        'row-append'?: (props: {
+            row: T;
+            index: number;
+        }) => any;
         'no-data'?: () => any;
         'empty-description'?: () => any;
         error?: () => any;

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

@@ -73,16 +73,24 @@ var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						key: `row-${unref(getRowId)(row)}`,
 						row,
 						index
-					}, createSlots({ _: 2 }, [renderList(unref(itemSlotKeys), (key) => {
-						return {
-							name: `item.${key}`,
-							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, `item.${key}`, mergeProps({ ref_for: true }, slotData))])
-						};
-					}), _ctx.$slots["expanded-item"] ? {
-						name: "expanded-item",
-						fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", mergeProps({ ref_for: true }, slotData))]),
-						key: "0"
-					} : void 0]), 1032, ["row", "index"]))], 64);
+					}, createSlots({ _: 2 }, [
+						renderList(unref(itemSlotKeys), (key) => {
+							return {
+								name: `item.${key}`,
+								fn: withCtx((slotData) => [renderSlot(_ctx.$slots, `item.${key}`, mergeProps({ ref_for: true }, slotData))])
+							};
+						}),
+						_ctx.$slots["expanded-item"] ? {
+							name: "expanded-item",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", mergeProps({ ref_for: true }, slotData))]),
+							key: "0"
+						} : void 0,
+						_ctx.$slots["row-append"] ? {
+							name: "row-append",
+							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "row-append", mergeProps({ ref_for: true }, slotData))]),
+							key: "1"
+						} : void 0
+					]), 1032, ["row", "index"]))], 64);
 				}), 256)),
 				__props.loading && __props.noData ? (openBlock(), createBlock(RuiDataTableLoadingRow_default, { key: 2 })) : createCommentVNode("", true),
 				__props.noData && __props.empty && !__props.loading && !unref(showError) ? (openBlock(), createBlock(RuiDataTableEmptyRow_default, {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableErrorRow from '@/components/tables/data-table/RuiDataTableErrorRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nconst { error, loading, noData } = defineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n  error: string;\n  errorTitle: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\n    'group.header'?: (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n    'error'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n\n/**\n * Loading outranks a failure, which outranks the empty state: rows that did\n * not arrive are not rows that are not there. Rows kept from an earlier read\n * stay below the error.\n */\nconst showError = computed<boolean>(() => !!error && !loading);\n\n/**\n * Rows shown while a read is in flight are the previous result, so they dim\n * until it lands. An empty table shows its loading row instead, undimmed.\n */\nconst stale = computed<boolean>(() => loading && !noData);\n</script>\n\n<template>\n  <tbody\n    class=\"transition-opacity duration-150\"\n    :class=\"[classes.tbody, { 'opacity-50': stale }]\"\n    :data-stale=\"stale || undefined\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <RuiDataTableErrorRow\n      v-if=\"showError\"\n      :message=\"error\"\n      :title=\"errorTitle\"\n      :retry-text=\"retryText\"\n      @retry=\"emit('retry')\"\n    >\n      <template\n        v-if=\"$slots.error\"\n        #error\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"error\" />\n      </template>\n    </RuiDataTableErrorRow>\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['expanded-item']\"\n          #expanded-item=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"expanded-item\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading && !showError\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,OAAO;EAsBb,MAAM,EAAE,SAAS,YAAY,oBAAoB;EACjD,MAAM,EAAE,iBAAiB,oBAAuB;EAChD,MAAM,EAAE,aAAa,wBAA2B;;;;;;EAOhD,MAAM,YAAY,eAAwB,CAAC,CAAC,QAAA,SAAS,CAAC,QAAA,OAAO;;;;;EAM7D,MAAM,QAAQ,eAAwB,QAAA,WAAW,CAAC,QAAA,MAAM;;GAItD,OAAA,UAAA,GAAA,mBA2GQ,SAAA;IA1GN,OAAK,eAAA,CAAC,mCAAiC,CAC9B,MAAA,OAAA,CAAO,CAAC,OAAK,EAAA,cAAkB,MAAA,KAAA,EAAK,CAAA,CAAA,CAAA;IAC5C,cAAY,MAAA,KAAA,KAAS,KAAA;;IAIdA,KAAAA,OAAM,kBADd,WAIE,KAAA,QAAA,gBAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;IAIX,MAAA,SAAA,KADR,UAAA,GAAA,YAcuB,8BAAA;;KAZpB,SAAS,QAAA;KACT,OAAO,QAAA;KACP,cAAY,QAAA;KACZ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IAGJA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAO,QAAA;KACZ,MAAA;KAGD,IAAA,cAAqB,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;KAGzB,UAAA,IAAA,GAAA,mBAsDW,UAAA,MAAA,WAtDsB,QAAA,WAAf,KAAK,UAAK;KAEjB,OAAA,UAAA,GAAA,mBAAA,UAAA,MAAA,CAAA,CAAA,MAAA,KAAA,CAAK,CAAC,GAAG,KADlB,UAAA,GAAA,YAyBuB,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;KAGEA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,kBAAA;MACX,MAAA;MAGD,IAAA,SAHe,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAIZA,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,0BAAA;MACX,MAAA;MAGD,IAAA,SAHuB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAItB,IAAA,KAAA,CAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,MAAA,UAAA,GAAA,YA0BkB,yBAAA;MAxBf,KAAG,OAAS,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;KAGQ,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,MAAA,YAAA,IAAP,QAAG;;OACD,MAAA,QAAA;OAGT,IAAA,SAHkB,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OADjB,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAIZA,CAAAA,GAAAA,KAAAA,OAAM,mBAAA;MACX,MAAA;MAGD,IAAA,SAHgB,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;IAKM,QAAA,WAAW,QAAA,UAAzC,UAAA,GAAA,YAAmD,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAAO,CAAK,MAAA,SAAA,KADxC,UAAA,GAAA,YAkBuB,8BAAA;;KAhBpB,OAAO,QAAA;IAGAA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,aAAA;KACX,MAAA;KAGD,IAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGjBA,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,uBAAA;KACX,MAAA;KAGD,IAAA,cAAiC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BA,KAAAA,OAAM,iBADd,WAIE,KAAA,QAAA,eAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}
+{"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createCommentVNode","_createBlock","RuiDataTableErrorRow","_createSlots","_withCtx","_Fragment","_renderList","RuiDataTableGroupRow","_mergeProps","RuiDataTableRow","RuiDataTableLoadingRow","RuiDataTableEmptyRow"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableErrorRow from '@/components/tables/data-table/RuiDataTableErrorRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\nconst { error, loading, noData } = defineProps<{\n  filtered: (T | GroupHeader<T>)[];\n  loading: boolean;\n  noData: boolean;\n  empty: { label?: string; description?: string };\n  error: string;\n  errorTitle: string;\n  retryText: string;\n}>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend'?: (props: { colspan: number }) => any;\n    'body.append'?: (props: { colspan: number }) => any;\n    'group.header'?: (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content'?: (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n    'row-append'?: (props: { row: T; index: number }) => any;\n    'no-data'?: () => any;\n    'empty-description'?: () => any;\n    'error'?: () => any;\n  }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n\n/**\n * Loading outranks a failure, which outranks the empty state: rows that did\n * not arrive are not rows that are not there. Rows kept from an earlier read\n * stay below the error.\n */\nconst showError = computed<boolean>(() => !!error && !loading);\n\n/**\n * Rows shown while a read is in flight are the previous result, so they dim\n * until it lands. An empty table shows its loading row instead, undimmed.\n */\nconst stale = computed<boolean>(() => loading && !noData);\n</script>\n\n<template>\n  <tbody\n    class=\"transition-opacity duration-150\"\n    :class=\"[classes.tbody, { 'opacity-50': stale }]\"\n    :data-stale=\"stale || undefined\"\n  >\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.prepend']\"\n      :colspan=\"colspan\"\n      name=\"body.prepend\"\n    />\n    <RuiDataTableErrorRow\n      v-if=\"showError\"\n      :message=\"error\"\n      :title=\"errorTitle\"\n      :retry-text=\"retryText\"\n      @retry=\"emit('retry')\"\n    >\n      <template\n        v-if=\"$slots.error\"\n        #error\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"error\" />\n      </template>\n    </RuiDataTableErrorRow>\n    <template v-for=\"(row, index) in filtered\">\n      <RuiDataTableGroupRow\n        v-if=\"!isRow(row)\"\n        :key=\"`group-${row.identifier}`\"\n        :row=\"row\"\n      >\n        <template\n          v-if=\"$slots['group.header']\"\n          #group.header=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['group.header.content']\"\n          #group.header.content=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"group.header.content\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableGroupRow>\n      <RuiDataTableRow\n        v-else\n        :key=\"`row-${getRowId(row)}`\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <template\n          v-for=\"key in itemSlotKeys\"\n          #[`item.${key}`]=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            :name=\"`item.${key}`\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['expanded-item']\"\n          #expanded-item=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"expanded-item\"\n            v-bind=\"slotData\"\n          />\n        </template>\n        <template\n          v-if=\"$slots['row-append']\"\n          #row-append=\"slotData\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot\n            name=\"row-append\"\n            v-bind=\"slotData\"\n          />\n        </template>\n      </RuiDataTableRow>\n    </template>\n    <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n    <RuiDataTableEmptyRow\n      v-if=\"noData && empty && !loading && !showError\"\n      :empty=\"empty\"\n    >\n      <template\n        v-if=\"$slots['no-data']\"\n        #no-data\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"no-data\" />\n      </template>\n      <template\n        v-if=\"$slots['empty-description']\"\n        #empty-description\n      >\n        <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n        <slot name=\"empty-description\" />\n      </template>\n    </RuiDataTableEmptyRow>\n    <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n    <slot\n      v-if=\"$slots['body.append']\"\n      :colspan=\"colspan\"\n      name=\"body.append\"\n    />\n  </tbody>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,OAAO;EAuBb,MAAM,EAAE,SAAS,YAAY,oBAAoB;EACjD,MAAM,EAAE,iBAAiB,oBAAuB;EAChD,MAAM,EAAE,aAAa,wBAA2B;;;;;;EAOhD,MAAM,YAAY,eAAwB,CAAC,CAAC,QAAA,SAAS,CAAC,QAAA,OAAO;;;;;EAM7D,MAAM,QAAQ,eAAwB,QAAA,WAAW,CAAC,QAAA,MAAM;;GAItD,OAAAC,UAAA,GAAAC,mBAqHQ,SAAA;IApHN,OAAKC,eAAA,CAAC,mCAAiC,CAC9BC,MAAA,OAAA,CAAO,CAAC,OAAK,EAAA,cAAkBA,MAAA,KAAA,EAAK,CAAA,CAAA,CAAA;IAC5C,cAAYA,MAAA,KAAA,KAAS,KAAA;;IAIdJ,KAAAA,OAAM,kBADdK,WAIE,KAAA,QAAA,gBAAA,EAFC,SAASD,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;IAIXA,MAAA,SAAA,KADRH,UAAA,GAAAM,YAcuBC,8BAAA;;KAZpB,SAAS,QAAA;KACT,OAAO,QAAA;KACP,cAAY,QAAA;KACZ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IAGJR,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAO,QAAA;KACZ,MAAA;KAGD,IAAAU,cAAqB,CAArBL,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;KAGzBJ,UAAA,IAAA,GAAAC,mBAgEWS,UAAA,MAAAC,WAhEsB,QAAA,WAAf,KAAK,UAAK;KAEjB,OAAA,UAAA,GAAA,mBAAA,UAAA,MAAA,CAAA,CAAAR,MAAA,KAAA,CAAK,CAAC,GAAG,KADlBH,UAAA,GAAAM,YAyBuBM,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;KAGEb,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,kBAAA;MACX,MAAA;MAGD,IAAAU,SAHe,aAAQ,CAGvBL,WAGE,KAAA,QAAA,gBAHFS,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAIZd,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,0BAAA;MACX,MAAA;MAGD,IAAAU,SAHuB,aAAQ,CAG/BL,WAGE,KAAA,QAAA,wBAHFS,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;KAItBb,IAAAA,KAAAA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA,KAAAA,CAAAA,MAAAA,UAAA,GAAAM,YAoCkBQ,yBAAA;MAlCf,KAAG,OAASX,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;;MAGQQ,WAAAR,MAAA,YAAA,IAAP,QAAG;;QACD,MAAA,QAAA;QAGT,IAAAM,SAHkB,aAAQ,CAG1BL,WAGE,KAAA,QAAA,QAFe,OADjBS,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;MAIZd,KAAAA,OAAM,mBAAA;OACX,MAAA;OAGD,IAAAU,SAHgB,aAAQ,CAGxBL,WAGE,KAAA,QAAA,iBAHFS,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;MAIZd,KAAAA,OAAM,gBAAA;OACX,MAAA;OAGD,IAAAU,SAHa,aAAQ,CAGrBL,WAGE,KAAA,QAAA,cAHFS,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;;IAKM,QAAA,WAAW,QAAA,UAAzCb,UAAA,GAAAM,YAAmDS,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAAO,CAAKZ,MAAA,SAAA,KADxCH,UAAA,GAAAM,YAkBuBU,8BAAA;;KAhBpB,OAAO,QAAA;IAGAjB,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,aAAA;KACX,MAAA;KAGD,IAAAU,cAAuB,CAAvBL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGjBL,IAAAA,KAAAA,GAAAA,KAAAA,OAAM,uBAAA;KACX,MAAA;KAGD,IAAAU,cAAiC,CAAjCL,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BL,KAAAA,OAAM,iBADdK,WAIE,KAAA,QAAA,eAAA,EAFC,SAASD,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}

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

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

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

@@ -1,4 +1,4 @@
-import type { TableColumn } from '../RuiTableHead.vue';
+import type { TableColumn } from '../RuiTableHead.vue.js';
 declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         column: TableColumn<T>;

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableEmptyRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\n\ndefineProps<{\n  empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<{\n  'no-data'?: () => any;\n  'empty-description'?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-empty\"\n  >\n    <Transition\n      appear\n      enter-active-class=\"transition ease-out duration-200 delay-200\"\n      enter-from-class=\"opacity-0 translate-y-1\"\n      enter-to-class=\"opacity-100 translate-y-0\"\n      leave-active-class=\"transition ease-in duration-150\"\n      leave-from-class=\"opacity-100 translate-y-0\"\n      leave-to-class=\"opacity-0 translate-y-1\"\n    >\n      <td\n        :class=\"classes.td\"\n        :colspan=\"colspan\"\n      >\n        <slot name=\"no-data\">\n          <RuiTableEmptyState\n            :label=\"empty.label\"\n            :description=\"empty.description\"\n          >\n            <template\n              v-if=\"$slots['empty-description']\"\n              #description\n            >\n              <slot name=\"empty-description\" />\n            </template>\n          </RuiTableEmptyState>\n        </slot>\n      </td>\n    </Transition>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;EAaA,MAAM,EAAE,SAAS,YAAY,oBAAoB;;GAI/C,OAAA,UAAA,GAAA,mBAgCK,MAAA;IA/BF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,OAAO;IACvB,WAAQ;GAER,GAAA,CAAA,YA2Ba,YAAA;IA1BX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;IAEf,SAAA,cAiBK,CAjBL,mBAiBK,MAAA;KAhBF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,EAAE;KACjB,SAAS,MAAA,OAAA;IAEV,GAAA,CAAA,WAYO,KAAA,QAAA,WAAA,CAAA,SAAA,CAXL,YAUqB,4BAAA;KATlB,OAAO,QAAA,MAAM;KACb,aAAa,QAAA,MAAM;IAGZA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,uBAAA;KACX,MAAA;KAED,IAAA,cAAiC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","_Transition","_withCtx","_createElementVNode","_renderSlot","RuiTableEmptyState","_createSlots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableEmptyRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\n\ndefineProps<{\n  empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<{\n  'no-data'?: () => any;\n  'empty-description'?: () => any;\n}>();\n\nconst { classes, colspan } = useDataTableStyling();\n</script>\n\n<template>\n  <tr\n    :class=\"classes.trEmpty\"\n    data-id=\"row-empty\"\n  >\n    <Transition\n      appear\n      enter-active-class=\"transition ease-out duration-200 delay-200\"\n      enter-from-class=\"opacity-0 translate-y-1\"\n      enter-to-class=\"opacity-100 translate-y-0\"\n      leave-active-class=\"transition ease-in duration-150\"\n      leave-from-class=\"opacity-100 translate-y-0\"\n      leave-to-class=\"opacity-0 translate-y-1\"\n    >\n      <td\n        :class=\"classes.td\"\n        :colspan=\"colspan\"\n      >\n        <slot name=\"no-data\">\n          <RuiTableEmptyState\n            :label=\"empty.label\"\n            :description=\"empty.description\"\n          >\n            <template\n              v-if=\"$slots['empty-description']\"\n              #description\n            >\n              <slot name=\"empty-description\" />\n            </template>\n          </RuiTableEmptyState>\n        </slot>\n      </td>\n    </Transition>\n  </tr>\n</template>\n"],"mappings":";;;;;;;;;EAaA,MAAM,EAAE,SAAS,YAAY,oBAAoB;;GAI/C,OAAAC,UAAA,GAAAC,mBAgCK,MAAA;IA/BF,OAAKC,eAAEC,MAAA,OAAA,CAAO,CAAC,OAAO;IACvB,WAAQ;GAERC,GAAAA,CAAAA,YA2BaC,YAAA;IA1BX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;IAEf,SAAAC,cAiBK,CAjBLC,mBAiBK,MAAA;KAhBF,OAAKL,eAAEC,MAAA,OAAA,CAAO,CAAC,EAAE;KACjB,SAASA,MAAA,OAAA;IAEVK,GAAAA,CAAAA,WAYO,KAAA,QAAA,WAAA,CAAA,SAAA,CAXLJ,YAUqBK,4BAAA;KATlB,OAAO,QAAA,MAAM;KACb,aAAa,QAAA,MAAM;IAGZV,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAM,uBAAA;KACX,MAAA;KAED,IAAAO,cAAiC,CAAjCE,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableExpandedRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableExpandedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport { useDataTableStyling } from '@/components/tables/data-table/context';\n\ndefineProps<{\n  row: T;\n  index: number;\n}>();\n\ndefineSlots<{\n  'expanded-item': (props: { row: T; index: number }) => any;\n}>();\n\nconst { classes, colspan, isMobile } = useDataTableStyling();\n\n/**\n * On mobile the expanded content attaches beneath its card: matching side\n * borders and a rounded, bordered bottom edge. It carries no top border, since\n * the parent card's flattened bottom edge is the divider, and `border-b!`\n * defeats the `divide-y-0` on the mobile tbody.\n */\nconst mobileExpandedClass = 'block border-x border-b! border-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":""}
+{"version":3,"file":"RuiDataTableExpandedRow.js","names":["_sfc_main"],"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.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-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"}
+{"version":3,"file":"RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_renderSlot"],"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,OAAAA,UAAA,GAAAC,mBAsBK,MAAA;IArBF,OAAKC,eAAA,CAAGC,MAAA,OAAA,CAAO,CAAC,cAAcA,MAAA,QAAA,IAAW,sBAAmB,EAAA,CAAA;IAC7D,WAAQ;GAGRC,GAAAA,CAAAA,mBAgBK,MAAA;IAfF,SAASD,MAAA,OAAA;IACV,OAAKD,eAAA,CAAC,QACEC,MAAA,OAAA,CAAO,CAAC,EAAE,CAAA;GAElBC,GAAAA,CAAAA,mBAUM,OAAA;IATH,OAAKF,eAAA,EAAA,iBAAA,CAAsBC,MAAA,QAAA,EAAQ,CAAA;IACnC,OAAO;IACR,WAAQ;GAERE,GAAAA,CAAAA,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-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":""}
+{"version":3,"file":"RuiDataTableGroupRow.js","names":["_sfc_main"],"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":""}