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/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n root?: VueClassValue;\n label?: VueClassValue;\n menu?: VueClassValue;\n option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n options: TItem[];\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem;\n disabled?: boolean;\n loading?: boolean;\n readOnly?: boolean;\n dense?: boolean;\n clearable?: boolean;\n label?: string;\n menuOptions?: MenuProps;\n classNames?: RuiMenuSelectClassNames;\n /** @deprecated Use `classNames.label` instead /\n labelClass?: string;\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string;\n /* @deprecated Use `classNames.option` instead */\n optionClass?: string;\n prependWidth?: number;\n appendWidth?: number;\n itemHeight?: number;\n variant?: MenuSelectVariant;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n autoSelectFirst?: boolean;\n hideNoData?: boolean;\n noDataText?: string;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiMenuSelect',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue \| undefined>({ required: true });\n\nconst {\n options,\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n label = 'Select',\n menuOptions,\n classNames,\n labelClass,\n menuClass,\n variant = 'default',\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n hideNoData = false,\n noDataText = 'No data available',\n required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem \| undefined;\n variant: string;\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'activator.label'?: (props: { value: TItem \| undefined }) => any;\n 'selection.prepend'?: (props: { item: TItem }) => any;\n 'selection'?: (props: { item: TItem }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst value = computed<TItem \| undefined>({\n get: () => {\n const value = get(modelValue);\n if (keyAttr)\n return options.find(option => option[keyAttr] === value);\n return value as unknown as TItem;\n },\n set: (selected?: TItem) => {\n const selection = keyAttr && selected ? selected[keyAttr] : selected;\n set(modelValue, selection as TValue);\n },\n});\n\nfunction setValue(val: TItem): void {\n set(value, val);\n set(focused, true);\n}\n\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n isOpen,\n menuWidth,\n getText,\n getIdentifier,\n isActiveItem,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n valueKey,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: itemHeight ?? (dense ? 30 : 48),\n keyAttr,\n textAttr,\n options: () => options,\n dense: () => dense,\n value,\n menuRef,\n disabled: () => disabled,\n autoSelectFirst,\n setValue,\n prependWidth,\n appendWidth,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) \|\| !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n if (!get(float) \|\| !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n filled: variant === 'filled',\n outlined: get(outlined),\n float: get(float),\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :options=\"menuFloatingOptions\"\n close-on-content-click\n full-width\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n >\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <button\n ref=\"activator\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled\"\n :aria-expanded=\"isOpen\"\n :aria-readonly=\"readOnly \|\| undefined\"\n :aria-required=\"required \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n type=\"button\"\n :tabindex=\"disabled \|\| readOnly ? -1 : 0\"\n :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n v-bind=\"{\n ...getNonRootAttrs($attrs),\n ...(readOnly ? {} : attrs),\n }\"\n data-id=\"activator\"\n :aria-invalid=\"hasError\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n @keydown.enter.prevent=\"applyHighlighted()\"\n @keydown.space.prevent=\"applyHighlighted()\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n >\n <span\n v-if=\"outlined \|\| !value\"\n :class=\"[\n ui.label(),\n { 'pr-2': !value && !open && outlined },\n ]\"\n >\n <slot\n name=\"activator.label\"\n v-bind=\"{ value }\"\n >\n {{ label }}\n </slot>\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n <span\n v-if=\"value\"\n :class=\"ui.value()\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"{ item: value }\"\n />\n <slot\n name=\"selection\"\n v-bind=\"{ item: value }\"\n >\n {{ getText(value) }}\n </slot>\n </span>\n\n <span\n v-if=\"clearable && value && !disabled\"\n data-id=\"clear\"\n :class=\"[ui.clear(), focused && '!visible', { 'mr-2': !dense }]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n color=\"error\"\n name=\"lu-x\"\n size=\"18\"\n />\n </span>\n\n <span :class=\"ui.iconWrapper()\">\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"3\"\n variant=\"indeterminate\"\n />\n </button>\n <fieldset\n v-if=\"outlined\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </slot>\n <input\n :value=\"valueKey\"\n class=\"hidden\"\n type=\"hidden\"\n />\n </template>\n <template #default=\"{ width }\">\n <div\n v-if=\"options.length > 0\"\n :ref=\"containerProps.ref\"\n :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n @scroll=\"containerProps.onScroll\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n >\n <div\n v-bind=\"wrapperProps\"\n ref=\"menuRef\"\n >\n <RuiButton\n v-for=\"{ item, _index } in renderedData\"\n :key=\"getIdentifier(item)\"\n :active=\"isActiveItem(item)\"\n :aria-selected=\"isActiveItem(item)\"\n :size=\"dense ? 'sm' : undefined\"\n variant=\"list\"\n :data-highlighted=\"modelHighlightedIndex === _index\"\n :class=\"{\n [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n }\"\n @click=\"setValue(item)\"\n >\n <template #prepend>\n <slot\n name=\"item.prepend\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n <slot\n name=\"item\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n >\n {{ getText(item) }}\n </slot>\n <template #append>\n <slot\n name=\"item.append\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n </RuiButton>\n </div>\n </div>\n\n <div\n v-else-if=\"!hideNoData\"\n data-id=\"no-data\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu ?? menuClass\"\n >\n <slot name=\"no-data\">\n <div class=\"p-4\">\n {{ noDataText }}\n </div>\n </slot>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n root?: VueClassValue;\n label?: VueClassValue;\n menu?: VueClassValue;\n option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n options: TItem[];\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem;\n disabled?: boolean;\n loading?: boolean;\n readOnly?: boolean;\n dense?: boolean;\n clearable?: boolean;\n label?: string;\n menuOptions?: MenuProps;\n classNames?: RuiMenuSelectClassNames;\n /** @deprecated Use `classNames.label` instead /\n labelClass?: string;\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string;\n /* @deprecated Use `classNames.option` instead */\n optionClass?: string;\n prependWidth?: number;\n appendWidth?: number;\n itemHeight?: number;\n variant?: MenuSelectVariant;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n autoSelectFirst?: boolean;\n hideNoData?: boolean;\n noDataText?: string;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiMenuSelect',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue \| undefined>({ required: true });\n\nconst {\n options,\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n label = 'Select',\n menuOptions,\n classNames,\n labelClass,\n menuClass,\n variant = 'default',\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n prependWidth,\n appendWidth,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n hideNoData = false,\n noDataText = 'No data available',\n required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem \| undefined;\n variant: string;\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'activator.label'?: (props: { value: TItem \| undefined }) => any;\n 'selection.prepend'?: (props: { item: TItem }) => any;\n 'selection'?: (props: { item: TItem }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst value = computed<TItem \| undefined>({\n get: () => {\n const value = get(modelValue);\n if (keyAttr)\n return options.find(option => option[keyAttr] === value);\n return value as unknown as TItem;\n },\n set: (selected?: TItem) => {\n const selection = keyAttr && selected ? selected[keyAttr] : selected;\n set(modelValue, selection as TValue);\n },\n});\n\nfunction setValue(val: TItem): void {\n set(value, val);\n set(focused, true);\n}\n\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n isOpen,\n menuWidth,\n getText,\n getIdentifier,\n isActiveItem,\n modelHighlightedIndex,\n moveHighlight,\n applyHighlighted,\n valueKey,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: itemHeight ?? (dense ? 30 : 48),\n keyAttr,\n textAttr,\n options: () => options,\n dense: () => dense,\n value,\n menuRef,\n disabled: () => disabled,\n autoSelectFirst,\n setValue,\n prependWidth,\n appendWidth,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) \|\| !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n if (!get(float) \|\| !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n filled: variant === 'filled',\n outlined: get(outlined),\n float: get(float),\n showLabel: !!get(legendText),\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :options=\"menuFloatingOptions\"\n close-on-content-click\n full-width\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n >\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <button\n ref=\"activator\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled\"\n :aria-expanded=\"isOpen\"\n :aria-readonly=\"readOnly \|\| undefined\"\n :aria-required=\"required \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n type=\"button\"\n :tabindex=\"disabled \|\| readOnly ? -1 : 0\"\n :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n v-bind=\"{\n ...getNonRootAttrs($attrs),\n ...(readOnly ? {} : attrs),\n }\"\n data-id=\"activator\"\n :aria-invalid=\"hasError\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n @keydown.enter.prevent=\"applyHighlighted()\"\n @keydown.space.prevent=\"applyHighlighted()\"\n @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n >\n <span\n v-if=\"outlined \|\| !value\"\n :class=\"[\n ui.label(),\n { 'pr-2': !value && !open && outlined },\n ]\"\n >\n <slot\n name=\"activator.label\"\n v-bind=\"{ value }\"\n >\n {{ label }}\n </slot>\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n <span\n v-if=\"value\"\n :class=\"ui.value()\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"{ item: value }\"\n />\n <slot\n name=\"selection\"\n v-bind=\"{ item: value }\"\n >\n {{ getText(value) }}\n </slot>\n </span>\n\n <span\n v-if=\"clearable && value && !disabled\"\n data-id=\"clear\"\n :class=\"[ui.clear(), focused && '!visible', { 'mr-2': !dense }]\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n color=\"error\"\n name=\"lu-x\"\n size=\"18\"\n />\n </span>\n\n <span :class=\"ui.iconWrapper()\">\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"3\"\n variant=\"indeterminate\"\n />\n </button>\n <fieldset\n v-if=\"outlined\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </slot>\n <input\n :value=\"valueKey\"\n class=\"hidden\"\n type=\"hidden\"\n />\n </template>\n <template #default=\"{ width }\">\n <div\n v-if=\"options.length > 0\"\n :ref=\"containerProps.ref\"\n :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n @scroll=\"containerProps.onScroll\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n >\n <div\n v-bind=\"wrapperProps\"\n ref=\"menuRef\"\n >\n <RuiButton\n v-for=\"{ item, _index } in renderedData\"\n :key=\"getIdentifier(item)\"\n :active=\"isActiveItem(item)\"\n :aria-selected=\"isActiveItem(item)\"\n :size=\"dense ? 'sm' : undefined\"\n variant=\"list\"\n :data-highlighted=\"modelHighlightedIndex === _index\"\n :class=\"{\n [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n }\"\n @click=\"setValue(item)\"\n >\n <template #prepend>\n <slot\n name=\"item.prepend\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n <slot\n name=\"item\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n >\n {{ getText(item) }}\n </slot>\n <template #append>\n <slot\n name=\"item.append\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n </RuiButton>\n </div>\n </div>\n\n <div\n v-else-if=\"!hideNoData\"\n data-id=\"no-data\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu ?? menuClass\"\n >\n <slot name=\"no-data\">\n <div class=\"p-4\">\n {{ noDataText }}\n </div>\n </slot>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/select/menu-select-styles.d.ts CHANGED Viewed

@@ -59,6 +59,9 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 } & {
     focused: {
         true: {
@@ -173,6 +176,9 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 }, {
     fieldset: string;
     legend: string;

package/dist/components/forms/text-input-styles.d.ts CHANGED Viewed

@@ -243,6 +243,9 @@ export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 }, {
     fieldset: string;
     legend: string;

package/dist/components/forms/text-input-styles.js CHANGED Viewed

@@ -179,11 +179,13 @@ var activatorStyles = tv({
 		active: { true: { highlighted: "!bg-rui-grey-300 dark:!bg-rui-grey-700" } },
 		hasError: { true: {} },
 		hasSuccess: { true: {} },
-		hovered: { true: {} }
+		hovered: { true: {} },
+		showLabel: { true: {} }
 	},
 	compoundVariants: [
 		{
 			float: true,
+			showLabel: true,
 			class: { legend: "px-2" }
 		},
 		{

package/dist/components/forms/text-input-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n default: 'default',\n filled: 'filled',\n outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/*\n Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n /\nexport const underlinePseudo = [\n 'border-b border-black/[0.42] dark:border-white/[0.42]',\n 'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n 'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n 'after:border-black dark:after:border-white',\n].join(' ');\n\n/\n Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n \n Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n \n ## State approach (JS-driven for all 5 components)\n \n - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused \|\| hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n \n ## Legend content\n \n The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"\\{ '--rui-legend': labelWithQuote \\}\"` on the legend element.\n \n ## Compositing\n \n The fieldset is forced onto its own GPU layer so the focused border is\n * rasterized on integer pixel boundaries. Without it, at fractional\n * y-coordinates with a non-integer device pixel ratio such as 1.25, Chromium\n * anti-aliases the 1.6-2px focus border across two physical pixel rows behind\n * the floated label, which shows up as two thin lines crossing it.\n /\nexport const textInputBase = tv({\n slots: {\n label: 'text-rui-text-secondary transition-all duration-75',\n fieldset: [\n 'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n 'rounded pointer-events-none px-2 transition-all -mt-2',\n 'border border-black/[0.23]',\n 'dark:border-white/[0.23]',\n // translateZ(0) promotes this to its own layer, whose raster snaps to integer pixels\n 'transform-gpu',\n ].join(' '),\n legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n },\n variants: {\n focused: {\n true: {\n fieldset: '!border-2',\n },\n },\n hovered: {\n true: {\n fieldset: 'border-black dark:border-white',\n },\n },\n disabled: {\n true: {\n fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n label: 'text-rui-text-disabled',\n },\n },\n active: {\n true: {},\n },\n showLabel: {\n true: {},\n },\n validation: {\n error: {\n fieldset: '!border-rui-error',\n label: '!text-rui-error',\n },\n success: {\n fieldset: '!border-rui-success',\n label: '!text-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Legend padding only when label is floated (active + has label)\n { showLabel: true, active: true, class: { legend: 'px-2' } },\n // Focused + color → fieldset border takes the color\n { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n ],\n defaultVariants: {\n color: 'primary',\n },\n});\n\n/\n Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n \n IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n \n State-driven via JS refs: `outlined`, `float` (open \|\| hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n \n The wrapper is `w-full inline-flex flex-col` so an activator fills its\n * parent whatever the context. A consumer's own width utility would normally\n * collide with `w-full` on the same element and lose to cascade order, so\n * RuiAutoComplete, RuiMenuSelect and RuiDateTimePicker route consumer classes\n * through `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the\n * consumer's width wins.\n */\nexport const activatorStyles = tv({\n extend: textInputBase,\n slots: {\n // Re-declare base slots for type inference\n fieldset: '',\n legend: '',\n wrapper: 'w-full inline-flex flex-col',\n activator: [\n 'group relative inline-flex items-center w-full',\n 'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n 'min-h-14 pl-4 py-2 pr-8 rounded',\n 'm-0 transition-all text-body-1 text-left',\n 'dark:text-rui-text',\n ].join(' '),\n label: [\n 'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n 'block truncate transition-all duration-75',\n ].join(' '),\n value: 'w-full block truncate transition-all duration-75',\n clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n progress: 'absolute left-0 bottom-0 w-full',\n icon: 'text-rui-text transition',\n iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n required: 'text-rui-error',\n },\n variants: {\n dense: {\n true: {\n activator: 'py-1.5 min-h-10',\n },\n },\n disabled: {\n true: {\n activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n },\n },\n readonly: {\n true: {\n activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n },\n },\n filled: {\n true: {\n activator: [\n '!rounded-t !rounded-b-none !bg-black/[0.06]',\n '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n 'dark:!bg-white/[0.09]',\n 'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n underlinePseudo,\n ].join(' '),\n },\n },\n outlined: {\n true: {\n activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n label: 'absolute',\n fieldset: '!mt-0 !h-full',\n },\n false: {\n activator: `!rounded-none ${underlinePseudo}`,\n },\n },\n float: {\n true: {\n label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n },\n },\n opened: {\n true: {\n icon: 'rotate-180',\n },\n },\n active: {\n true: {\n highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n },\n },\n hasError: {\n true: {},\n },\n hasSuccess: {\n true: {},\n },\n // Re-declare for type inference — actual styles are in textInputBase\n hovered: { true: {} },\n },\n compoundVariants: [\n // Legend padding when label is floated\n { float: true, class: { legend: 'px-2' } },\n\n // Non-outlined + opened → underline scales up\n { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n // Non-outlined + error → underline color\n { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n // Non-outlined + success → underline color\n { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n // Non-outlined + disabled in dark mode\n { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n // Filled + disabled\n { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n // Outlined + hovered → fieldset border\n { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n // Outlined + opened/focused → primary border\n { outlined: true, opened: true, class: {\n fieldset: '!border-rui-primary !border-2',\n label: 'text-rui-primary',\n } },\n\n // Outlined + error → fieldset + label\n { outlined: true, hasError: true, class: {\n fieldset: '!border-rui-error',\n label: '!text-rui-error',\n } },\n // Outlined + success → fieldset + label\n { outlined: true, hasSuccess: true, class: {\n fieldset: '!border-rui-success',\n label: '!text-rui-success',\n } },\n\n // Outlined + disabled → dotted fieldset\n { outlined: true, disabled: true, class: {\n fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n } },\n\n // Float + opened → label color\n { float: true, opened: true, class: { label: 'text-rui-primary' } },\n ],\n defaultVariants: {\n filled: false,\n outlined: false,\n dense: false,\n disabled: false,\n readonly: false,\n float: false,\n opened: false,\n },\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n default: 'default',\n filled: 'filled',\n outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/*\n Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n /\nexport const underlinePseudo = [\n 'border-b border-black/[0.42] dark:border-white/[0.42]',\n 'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n 'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n 'after:border-black dark:after:border-white',\n].join(' ');\n\n/\n Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n \n Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n \n ## State approach (JS-driven for all 5 components)\n \n - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused \|\| hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n \n ## Legend content\n \n The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"\\{ '--rui-legend': labelWithQuote \\}\"` on the legend element.\n \n ## Compositing\n \n The fieldset is forced onto its own GPU layer so the focused border is\n * rasterized on integer pixel boundaries. Without it, at fractional\n * y-coordinates with a non-integer device pixel ratio such as 1.25, Chromium\n * anti-aliases the 1.6-2px focus border across two physical pixel rows behind\n * the floated label, which shows up as two thin lines crossing it.\n /\nexport const textInputBase = tv({\n slots: {\n label: 'text-rui-text-secondary transition-all duration-75',\n fieldset: [\n 'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n 'rounded pointer-events-none px-2 transition-all -mt-2',\n 'border border-black/[0.23]',\n 'dark:border-white/[0.23]',\n // translateZ(0) promotes this to its own layer, whose raster snaps to integer pixels\n 'transform-gpu',\n ].join(' '),\n legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n },\n variants: {\n focused: {\n true: {\n fieldset: '!border-2',\n },\n },\n hovered: {\n true: {\n fieldset: 'border-black dark:border-white',\n },\n },\n disabled: {\n true: {\n fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n label: 'text-rui-text-disabled',\n },\n },\n active: {\n true: {},\n },\n showLabel: {\n true: {},\n },\n validation: {\n error: {\n fieldset: '!border-rui-error',\n label: '!text-rui-error',\n },\n success: {\n fieldset: '!border-rui-success',\n label: '!text-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Legend padding only when label is floated (active + has label)\n { showLabel: true, active: true, class: { legend: 'px-2' } },\n // Focused + color → fieldset border takes the color\n { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n ],\n defaultVariants: {\n color: 'primary',\n },\n});\n\n/\n Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n \n IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n \n State-driven via JS refs: `outlined`, `float` (open \|\| hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n \n The wrapper is `w-full inline-flex flex-col` so an activator fills its\n * parent whatever the context. A consumer's own width utility would normally\n * collide with `w-full` on the same element and lose to cascade order, so\n * RuiAutoComplete, RuiMenuSelect and RuiDateTimePicker route consumer classes\n * through `ui.wrapper(\\{ class \\})`, where twMerge deduplicates them and the\n * consumer's width wins.\n */\nexport const activatorStyles = tv({\n extend: textInputBase,\n slots: {\n // Re-declare base slots for type inference\n fieldset: '',\n legend: '',\n wrapper: 'w-full inline-flex flex-col',\n activator: [\n 'group relative inline-flex items-center w-full',\n 'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n 'min-h-14 pl-4 py-2 pr-8 rounded',\n 'm-0 transition-all text-body-1 text-left',\n 'dark:text-rui-text',\n ].join(' '),\n label: [\n 'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n 'block truncate transition-all duration-75',\n ].join(' '),\n value: 'w-full block truncate transition-all duration-75',\n clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n progress: 'absolute left-0 bottom-0 w-full',\n icon: 'text-rui-text transition',\n iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n required: 'text-rui-error',\n },\n variants: {\n dense: {\n true: {\n activator: 'py-1.5 min-h-10',\n },\n },\n disabled: {\n true: {\n activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n },\n },\n readonly: {\n true: {\n activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n },\n },\n filled: {\n true: {\n activator: [\n '!rounded-t !rounded-b-none !bg-black/[0.06]',\n '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n 'dark:!bg-white/[0.09]',\n 'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n underlinePseudo,\n ].join(' '),\n },\n },\n outlined: {\n true: {\n activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n label: 'absolute',\n fieldset: '!mt-0 !h-full',\n },\n false: {\n activator: `!rounded-none ${underlinePseudo}`,\n },\n },\n float: {\n true: {\n label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n },\n },\n opened: {\n true: {\n icon: 'rotate-180',\n },\n },\n active: {\n true: {\n highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n },\n },\n hasError: {\n true: {},\n },\n hasSuccess: {\n true: {},\n },\n // Re-declare for type inference — actual styles are in textInputBase\n hovered: { true: {} },\n showLabel: { true: {} },\n },\n compoundVariants: [\n // Legend padding when a label is floated; without text it would cut an empty notch\n { float: true, showLabel: true, class: { legend: 'px-2' } },\n\n // Non-outlined + opened → underline scales up\n { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n // Non-outlined + error → underline color\n { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n // Non-outlined + success → underline color\n { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n // Non-outlined + disabled in dark mode\n { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n // Filled + disabled\n { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n // Outlined + hovered → fieldset border\n { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n // Outlined + opened/focused → primary border\n { outlined: true, opened: true, class: {\n fieldset: '!border-rui-primary !border-2',\n label: 'text-rui-primary',\n } },\n\n // Outlined + error → fieldset + label\n { outlined: true, hasError: true, class: {\n fieldset: '!border-rui-error',\n label: '!text-rui-error',\n } },\n // Outlined + success → fieldset + label\n { outlined: true, hasSuccess: true, class: {\n fieldset: '!border-rui-success',\n label: '!text-rui-success',\n } },\n\n // Outlined + disabled → dotted fieldset\n { outlined: true, disabled: true, class: {\n fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n } },\n\n // Float + opened → label color\n { float: true, opened: true, class: { label: 'text-rui-primary' } },\n ],\n defaultVariants: {\n filled: false,\n outlined: false,\n dense: false,\n disabled: false,\n readonly: false,\n float: false,\n opened: false,\n },\n});\n"],"mappings":"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"}

package/dist/components/index.js CHANGED Viewed

@@ -42,11 +42,11 @@ import RuiNotification_default from "./overlays/notification/RuiNotification.js"
 import RuiFooterStepper_default from "./steppers/RuiFooterStepper.js";
 import RuiStepper_default from "./steppers/RuiStepper.js";
 import RuiTableEmptyState_default from "./tables/RuiTableEmptyState.js";
+import RuiTableErrorState_default from "./tables/RuiTableErrorState.js";
 import RuiExpandButton_default from "./tables/RuiExpandButton.js";
 import RuiTableLoadingState_default from "./tables/RuiTableLoadingState.js";
 import RuiTablePagination_default from "./tables/RuiTablePagination.js";
 import RuiDataTable_default from "./tables/RuiDataTable.js";
-import RuiTableErrorState_default from "./tables/RuiTableErrorState.js";
 import RuiTable_default from "./tables/RuiTable.js";
 import RuiTabItem_default from "./tabs/tab-item/RuiTabItem.js";
 import RuiTabItems_default from "./tabs/tab-items/RuiTabItems.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTable.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":""}
1	+ {"version":3,"file":"RuiDataTable.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":""}

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

@@ -60,6 +60,15 @@ export interface Props<T, K extends keyof T> {
         label?: string;
         description?: string;
     };
+    /**
+     * Why the last read failed. Shown above any rows kept from an earlier read,
+     * or in place of the empty state; `loading` still takes precedence.
+     */
+    error?: string;
+    /** Heading for that failure. */
+    errorTitle?: string;
+    /** Label for the retry control; without one, no control is offered. */
+    retryText?: string;
     /**
      * should hide the header navigation
      */
@@ -120,6 +129,7 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
         collapsed?: T[];
     }) & {
         "onUpdate:modelValue"?: ((value: T[IdType][] | undefined) => any) | undefined;
+        onRetry?: (() => any) | undefined;
         "onUpdate:options"?: ((value: {
             pagination?: TablePaginationData;
             sort?: TableSortData<T>;
@@ -164,9 +174,10 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
         }) => any;
         'no-data': () => any;
         'empty-description': () => any;
+        error: () => any;
         tfoot: () => any;
     }>;
-    emit: (((evt: "update:options", value: {
+    emit: (((evt: "retry") => void) & ((evt: "update:options", value: {
         pagination?: TablePaginationData;
         sort?: TableSortData<T>;
     }) => void) & ((evt: "copy:group", value: GroupData<T>) => void)) & (((event: "update:modelValue", value: T[IdType][] | undefined) => void) & ((event: "update:expanded", value: T[] | undefined) => void) & ((event: "update:pagination", value: TablePaginationData | undefined) => void) & ((event: "update:sort", value: TableSortData<T>) => void) & ((event: "update:group", value: TableRowKeyData<T>) => void) & ((event: "update:collapsed", value: T[] | undefined) => void));

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

@@ -56,6 +56,9 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		rangesThreshold: { default: 500 },
 		empty: { default: () => ({ label: "No item found" }) },
+		error: { default: "" },
+		errorTitle: { default: "" },
+		retryText: { default: "" },
 		hideDefaultHeader: {
 			type: Boolean,
 			default: false
@@ -105,7 +108,11 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		"collapsed": {},
 		"collapsedModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["update:options", "copy:group"], [
+	emits: /*@__PURE__*/ mergeModels([
+		"update:options",
+		"copy:group",
+		"retry"
+	], [
 		"update:modelValue",
 		"update:expanded",
 		"update:pagination",
@@ -168,6 +175,17 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			table,
 			tableScroller
 		});
+		const { width: scrollerWidth } = useElementSize(tableScroller);
+		/**
+		* The visible width of the table, which an expanded row caps its content to.
+		* Without the cap a wide panel, such as a nested table, sets the minimum width
+		* of the whole table and pushes every column past the scroller. `initial`
+		* resets the variable, so a nested table never inherits its parent's width.
+		*/
+		const viewportStyle = computed(() => {
+			const width = get$1(scrollerWidth);
+			return { "--rui-table-viewport": width > 0 && !get$1(isMobile) ? `${width}px` : "initial" };
+		});
 		const { expandable, isExpanded, onToggleExpand } = useTableExpansion({
 			rowAttr: __props.rowAttr,
 			singleExpand: __props.singleExpand
@@ -184,7 +202,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			pagination,
 			emitUpdateOptions
 		});
-		const { groupKeys, groupKey, grouped, isExpandedGroup, isHiddenRow, onToggleExpandGroup, onUngroup } = useTableGrouping({ rowAttr: __props.rowAttr }, {
+		const { groupKeys, groupKey, grouped, mappedGroups, isExpandedGroup, isHiddenRow, onToggleExpandGroup, onUngroup } = useTableGrouping({ rowAttr: __props.rowAttr }, {
 			group,
 			collapsed,
 			sorted
@@ -202,6 +220,29 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			tableDefaults
 		});
 		const noData = computed(() => get$1(filtered).length === 0);
+		/**
+		* With the header bar showing, an empty table drops its footer bar: two rows
+		* of disabled controls around an empty state only add noise.
+		*/
+		const showFooter = computed(() => {
+			const data = get$1(paginationData);
+			if (!data || __props.hideDefaultFooter) return false;
+			return data.total > 0 || __props.hideDefaultHeader;
+		});
+		/**
+		* Grouped columns leave the column list, so their labels come from `cols`.
+		*/
+		const groupLabels = computed(() => get$1(groupKeys).map((key) => {
+			const label = __props.cols?.find((column) => column.key === key)?.[__props.columnAttr];
+			return {
+				key: String(key),
+				label: label === void 0 || label === null ? String(key) : String(label)
+			};
+		}));
+		/** Each group's list starts with its header entry, which is not a row. */
+		function getGroupSize(identifier) {
+			return Math.max((get$1(mappedGroups)[identifier]?.length ?? 0) - 1, 0);
+		}
 		const ui = computed(() => dataTableStyles({
 			outlined: __props.outlined,
 			rounded: __props.rounded,
@@ -263,6 +304,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				tr: s.tr(),
 				trSelected: s.tr({ rowVariant: "selected" }),
 				trExpandable: s.tr({ rowVariant: "expandable" }),
+				trExpandedParent: s.tr({ rowVariant: "expandedParent" }),
 				trGroup: s.tr({ rowVariant: "group" }),
 				trEmpty: s.tr({ rowVariant: "empty" }),
 				checkbox: s.checkbox(),
@@ -276,11 +318,13 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			colspan,
 			expandable,
 			groupKey,
+			groupLabels,
 			isMobile,
 			selectedData,
 			cellValue,
 			columnAttr: __props.columnAttr,
 			dense: __props.dense,
+			getGroupSize,
 			getRowId: (row) => row[__props.rowAttr],
 			itemSlotKeys,
 			groupExpandButtonPosition: __props.groupExpandButtonPosition,
@@ -348,6 +392,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					ref_key: "table",
 					ref: table,
 					class: normalizeClass(unref(ui).table()),
+					style: normalizeStyle(unref(viewportStyle)),
 					"aria-busy": __props.loading
 				}, [
 					!unref(isMobile) ? (openBlock(), createBlock(RuiTableHead_default, {
@@ -422,22 +467,31 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						filtered: unref(filtered),
 						loading: __props.loading,
 						"no-data": unref(noData),
-						empty: __props.empty
+						empty: __props.empty,
+						error: __props.error,
+						"error-title": __props.errorTitle,
+						"retry-text": __props.retryText,
+						onRetry: _cache[5] || (_cache[5] = ($event) => emit("retry"))
 					}, createSlots({ _: 2 }, [
+						slots.error ? {
+							name: "error",
+							fn: withCtx(() => [renderSlot(_ctx.$slots, "error")]),
+							key: "0"
+						} : void 0,
 						slots["body.prepend"] ? {
 							name: "body.prepend",
 							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "body.prepend", normalizeProps(guardReactiveProps(slotData)))]),
-							key: "0"
+							key: "1"
 						} : void 0,
 						slots["group.header"] ? {
 							name: "group.header",
 							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header", normalizeProps(guardReactiveProps(slotData)))]),
-							key: "1"
+							key: "2"
 						} : void 0,
 						slots["group.header.content"] ? {
 							name: "group.header.content",
 							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "group.header.content", normalizeProps(guardReactiveProps(slotData)))]),
-							key: "2"
+							key: "3"
 						} : void 0,
 						renderList(unref(itemSlotKeys), (key) => {
 							return {
@@ -448,35 +502,38 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						slots["expanded-item"] ? {
 							name: "expanded-item",
 							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", normalizeProps(guardReactiveProps(slotData)))]),
-							key: "3"
+							key: "4"
 						} : void 0,
 						slots["no-data"] ? {
 							name: "no-data",
 							fn: withCtx(() => [renderSlot(_ctx.$slots, "no-data")]),
-							key: "4"
+							key: "5"
 						} : void 0,
 						slots["empty-description"] ? {
 							name: "empty-description",
 							fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
-							key: "5"
+							key: "6"
 						} : void 0,
 						slots["body.append"] ? {
 							name: "body.append",
 							fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "body.append", normalizeProps(guardReactiveProps(slotData)))]),
-							key: "6"
+							key: "7"
 						} : void 0
 					]), 1032, [
 						"filtered",
 						"loading",
 						"no-data",
-						"empty"
+						"empty",
+						"error",
+						"error-title",
+						"retry-text"
 					]),
 					createElementVNode("tfoot", null, [renderSlot(_ctx.$slots, "tfoot")])
-				], 10, _hoisted_2)], 2),
-				unref(paginationData) && !__props.hideDefaultFooter ? (openBlock(), createBlock(RuiTablePagination_default, {
+				], 14, _hoisted_2)], 2),
+				unref(paginationData) && unref(showFooter) ? (openBlock(), createBlock(RuiTablePagination_default, {
 					key: 0,
 					modelValue: unref(paginationData),
-					"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => isRef(paginationData) ? paginationData.value = $event : null), _cache[6] || (_cache[6] = ($event) => onPaginate())],
+					"onUpdate:modelValue": [_cache[6] || (_cache[6] = ($event) => isRef(paginationData) ? paginationData.value = $event : null), _cache[7] || (_cache[7] = ($event) => onPaginate())],
 					dense: __props.dense,
 					loading: __props.loading,
 					mobile: unref(isMobile),