@rotki/ui-library 2.14.1 → 2.16.0

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

@@ -0,0 +1,16 @@
+export interface TableEmptyStateProps {
+    label?: string;
+    description?: string;
+}
+type __VLS_Slots = {
+    description?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableEmptyStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableEmptyStateProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tables/RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { useRotkiTheme } from "../../composables/theme.js";
+import { tv } from "../../utils/tv.js";
+import table_no_data_placeholder_default from "./table_no_data_placeholder.js";
+import table_no_data_placeholder_dark_default from "./table_no_data_placeholder_dark.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region src/components/tables/RuiTableEmptyState.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src", "alt"];
+var RuiTableEmptyState_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTableEmptyState",
+	__name: "RuiTableEmptyState",
+	props: {
+		label: {},
+		description: {}
+	},
+	setup(__props) {
+		const { isDark } = useRotkiTheme();
+		const ui = tv({ slots: {
+			root: "flex flex-col gap-3 items-center justify-center flex-1 min-h-56 my-4",
+			title: "text-body-1 leading-none font-bold text-center text-current pb-0 mb-0",
+			subtitle: "text-body-2 text-center text-rui-text-secondary pb-0 mb-0"
+		} })();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).root()) }, [
+				createElementVNode("img", {
+					src: unref(isDark) ? unref(table_no_data_placeholder_dark_default) : unref(table_no_data_placeholder_default),
+					alt: __props.label,
+					class: "h-32"
+				}, null, 8, _hoisted_1),
+				__props.label ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					class: normalizeClass(unref(ui).title()),
+					"data-id": "empty-label"
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "description", {}, () => [__props.description ? (openBlock(), createElementBlock("p", {
+					key: 0,
+					class: normalizeClass(unref(ui).subtitle()),
+					"data-id": "empty-description"
+				}, toDisplayString(__props.description), 3)) : createCommentVNode("", true)])
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RuiTableEmptyState_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTableEmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport noDataPlaceholder from './table_no_data_placeholder.svg';\nimport noDataPlaceholderDark from './table_no_data_placeholder_dark.svg';\n\nexport interface TableEmptyStateProps {\n  label?: string;\n  description?: string;\n}\n\ndefineOptions({\n  name: 'RuiTableEmptyState',\n});\n\nconst { label, description } = defineProps<TableEmptyStateProps>();\n\ndefineSlots<{\n  description?: () => any;\n}>();\n\nconst { isDark } = useRotkiTheme();\n\nconst emptyStyles = tv({\n  slots: {\n    root: 'flex flex-col gap-3 items-center justify-center flex-1 min-h-56 my-4',\n    title: 'text-body-1 leading-none font-bold text-center text-current pb-0 mb-0',\n    subtitle: 'text-body-2 text-center text-rui-text-secondary pb-0 mb-0',\n  },\n});\n\nconst ui = emptyStyles();\n</script>\n\n<template>\n  <div :class=\"ui.root()\">\n    <img\n      :src=\"isDark ? noDataPlaceholderDark : noDataPlaceholder\"\n      :alt=\"label\"\n      class=\"h-32\"\n    />\n    <p\n      v-if=\"label\"\n      :class=\"ui.title()\"\n      data-id=\"empty-label\"\n    >\n      {{ label }}\n    </p>\n    <slot name=\"description\">\n      <p\n        v-if=\"description\"\n        :class=\"ui.subtitle()\"\n        data-id=\"empty-description\"\n      >\n        {{ description }}\n      </p>\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAqBA,MAAM,EAAE,WAAW,eAAe;EAUlC,MAAM,KARc,GAAG,EACrB,OAAO;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACX,EACF,CAAC,EAEsB;;uBAItB,mBAsBM,OAAA,EAtBA,OAAK,eAAE,MAAA,GAAE,CAAC,MAAI,CAAA,EAAA,EAAA;IAClB,mBAIE,OAAA;KAHC,KAAK,MAAA,OAAM,GAAG,MAAA,uCAAqB,GAAG,MAAA,kCAAiB;KACvD,KAAK,QAAA;KACN,OAAM;;IAGA,QAAA,SAAA,WAAA,EADR,mBAMI,KAAA;;KAJD,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;KAChB,WAAQ;uBAEL,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEV,WAQO,KAAA,QAAA,eAAA,EAAA,QAAA,CANG,QAAA,eAAA,WAAA,EADR,mBAMI,KAAA;;KAJD,OAAK,eAAE,MAAA,GAAE,CAAC,UAAQ,CAAA;KACnB,WAAQ;uBAEL,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/tables/RuiTableHead.js

