@rotki/ui-library 3.2.0 → 3.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTableHead.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiCheckbox","_createCommentVNode","_Fragment","_renderList","_renderSlot","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_toDisplayString","_createTextVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tableHeadStyles } from './table-head-styles';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n\n  [key: string]: any;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: keyof TableColumn<T>;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ column[columnAttr] }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"column[columnAttr]\">{{ column[columnAttr] }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTableHead.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiCheckbox","_createCommentVNode","_Fragment","_renderList","_renderSlot","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_toDisplayString","_createTextVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { getAlignClass, getColumnLabel, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tableHeadStyles } from './table-head-styles';\n\n/**\n * A sortable column name for `T`, the type of the data in the column: the name\n * must be a key of that object type.\n */\nexport type TableRowKey<T> = keyof T extends string ? keyof T : never;\n\nexport interface BaseTableColumn<T> {\n  key: TableRowKey<T> | string;\n  /** the header text, which the table reads unless `column-attr` names another property */\n  label?: string;\n  sortable?: boolean;\n  direction?: SortDirection;\n  align?: TableAlign;\n  class?: string;\n  cellClass?: string;\n  tdClass?: string;\n  colspan?: string | number;\n  rowspan?: string | number;\n  /**\n   * hide this column when the table is rendered in its stacked mobile layout\n   */\n  mobileHidden?: boolean;\n  /**\n   * pin this column to the card header (top row) in the stacked mobile layout\n   * instead of rendering it as a label/value pair. Intended for action columns\n   * such as an overflow menu. Ignored on non-mobile layouts.\n   */\n  mobileHeader?: boolean;\n}\n\n/**\n * A sortable table column, which ties `sortable: true` to a key that is a real\n * property of `T`, the type of data in the table.\n */\nexport interface SortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable: true;\n}\n\n/**\n * An interface representing a column in a table that cannot be sorted.\n * This can be mapped to an actual property of the object or to a virtual column.\n *\n * @typeparam T - The type of data in the table.\n */\nexport interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {\n  sortable?: false;\n}\n\nexport type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;\n\nexport interface SortColumn<T> {\n  column?: TableRowKey<T>;\n  direction: SortDirection;\n}\n\nexport type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;\n\nexport type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;\n\nexport interface GroupData<T> {\n  key: string;\n  value?: Partial<T>;\n}\n\nexport type GroupKey<T> = TableColumn<T>['key'];\n\nexport type GroupKeys<T> = GroupKey<T> | GroupKey<T>[] | undefined;\n\nexport interface Props<T> {\n  loading?: boolean;\n  stickyHeader?: boolean;\n  stick?: boolean;\n  selectable?: boolean;\n  disableCheckAll?: boolean;\n  colspan?: number;\n  columns?: TableColumn<T>[];\n  capitalizeHeaders?: boolean;\n  isAllSelected?: boolean;\n  indeterminate?: boolean;\n  dense?: boolean;\n  sortedMap?: Partial<Record<TableRowKey<T>, SortColumn<T>>>;\n  sortData?: TableSortData<T>;\n  columnAttr?: string;\n  dataId?: string;\n}\n\nconst {\n  loading = false,\n  stickyHeader = false,\n  stick = false,\n  selectable = false,\n  disableCheckAll = false,\n  colspan = 0,\n  columns,\n  capitalizeHeaders = false,\n  isAllSelected = false,\n  indeterminate = false,\n  dense = false,\n  sortedMap = {} as Partial<Record<TableRowKey<T>, SortColumn<T>>>,\n  columnAttr = 'label',\n  sortData,\n  dataId = 'head-main',\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'select:all': [value: boolean];\n  'sort': [value: { key: TableRowKey<T>; direction?: SortDirection }];\n}>();\n\nconst headerPosition = computed<'default' | 'sticky' | 'fixed'>(() => {\n  if (stickyHeader && stick)\n    return 'fixed';\n  if (stickyHeader)\n    return 'sticky';\n  return 'default';\n});\n\nconst ui = computed<ReturnType<typeof tableHeadStyles>>(() => tableHeadStyles({\n  position: get(headerPosition),\n  dense,\n}));\n\nfunction getSortIconClass(key: TableColumn<T>['key']): string | undefined {\n  if (!isSortedBy(key))\n    return undefined;\n  const direction = getSortDirection(key);\n  return `opacity-100! ${direction === SortDirection.asc ? 'rotate-180' : 'rotate-0'}`;\n}\n\n/**\n * An unsorted column shows a neutral up-down icon, so nothing reads as sorted\n * until it is; the sorted column shows its direction.\n */\nfunction getSortIconName(key: TableColumn<T>['key']): RuiIcons {\n  return isSortedBy(key) ? 'lu-arrow-down' : 'lu-arrow-up-down';\n}\n\nfunction getColumnTextClass(key: TableColumn<T>['key']): string {\n  return get(ui).columnText({ class: isSortedBy(key) ? 'text-rui-text' : undefined });\n}\n\nfunction onSort({ key, direction }: TableColumn<T>): void {\n  return emit('sort', {\n    key: key as TableRowKey<T>,\n    direction: direction ?? SortDirection.asc,\n  });\n}\n\nfunction onToggleAll(checked: boolean) {\n  return emit('select:all', checked);\n}\n\nfunction isSortedBy(key: TableColumn<T>['key']): boolean {\n  return key in sortedMap;\n}\n\nfunction getSortIndex(key: TableColumn<T>['key']): number {\n  if (!sortData || !Array.isArray(sortData) || !isSortedBy(key))\n    return -1;\n\n  return sortData.findIndex(sort => sort.column === key);\n}\n\n/**\n * A column's place in a multi-column sort, shown beside its arrow. A lone sorted column shows none,\n * since its arrow already says everything.\n */\nfunction getSortPosition(key: TableColumn<T>['key']): number | undefined {\n  if (!Array.isArray(sortData) || sortData.length < 2)\n    return undefined;\n  const index = getSortIndex(key);\n  return index >= 0 ? index + 1 : undefined;\n}\n\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection | undefined {\n  return sortedMap[key]?.direction;\n}\n\nfunction getAriaSort(column: TableColumn<T>): 'ascending' | 'descending' | 'none' | undefined {\n  if (!column.sortable)\n    return undefined;\n  const direction = getSortDirection(column.key);\n  if (direction === SortDirection.asc)\n    return 'ascending';\n  if (direction === SortDirection.desc)\n    return 'descending';\n  return 'none';\n}\n\n/**\n * The name a screen reader hears for a column drawn without a label, since an empty header cell\n * leaves the column unnamed: the built-in expand column is \"Details\", any other its key.\n *\n * @param column - the column whose label is empty\n * @returns Details or the column key\n */\nfunction getHiddenHeaderText(column: TableColumn<T>): string {\n  return column.key === 'expand' ? 'Details' : column.key.toString();\n}\n</script>\n\n<template>\n  <thead\n    :data-id=\"dataId\"\n    :class=\"ui.thead()\"\n  >\n    <tr>\n      <th\n        v-if=\"selectable\"\n        :class=\"ui.checkbox()\"\n        scope=\"col\"\n        colspan=\"1\"\n        rowspan=\"1\"\n      >\n        <RuiCheckbox\n          :disabled=\"disableCheckAll\"\n          :indeterminate=\"indeterminate\"\n          :model-value=\"isAllSelected\"\n          :size=\"dense ? 'sm' : undefined\"\n          color=\"primary\"\n          data-id=\"table-toggle-check-all\"\n          aria-label=\"Select all rows\"\n          details=\"hidden\"\n          @update:model-value=\"onToggleAll($event)\"\n        />\n      </th>\n\n      <th\n        v-for=\"column in columns\"\n        :key=\"column.key\"\n        :class=\"[\n          ui.th({ class: getAlignClass(column.align) }),\n          column.class,\n          // only labels the table made up from row keys; a label the consumer wrote is shown as written\n          { capitalize: capitalizeHeaders },\n        ]\"\n        scope=\"col\"\n        :colspan=\"column.colspan ?? 1\"\n        :rowspan=\"column.rowspan ?? 1\"\n        :aria-sort=\"getAriaSort(column)\"\n        :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n      >\n        <slot\n          :column=\"column\"\n          :name=\"`header.${column.key.toString()}`\"\n        >\n          <RuiButton\n            v-if=\"column.sortable\"\n            :class=\"ui.sortButton({ class: getSortButtonAlignClass(column.align) })\"\n            :data-sorted=\"isSortedBy(column.key) || undefined\"\n            :data-direction=\"getSortDirection(column.key)\"\n            size=\"sm\"\n            variant=\"text\"\n            @click=\"onSort(column)\"\n          >\n            <span\n              :class=\"getColumnTextClass(column.key)\"\n              data-id=\"column-text\"\n            >\n              <slot\n                :name=\"`header.text.${column.key.toString()}`\"\n                :column=\"column\"\n              >\n                {{ getColumnLabel(column, columnAttr) }}\n              </slot>\n            </span>\n\n            <template\n              v-if=\"column.align === TableAlign.end\"\n              #prepend\n            >\n              <span\n                v-if=\"getSortPosition(column.key)\"\n                :class=\"ui.sortPosition({ class: '-mr-1.5' })\"\n                data-id=\"sort-position\"\n              >\n                {{ getSortPosition(column.key) }}\n              </span>\n              <RuiIcon\n                :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                :name=\"getSortIconName(column.key)\"\n                size=\"18\"\n              />\n            </template>\n\n            <template #append>\n              <template v-if=\"column.align !== TableAlign.end\">\n                <RuiIcon\n                  :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n                  :name=\"getSortIconName(column.key)\"\n                  size=\"18\"\n                />\n                <span\n                  v-if=\"getSortPosition(column.key)\"\n                  :class=\"ui.sortPosition({ class: '-ml-1.5' })\"\n                  data-id=\"sort-position\"\n                >\n                  {{ getSortPosition(column.key) }}\n                </span>\n              </template>\n            </template>\n          </RuiButton>\n          <span\n            v-else\n            :class=\"ui.columnText()\"\n            data-id=\"column-text\"\n          >\n            <slot\n              :name=\"`header.text.${column.key.toString()}`\"\n              :column=\"column\"\n            >\n              <template v-if=\"getColumnLabel(column, columnAttr)\">{{ getColumnLabel(column, columnAttr) }}</template>\n              <span\n                v-else\n                class=\"sr-only\"\n              >\n                {{ getHiddenHeaderText(column) }}\n              </span>\n            </slot>\n          </span>\n        </slot>\n      </th>\n    </tr>\n    <tr\n      :class=\"ui.loaderRow()\"\n      :data-id=\"loading ? 'thead-loader' : undefined\"\n      :aria-hidden=\"loading ? undefined : 'true'\"\n    >\n      <!-- a `td`, not a header cell, so it never counts as a column heading -->\n      <td\n        :class=\"ui.progress()\"\n        :colspan=\"colspan\"\n      >\n        <div\n          v-if=\"loading\"\n          :class=\"ui.progressWrapper()\"\n        >\n          <RuiProgress\n            color=\"primary\"\n            variant=\"indeterminate\"\n          />\n        </div>\n      </td>\n    </tr>\n  </thead>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTableLoadingState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTableLoadingState.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof TableLoadingStateProps>>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTableLoadingState.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from 'vue';
 export interface TableLoadingStateProps {
     /** Diameter of the spinner, in pixels. */
     size?: number | string;
@@ -8,6 +9,7 @@ export interface TableLoadingStateProps {
      */
     compact?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<TableLoadingStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableLoadingStateProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = TableLoadingStateProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof TableLoadingStateProps>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,MAAM,KAAK,eAAiD,cAAc,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIpF,OAAAA,UAAA,GAAAC,mBAUM,OAAA;IATH,OAAKC,eAAE,GAAA,MAAG,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAKEC,qBAAA;IAJA,UAAA;IACA,OAAM;IACL,MAAM,QAAA;IACP,SAAQ"}
+{"version":3,"file":"RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiProgress"],"sources":["../../../src/components/tables/RuiTableLoadingState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { loadingStyles } from './table-loading-state-styles';\n\nexport interface TableLoadingStateProps {\n  /** Diameter of the spinner, in pixels. */\n  size?: number | string;\n  /**\n   * Drops the reserved height, for a table that only has room to say a read is\n   * in flight. Matches the same flag on RuiTableEmptyState, so the two states\n   * do not resize the table as they swap.\n   */\n  compact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTableLoadingState',\n});\n\nconst { size = 40, compact = false } = defineProps<TableLoadingStateProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof TableLoadingStateProps>>();\n\nconst ui = computed<ReturnType<typeof loadingStyles>>(() => loadingStyles({ compact }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"table-loading\"\n  >\n    <RuiProgress\n      circular\n      color=\"primary\"\n      :size=\"size\"\n      variant=\"indeterminate\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,MAAM,KAAK,eAAiD,cAAc,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIpF,OAAAA,UAAA,GAAAC,mBAUM,OAAA;IATH,OAAKC,eAAE,GAAA,MAAG,KAAI,CAAA;IACf,WAAQ;GAERC,GAAAA,CAAAA,YAKEC,qBAAA;IAJA,UAAA;IACA,OAAM;IACL,MAAM,QAAA;IACP,SAAQ"}

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

@@ -1 +1 @@
-{"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 { paginationStyles } from './table-pagination-styles';\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 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        details=\"hidden\"\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        details=\"hidden\"\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        details=\"hidden\"\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 type { HTMLAttributes } from 'vue';\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 { paginationStyles } from './table-pagination-styles';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\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        details=\"hidden\"\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        details=\"hidden\"\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        details=\"hidden\"\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.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import { type TablePaginationData } from './use-pagination-navigation.js';
 export type { TablePaginationData };
 export interface Props {
@@ -17,7 +18,7 @@ export interface Props {
      */
     rangesThreshold?: number;
 }
-type __VLS_Props = Props;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_ModelProps = {
     modelValue: TablePaginationData;
 };

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":["_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 { paginationStyles } from './table-pagination-styles';\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 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        details=\"hidden\"\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        details=\"hidden\"\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        details=\"hidden\"\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 type { HTMLAttributes } from 'vue';\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 { paginationStyles } from './table-pagination-styles';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\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        details=\"hidden\"\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        details=\"hidden\"\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        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"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":""}
+{"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';\nimport { getColumnLabel } from '@/components/tables/table-props';\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>(() => getColumnLabel(column, columnAttr) ?? '');\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n\n/** A stacked card shows a placeholder for an empty value rather than a bare label. */\nconst showMobilePlaceholder = computed<boolean>(() => {\n  if (!get(showMobileLabel))\n    return false;\n  const value = cellValue(row, column.key);\n  return value === undefined || value === null || value === '';\n});\n</script>\n\n<template>\n  <td\n    :class=\"[\n      column.tdClass,\n      column.cellClass,\n      isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n    ]\"\n    :colspan=\"column.colspan ?? 1\"\n    :rowspan=\"column.rowspan ?? 1\"\n  >\n    <span\n      v-if=\"showMobileLabel\"\n      aria-hidden=\"true\"\n      class=\"shrink-0 text-left text-caption text-rui-text-secondary\"\n      data-id=\"cell-label\"\n    >\n      {{ mobileLabel }}\n    </span>\n    <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n      <slot\n        :column=\"column\"\n        :row=\"row\"\n        :index=\"index\"\n      >\n        <RuiExpandButton\n          v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n          :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n          @click=\"onToggleExpand(row)\"\n        />\n        <span\n          v-else-if=\"showMobilePlaceholder\"\n          class=\"text-rui-text-disabled\"\n          data-id=\"cell-placeholder\"\n        >\n          –\n        </span>\n        <template v-else-if=\"column.key !== 'expand'\">\n          {{ cellValue(row, column.key) }}\n        </template>\n      </slot>\n    </div>\n  </td>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,7 @@
 import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from "./context.js";
 import RuiExpandButton_default from "../RuiExpandButton.js";
+import { getColumnLabel } from "../table-props.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
 //#region src/components/tables/data-table/RuiDataTableCell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["colspan", "rowspan"];
@@ -34,10 +35,7 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* empty slot must not fall back to a toggle they deliberately withheld.
 		*/
 		const ownsExpandColumn = computed(() => itemSlotKeys.has("expand"));
-		const mobileLabel = computed(() => {
-			const label = __props.column[columnAttr];
-			return label === void 0 || label === null ? "" : String(label);
-		});
+		const mobileLabel = computed(() => getColumnLabel(__props.column, columnAttr) ?? "");
 		const showMobileLabel = computed(() => get(isMobile) && __props.column.key !== "expand" && get(mobileLabel).length > 0);
 		/** A stacked card shows a placeholder for an empty value rather than a bare label. */
 		const showMobilePlaceholder = computed(() => {

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":["_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"}
+{"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';\nimport { getColumnLabel } from '@/components/tables/table-props';\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>(() => getColumnLabel(column, columnAttr) ?? '');\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,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,eAAe,QAAA,QAAQ,UAAU,KAAK,EAAE;EACnF,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/RuiDataTableMobileSort.js.map

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

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

@@ -3,7 +3,7 @@ import { SortDirection } from '../table-props.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<{
         columns: TableColumn<T>[];
-        columnAttr?: keyof TableColumn<T>;
+        columnAttr?: string;
         sortedMap: Partial<Record<TableRowKey<T>, SortColumn<T>>>;
         dense?: boolean;
     } & {

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

@@ -2,7 +2,7 @@ import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
-import { SortDirection } from "../table-props.js";
+import { SortDirection, getColumnLabel } from "../table-props.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/tables/data-table/RuiDataTableMobileSort.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "py-1 min-w-40" };
@@ -26,8 +26,7 @@ var RuiDataTableMobileSort_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		const emit = __emit;
 		const sortableColumns = computed(() => __props.columns.filter((column) => column.sortable));
 		function columnLabel(column) {
-			const label = column[__props.columnAttr];
-			return label === void 0 || label === null ? String(column.key) : String(label);
+			return getColumnLabel(column, __props.columnAttr) ?? String(column.key);
 		}
 		function sortDirection(key) {
 			return __props.sortedMap[key]?.direction;

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

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

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

@@ -27,7 +27,7 @@ export interface DataTableColumnsContext<T extends object = any> {
     cellValue: (row: T, key: TableColumn<T>['key']) => T[keyof T];
     itemSlotKeys: Set<string>;
     /** the column definition attribute used as the visible label (e.g. `label`) */
-    columnAttr: keyof TableColumn<T>;
+    columnAttr: string;
 }
 export interface DataTableSelectionContext<T extends object = any, IdType extends keyof T = keyof T> {
     selectedData: Ref<T[IdType][] | undefined>;
@@ -65,15 +65,15 @@ export type DataTableContext<T extends object = any, IdType extends keyof T = ke
 export declare function provideDataTableStyling(context: DataTableStylingContext): void;
 export declare function useDataTableStyling(): DataTableStylingContext;
 export declare function provideDataTableColumns<T extends object>(context: DataTableColumnsContext<T>): void;
-export declare function useDataTableColumns<T extends object = any>(): DataTableColumnsContext<T>;
+export declare function useDataTableColumns<T extends object>(): DataTableColumnsContext<T>;
 export declare function provideDataTableSelection<T extends object, IdType extends keyof T>(context: DataTableSelectionContext<T, IdType>): void;
-export declare function useDataTableSelection<T extends object = any, IdType extends keyof T = keyof T>(): DataTableSelectionContext<T, IdType>;
+export declare function useDataTableSelection<T extends object, IdType extends keyof T = keyof T>(): DataTableSelectionContext<T, IdType>;
 export declare function provideDataTableExpansion<T extends object, IdType extends keyof T>(context: DataTableExpansionContext<T, IdType>): void;
-export declare function useDataTableExpansion<T extends object = any, IdType extends keyof T = keyof T>(): DataTableExpansionContext<T, IdType>;
+export declare function useDataTableExpansion<T extends object, IdType extends keyof T = keyof T>(): DataTableExpansionContext<T, IdType>;
 export declare function provideDataTableGrouping<T extends object>(context: DataTableGroupingContext<T>): void;
-export declare function useDataTableGrouping<T extends object = any>(): DataTableGroupingContext<T>;
+export declare function useDataTableGrouping<T extends object>(): DataTableGroupingContext<T>;
 export declare function provideDataTableRowIdentity<T extends object, IdType extends keyof T>(context: DataTableRowIdentityContext<T, IdType>): void;
-export declare function useDataTableRowIdentity<T extends object = any, IdType extends keyof T = keyof T>(): DataTableRowIdentityContext<T, IdType>;
+export declare function useDataTableRowIdentity<T extends object, IdType extends keyof T = keyof T>(): DataTableRowIdentityContext<T, IdType>;
 /** Marks descendant data tables as nested (e.g. rendered inside an expanded row). */
 export declare function provideDataTableNested(): void;
 /** True when this data table is rendered inside another data table. */

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

@@ -8,7 +8,7 @@ var DATA_TABLE_GROUPING = Symbol("data-table-grouping");
 var DATA_TABLE_ROW_IDENTITY = Symbol("data-table-row-identity");
 var DATA_TABLE_NESTED = Symbol("data-table-nested");
 function injectOrThrow(key, name) {
-	const context = inject(key);
+	const context = inject(key, void 0);
 	if (context === void 0) throw new Error(`${name} must be used within a RuiDataTable`);
 	return context;
 }

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

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

package/dist/components/tables/table-props.d.ts

@@ -22,3 +22,12 @@ export declare function getAlignClass(align?: TableAlign): string;
  * Returns extra class for sort button when column is center-aligned.
  */
 export declare function getSortButtonAlignClass(align?: TableAlign): string | undefined;
+/**
+ * Reads a column's header text from the property `column-attr` names. That is `label` unless
+ * the app names one of its own, which its column type then declares.
+ *
+ * @param column - the column definition
+ * @param attr - the property holding the header text
+ * @returns the text, or `undefined` when the column has none
+ */
+export declare function getColumnLabel(column: object, attr: string): string | undefined;

package/dist/components/tables/table-props.js

@@ -29,7 +29,19 @@ function getAlignClass(align = TableAlign.start) {
 function getSortButtonAlignClass(align = TableAlign.start) {
 	return align === TableAlign.center ? "ml-6" : void 0;
 }
+/**
+* Reads a column's header text from the property `column-attr` names. That is `label` unless
+* the app names one of its own, which its column type then declares.
+*
+* @param column - the column definition
+* @param attr - the property holding the header text
+* @returns the text, or `undefined` when the column has none
+*/
+function getColumnLabel(column, attr) {
+	const label = Reflect.get(column, attr);
+	return label === void 0 || label === null ? void 0 : String(label);
+}
 //#endregion
-export { GroupExpandButtonPosition, SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass };
+export { GroupExpandButtonPosition, SortDirection, TableAlign, getAlignClass, getColumnLabel, getSortButtonAlignClass };
 
 //# sourceMappingURL=table-props.js.map

package/dist/components/tables/table-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const GroupExpandButtonPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start): string {\n  return ALIGN_CLASSES[align];\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,4BAA4B;CACvC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;AACR;AAIA,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;;;;AAKA,SAAgB,cAAc,QAAoB,WAAW,OAAe;CAC1E,OAAO,cAAc;AACvB;;;;AAKA,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;CAChG,OAAO,UAAU,WAAW,SAAS,SAAS,KAAA;AAChD"}
+{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const GroupExpandButtonPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start): string {\n  return ALIGN_CLASSES[align];\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n\n/**\n * Reads a column's header text from the property `column-attr` names. That is `label` unless\n * the app names one of its own, which its column type then declares.\n *\n * @param column - the column definition\n * @param attr - the property holding the header text\n * @returns the text, or `undefined` when the column has none\n */\nexport function getColumnLabel(column: object, attr: string): string | undefined {\n  const label: unknown = Reflect.get(column, attr);\n  return label === undefined || label === null ? undefined : String(label);\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,4BAA4B;CACvC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;AACR;AAIA,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;;;;AAKA,SAAgB,cAAc,QAAoB,WAAW,OAAe;CAC1E,OAAO,cAAc;AACvB;;;;AAKA,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;CAChG,OAAO,UAAU,WAAW,SAAS,SAAS,KAAA;AAChD;;;;;;;;;AAUA,SAAgB,eAAe,QAAgB,MAAkC;CAC/E,MAAM,QAAiB,QAAQ,IAAI,QAAQ,IAAI;CAC/C,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAA,IAAY,OAAO,KAAK;AACzE"}

package/dist/components/tabs/tab/RuiTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn } from '@/utils/tv';\nimport { tabStyles } from './tab-styles';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\nconst ui = computed<ReturnType<typeof tabStyles>>(() => tabStyles({\n  variant,\n  layout: get(layout),\n  align,\n  grow,\n  disabled,\n  active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n  if (disabled) {\n    event.preventDefault();\n    return;\n  }\n\n  emit('click', value);\n  if (navigate && get(isSelf))\n    navigate(event);\n}\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :type=\"isLink ? undefined : 'button'\"\n    :class=\"[\n      ui.root({ class: cn(classNames?.root) }),\n      isEffectivelyActive && classNames?.active,\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"isLink ? undefined : disabled\"\n    :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n    :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n    v-bind=\"$attrs\"\n    @click=\"onClick($event)\"\n  >\n    <span :class=\"ui.content()\">\n      <slot\n        v-if=\"slots.prepend\"\n        name=\"prepend\"\n      />\n      <slot />\n      <slot\n        v-if=\"slots.append\"\n        name=\"append\"\n      />\n    </span>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn } from '@/utils/tv';\nimport { tabStyles } from './tab-styles';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n  variant = TabVariant.underline,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onClick'>>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\nconst ui = computed<ReturnType<typeof tabStyles>>(() => tabStyles({\n  variant,\n  layout: get(layout),\n  align,\n  grow,\n  disabled,\n  active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n  if (disabled) {\n    event.preventDefault();\n    return;\n  }\n\n  emit('click', value);\n  if (navigate && get(isSelf))\n    navigate(event);\n}\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :type=\"isLink ? undefined : 'button'\"\n    :class=\"[\n      ui.root({ class: cn(classNames?.root) }),\n      isEffectivelyActive && classNames?.active,\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"isLink ? undefined : disabled\"\n    :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n    :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n    v-bind=\"$attrs\"\n    @click=\"onClick($event)\"\n  >\n    <span :class=\"ui.content()\">\n      <slot\n        v-if=\"slots.prepend\"\n        name=\"prepend\"\n      />\n      <slot />\n      <slot\n        v-if=\"slots.append\"\n        name=\"append\"\n      />\n    </span>\n  </component>\n</template>\n"],"mappings":""}