npm - @rotki/ui-library - Versions diffs - 3.1.6 → 3.2.0 - Mend

@rotki/ui-library 3.1.6 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

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

	@@ -1 +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 { NESTED_BAR } from '@/components/tables/data-table-styles';\nimport { getAlignClass, getSortButtonAlignClass, SortDirection, TableAlign } from '@/components/tables/table-props';\nimport { tv } from '@/utils/tv';\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 tableHeadStyles = tv({\n slots: {\n thead: 'between:border-t between:border-b-0 between:border-rui-divider',\n checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,\n // tinted like the pagination bar, framing the body; opaque, so rows scroll behind a stuck header\n th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,\n // labels read as secondary to the data; the sorted column's label steps up to primary\n columnText: 'text-rui-text-secondary font-medium text-[0.8125rem] leading-5',\n // the negative margin cancels the button's own padding so the label lines up with the cells below\n sortButton: 'inline-flex group/sort -mx-1.5',\n // a resting icon marks sortable columns for keyboard and touch users, at 3:1 on a nested table's darker header\n sortIcon: 'transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100',\n // tucked against the arrow, closer than the button's gap\n sortPosition: 'text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary',\n /\n * The row is always there and only its bar comes and goes: a collapsed-border table gives even a\n * zero-height row half a pixel, so adding the row on load pushed the body down.\n /\n loaderRow: 'border-none',\n progress: 'p-0 h-0',\n progressWrapper: 'h-0 -mt-1',\n },\n variants: {\n position: {\n default: {},\n sticky: { thead: 'top-0 z-rui-raised absolute' },\n fixed: {\n thead: 'top-0 z-rui-raised fixed',\n th: 'border-b border-b-rui-divider',\n },\n },\n // a fixed height evens out rows with and without sort buttons; `:where()` lets a column's `class` win\n dense: {\n true: { th: '[:where(&)]:py-0.5 [:where(&)]:h-8' },\n false: { th: '[:where(&)]:py-1 [:where(&)]:h-10' },\n },\n },\n defaultVariants: {\n position: 'default',\n dense: false,\n },\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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"}
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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"}

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

	@@ -1 +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 { tv } from '~~@/utils/tv~~';\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 loadingStyles = tv({\n slots: {\n root: 'flex items-center justify-center',\n },\n variants: {\n compact: {\n true: { root: 'py-6' },\n false: { root: 'min-h-56 py-8' },\n },\n },\n});\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":""}
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":""}

package/dist/components/tables/RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { tv } from "../../utils/tv.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
+import { loadingStyles } from "./table-loading-state-styles.js";
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock } from "vue";
 //#region src/components/tables/RuiTableLoadingState.vue?vue&type=script&setup=true&lang.ts
 var RuiTableLoadingState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -13,13 +13,6 @@ var RuiTableLoadingState_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		}
 	},
 	setup(__props) {
-		const loadingStyles = tv({
-			slots: { root: "flex items-center justify-center" },
-			variants: { compact: {
-				true: { root: "py-6" },
-				false: { root: "min-h-56 py-8" }
-			} }
-		});
 		const ui = computed(() => loadingStyles({ compact: __props.compact }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

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

	@@ -1 +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 { tv } from '~~@/utils/tv~~';\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 loadingStyles = tv({\n slots: {\n root: 'flex items-center justify-center',\n },\n variants: {\n compact: {\n true: { root: 'py-6' },\n false: { root: 'min-h-56 py-8' },\n },\n },\n});\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,~~gBAAgB,GAAG;GACvB,OAAO,EACL,MAAM,mCACR;GACA,UAAU,EACR,SAAS;IACP,MAAM,EAAE,MAAM,OAAO;IACrB,OAAO,EAAE,MAAM,gBAAgB;GACjC,EACF;EACF,CAAC;EAED,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"}
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"}

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

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

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { useTable } from "../../composables/defaults/table.js";
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import RuiTextField_default from "../forms/text-field/RuiTextField.js";
 import RuiMenuSelect_default from "../forms/select/RuiMenuSelect.js";
 import { usePaginationNavigation } from "./use-pagination-navigation.js";
+import { paginationStyles } from "./table-pagination-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeModels, normalizeClass, openBlock, ref, toDisplayString, unref, useId, useModel, watch, withCtx, withKeys } from "vue";
 //#region src/components/tables/RuiTablePagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
@@ -37,35 +37,6 @@ var RuiTablePagination_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const paginationStyles = tv({
-			slots: {
-				wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
-				limit: "flex items-center between:ml-2 between:mr-0 text-caption",
-				ranges: "flex items-center between:ml-2 between:mr-0 text-caption pr-2",
-				pageInput: "w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!",
-				sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
-				select: "text-xs! pl-3!",
-				indicator: "text-rui-text text-caption whitespace-nowrap",
-				navigation: "flex items-center"
-			},
-			variants: {
-				dense: {
-					true: {
-						select: "min-h-7!",
-						pageInput: "[&_input]:py-1!"
-					},
-					false: {
-						select: "min-h-8!",
-						pageInput: "[&_input]:py-1.5!"
-					}
-				},
-				mobile: { true: {
-					wrapper: "flex-nowrap justify-between gap-x-2 gap-y-0",
-					ranges: "pr-0",
-					sectionLabel: "sr-only"
-				} }
-			}
-		});
 		const ui = computed(() => paginationStyles({
 			dense: __props.dense,
 			mobile: __props.mobile

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

	@@ -1 +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 { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n dense?: boolean;\n disablePerPage?: boolean;\n loading?: boolean;\n /*\n Render a compact, touch-friendly layout: the sections spread across the\n * full width and the first/last jump buttons are dropped to save space.\n /\n mobile?: boolean;\n /\n Maximum number of pages before the jump-to-page dropdown is replaced\n * with a numeric input. Set to `1` to use the input whenever there is more\n * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n * past that materialising the full range list stalls the main thread.\n /\n rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n dense = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n mobile = false,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n slots: {\n wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n select: 'text-xs! pl-3!',\n indicator: 'text-rui-text text-caption whitespace-nowrap',\n navigation: 'flex items-center',\n },\n variants: {\n // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n dense: {\n true: {\n select: 'min-h-7!',\n pageInput: '[&_input]:py-1!',\n },\n false: {\n select: 'min-h-8!',\n pageInput: '[&_input]:py-1.5!',\n },\n },\n mobile: {\n true: {\n wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n ranges: 'pr-0',\n // sr-only rather than hidden: a display:none label names nothing\n sectionLabel: 'sr-only',\n },\n },\n },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n limits,\n currentLimit,\n pages,\n ranges,\n indicatorText,\n currentRange,\n useInputJump,\n hasPrev,\n hasNext,\n onPrev,\n onNext,\n onFirst,\n onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/\n With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n /\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/\n The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n const { total } = get(modelValue);\n return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n const parsed = Number.parseInt(get(pageDraft), 10);\n const maxPage = get(pages);\n if (!Number.isFinite(parsed) \|\| maxPage === 0) {\n set(pageDraft, String(get(currentRange)));\n return;\n }\n const clamped = Math.min(Math.max(parsed, 1), maxPage);\n if (clamped !== get(currentRange))\n set(currentRange, clamped);\n set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <div\n :class=\"ui.limit()\"\n data-id=\"table-pagination-limit-section\"\n >\n <label\n :for=\"limitId\"\n :class=\"ui.sectionLabel()\"\n >\n Rows per page:\n </label>\n <RuiMenuSelect\n :id=\"limitId\"\n v-model=\"currentLimit\"\n :options=\"limits\"\n :disabled=\"loading \|\| disablePerPage \|\| everyLimitFits\"\n :class-names=\"{ label: ui.select() }\"\n label=\"\"\n name=\"limit\"\n key-attr=\"limit\"\n text-attr=\"limit\"\n 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,aAAaA,SAAgC,SAAA,YAAmB;EAUtE,MAAM,mBAAmB,GAAG;GAC1B,OAAO;IACL,SAAS;IACT,OAAO;IACP,QAAQ;IACR,WAAW;IACX,cAAc;IACd,QAAQ;IACR,WAAW;IACX,YAAY;GACd;GACA,UAAU;IAER,OAAO;KACL,MAAM;MACJ,QAAQ;MACR,WAAW;KACb;KACA,OAAO;MACL,QAAQ;MACR,WAAW;KACb;IACF;IACA,QAAQ,EACN,MAAM;KACJ,SAAS;KACT,QAAQ;KAER,cAAc;IAChB,EACF;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAAoD,iBAAiB;GAAE,OAAI,QAAA;GAAG,QAAK,QAAA;EAAE,CAAC,CAAC;EAElG,MAAM,gBAAgB,SAAS;EAE/B,MAAM,EACJ,QACA,cACA,OACA,QACA,eACA,cACA,cACA,SACA,SACA,QACA,QACA,SACA,WACE,wBAAwB,YAAY,qBAAqB,QAAA,eAAe;;;;;EAM5E,MAAM,aAAa,eAAwB,IAAI,KAAK,KAAK,CAAC;;;;;;EAO1D,MAAM,iBAAiB,eAAwB;GAC7C,MAAM,EAAE,UAAU,IAAI,UAAU;GAChC,OAAO,IAAI,UAAU,KAAK,IAAI,MAAM,CAAC,CAAC,OAAO,EAAE,YAAY,SAAS,KAAK;EAC3E,CAAC;EAED,MAAM,YAAY,IAAY,OAAO,IAAI,YAAY,CAAC,CAAC;EAEvD,MAAM,eAAe,UAAU;GAC7B,IAAI,WAAW,OAAO,KAAK,CAAC;EAC9B,CAAC;EAED,SAAS,kBAAwB;GAC/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,GAAG,EAAE;GACjD,MAAM,UAAU,IAAI,KAAK;GACzB,IAAI,CAAC,OAAO,SAAS,MAAM,KAAK,YAAY,GAAG;IAC7C,IAAI,WAAW,OAAO,IAAI,YAAY,CAAC,CAAC;IACxC;GACF;GACA,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,OAAO;GACrD,IAAI,YAAY,IAAI,YAAY,GAC9B,IAAI,cAAc,OAAO;GAC3B,IAAI,WAAW,OAAO,OAAO,CAAC;EAChC;EAEA,MAAM,UAAU,MAAM;EACtB,MAAM,WAAW,MAAM;;GAIrB,OAAAC,UAAA,GAAAC,mBA0HM,OAAA,EA1HA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;IACrBC,mBAwBM,OAAA;KAvBH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAERC,GAAAA,CAAAA,mBAKQ,SAAA;KAJL,KAAKD,MAAA,OAAA;KACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA;IACxB,GAAA,oBAED,IAAA,UAAA,GACAE,YAaEC,uBAAA;KAZC,IAAIH,MAAA,OAAA;KACI,YAAAA,MAAA,YAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;KACpB,SAASJ,MAAA,MAAA;KACT,UAAU,QAAA,WAAW,QAAA,kBAAkBA,MAAA,cAAA;KACvC,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;KAChC,OAAM;KACN,MAAK;KACL,YAAS;KACT,aAAU;KACV,SAAQ;KACR,OAAA;KACA,WAAQ;;;;;;;;IAGZC,mBA4CM,OAAA;KA3CH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KACjB,WAAQ;;KAERC,mBAKQ,SAAA;MAJL,KAAKD,MAAA,QAAA;MACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,EAAA,OAAUA,MAAA,YAAA,IAAe,KAAA,IAAS,UAAA,CAAA,CAAA;KAC1D,GAAA,UAED,IAAA,UAAA;KAEQA,MAAA,YAAA,KADRH,UAAA,GAAAQ,YAeEC,sBAAA;;MAbC,IAAIN,MAAA,QAAA;MACI,YAAAA,MAAA,SAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,SAAA,IAAA,UAAS,QAAA,SAAA;MACjB,UAAU,QAAA,WAAWJ,MAAA,UAAA;MACrB,OAAKD,eAAA,CAAGC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,CAAA;MACrB,MAAK;MACL,KAAI;MACH,KAAKA,MAAA,KAAA;MACN,WAAU;MACV,SAAQ;MACR,OAAA;MACA,WAAQ;MACP,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,gBAAe;MACrB,WAAO,OAAA,OAAA,OAAA,KAAAO,UAAA,WAAQ,gBAAe,GAAA,CAAA,OAAA,CAAA;;;;;;;KAGpBP,CAAAA,KAAAA,MAAA,MAAA,CAAM,CAAC,SAAM,KAD1BH,UAAA,GAAAQ,YAcEF,uBAAA;;MAZC,IAAIH,MAAA,QAAA;MACI,YAAAA,MAAA,YAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;MACpB,SAASJ,MAAA,MAAA;MACT,UAAU,QAAA,WAAWA,MAAA,UAAA;MACrB,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;MAChC,OAAM;MACN,MAAK;MACL,YAAS;MACT,aAAU;MACV,SAAQ;MACR,OAAA;MACA,WAAQ;;;;;;;;KAEVC,mBAEO,QAAA,EAFA,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EACrB,GAAAS,gBAAAT,MAAA,aAAA,CAAa,GAAA,CAAA;;IAGpBC,mBAkDM,OAAA;KAjDH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA;KACrB,WAAQ;;KAGC,CAAA,QAAA,UADTH,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,OAAA,CAAO,CAAA;;MAEf,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAElCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAkC,CAAlCT,YAAkCU,iBAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA;;;KAEjCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAGzB,CAAA,QAAA,UADTf,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAoC,CAApCT,YAAoCU,iBAAA,EAA3B,MAAK,oBAAmB,CAAA,CAAA,CAAA"}
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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"}

package/dist/components/tables/table-empty-state-styles.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+export declare const emptyStyles: import("tailwind-variants").TVReturnType<{
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}, undefined, {
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}>>;

package/dist/components/tables/table-empty-state-styles.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-empty-state-styles.ts
+var emptyStyles = tv({
+	slots: {
+		root: "flex flex-col items-center justify-center flex-1",
+		title: "text-body-1 font-semibold text-center text-current pb-0 mb-0",
+		subtitle: "text-body-2 text-center text-rui-text-secondary pb-0 mb-0"
+	},
+	variants: { compact: {
+		true: {
+			root: "gap-1 py-6",
+			title: "font-normal text-rui-text-secondary"
+		},
+		false: { root: "gap-3 min-h-56 my-4" }
+	} }
+});
+//#endregion
+export { emptyStyles };
+//# sourceMappingURL=table-empty-state-styles.js.map

package/dist/components/tables/table-empty-state-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-empty-state-styles.js","names":[],"sources":["../../../src/components/tables/table-empty-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const emptyStyles = tv({\n slots: {\n root: 'flex flex-col items-center justify-center flex-1',\n title: 'text-body-1 font-semibold text-center text-current pb-0 mb-0',\n subtitle: 'text-body-2 text-center text-rui-text-secondary pb-0 mb-0',\n },\n variants: {\n compact: {\n true: {\n root: 'gap-1 py-6',\n title: 'font-normal text-rui-text-secondary',\n },\n false: {\n root: 'gap-3 min-h-56 my-4',\n },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;EACT;EACA,OAAO,EACL,MAAM,sBACR;CACF,EACF;AACF,CAAC"}

package/dist/components/tables/table-error-state-styles.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Centred and capped, like the loading and empty states beside it. Left to
+ * span the table, a wide one puts the reason hard left and the retry hard
+ * right, with the whole width between them.
+ */
+export declare const errorStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    alert: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    alert: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    alert: string;
+}>>;

package/dist/components/tables/table-error-state-styles.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-error-state-styles.ts
+/**
+* Centred and capped, like the loading and empty states beside it. Left to
+* span the table, a wide one puts the reason hard left and the retry hard
+* right, with the whole width between them.
+*/
+var errorStyles = tv({ slots: {
+	root: "flex justify-center p-4",
+	alert: "w-full max-w-2xl"
+} });
+//#endregion
+export { errorStyles };
+//# sourceMappingURL=table-error-state-styles.js.map

package/dist/components/tables/table-error-state-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-error-state-styles.js","names":[],"sources":["../../../src/components/tables/table-error-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Centred and capped, like the loading and empty states beside it. Left to\n * span the table, a wide one puts the reason hard left and the retry hard\n * right, with the whole width between them.\n */\nexport const errorStyles = tv({\n slots: {\n root: 'flex justify-center p-4',\n alert: 'w-full max-w-2xl',\n },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,GAAG,EAC5B,OAAO;CACL,MAAM;CACN,OAAO;AACT,EACF,CAAC"}

package/dist/components/tables/table-head-styles.d.ts ADDED Viewed

@@ -0,0 +1,91 @@
+export declare const tableHeadStyles: import("tailwind-variants").TVReturnType<{
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}, undefined, {
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}>>;

package/dist/components/tables/table-head-styles.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { tv } from "../../utils/tv.js";
+import { NESTED_BAR } from "./data-table-styles.js";
+//#region src/components/tables/table-head-styles.ts
+var tableHeadStyles = tv({
+	slots: {
+		thead: "between:border-t between:border-b-0 between:border-rui-divider",
+		checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,
+		th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,
+		columnText: "text-rui-text-secondary font-medium text-[0.8125rem] leading-5",
+		sortButton: "inline-flex group/sort -mx-1.5",
+		sortIcon: "transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100",
+		sortPosition: "text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary",
+		loaderRow: "border-none",
+		progress: "p-0 h-0",
+		progressWrapper: "h-0 -mt-1"
+	},
+	variants: {
+		position: {
+			default: {},
+			sticky: { thead: "top-0 z-rui-raised absolute" },
+			fixed: {
+				thead: "top-0 z-rui-raised fixed",
+				th: "border-b border-b-rui-divider"
+			}
+		},
+		dense: {
+			true: { th: "[:where(&)]:py-0.5 [:where(&)]:h-8" },
+			false: { th: "[:where(&)]:py-1 [:where(&)]:h-10" }
+		}
+	},
+	defaultVariants: {
+		position: "default",
+		dense: false
+	}
+});
+//#endregion
+export { tableHeadStyles };
+//# sourceMappingURL=table-head-styles.js.map

package/dist/components/tables/table-head-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-head-styles.js","names":[],"sources":["../../../src/components/tables/table-head-styles.ts"],"sourcesContent":["import { NESTED_BAR } from '@/components/tables/data-table-styles';\nimport { tv } from '@/utils/tv';\n\nexport const tableHeadStyles = tv({\n slots: {\n thead: 'between:border-t between:border-b-0 between:border-rui-divider',\n checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,\n // tinted like the pagination bar, framing the body; opaque, so rows scroll behind a stuck header\n th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,\n // labels read as secondary to the data; the sorted column's label steps up to primary\n columnText: 'text-rui-text-secondary font-medium text-[0.8125rem] leading-5',\n // the negative margin cancels the button's own padding so the label lines up with the cells below\n sortButton: 'inline-flex group/sort -mx-1.5',\n // a resting icon marks sortable columns for keyboard and touch users, at 3:1 on a nested table's darker header\n sortIcon: 'transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100',\n // tucked against the arrow, closer than the button's gap\n sortPosition: 'text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary',\n /*\n * The row is always there and only its bar comes and goes: a collapsed-border table gives even a\n * zero-height row half a pixel, so adding the row on load pushed the body down.\n */\n loaderRow: 'border-none',\n progress: 'p-0 h-0',\n progressWrapper: 'h-0 -mt-1',\n },\n variants: {\n position: {\n default: {},\n sticky: { thead: 'top-0 z-rui-raised absolute' },\n fixed: {\n thead: 'top-0 z-rui-raised fixed',\n th: 'border-b border-b-rui-divider',\n },\n },\n // a fixed height evens out rows with and without sort buttons; `:where()` lets a column's `class` win\n dense: {\n true: { th: '[:where(&)]:py-0.5 [:where(&)]:h-8' },\n false: { th: '[:where(&)]:py-1 [:where(&)]:h-10' },\n },\n },\n defaultVariants: {\n position: 'default',\n dense: false,\n },\n});\n"],"mappings":";;;AAGA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,OAAO;EACP,UAAU,8DAA8D;EAExE,IAAI,yCAAyC;EAE7C,YAAY;EAEZ,YAAY;EAEZ,UAAU;EAEV,cAAc;EAKd,WAAW;EACX,UAAU;EACV,iBAAiB;CACnB;CACA,UAAU;EACR,UAAU;GACR,SAAS,CAAC;GACV,QAAQ,EAAE,OAAO,8BAA8B;GAC/C,OAAO;IACL,OAAO;IACP,IAAI;GACN;EACF;EAEA,OAAO;GACL,MAAM,EAAE,IAAI,qCAAqC;GACjD,OAAO,EAAE,IAAI,oCAAoC;EACnD;CACF;CACA,iBAAiB;EACf,UAAU;EACV,OAAO;CACT;AACF,CAAC"}

package/dist/components/tables/table-loading-state-styles.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+export declare const loadingStyles: import("tailwind-variants").TVReturnType<{
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}>>;

package/dist/components/tables/table-loading-state-styles.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-loading-state-styles.ts
+var loadingStyles = tv({
+	slots: { root: "flex items-center justify-center" },
+	variants: { compact: {
+		true: { root: "py-6" },
+		false: { root: "min-h-56 py-8" }
+	} }
+});
+//#endregion
+export { loadingStyles };
+//# sourceMappingURL=table-loading-state-styles.js.map

package/dist/components/tables/table-loading-state-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-loading-state-styles.js","names":[],"sources":["../../../src/components/tables/table-loading-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const loadingStyles = tv({\n slots: {\n root: 'flex items-center justify-center',\n },\n variants: {\n compact: {\n true: { root: 'py-6' },\n false: { root: 'min-h-56 py-8' },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,gBAAgB,GAAG;CAC9B,OAAO,EACL,MAAM,mCACR;CACA,UAAU,EACR,SAAS;EACP,MAAM,EAAE,MAAM,OAAO;EACrB,OAAO,EAAE,MAAM,gBAAgB;CACjC,EACF;AACF,CAAC"}