@@ -0,0 +1,7 @@
+import RuiTableHead_vue_vue_type_script_setup_true_lang_default from "./RuiTableHead.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tables/RuiTableHead.vue
+var RuiTableHead_default = RuiTableHead_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTableHead_default as default };
+
+//# sourceMappingURL=RuiTableHead.js.map

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

@@ -0,0 +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 * Represents a sortable column name for a given type.\n * The column name must be a key of the passed data object type.\n * @template T - The type of the data in the column.\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  colspan?: string | number;\n  rowspan?: string | number;\n\n  [key: string]: any;\n}\n\n/**\n * Represents a sortable table column.\n * This is used to ensure that when using sortable with a true value,\n * the key matches to an actual property of the object passed.\n *\n * @template T - The type of data in the table column.\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  noData?: 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-sm 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":""}

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

@@ -1,3 +1,4 @@
+import { SortDirection, TableAlign } from '../../components/tables/table-props.js';
 /**
  * Represents a sortable column name for a given type.
  * The column name must be a key of the passed data object type.
@@ -7,8 +8,8 @@ export type TableRowKey<T> = keyof T extends string ? keyof T : never;
 export interface BaseTableColumn<T> {
     key: TableRowKey<T> | string;
     sortable?: boolean;
-    direction?: 'asc' | 'desc';
-    align?: 'start' | 'center' | 'end';
+    direction?: SortDirection;
+    align?: TableAlign;
     class?: string;
     cellClass?: string;
     colspan?: string | number;
@@ -37,7 +38,7 @@ export interface NoneSortableTableColumn<T> extends BaseTableColumn<T> {
 export type TableColumn<T> = SortableTableColumn<T> | NoneSortableTableColumn<T>;
 export interface SortColumn<T> {
     column?: TableRowKey<T>;
-    direction: 'asc' | 'desc';
+    direction: SortDirection;
 }
 export type TableSortData<T> = SortColumn<T> | SortColumn<T>[] | undefined;
 export type TableRowKeyData<T> = TableRowKey<T> | TableRowKey<T>[] | undefined;
@@ -69,7 +70,7 @@ declare const __VLS_export: <T extends object, K extends keyof T = keyof T>(__VL
     props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
         onSort?: ((value: {
             key: TableRowKey<T>;
-            direction?: "asc" | "desc";
+            direction?: SortDirection;
         }) => any) | undefined;
         "onSelect:all"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -92,7 +93,7 @@ declare const __VLS_export: <T extends object, K extends keyof T = keyof T>(__VL
     };
     emit: ((evt: "sort", value: {
         key: TableRowKey<T>;
-        direction?: "asc" | "desc";
+        direction?: SortDirection;
     }) => void) & ((evt: "select:all", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -0,0 +1,230 @@
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiProgress_default from "../progress/RuiProgress.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import RuiCheckbox_default from "../forms/checkbox/RuiCheckbox.js";
+import RuiBadge_default from "../overlays/badge/RuiBadge.js";
+import { SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass } from "./table-props.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/tables/RuiTableHead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-id"];
+var _hoisted_2 = [
+	"colspan",
+	"rowspan",
+	"data-id"
+];
+var _hoisted_3 = ["colspan"];
+var RuiTableHead_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiTableHead",
+	props: {
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		stickyHeader: {
+			type: Boolean,
+			default: false
+		},
+		stick: {
+			type: Boolean,
+			default: false
+		},
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		disableCheckAll: {
+			type: Boolean,
+			default: false
+		},
+		noData: { type: Boolean },
+		colspan: { default: 0 },
+		columns: {},
+		capitalizeHeaders: {
+			type: Boolean,
+			default: false
+		},
+		isAllSelected: {
+			type: Boolean,
+			default: false
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		sortedMap: { default: () => ({}) },
+		sortData: {},
+		columnAttr: { default: "label" },
+		dataId: { default: "head-main" }
+	},
+	emits: ["select:all", "sort"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const tableHeadStyles = tv({
+			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-sm leading-6",
+				sortButton: "inline-flex group/sort",
+				sortIcon: "transition opacity-0 rotate-180 group-hover/sort:opacity-60",
+				loaderRow: "border-none",
+				progress: "p-0 h-0",
+				progressWrapper: "h-0 -mt-1"
+			},
+			variants: {
+				position: {
+					default: {},
+					sticky: { thead: "top-0 z-10 absolute" },
+					fixed: {
+						thead: "top-0 z-10 fixed",
+						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]" } }
+			},
+			defaultVariants: { position: "default" }
+		});
+		const headerPosition = computed(() => {
+			if (__props.stickyHeader && __props.stick) return "fixed";
+			if (__props.stickyHeader) return "sticky";
+			return "default";
+		});
+		const ui = computed(() => tableHeadStyles({
+			position: get(headerPosition),
+			dense: __props.dense
+		}));
+		function getSortIconClass(key) {
+			if (!isSortedBy(key)) return void 0;
+			return `!opacity-100 ${getSortDirection(key) === SortDirection.asc ? "!rotate-180" : "!rotate-0"}`;
+		}
+		function onSort({ key, direction }) {
+			return emit("sort", {
+				key,
+				direction: direction ?? SortDirection.asc
+			});
+		}
+		function onToggleAll(checked) {
+			return emit("select:all", checked);
+		}
+		function isSortedBy(key) {
+			return key in __props.sortedMap;
+		}
+		function getSortIndex(key) {
+			if (!__props.sortData || !Array.isArray(__props.sortData) || !isSortedBy(key)) return -1;
+			return __props.sortData.findIndex((sort) => sort.column === key);
+		}
+		function getSortDirection(key) {
+			return __props.sortedMap[key]?.direction;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("thead", {
+				"data-id": __props.dataId,
+				class: normalizeClass(unref(ui).thead())
+			}, [createElementVNode("tr", null, [__props.selectable ? (openBlock(), createElementBlock("th", {
+				key: 0,
+				class: normalizeClass(unref(ui).checkbox()),
+				scope: "col",
+				colspan: "1",
+				rowspan: "1"
+			}, [createVNode(RuiCheckbox_default, {
+				disabled: __props.disableCheckAll,
+				indeterminate: __props.indeterminate,
+				"model-value": __props.isAllSelected,
+				size: __props.dense ? "sm" : void 0,
+				color: "primary",
+				"data-id": "table-toggle-check-all",
+				"hide-details": "",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => onToggleAll($event))
+			}, null, 8, [
+				"disabled",
+				"indeterminate",
+				"model-value",
+				"size"
+			])], 2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+				return openBlock(), createElementBlock("th", {
+					key: column.key,
+					class: normalizeClass([
+						unref(ui).th({ class: unref(getAlignClass)(column.align, column.sortable) }),
+						column.class,
+						{ capitalize: !__props.capitalizeHeaders }
+					]),
+					scope: "col",
+					colspan: column.colspan ?? 1,
+					rowspan: column.rowspan ?? 1,
+					"data-id": column.sortable ? "column-sortable" : void 0
+				}, [renderSlot(_ctx.$slots, `header.${column.key.toString()}`, { column }, () => [column.sortable ? (openBlock(), createBlock(RuiBadge_default, {
+					key: 0,
+					"model-value": getSortIndex(column.key) >= 0,
+					text: `${getSortIndex(column.key) + 1}`,
+					"offset-y": __props.dense ? 8 : 0,
+					color: "secondary",
+					size: "sm"
+				}, {
+					default: withCtx(() => [createVNode(RuiButton_default, {
+						class: normalizeClass(unref(ui).sortButton({ class: unref(getSortButtonAlignClass)(column.align) })),
+						"data-sorted": isSortedBy(column.key) || void 0,
+						"data-direction": getSortDirection(column.key),
+						size: "sm",
+						variant: "text",
+						onClick: ($event) => onSort(column)
+					}, createSlots({
+						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",
+							size: "18"
+						}, null, 8, ["class"])) : createCommentVNode("", true)]),
+						default: withCtx(() => [createElementVNode("span", {
+							class: normalizeClass(unref(ui).columnText()),
+							"data-id": "column-text"
+						}, [renderSlot(_ctx.$slots, `header.text.${column.key.toString()}`, { column }, () => [createTextVNode(toDisplayString(column[__props.columnAttr]), 1)])], 2)]),
+						_: 2
+					}, [column.align === unref(TableAlign).end ? {
+						name: "prepend",
+						fn: withCtx(() => [createVNode(RuiIcon_default, {
+							class: normalizeClass(unref(ui).sortIcon({ class: getSortIconClass(column.key) })),
+							name: "lu-arrow-down",
+							size: "18"
+						}, null, 8, ["class"])]),
+						key: "0"
+					} : void 0]), 1032, [
+						"class",
+						"data-sorted",
+						"data-direction",
+						"onClick"
+					])]),
+					_: 2
+				}, 1032, [
+					"model-value",
+					"text",
+					"offset-y"
+				])) : (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(ui).columnText()),
+					"data-id": "column-text"
+				}, [renderSlot(_ctx.$slots, `header.text.${column.key.toString()}`, { column }, () => [createTextVNode(toDisplayString(column[__props.columnAttr]), 1)])], 2))])], 10, _hoisted_2);
+			}), 128))]), __props.loading ? (openBlock(), createElementBlock("tr", {
+				key: 0,
+				class: normalizeClass(unref(ui).loaderRow()),
+				"data-id": "thead-loader"
+			}, [createElementVNode("th", {
+				class: normalizeClass(unref(ui).progress()),
+				colspan: __props.colspan,
+				scope: "col"
+			}, [createElementVNode("div", { class: normalizeClass(unref(ui).progressWrapper()) }, [createVNode(RuiProgress_default, {
+				color: "primary",
+				variant: "indeterminate"
+			})], 2)], 10, _hoisted_3)], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiTableHead_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTableHead.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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 * Represents a sortable column name for a given type.\n * The column name must be a key of the passed data object type.\n * @template T - The type of the data in the column.\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  colspan?: string | number;\n  rowspan?: string | number;\n\n  [key: string]: any;\n}\n\n/**\n * Represents a sortable table column.\n * This is used to ensure that when using sortable with a true value,\n * the key matches to an actual property of the object passed.\n *\n * @template T - The type of data in the table column.\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  noData?: 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-sm 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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"}

package/dist/components/tables/RuiTablePagination.js

@@ -0,0 +1,7 @@
+import RuiTablePagination_vue_vue_type_script_setup_true_lang_default from "./RuiTablePagination.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tables/RuiTablePagination.vue
+var RuiTablePagination_default = RuiTablePagination_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTablePagination_default as default };
+
+//# sourceMappingURL=RuiTablePagination.js.map

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

@@ -0,0 +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   * 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} = 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-20',\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  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\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        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        variant=\"outlined\"\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        :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        :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":""}

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

@@ -1,13 +1,16 @@
-export interface TablePaginationData {
-    page: number;
-    total: number;
-    limit: number;
-    limits?: number[];
-}
+import { type TablePaginationData } from '../../components/tables/use-pagination-navigation.js';
+export type { TablePaginationData };
 export interface Props {
     dense?: boolean;
     disablePerPage?: boolean;
     loading?: 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.
+     */
+    rangesThreshold?: number;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {

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

@@ -0,0 +1,187 @@
+import { useTable } from "../../composables/defaults/table.js";
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import RuiTextField_default from "../forms/text-field/RuiTextField.js";
+import RuiMenuSelect_default from "../forms/select/RuiMenuSelect.js";
+import { usePaginationNavigation } from "./use-pagination-navigation.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeModels, normalizeClass, openBlock, ref, toDisplayString, unref, useModel, watch, withCtx, withKeys } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/tables/RuiTablePagination.vue?vue&type=script&setup=true&lang.ts
+var RuiTablePagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiTablePagination",
+	props: /* @__PURE__ */ mergeModels({
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		disablePerPage: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		rangesThreshold: { default: 500 }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const paginationStyles = tv({
+			slots: {
+				wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
+				limit: "flex items-center space-x-2 text-caption",
+				ranges: "flex items-center space-x-2 text-caption pr-2",
+				pageInput: "w-20",
+				sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
+				indicator: "text-rui-text text-caption whitespace-nowrap",
+				navigation: "flex items-center"
+			},
+			variants: { dense: { true: { wrapper: "gap-x-2" } } }
+		});
+		const ui = computed(() => paginationStyles({ dense: __props.dense }));
+		const { limits, currentLimit, pages, ranges, indicatorText, currentRange, useInputJump, hasPrev, hasNext, onPrev, onNext, onFirst, onLast } = usePaginationNavigation(modelValue, useTable(), () => __props.rangesThreshold);
+		const pageDraft = ref(String(get(currentRange)));
+		watch(currentRange, (value) => {
+			set(pageDraft, String(value));
+		});
+		function commitPageInput() {
+			const parsed = Number.parseInt(get(pageDraft), 10);
+			const maxPage = get(pages);
+			if (!Number.isFinite(parsed) || maxPage === 0) {
+				set(pageDraft, String(get(currentRange)));
+				return;
+			}
+			const clamped = Math.min(Math.max(parsed, 1), maxPage);
+			if (clamped !== get(currentRange)) set(currentRange, clamped);
+			set(pageDraft, String(clamped));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).wrapper()) }, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).limit()),
+					"data-id": "table-pagination-limit-section"
+				}, [createElementVNode("span", { class: normalizeClass(unref(ui).sectionLabel()) }, "Rows per page:", 2), createVNode(RuiMenuSelect_default, {
+					modelValue: unref(currentLimit),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentLimit) ? currentLimit.value = $event : null),
+					options: unref(limits),
+					disabled: __props.loading || __props.disablePerPage,
+					"label-class": "!text-xs !min-h-8",
+					name: "limit",
+					"key-attr": "limit",
+					"text-attr": "limit",
+					"hide-details": "",
+					dense: "",
+					"data-id": "table-pagination-limit"
+				}, null, 8, [
+					"modelValue",
+					"options",
+					"disabled"
+				])], 2),
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).ranges()),
+					"data-id": "table-pagination-ranges-section"
+				}, [
+					createElementVNode("span", { class: normalizeClass(unref(ui).sectionLabel()) }, toDisplayString(unref(useInputJump) ? "Page" : "Items #"), 3),
+					unref(useInputJump) ? (openBlock(), createBlock(RuiTextField_default, {
+						key: 0,
+						modelValue: unref(pageDraft),
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(pageDraft) ? pageDraft.value = $event : null),
+						disabled: __props.loading,
+						class: normalizeClass(unref(ui).pageInput()),
+						type: "number",
+						min: "1",
+						max: unref(pages),
+						inputmode: "numeric",
+						"hide-details": "",
+						dense: "",
+						variant: "outlined",
+						"data-id": "table-pagination-ranges-input",
+						onBlur: _cache[2] || (_cache[2] = ($event) => commitPageInput()),
+						onKeydown: _cache[3] || (_cache[3] = withKeys(($event) => commitPageInput(), ["enter"]))
+					}, null, 8, [
+						"modelValue",
+						"disabled",
+						"class",
+						"max"
+					])) : unref(ranges).length > 0 ? (openBlock(), createBlock(RuiMenuSelect_default, {
+						key: 1,
+						modelValue: unref(currentRange),
+						"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(currentRange) ? currentRange.value = $event : null),
+						options: unref(ranges),
+						disabled: __props.loading,
+						"label-class": "!text-xs !min-h-8",
+						name: "ranges",
+						"key-attr": "page",
+						"text-attr": "text",
+						"hide-details": "",
+						dense: "",
+						"data-id": "table-pagination-ranges"
+					}, null, 8, [
+						"modelValue",
+						"options",
+						"disabled"
+					])) : createCommentVNode("", true),
+					createElementVNode("span", { class: normalizeClass(unref(ui).indicator()) }, toDisplayString(unref(indicatorText)), 3)
+				], 2),
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).navigation()),
+					"data-id": "table-pagination-navigation"
+				}, [
+					createVNode(RuiButton_default, {
+						size: __props.dense ? "sm" : void 0,
+						disabled: !unref(hasPrev) || __props.loading,
+						variant: "text",
+						icon: "",
+						"data-id": "table-pagination-first",
+						onClick: _cache[5] || (_cache[5] = ($event) => unref(onFirst)())
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevrons-left" })]),
+						_: 1
+					}, 8, ["size", "disabled"]),
+					createVNode(RuiButton_default, {
+						size: __props.dense ? "sm" : void 0,
+						disabled: !unref(hasPrev) || __props.loading,
+						variant: "text",
+						icon: "",
+						"data-id": "table-pagination-prev",
+						onClick: _cache[6] || (_cache[6] = ($event) => unref(onPrev)())
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevron-left" })]),
+						_: 1
+					}, 8, ["size", "disabled"]),
+					createVNode(RuiButton_default, {
+						size: __props.dense ? "sm" : void 0,
+						disabled: !unref(hasNext) || __props.loading,
+						variant: "text",
+						icon: "",
+						"data-id": "table-pagination-next",
+						onClick: _cache[7] || (_cache[7] = ($event) => unref(onNext)())
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevron-right" })]),
+						_: 1
+					}, 8, ["size", "disabled"]),
+					createVNode(RuiButton_default, {
+						size: __props.dense ? "sm" : void 0,
+						disabled: !unref(hasNext) || __props.loading,
+						variant: "text",
+						icon: "",
+						"data-id": "table-pagination-last",
+						onClick: _cache[8] || (_cache[8] = ($event) => unref(onLast)())
+					}, {
+						default: withCtx(() => [createVNode(RuiIcon_default, { name: "lu-chevrons-right" })]),
+						_: 1
+					}, 8, ["size", "disabled"])
+				], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RuiTablePagination_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map