npm - @rotki/ui-library - Versions diffs - 2.25.0 → 2.26.0 - Mend

@rotki/ui-library 2.25.0 → 2.26.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 (76) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /*\n list of items for each row\n /\n rows: readonly T[];\n /\n the attribute used to identify each row uniquely for selection, usually `id`\n /\n rowAttr: K;\n /\n model for internal searching\n /\n search?: string;\n /\n model for items per page\n * will be used if the `pagination` model isn't specified\n /\n itemsPerPage?: number;\n /\n list of column definitions\n /\n cols?: TableColumn<T>[];\n /\n attribute to use from column definitions to display column titles\n /\n columnAttr?: keyof TableColumn<T>;\n /\n flag to show a more or less spacious table\n /\n dense?: boolean;\n /\n flag to outline the flag with a border\n /\n outlined?: boolean;\n /\n should add zebra-striping to the table row\n /\n striped?: boolean;\n /\n flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n /\n loading?: boolean;\n disablePerPage?: boolean;\n /\n Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n /\n rangesThreshold?: number;\n /\n The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n /\n empty?: {\n label?: string;\n description?: string;\n };\n /\n should hide the header navigation\n /\n hideDefaultHeader?: boolean;\n /\n should hide the footer navigation\n /\n hideDefaultFooter?: boolean;\n\n rounded?: 'sm' \| 'md' \| 'lg';\n /\n make expansion work like accordion\n /\n singleExpand?: boolean;\n /\n make table head stick to top on scroll\n /\n stickyHeader?: boolean;\n stickyOffset?: number;\n /\n Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n /\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) \| string;\n /\n Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n /\n mobileBreakpoint?: number;\n /\n What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n /\n mobileBreakpointBasis?: 'viewport' \| 'container';\n /\n Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n /\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n hideDefaultHeader = false,\n hideDefaultFooter = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number \| undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' \| 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/\n Whether the stacked card layout is showing.\n \n Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n /\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) \|\| get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number \| undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/\n A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n /\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/\n On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n /\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table, tableScroller },\n);\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/\n Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nfunction onPaginate(): void {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n :class=\"stickyMobileToolbar ? 'sticky z-10 bg-white dark:bg-[#121212] pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <RuiTablePagination\n v-if=\"paginationData && !hideDefaultHeader\"\n v-model=\"paginationData\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n <div\n v-if=\"showMobileSort\"\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"loading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"loading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n >\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <RuiTablePagination\n v-if=\"paginationData && !hideDefaultFooter\"\n v-model=\"paginationData\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiDataTable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /*\n list of items for each row\n /\n rows: readonly T[];\n /\n the attribute used to identify each row uniquely for selection, usually `id`\n /\n rowAttr: K;\n /\n model for internal searching\n /\n search?: string;\n /\n model for items per page\n * will be used if the `pagination` model isn't specified\n /\n itemsPerPage?: number;\n /\n list of column definitions\n /\n cols?: TableColumn<T>[];\n /\n attribute to use from column definitions to display column titles\n /\n columnAttr?: keyof TableColumn<T>;\n /\n flag to show a more or less spacious table\n /\n dense?: boolean;\n /\n flag to outline the flag with a border\n /\n outlined?: boolean;\n /\n should add zebra-striping to the table row\n /\n striped?: boolean;\n /\n flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n /\n loading?: boolean;\n disablePerPage?: boolean;\n /\n Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n /\n rangesThreshold?: number;\n /\n The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n /\n empty?: {\n label?: string;\n description?: string;\n };\n /\n Why the last read failed. Shown above any rows kept from an earlier read,\n * or in place of the empty state; `loading` still takes precedence.\n /\n error?: string;\n /* Heading for that failure. /\n errorTitle?: string;\n /* Label for the retry control; without one, no control is offered. /\n retryText?: string;\n /\n should hide the header navigation\n /\n hideDefaultHeader?: boolean;\n /\n should hide the footer navigation\n /\n hideDefaultFooter?: boolean;\n\n rounded?: 'sm' \| 'md' \| 'lg';\n /\n make expansion work like accordion\n /\n singleExpand?: boolean;\n /\n make table head stick to top on scroll\n /\n stickyHeader?: boolean;\n stickyOffset?: number;\n /\n Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n /\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) \| string;\n /\n Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n /\n mobileBreakpoint?: number;\n /\n What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n /\n mobileBreakpointBasis?: 'viewport' \| 'container';\n /\n Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n /\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n error = '',\n errorTitle = '',\n retryText = '',\n hideDefaultHeader = false,\n hideDefaultFooter = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n 'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'error': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number \| undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' \| 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/\n Whether the stacked card layout is showing.\n \n Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n /\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) \|\| get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number \| undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/\n A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n /\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/\n On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n /\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table, tableScroller },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/\n The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n /\nconst viewportStyle = computed<Record<string, string>>(() => {\n const width = get(scrollerWidth);\n return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n mappedGroups,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n/\n With the header bar showing, an empty table drops its footer bar: two rows\n * of disabled controls around an empty state only add noise.\n /\nconst showFooter = computed<boolean>(() => {\n const data = get(paginationData);\n if (!data \|\| hideDefaultFooter)\n return false;\n return data.total > 0 \|\| hideDefaultHeader;\n});\n\n/\n Grouped columns leave the column list, so their labels come from `cols`.\n /\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n const label = cols?.find(column => column.key === key)?.[columnAttr];\n return {\n key: String(key),\n label: label === undefined \|\| label === null ? String(key) : String(label),\n };\n}));\n\n/* Each group's list starts with its header entry, which is not a row. /\nfunction getGroupSize(identifier: string): number {\n return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/\n Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nfunction onPaginate(): void {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n groupLabels,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getGroupSize,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n :class=\"stickyMobileToolbar ? 'sticky z-10 bg-white dark:bg-[#121212] pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <RuiTablePagination\n v-if=\"paginationData && !hideDefaultHeader\"\n v-model=\"paginationData\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n <div\n v-if=\"showMobileSort\"\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :style=\"viewportStyle\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"loading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"loading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n :error=\"error\"\n :error-title=\"errorTitle\"\n :retry-text=\"retryText\"\n @retry=\"emit('retry')\"\n >\n <template\n v-if=\"slots.error\"\n #error\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"error\" />\n </template>\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <RuiTablePagination\n v-if=\"paginationData && showFooter\"\n v-model=\"paginationData\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6ZA,IAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1QzB,MAAM,eAAe,SAAwB,SAAA,YAAC;EAE9C,MAAM,WAAW,SAAgB,SAAC,UAAU;EAE5C,MAAM,CAAC,YAAY,uBAAuB,SAA4C,SAAC,YAAY;EAEnG,MAAM,CAAC,MAAM,iBAAiB,SAAyC,SAAC,MAAM;EAE9E,MAAM,QAAQ,SAA+B,SAAC,OAAO;EAErD,MAAM,YAAY,SAAgB,SAAC,WAAW;EAmC9C,MAAM,OAAO;EAMb,MAAM,QAAQ,SAAA;EAoBd,MAAM,gBAAgB,SAAS;EAE/B,MAAM,eAAe,eAA4B,cAAc;EAC/D,MAAM,EAAE,OAAO,gBAAgB,cAAc;EAC7C,MAAM,EAAE,OAAO,mBAAmB,eAAe,YAAY;EAG7D,MAAM,2BAA2B,eAAmC;GAClE,IAAI,QAAA,qBAAqB,KAAA,GACvB,OAAO,QAAA;GACT,MAAM,mBAAmB,cAAc;GACvC,OAAO,qBAAqB,KAAA,IAAY,KAAA,IAAY,MAAI,gBAAgB;EAC1E,CAAC;EACD,MAAM,sBAAsB,eAAyC;GACnE,IAAI,QAAA,0BAA0B,KAAA,GAC5B,OAAO,QAAA;GACT,MAAM,cAAc,cAAc;GAClC,OAAO,gBAAgB,KAAA,IAAY,aAAa,MAAI,WAAW;EACjE,CAAC;;;;;;;;;EAUD,MAAM,WAAW,eAAwB;GACvC,MAAM,aAAa,MAAI,wBAAwB;GAC/C,IAAI,eAAe,KAAA,GACjB,OAAO,QAAA;GACT,IAAI,QAAA,QACF,OAAO;GAKT,QAHc,MAAI,mBAAmB,MAAM,cACtC,MAAI,cAAc,KAAK,MAAI,WAAW,IACvC,MAAI,WAAW,KACJ;EACjB,CAAC;EAED,MAAM,qBAAqB,eACzB,QAAA,iBAAiB,KAAA,IAAY,QAAA,eAAe,MAAI,cAAc,YAAY,CAC5E;;;;;EAMA,MAAM,gBAAgB,mBAAmB;EACzC,uBAAuB;;;;;EAMvB,MAAM,sBAAsB,eAAwB,QAAA,gBAAgB,MAAI,QAAQ,KAAK,CAAC,aAAa;EAEnG,MAAM,QAAQ,eAAiC,OAAO;EACtD,MAAM,gBAAgB,eAA4B,eAAe;EAEjE,MAAM,EAAE,UAAU,2BACV,QAAA,cACN,oBACA;GAAE;GAAO;EAAc,CACzB;EAEA,MAAM,EAAE,OAAO,kBAAkB,eAAe,aAAa;;;;;;;EAQ7D,MAAM,gBAAgB,eAAuC;GAC3D,MAAM,QAAQ,MAAI,aAAa;GAC/B,OAAO,EAAE,wBAAwB,QAAQ,KAAK,CAAC,MAAI,QAAQ,IAAI,GAAG,MAAM,MAAM,UAAU;EAC1F,CAAC;EAED,MAAM,EAAE,YAAY,YAAY,mBAAmB,kBACjD;GAAE,SAAM,QAAA;GAAG,cAAW,QAAA;EAAE,GACxB,EAAE,SAAS,CACb;EAEA,SAAS,kBAAkB,MAA2E;GACpG,KAAK,kBAAkB,IAAI;EAC7B;EAEA,MAAM,EACJ,UACA,WACA,QACA,QAAQ,cACN,aACF;GAAE,YAAY,QAAA;GAAM,cAAc,QAAA;GAAQ,uBAAuB,cAAc;EAAS,GACxF;GACE;GACA;GACA;EACF,CACF;EAEA,MAAM,EACJ,WACA,UACA,SACA,cACA,iBACA,aACA,qBACA,cACE,iBACF,EAAE,SAAM,QAAA,QAAE,GACV;GACE;GACA;GACA;EACF,CACF;EAEA,MAAM,EACJ,gBACA,UACA,kBACA,oBACE,mBACF;GACE,cAAW,QAAA;GACX,6BAA6B,oBAAoB;GACjD,oBAAiB,QAAA;EACnB,GACA;GACE;GACA;GACA;GACA;GACA;GACA;EACF,CACF;EAEA,MAAM,SAAS,eAAwB,MAAI,QAAQ,CAAC,CAAC,WAAW,CAAC;;;;;EAMjE,MAAM,aAAa,eAAwB;GACzC,MAAM,OAAO,MAAI,cAAc;GAC/B,IAAI,CAAC,QAAQ,QAAA,mBACX,OAAO;GACT,OAAO,KAAK,QAAQ,KAAK,QAAA;EAC3B,CAAC;;;;EAKD,MAAM,cAAc,eAAsC,MAAI,SAAS,CAAC,CAAC,KAAK,QAAQ;GACpF,MAAM,QAAQ,QAAA,MAAM,MAAK,WAAU,OAAO,QAAQ,GAAG,CAAC,GAAG,QAAA;GACzD,OAAO;IACL,KAAK,OAAO,GAAG;IACf,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,GAAG,IAAI,OAAO,KAAK;GAC3E;EACF,CAAC,CAAC;;EAGF,SAAS,aAAa,YAA4B;GAChD,OAAO,KAAK,KAAK,MAAI,YAAY,CAAC,CAAC,WAAW,EAAE,UAAU,KAAK,GAAG,CAAC;EACrE;EAEA,MAAM,KAAK,eAAmD,gBAAgB;GAC5E,UAAO,QAAA;GACP,SAAM,QAAA;GACN,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,QAAQ,MAAI,QAAQ;EACtB,CAAC,CAAC;EAEF,MAAM,EAAE,SAAS,SAAS,aAAa,cAAc,gBAA2B;GAC9E,YAAY,QAAA;GACZ,YAAS,QAAA;GACT,YAAY,QAAA;GACZ;GACA;GACA;GACA;GACA;GACA,aAAY,YAAW,MAAI,EAAE,CAAC,CAAC,GAAG,OAAO;EAC3C,CAAC;EAED,MAAM,iBAAiB,eACrB,MAAI,QAAQ,KAAK,CAAC,CAAC,MAAI,QAAQ,KAAK,MAAI,OAAO,CAAC,CAAC,MAAK,WAAU,OAAO,QAAQ,CACjF;EAKA,MAAM,eAA4B,IAAI,IACpC,OAAO,KAAK,KAAK,CAAA,CACd,QAAQ,QAAiC,IAAI,WAAW,gBAAgB,CAAC,CAAA,CACzE,KAAI,QAAO,IAAI,MAAM,CAAuB,CAAC,CAClD;EAEA,MAAM,EACJ,eACA,eACA,YACA,eACA,aACA,UACA,iBACA,qBACA,4BACE,kBACF;GAAE,SAAM,QAAA;GAAG,iBAAc,QAAA;GAAG,oBAAoB,QAAA;EAAa,GAC7D;GAAE;GAAc;EAAS,CAC3B;;;;;EAMA,SAAS,OAAO,SAAgD;GAC9D,UAAU,OAAO;GACjB,IAAI,CAAC,QAAA,iBACH,YAAY,KAAK;GACnB,wBAAwB;EAC1B;EAEA,SAAS,aAAmB;GAC1B,KAAK,MAAI,QAAQ,CAAC,EAAE,UAAU,KAAK,GACjC,MAAI,UAAU,CAAC,CAAC;GAClB,IAAI,CAAC,QAAA,iBACH,YAAY,KAAK;GACnB,wBAAwB;EAC1B;EAGA,YAAY,QAAA,cAAc;GACxB,gBAAgB;GAChB,YAAY,KAAK;GACjB,wBAAwB;EAC1B,CAAC;EAED,MAAM,SAAS,UAAU;GACvB,IAAI,CAAC,QAAA,iBACH,oBAAoB;GACtB,iBAAiB,KAAK;EACxB,CAAC;EAED,gBAAgB;GACd,iBAAiB,MAAI,MAAM,CAAC;EAC9B,CAAC;EAED,MAAM,UAAU,eAAiC;GAC/C,MAAM,IAAI,MAAI,EAAE;GAChB,OAAO;IACL,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,YAAY,EAAE,GAAG,EAAE,YAAY,WAAW,CAAC;IAC3C,cAAc,EAAE,GAAG,EAAE,YAAY,aAAa,CAAC;IAC/C,kBAAkB,EAAE,GAAG,EAAE,YAAY,iBAAiB,CAAC;IACvD,SAAS,EAAE,GAAG,EAAE,YAAY,QAAQ,CAAC;IACrC,SAAS,EAAE,GAAG,EAAE,YAAY,QAAQ,CAAC;IACrC,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,YAAY;GAC7B;EACF,CAAC;EAED,wBAAmC;GAEjC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA,YAAS,QAAA;GACT,OAAI,QAAA;GACJ;GACA,WAAW,QAAW,IAAI,QAAA;GAC1B;GACA,2BAAwB,QAAA;GACxB;GACA;GACA;GACA;GACA,WAAQ,QAAA;GACR;GACA,cAAc,WAA2B,KAAK,cAAc;IAAE,KAAK,MAAI,QAAQ,KAAK;IAAI,OAAO,OAAO;GAAM,CAAC;GAC7G;GACA;GACA;GACA;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAgNM,OAAA;IA/MA,SAAA;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAClB,WAAQ;;IAER,mBA6BM,OAAA;KA5BH,OAAK,eAAE,MAAA,mBAAA,IAAmB,gDAAA,UAAA;KAC1B,OAAK,eAAE,MAAA,mBAAA,IAAmB,EAAA,KAAA,GAAa,MAAA,kBAAA,KAAkB,EAAA,IAAA,IAAc,KAAA,CAAS;KACjF,WAAQ;IAGA,GAAA,CAAA,MAAA,cAAA,KAAc,CAAK,QAAA,qBAD3B,UAAA,GAAA,YAUE,4BAAA;;KARS,YAAA,MAAA,cAAA;KAAA,uBAAA,CAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,cAAA,IAAA,eAAc,QAAA,SAAA,OAOF,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,EAAA;KAN9B,OAAO,QAAA;KACP,SAAS,QAAA;KACT,QAAQ,MAAA,QAAA;KACR,oBAAkB,QAAA;KAClB,oBAAkB,QAAA;KACnB,WAAQ;;;;;;;;IAIF,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,cAAA,KADR,UAAA,GAAA,mBAYM,OAZN,YAYM,CAPJ,YAME,gCAAA;KALC,SAAS,MAAA,OAAA;KACT,eAAa,QAAA;KACb,cAAY,MAAA,SAAA;KACZ,OAAO,QAAA;KACP,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,OAAO,MAAM;;;;;;;IAI1B,mBAiKM,OAAA;KAhKA,SAAA;KAAJ,KAAI;KACH,OAAK,eAAA,CAAG,MAAA,EAAA,CAAE,CAAC,SAAQ,GAAI,MAAA,QAAA,KAAQ,CAAK,MAAA,cAAA,IAAc,SAAA,EAAA,CAAA;KACnD,WAAQ;IAER,GAAA,CAAA,mBA2JQ,SAAA;KA1JF,SAAA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,OAAK,eAAE,MAAA,aAAA,CAAa;KACpB,aAAW,QAAA;;KAGH,CAAA,MAAA,QAAA,KADT,UAAA,GAAA,YA4Be,sBAAA;;MA1BZ,SAAS,QAAA;MACT,eAAe,MAAA,aAAA;MACf,sBAAkB,CAAG,QAAA;MACrB,SAAS,MAAA,OAAA;MACT,eAAa,QAAA;MACb,SAAS,MAAA,OAAA;MACT,OAAO,QAAA;MACP,qBAAiB,CAAG,MAAA,QAAA,CAAQ,EAAE;MAC9B,mBAAiB,MAAA,aAAA;MACjB,YAAU,CAAA,CAAI,aAAA;MACd,aAAW,MAAA,QAAA;MACX,cAAY,MAAA,SAAA;MACZ,OAAO,MAAA,KAAA;MACP,iBAAe,QAAA;MACf,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,OAAO,MAAM;MACnB,gBAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,WAAA,CAAW,CAAC,MAAM;KAGR,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,MAAA,WAAA,IAAd,eAAU;;OAChB,MAAA;OAED,IAAA,SAFe,aAAQ,CAEvB,WAGE,KAAA,QAFO,YAAU,eAAA,mBACT,QAAQ,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;KAKd,QAAA,gBAAY,CAAK,MAAA,QAAA,KADzB,UAAA,GAAA,YAuBe,sBAAA;;MArBZ,SAAS,QAAA;MACT,sBAAkB,CAAG,QAAA;MACrB,SAAS,MAAA,OAAA;MACT,eAAa,QAAA;MACb,SAAS,MAAA,OAAA;MACT,OAAO,QAAA;MACP,YAAU,CAAA,CAAI,aAAA;MACd,aAAW,MAAA,QAAA;MACX,cAAY,MAAA,SAAA;MACb,WAAQ;MACR,OAAM;KAGiB,GAAA,YAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,MAAA,WAAA,IAAd,eAAU;;OAChB,MAAA;OAED,IAAA,SAFe,aAAQ,CAEvB,WAGE,KAAA,QAFO,YAAU,eAAA,mBACT,QAAQ,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;KAItB,YA2FmB,0BAAA;MA1FhB,UAAU,MAAA,QAAA;MACV,SAAS,QAAA;MACT,WAAS,MAAA,MAAA;MACT,OAAO,QAAA;MACP,OAAO,QAAA;MACP,eAAa,QAAA;MACb,cAAY,QAAA;MACZ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;;MAGJ,MAAM,QAAA;OACX,MAAA;OAGD,IAAA,cAAqB,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;;MAGf,MAAK,kBAAA;OACV,MAAA;OAGD,IAAA,SAHe,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA;;;MAIZ,MAAK,kBAAA;OACV,MAAA;OAGD,IAAA,SAHe,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA;;;MAIZ,MAAK,0BAAA;OACV,MAAA;OAGD,IAAA,SAHuB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA;;;MAIJ,WAAA,MAAA,YAAA,IAAP,QAAG;;QACD,MAAA,QAAA;QAGT,IAAA,SAHkB,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OAAG,eAAA,mBACV,QAAQ,CAAA,CAAA,CAAA,CAAA;;;MAIZ,MAAK,mBAAA;OACV,MAAA;OAGD,IAAA,SAHgB,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA;;;MAIZ,MAAK,aAAA;OACV,MAAA;OAGD,IAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;;MAGjB,MAAK,uBAAA;OACV,MAAA;OAGD,IAAA,cAAiC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;MAG3B,MAAK,iBAAA;OACV,MAAA;OAGD,IAAA,SAHc,aAAQ,CAGtB,WAGE,KAAA,QAAA,eAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;KAItB,mBAGQ,SAAA,MAAA,CADN,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;IAKnB,MAAA,cAAA,KAAkB,MAAA,UAAA,KAD1B,UAAA,GAAA,YAUE,4BAAA;;KARS,YAAA,MAAA,cAAA;KAAA,uBAAA,CAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,cAAA,IAAA,eAAc,QAAA,SAAA,OAOF,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,EAAA;KAN9B,OAAO,QAAA;KACP,SAAS,QAAA;KACT,QAAQ,MAAA,QAAA;KACR,oBAAkB,QAAA;KAClB,oBAAkB,QAAA;KACnB,WAAQ"}

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

@@ -1,7 +1,7 @@
 import { tv } from "../../utils/tv.js";
 import RuiTableEmptyState_default from "./RuiTableEmptyState.js";
-import RuiTableLoadingState_default from "./RuiTableLoadingState.js";
 import RuiTableErrorState_default from "./RuiTableErrorState.js";
+import RuiTableLoadingState_default from "./RuiTableLoadingState.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot } from "vue";
 //#region src/components/tables/RuiTable.vue?vue&type=script&setup=true&lang.ts
 var RuiTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTableHead.js","names":[],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiBadge from '@/components/overlays/badge/RuiBadge.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n th: 'p-4',\n columnText: 'text-rui-text dark:text-white font-medium text-[0.875rem] leading-6',\n sortButton: 'inline-flex group/sort',\n sortIcon: 'transition opacity-0 rotate-180 group-hover/sort:opacity-60',\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-10 absolute' },\n fixed: {\n thead: 'top-0 z-10 fixed',\n th: 'bg-white dark:bg-[#121212] border-b border-b-black/[0.12] dark:border-b-white/[0.12]',\n },\n },\n dense: {\n true: { th: 'py-[0.38rem]' },\n },\n },\n defaultVariants: {\n position: 'default',\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\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\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection \| undefined {\n return sortedMap[key]?.direction;\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 hide-details\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, column.sortable) }),\n column.class,\n { capitalize: !capitalizeHeaders },\n ]\"\n scope=\"col\"\n :colspan=\"column.colspan ?? 1\"\n :rowspan=\"column.rowspan ?? 1\"\n :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n >\n <slot\n :column=\"column\"\n :name=\"`header.${column.key.toString()}`\"\n >\n <RuiBadge\n v-if=\"column.sortable\"\n :model-value=\"getSortIndex(column.key) >= 0\"\n :text=\"`${getSortIndex(column.key) + 1}`\"\n :offset-y=\"dense ? 8 : 0\"\n color=\"secondary\"\n size=\"sm\"\n >\n <RuiButton\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=\"ui.columnText()\"\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 <RuiIcon\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n name=\"lu-arrow-down\"\n size=\"18\"\n />\n </template>\n\n <template #append>\n <RuiIcon\n v-if=\"column.align !== TableAlign.end\"\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n name=\"lu-arrow-down\"\n size=\"18\"\n />\n </template>\n </RuiButton>\n </RuiBadge>\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 {{ column[columnAttr] }}\n </slot>\n </span>\n </slot>\n </th>\n </tr>\n <tr\n v-if=\"loading\"\n :class=\"ui.loaderRow()\"\n data-id=\"thead-loader\"\n >\n <th\n :class=\"ui.progress()\"\n :colspan=\"colspan\"\n scope=\"col\"\n >\n <div :class=\"ui.progressWrapper()\">\n <RuiProgress\n color=\"primary\"\n variant=\"indeterminate\"\n />\n </div>\n </th>\n </tr>\n </thead>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiTableHead.js","names":[],"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 RuiBadge from '@/components/overlays/badge/RuiBadge.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n th: '[:where(&)]:px-4',\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.875rem] leading-6',\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 faint resting icon marks sortable columns for keyboard and touch users\n sortIcon: 'transition opacity-30 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60',\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-10 absolute' },\n fixed: {\n thead: 'top-0 z-10 fixed',\n th: 'bg-white dark:bg-[#121212] border-b border-b-black/[0.12] dark:border-b-white/[0.12]',\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-1 [:where(&)]:h-10' },\n false: { th: '[:where(&)]:py-3 [:where(&)]:h-14' },\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\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</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 hide-details\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 { 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 <RuiBadge\n v-if=\"column.sortable\"\n :model-value=\"getSortIndex(column.key) >= 0\"\n :text=\"`${getSortIndex(column.key) + 1}`\"\n :offset-y=\"dense ? 8 : 0\"\n color=\"secondary\"\n size=\"sm\"\n >\n <RuiButton\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 <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 <RuiIcon\n v-if=\"column.align !== TableAlign.end\"\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n :name=\"getSortIconName(column.key)\"\n size=\"18\"\n />\n </template>\n </RuiButton>\n </RuiBadge>\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 {{ column[columnAttr] }}\n </slot>\n </span>\n </slot>\n </th>\n </tr>\n <tr\n v-if=\"loading\"\n :class=\"ui.loaderRow()\"\n data-id=\"thead-loader\"\n >\n <th\n :class=\"ui.progress()\"\n :colspan=\"colspan\"\n scope=\"col\"\n >\n <div :class=\"ui.progressWrapper()\">\n <RuiProgress\n color=\"primary\"\n variant=\"indeterminate\"\n />\n </div>\n </th>\n </tr>\n </thead>\n</template>\n"],"mappings":""}

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

@@ -12,6 +12,7 @@ var _hoisted_1 = ["data-id"];
 var _hoisted_2 = [
 	"colspan",
 	"rowspan",
+	"aria-sort",
 	"data-id"
 ];
 var _hoisted_3 = ["colspan"];
@@ -68,10 +69,10 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			slots: {
 				thead: "divide-y divide-black/[0.12] dark:divide-white/[0.12]",
 				checkbox: "px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0",
-				th: "p-4",
-				columnText: "text-rui-text dark:text-white font-medium text-[0.875rem] leading-6",
-				sortButton: "inline-flex group/sort",
-				sortIcon: "transition opacity-0 rotate-180 group-hover/sort:opacity-60",
+				th: "[:where(&)]:px-4",
+				columnText: "text-rui-text-secondary font-medium text-[0.875rem] leading-6",
+				sortButton: "inline-flex group/sort -mx-1.5",
+				sortIcon: "transition opacity-30 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60",
 				loaderRow: "border-none",
 				progress: "p-0 h-0",
 				progressWrapper: "h-0 -mt-1"
@@ -85,9 +86,15 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						th: "bg-white dark:bg-[#121212] border-b border-b-black/[0.12] dark:border-b-white/[0.12]"
 					}
 				},
-				dense: { true: { th: "py-[0.38rem]" } }
+				dense: {
+					true: { th: "[:where(&)]:py-1 [:where(&)]:h-10" },
+					false: { th: "[:where(&)]:py-3 [:where(&)]:h-14" }
+				}
 			},
-			defaultVariants: { position: "default" }
+			defaultVariants: {
+				position: "default",
+				dense: false
+			}
 		});
 		const headerPosition = computed(() => {
 			if (__props.stickyHeader && __props.stick) return "fixed";
@@ -100,7 +107,17 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		}));
 		function getSortIconClass(key) {
 			if (!isSortedBy(key)) return void 0;
-			return `!opacity-100 ${getSortDirection(key) === SortDirection.asc ? "!rotate-180" : "!rotate-0"}`;
+			return `!opacity-100 ${getSortDirection(key) === SortDirection.asc ? "rotate-180" : "rotate-0"}`;
+		}
+		/**
+		* An unsorted column shows a neutral up-down icon, so nothing reads as sorted
+		* until it is; the sorted column shows its direction.
+		*/
+		function getSortIconName(key) {
+			return isSortedBy(key) ? "lu-arrow-down" : "lu-arrow-up-down";
+		}
+		function getColumnTextClass(key) {
+			return get(ui).columnText({ class: isSortedBy(key) ? "text-rui-text" : void 0 });
 		}
 		function onSort({ key, direction }) {
 			return emit("sort", {
@@ -121,6 +138,13 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		function getSortDirection(key) {
 			return __props.sortedMap[key]?.direction;
 		}
+		function getAriaSort(column) {
+			if (!column.sortable) return void 0;
+			const direction = getSortDirection(column.key);
+			if (direction === SortDirection.asc) return "ascending";
+			if (direction === SortDirection.desc) return "descending";
+			return "none";
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("thead", {
 				"data-id": __props.dataId,
@@ -149,13 +173,14 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				return openBlock(), createElementBlock("th", {
 					key: column.key,
 					class: normalizeClass([
-						unref(ui).th({ class: unref(getAlignClass)(column.align, column.sortable) }),
+						unref(ui).th({ class: unref(getAlignClass)(column.align) }),
 						column.class,
 						{ capitalize: !__props.capitalizeHeaders }
 					]),
 					scope: "col",
 					colspan: column.colspan ?? 1,
 					rowspan: column.rowspan ?? 1,
+					"aria-sort": getAriaSort(column),
 					"data-id": column.sortable ? "column-sortable" : void 0
 				}, [renderSlot(_ctx.$slots, `header.${column.key.toString()}`, { column }, () => [column.sortable ? (openBlock(), createBlock(RuiBadge_default, {
 					key: 0,
@@ -176,11 +201,11 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						append: withCtx(() => [column.align !== unref(TableAlign).end ? (openBlock(), createBlock(RuiIcon_default, {
 							key: 0,
 							class: normalizeClass(unref(ui).sortIcon({ class: getSortIconClass(column.key) })),
-							name: "lu-arrow-down",
+							name: getSortIconName(column.key),
 							size: "18"
-						}, null, 8, ["class"])) : createCommentVNode("", true)]),
+						}, null, 8, ["class", "name"])) : createCommentVNode("", true)]),
 						default: withCtx(() => [createElementVNode("span", {
-							class: normalizeClass(unref(ui).columnText()),
+							class: normalizeClass(getColumnTextClass(column.key)),
 							"data-id": "column-text"
 						}, [renderSlot(_ctx.$slots, `header.text.${column.key.toString()}`, { column }, () => [createTextVNode(toDisplayString(column[__props.columnAttr]), 1)])], 2)]),
 						_: 2
@@ -188,9 +213,9 @@ var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						name: "prepend",
 						fn: withCtx(() => [createVNode(RuiIcon_default, {
 							class: normalizeClass(unref(ui).sortIcon({ class: getSortIconClass(column.key) })),
-							name: "lu-arrow-down",
+							name: getSortIconName(column.key),
 							size: "18"
-						}, null, 8, ["class"])]),
+						}, null, 8, ["class", "name"])]),
 						key: "0"
 					} : void 0]), 1032, [
 						"class",

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":[],"sources":["../../../src/components/tables/RuiTableHead.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, K extends keyof T = keyof T\">\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiBadge from '@/components/overlays/badge/RuiBadge.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n th: 'p-4',\n columnText: 'text-rui-text dark:text-white font-medium text-[0.875rem] leading-6',\n sortButton: 'inline-flex group/sort',\n sortIcon: 'transition opacity-0 rotate-180 group-hover/sort:opacity-60',\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-10 absolute' },\n fixed: {\n thead: 'top-0 z-10 fixed',\n th: 'bg-white dark:bg-[#121212] border-b border-b-black/[0.12] dark:border-b-white/[0.12]',\n },\n },\n dense: {\n true: { th: 'py-[0.38rem]' },\n },\n },\n defaultVariants: {\n position: 'default',\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\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\nfunction getSortDirection(key: TableColumn<T>['key']): SortDirection \| undefined {\n return sortedMap[key]?.direction;\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 hide-details\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, column.sortable) }),\n column.class,\n { capitalize: !capitalizeHeaders },\n ]\"\n scope=\"col\"\n :colspan=\"column.colspan ?? 1\"\n :rowspan=\"column.rowspan ?? 1\"\n :data-id=\"column.sortable ? 'column-sortable' : undefined\"\n >\n <slot\n :column=\"column\"\n :name=\"`header.${column.key.toString()}`\"\n >\n <RuiBadge\n v-if=\"column.sortable\"\n :model-value=\"getSortIndex(column.key) >= 0\"\n :text=\"`${getSortIndex(column.key) + 1}`\"\n :offset-y=\"dense ? 8 : 0\"\n color=\"secondary\"\n size=\"sm\"\n >\n <RuiButton\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=\"ui.columnText()\"\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 <RuiIcon\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n name=\"lu-arrow-down\"\n size=\"18\"\n />\n </template>\n\n <template #append>\n <RuiIcon\n v-if=\"column.align !== TableAlign.end\"\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n name=\"lu-arrow-down\"\n size=\"18\"\n />\n </template>\n </RuiButton>\n </RuiBadge>\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 {{ column[columnAttr] }}\n </slot>\n </span>\n </slot>\n </th>\n </tr>\n <tr\n v-if=\"loading\"\n :class=\"ui.loaderRow()\"\n data-id=\"thead-loader\"\n >\n <th\n :class=\"ui.progress()\"\n :colspan=\"colspan\"\n scope=\"col\"\n >\n <div :class=\"ui.progressWrapper()\">\n <RuiProgress\n color=\"primary\"\n variant=\"indeterminate\"\n />\n </div>\n </th>\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":[],"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 RuiBadge from '@/components/overlays/badge/RuiBadge.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\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: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n th: '[:where(&)]:px-4',\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.875rem] leading-6',\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 faint resting icon marks sortable columns for keyboard and touch users\n sortIcon: 'transition opacity-30 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60',\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-10 absolute' },\n fixed: {\n thead: 'top-0 z-10 fixed',\n th: 'bg-white dark:bg-[#121212] border-b border-b-black/[0.12] dark:border-b-white/[0.12]',\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-1 [:where(&)]:h-10' },\n false: { th: '[:where(&)]:py-3 [:where(&)]:h-14' },\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\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</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 hide-details\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 { 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 <RuiBadge\n v-if=\"column.sortable\"\n :model-value=\"getSortIndex(column.key) >= 0\"\n :text=\"`${getSortIndex(column.key) + 1}`\"\n :offset-y=\"dense ? 8 : 0\"\n color=\"secondary\"\n size=\"sm\"\n >\n <RuiButton\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 <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 <RuiIcon\n v-if=\"column.align !== TableAlign.end\"\n :class=\"ui.sortIcon({ class: getSortIconClass(column.key) })\"\n :name=\"getSortIconName(column.key)\"\n size=\"18\"\n />\n </template>\n </RuiButton>\n </RuiBadge>\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 {{ column[columnAttr] }}\n </slot>\n </span>\n </slot>\n </th>\n </tr>\n <tr\n v-if=\"loading\"\n :class=\"ui.loaderRow()\"\n data-id=\"thead-loader\"\n >\n <th\n :class=\"ui.progress()\"\n :colspan=\"colspan\"\n scope=\"col\"\n >\n <div :class=\"ui.progressWrapper()\">\n <RuiProgress\n color=\"primary\"\n variant=\"indeterminate\"\n />\n </div>\n </th>\n </tr>\n </thead>\n</template>\n"],"mappings":"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"}

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

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

package/dist/components/tables/RuiTablePagination.vue.d.ts CHANGED Viewed

@@ -11,9 +11,9 @@ export interface Props {
     mobile?: boolean;
     /**
      * Maximum number of pages before the jump-to-page dropdown is replaced
-     * with a numeric input. Set to `0` to always use the input, or a very
-     * large number to always use the dropdown. Defaults to `500` — past that
-     * materialising the full range list stalls the main thread.
+     * with a numeric input. Set to `1` to use the input whenever there is more
+     * than one page, or `0` to always use the dropdown. Defaults to `500`, since
+     * past that materialising the full range list stalls the main thread.
      */
     rangesThreshold?: number;
 }