npm - @rotki/ui-library - Versions diffs - 2.22.2 → 2.23.1 - Mend

@rotki/ui-library 2.22.2 → 2.23.1

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 (105) hide show

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n variant?: TextFieldVariant;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n variant = 'default',\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) \|\| !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n variant,\n dense,\n disabled,\n hovered: get(isHovered),\n focused: get(focused),\n active: get(active),\n noLabel: !label,\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n if (!get(active) \|\| !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon :name=\"prependIcon\" />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <label\n :class=\"ui.label()\"\n :style=\"labelStyle\"\n >\n <span :class=\"ui.labelText()\">\n {{ label }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n </label>\n <fieldset\n v-if=\"variant === 'outlined'\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n color=\"error\"\n data-id=\"clear-btn\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon :name=\"appendIcon\" />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n variant?: TextFieldVariant;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n variant = 'default',\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) \|\| !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n variant,\n dense,\n disabled,\n hovered: get(isHovered),\n focused: get(focused),\n active: get(active),\n noLabel: !label,\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n if (!get(active) \|\| !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon :name=\"prependIcon\" />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <label\n :class=\"ui.label()\"\n :style=\"labelStyle\"\n >\n <span :class=\"ui.labelText()\">\n {{ label }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n </label>\n <fieldset\n v-if=\"variant === 'outlined'\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n color=\"error\"\n data-id=\"clear-btn\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon :name=\"appendIcon\" />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/index.d.ts CHANGED Viewed

@@ -34,7 +34,7 @@ import RuiLogo, { type Props as LogoProps } from '../components/logos/RuiLogo.vu
 import RuiBadge, { type Props as BadgeProps } from '../components/overlays/badge/RuiBadge.vue';
 import RuiBottomSheet, { type BottomSheetProps } from '../components/overlays/bottom-sheet/RuiBottomSheet.vue';
 import RuiDialog, { type DialogProps, type RuiDialogClassNames } from '../components/overlays/dialog/RuiDialog.vue';
-import RuiMenu, { type MenuProps, type RuiMenuClassNames } from '../components/overlays/menu/RuiMenu.vue';
+import RuiMenu, { type MenuProps, type RuiMenuClassNames, type RuiMenuRole } from '../components/overlays/menu/RuiMenu.vue';
 import RuiNavigationDrawer, { type NavigationDrawerProps, type RuiNavigationDrawerClassNames } from '../components/overlays/navigation-drawer/RuiNavigationDrawer.vue';
 import RuiNotification, { type NotificationProps } from '../components/overlays/notification/RuiNotification.vue';
 import RuiTooltip, { type RuiTooltipClassNames, type Props as TooltipProps } from '../components/overlays/tooltip/RuiTooltip.vue';
@@ -49,5 +49,5 @@ import RuiTabItems from '../components/tabs/tab-items/RuiTabItems.vue';
 import RuiTab, { type RuiTabClassNames, type Props as TabProps } from '../components/tabs/tab/RuiTab.vue';
 import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue';
 import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
 export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCategoryPicker, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };

package/dist/components/overlays/menu/RuiMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiMenu.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n root?: VueClassValue;\n wrapper?: VueClassValue;\n menu?: VueClassValue;\n /** Overrides applied to the popover content box (e.g. to drop its default padding). /\n content?: VueClassValue;\n}\n\nexport interface MenuProps {\n openOnHover?: boolean;\n fullWidth?: boolean;\n disabled?: boolean;\n openDelay?: number;\n closeDelay?: number;\n options?: FloatingOptions;\n /* @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiMenuClassNames;\n /* @deprecated Use `classNames.wrapper` instead /\n wrapperClass?: string \| object \| string[];\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string \| object \| string[];\n closeOnContentClick?: boolean;\n persistOnActivatorClick?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n showDetails?: boolean;\n dense?: boolean;\n persistent?: boolean;\n disableAutoFocus?: boolean;\n /\n Optional external element to anchor the menu to, instead of the\n * activator slot's wrapper. When set, the menu's position is computed\n * against this element.\n /\n anchorEl?: HTMLElement;\n}\n\ndefineOptions({\n name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n openOnHover = false,\n disabled = false,\n fullWidth = false,\n openDelay = 0,\n closeDelay = 0,\n options,\n popper,\n classNames,\n wrapperClass = '',\n menuClass = '',\n closeOnContentClick = false,\n persistOnActivatorClick = false,\n hint,\n errorMessages = [],\n successMessages = [],\n showDetails = false,\n dense = false,\n persistent = false,\n disableAutoFocus = false,\n anchorEl,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n activator?: (props: {\n attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n open: boolean;\n disabled: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n reference: activator,\n popover: menu,\n open,\n visible,\n currentPlacement,\n leavePending,\n onLeavePending,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst menuStyles = tv({\n slots: {\n wrapper: 'relative inline-flex max-w-full',\n popover: 'w-max z-[9999]',\n content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n details: 'pt-1',\n },\n variants: {\n fullWidth: {\n true: { wrapper: 'w-full' },\n },\n dense: {\n true: { details: 'px-2' },\n false: { details: 'px-4' },\n },\n },\n defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n fullWidth,\n dense,\n}));\n\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : checkClick,\n}));\n\nfunction focusOnContent() {\n const content = get(menuContent);\n if (!content)\n return;\n\n // Focus on the menu container itself\n content.focus();\n}\n\nfunction focusMenu(): void {\n if (disableAutoFocus)\n return;\n\n nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n const activatorEl = get(activator);\n if (!activatorEl) {\n return;\n }\n const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n if (focusableEl) {\n focusableEl.focus();\n }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n if (!get(open))\n return;\n onClose();\n set(click, false);\n event?.stopPropagation();\n\n // Return focus to activator when menu closes\n if (disableAutoFocus) {\n return;\n }\n\n nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n if (get(open) && get(click)) {\n if (!persistOnActivatorClick)\n onLeave();\n }\n else {\n onOpen();\n set(click, true);\n }\n}\n\nwatch(modelValue, (value) => {\n if (get(open) === value)\n return;\n\n if (value) {\n onOpen();\n set(click, true);\n }\n else {\n onLeave();\n }\n});\n\nwatch(open, (open) => {\n set(modelValue, open);\n if (open) {\n focusMenu();\n }\n});\n\nonClickOutside(menu, () => {\n if (get(open) && !persistent)\n onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n <div\n :class=\"classNames?.root\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <div\n ref=\"activator\"\n :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n :data-menu-disabled=\"disabled\"\n aria-haspopup=\"~~true~~\"\n :aria-expanded=\"open\"\n >\n <slot\n name=\"activator\"\n v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n />\n </div>\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n ref=\"menu\"\n :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n role=\"~~menu~~\"\n :data-placement=\"currentPlacement\"\n @click=\"closeOnContentClick ? onLeave() : undefined\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <TransitionGroup\n enter-active-class=\"transition ease-out duration-200\"\n enter-from-class=\"opacity-0 translate-y-1\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition ease-in duration-150\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-1\"\n @before-enter=\"updatePosition()\"\n @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n @before-leave=\"onLeavePending()\"\n >\n <div\n v-if=\"open\"\n ref=\"menuContent\"\n key=\"menu\"\n data-id=\"content\"\n :class=\"ui.content({ class: cn(classNames?.content) })\"\n tabindex=\"-1\"\n v-bind=\"baseMenuAttrs\"\n >\n <slot v-bind=\"{ width }\" />\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n <RuiFormTextDetail\n v-if=\"showDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiMenu.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n root?: VueClassValue;\n wrapper?: VueClassValue;\n menu?: VueClassValue;\n /** Overrides applied to the popover content box (e.g. to drop its default padding). /\n content?: VueClassValue;\n}\n\n/\n Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n /\nexport type RuiMenuRole = 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog';\n\nexport interface MenuProps {\n openOnHover?: boolean;\n fullWidth?: boolean;\n disabled?: boolean;\n openDelay?: number;\n closeDelay?: number;\n options?: FloatingOptions;\n /* @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiMenuClassNames;\n /* @deprecated Use `classNames.wrapper` instead /\n wrapperClass?: string \| object \| string[];\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string \| object \| string[];\n closeOnContentClick?: boolean;\n persistOnActivatorClick?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n showDetails?: boolean;\n dense?: boolean;\n persistent?: boolean;\n disableAutoFocus?: boolean;\n /\n Optional external element to anchor the menu to, instead of the\n * activator slot's wrapper. When set, the menu's position is computed\n * against this element.\n /\n anchorEl?: HTMLElement;\n /\n Role of the teleported popover. Defaults to `menu`, which is correct when\n * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n * `dialog`) when the content follows a different ARIA model, e.g. a selection\n * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n /\n role?: RuiMenuRole;\n}\n\ndefineOptions({\n name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n openOnHover = false,\n disabled = false,\n fullWidth = false,\n openDelay = 0,\n closeDelay = 0,\n options,\n popper,\n classNames,\n wrapperClass = '',\n menuClass = '',\n closeOnContentClick = false,\n persistOnActivatorClick = false,\n hint,\n errorMessages = [],\n successMessages = [],\n showDetails = false,\n dense = false,\n persistent = false,\n disableAutoFocus = false,\n anchorEl,\n role = 'menu',\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n activator?: (props: {\n attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n open: boolean;\n disabled: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n reference: activator,\n popover: menu,\n open,\n visible,\n currentPlacement,\n leavePending,\n onLeavePending,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst menuStyles = tv({\n slots: {\n wrapper: 'relative inline-flex max-w-full',\n popover: 'w-max z-[9999]',\n content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n details: 'pt-1',\n },\n variants: {\n fullWidth: {\n true: { wrapper: 'w-full' },\n },\n dense: {\n true: { details: 'px-2' },\n false: { details: 'px-4' },\n },\n },\n defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n fullWidth,\n dense,\n}));\n\n// `aria-haspopup=\"true\"` is equivalent to `\"menu\"`; keep emitting `true` for\n// the default so nothing changes for existing callers.\nconst ariaHasPopup = computed<RuiMenuRole \| 'true'>(() => role === 'menu' ? 'true' : role);\n\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : checkClick,\n}));\n\nfunction focusOnContent() {\n const content = get(menuContent);\n if (!content)\n return;\n\n // Focus on the menu container itself\n content.focus();\n}\n\nfunction focusMenu(): void {\n if (disableAutoFocus)\n return;\n\n nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n const activatorEl = get(activator);\n if (!activatorEl) {\n return;\n }\n const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n if (focusableEl) {\n focusableEl.focus();\n }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n if (!get(open))\n return;\n onClose();\n set(click, false);\n event?.stopPropagation();\n\n // Return focus to activator when menu closes\n if (disableAutoFocus) {\n return;\n }\n\n nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n if (get(open) && get(click)) {\n if (!persistOnActivatorClick)\n onLeave();\n }\n else {\n onOpen();\n set(click, true);\n }\n}\n\nwatch(modelValue, (value) => {\n if (get(open) === value)\n return;\n\n if (value) {\n onOpen();\n set(click, true);\n }\n else {\n onLeave();\n }\n});\n\nwatch(open, (open) => {\n set(modelValue, open);\n if (open) {\n focusMenu();\n }\n});\n\nonClickOutside(menu, () => {\n if (get(open) && !persistent)\n onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n <div\n :class=\"classNames?.root\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <div\n ref=\"activator\"\n :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n :data-menu-disabled=\"disabled\"\n :aria-haspopup=\"ariaHasPopup\"\n :aria-expanded=\"open\"\n >\n <slot\n name=\"activator\"\n v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n />\n </div>\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n ref=\"menu\"\n :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n :role=\"role\"\n :data-placement=\"currentPlacement\"\n @click=\"closeOnContentClick ? onLeave() : undefined\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <TransitionGroup\n enter-active-class=\"transition ease-out duration-200\"\n enter-from-class=\"opacity-0 translate-y-1\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition ease-in duration-150\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-1\"\n @before-enter=\"updatePosition()\"\n @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n @before-leave=\"onLeavePending()\"\n >\n <div\n v-if=\"open\"\n ref=\"menuContent\"\n key=\"menu\"\n data-id=\"content\"\n :class=\"ui.content({ class: cn(classNames?.content) })\"\n tabindex=\"-1\"\n v-bind=\"baseMenuAttrs\"\n >\n <slot v-bind=\"{ width }\" />\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n <RuiFormTextDetail\n v-if=\"showDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts CHANGED Viewed

@@ -8,6 +8,11 @@ export interface RuiMenuClassNames {
     /** Overrides applied to the popover content box (e.g. to drop its default padding). */
     content?: VueClassValue;
 }
+/**
+ * Roles a popover container may take. These are the values `aria-haspopup`
+ * accepts, which keeps the activator and the popover in agreement.
+ */
+export type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export interface MenuProps {
     openOnHover?: boolean;
     fullWidth?: boolean;
@@ -37,6 +42,13 @@ export interface MenuProps {
      * against this element.
      */
     anchorEl?: HTMLElement;
+    /**
+     * Role of the teleported popover. Defaults to `menu`, which is correct when
+     * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,
+     * `dialog`) when the content follows a different ARIA model, e.g. a selection
+     * list opened by a `combobox`. The activator's `aria-haspopup` follows it.
+     */
+    role?: RuiMenuRole;
 }
 type __VLS_Props = MenuProps;
 type __VLS_Slots = {

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -7,8 +7,12 @@ import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, c
 import { onClickOutside, useElementSize } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/overlays/menu/RuiMenu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-menu-disabled", "aria-expanded"];
-var _hoisted_2 = ["data-placement"];
+var _hoisted_1 = [
+	"data-menu-disabled",
+	"aria-haspopup",
+	"aria-expanded"
+];
+var _hoisted_2 = ["role", "data-placement"];
 var FOCUSABLE_ELEMENTS_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
 var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiMenu",
@@ -60,7 +64,8 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: false
 		},
-		anchorEl: {}
+		anchorEl: {},
+		role: { default: "menu" }
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -99,6 +104,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			fullWidth: __props.fullWidth,
 			dense: __props.dense
 		}));
+		const ariaHasPopup = computed(() => __props.role === "menu" ? "true" : __props.role);
 		const baseMenuAttrs = computed(() => {
 			const clickVal = get$1(click);
 			return {
@@ -169,7 +175,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					ref: activator,
 					class: normalizeClass(unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) ?? unref(cn)(__props.wrapperClass) })),
 					"data-menu-disabled": __props.disabled,
-					"aria-haspopup": "true",
+					"aria-haspopup": unref(ariaHasPopup),
 					"aria-expanded": unref(open)
 				}, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
 					attrs: unref(menuAttrs),
@@ -186,7 +192,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					ref_key: "menu",
 					ref: menu,
 					class: normalizeClass(unref(ui).popover({ class: unref(cn)(__props.classNames?.menu) ?? unref(cn)(__props.menuClass) })),
-					role: "menu",
+					role: __props.role,
 					"data-placement": unref(currentPlacement),
 					onClick: _cache[3] || (_cache[3] = ($event) => __props.closeOnContentClick ? onLeave() : void 0),
 					onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => onLeave(), ["stop"]), ["esc"]))

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n root?: VueClassValue;\n wrapper?: VueClassValue;\n menu?: VueClassValue;\n /** Overrides applied to the popover content box (e.g. to drop its default padding). /\n content?: VueClassValue;\n}\n\nexport interface MenuProps {\n openOnHover?: boolean;\n fullWidth?: boolean;\n disabled?: boolean;\n openDelay?: number;\n closeDelay?: number;\n options?: FloatingOptions;\n /* @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiMenuClassNames;\n /* @deprecated Use `classNames.wrapper` instead /\n wrapperClass?: string \| object \| string[];\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string \| object \| string[];\n closeOnContentClick?: boolean;\n persistOnActivatorClick?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n showDetails?: boolean;\n dense?: boolean;\n persistent?: boolean;\n disableAutoFocus?: boolean;\n /\n Optional external element to anchor the menu to, instead of the\n * activator slot's wrapper. When set, the menu's position is computed\n * against this element.\n /\n anchorEl?: HTMLElement;\n}\n\ndefineOptions({\n name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n openOnHover = false,\n disabled = false,\n fullWidth = false,\n openDelay = 0,\n closeDelay = 0,\n options,\n popper,\n classNames,\n wrapperClass = '',\n menuClass = '',\n closeOnContentClick = false,\n persistOnActivatorClick = false,\n hint,\n errorMessages = [],\n successMessages = [],\n showDetails = false,\n dense = false,\n persistent = false,\n disableAutoFocus = false,\n anchorEl,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n activator?: (props: {\n attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n open: boolean;\n disabled: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n reference: activator,\n popover: menu,\n open,\n visible,\n currentPlacement,\n leavePending,\n onLeavePending,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst menuStyles = tv({\n slots: {\n wrapper: 'relative inline-flex max-w-full',\n popover: 'w-max z-[9999]',\n content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n details: 'pt-1',\n },\n variants: {\n fullWidth: {\n true: { wrapper: 'w-full' },\n },\n dense: {\n true: { details: 'px-2' },\n false: { details: 'px-4' },\n },\n },\n defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n fullWidth,\n dense,\n}));\n\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : checkClick,\n}));\n\nfunction focusOnContent() {\n const content = get(menuContent);\n if (!content)\n return;\n\n // Focus on the menu container itself\n content.focus();\n}\n\nfunction focusMenu(): void {\n if (disableAutoFocus)\n return;\n\n nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n const activatorEl = get(activator);\n if (!activatorEl) {\n return;\n }\n const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n if (focusableEl) {\n focusableEl.focus();\n }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n if (!get(open))\n return;\n onClose();\n set(click, false);\n event?.stopPropagation();\n\n // Return focus to activator when menu closes\n if (disableAutoFocus) {\n return;\n }\n\n nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n if (get(open) && get(click)) {\n if (!persistOnActivatorClick)\n onLeave();\n }\n else {\n onOpen();\n set(click, true);\n }\n}\n\nwatch(modelValue, (value) => {\n if (get(open) === value)\n return;\n\n if (value) {\n onOpen();\n set(click, true);\n }\n else {\n onLeave();\n }\n});\n\nwatch(open, (open) => {\n set(modelValue, open);\n if (open) {\n focusMenu();\n }\n});\n\nonClickOutside(menu, () => {\n if (get(open) && !persistent)\n onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n <div\n :class=\"classNames?.root\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <div\n ref=\"activator\"\n :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n :data-menu-disabled=\"disabled\"\n aria-haspopup=\"true\"\n :aria-expanded=\"open\"\n >\n <slot\n name=\"activator\"\n v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n />\n </div>\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n ref=\"menu\"\n :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n role=\"menu\"\n :data-placement=\"currentPlacement\"\n @click=\"closeOnContentClick ? onLeave() : undefined\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <TransitionGroup\n enter-active-class=\"transition ease-out duration-200\"\n enter-from-class=\"opacity-0 translate-y-1\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition ease-in duration-150\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-1\"\n @before-enter=\"updatePosition()\"\n @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n @before-leave=\"onLeavePending()\"\n >\n <div\n v-if=\"open\"\n ref=\"menuContent\"\n key=\"menu\"\n data-id=\"content\"\n :class=\"ui.content({ class: cn(classNames?.content) })\"\n tabindex=\"-1\"\n v-bind=\"baseMenuAttrs\"\n >\n <slot v-bind=\"{ width }\" />\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n <RuiFormTextDetail\n v-if=\"showDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n root?: VueClassValue;\n wrapper?: VueClassValue;\n menu?: VueClassValue;\n /** Overrides applied to the popover content box (e.g. to drop its default padding). /\n content?: VueClassValue;\n}\n\n/\n Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n /\nexport type RuiMenuRole = 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog';\n\nexport interface MenuProps {\n openOnHover?: boolean;\n fullWidth?: boolean;\n disabled?: boolean;\n openDelay?: number;\n closeDelay?: number;\n options?: FloatingOptions;\n /* @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiMenuClassNames;\n /* @deprecated Use `classNames.wrapper` instead /\n wrapperClass?: string \| object \| string[];\n /* @deprecated Use `classNames.menu` instead /\n menuClass?: string \| object \| string[];\n closeOnContentClick?: boolean;\n persistOnActivatorClick?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n showDetails?: boolean;\n dense?: boolean;\n persistent?: boolean;\n disableAutoFocus?: boolean;\n /\n Optional external element to anchor the menu to, instead of the\n * activator slot's wrapper. When set, the menu's position is computed\n * against this element.\n /\n anchorEl?: HTMLElement;\n /\n Role of the teleported popover. Defaults to `menu`, which is correct when\n * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n * `dialog`) when the content follows a different ARIA model, e.g. a selection\n * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n /\n role?: RuiMenuRole;\n}\n\ndefineOptions({\n name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n openOnHover = false,\n disabled = false,\n fullWidth = false,\n openDelay = 0,\n closeDelay = 0,\n options,\n popper,\n classNames,\n wrapperClass = '',\n menuClass = '',\n closeOnContentClick = false,\n persistOnActivatorClick = false,\n hint,\n errorMessages = [],\n successMessages = [],\n showDetails = false,\n dense = false,\n persistent = false,\n disableAutoFocus = false,\n anchorEl,\n role = 'menu',\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n activator?: (props: {\n attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n open: boolean;\n disabled: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n reference: activator,\n popover: menu,\n open,\n visible,\n currentPlacement,\n leavePending,\n onLeavePending,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst menuStyles = tv({\n slots: {\n wrapper: 'relative inline-flex max-w-full',\n popover: 'w-max z-[9999]',\n content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n details: 'pt-1',\n },\n variants: {\n fullWidth: {\n true: { wrapper: 'w-full' },\n },\n dense: {\n true: { details: 'px-2' },\n false: { details: 'px-4' },\n },\n },\n defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n fullWidth,\n dense,\n}));\n\n// `aria-haspopup=\"true\"` is equivalent to `\"menu\"`; keep emitting `true` for\n// the default so nothing changes for existing callers.\nconst ariaHasPopup = computed<RuiMenuRole \| 'true'>(() => role === 'menu' ? 'true' : role);\n\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : checkClick,\n}));\n\nfunction focusOnContent() {\n const content = get(menuContent);\n if (!content)\n return;\n\n // Focus on the menu container itself\n content.focus();\n}\n\nfunction focusMenu(): void {\n if (disableAutoFocus)\n return;\n\n nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n const activatorEl = get(activator);\n if (!activatorEl) {\n return;\n }\n const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n if (focusableEl) {\n focusableEl.focus();\n }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n if (!get(open))\n return;\n onClose();\n set(click, false);\n event?.stopPropagation();\n\n // Return focus to activator when menu closes\n if (disableAutoFocus) {\n return;\n }\n\n nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n if (get(open) && get(click)) {\n if (!persistOnActivatorClick)\n onLeave();\n }\n else {\n onOpen();\n set(click, true);\n }\n}\n\nwatch(modelValue, (value) => {\n if (get(open) === value)\n return;\n\n if (value) {\n onOpen();\n set(click, true);\n }\n else {\n onLeave();\n }\n});\n\nwatch(open, (open) => {\n set(modelValue, open);\n if (open) {\n focusMenu();\n }\n});\n\nonClickOutside(menu, () => {\n if (get(open) && !persistent)\n onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n <div\n :class=\"classNames?.root\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <div\n ref=\"activator\"\n :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n :data-menu-disabled=\"disabled\"\n :aria-haspopup=\"ariaHasPopup\"\n :aria-expanded=\"open\"\n >\n <slot\n name=\"activator\"\n v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n />\n </div>\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n ref=\"menu\"\n :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n :role=\"role\"\n :data-placement=\"currentPlacement\"\n @click=\"closeOnContentClick ? onLeave() : undefined\"\n @keydown.esc.stop=\"onLeave()\"\n >\n <TransitionGroup\n enter-active-class=\"transition ease-out duration-200\"\n enter-from-class=\"opacity-0 translate-y-1\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition ease-in duration-150\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-1\"\n @before-enter=\"updatePosition()\"\n @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n @before-leave=\"onLeavePending()\"\n >\n <div\n v-if=\"open\"\n ref=\"menuContent\"\n key=\"menu\"\n data-id=\"content\"\n :class=\"ui.content({ class: cn(classNames?.content) })\"\n tabindex=\"-1\"\n v-bind=\"baseMenuAttrs\"\n >\n <slot v-bind=\"{ width }\" />\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n <RuiFormTextDetail\n v-if=\"showDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}

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

@@ -172,7 +172,7 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
         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));
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -106,7 +106,7 @@ declare const __VLS_export: <T extends object, K extends keyof T = keyof T>(__VL
         direction?: SortDirection;
     }) => void) & ((evt: "select:all", value: boolean) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableBody.vue.d.ts CHANGED Viewed

@@ -44,7 +44,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     }>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableBody.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -20,10 +20,7 @@ var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const { getRowId } = useDataTableRowIdentity();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("tbody", { class: normalizeClass(unref(classes).tbody) }, [
-				_ctx.$slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", {
-					key: 0,
-					colspan: unref(colspan)
-				}) : createCommentVNode("", true),
+				_ctx.$slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", { colspan: unref(colspan) }, void 0, void 0, 0) : createCommentVNode("", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filtered, (row, index) => {
 					return openBlock(), createElementBlock(Fragment, null, [!unref(isRow)(row) ? (openBlock(), createBlock(RuiDataTableGroupRow_default, {
 						key: `group-${row.identifier}`,
@@ -64,10 +61,7 @@ var RuiDataTableBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
 					key: "1"
 				} : void 0]), 1032, ["empty"])) : createCommentVNode("", true),
-				_ctx.$slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", {
-					key: 3,
-					colspan: unref(colspan)
-				}) : createCommentVNode("", true)
+				_ctx.$slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", { colspan: unref(colspan) }, void 0, void 0, 3) : createCommentVNode("", true)
 			], 2);
 		};
 	}

package/dist/components/tables/data-table/RuiDataTableBody.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\ndefineProps<{\n filtered: (T \| GroupHeader<T>)[];\n loading: boolean;\n noData: boolean;\n empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<Partial<\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 }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n</script>\n\n<template>\n <tbody :class=\"classes.tbody\">\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n v-if=\"$slots['body.prepend']\"\n :colspan=\"colspan\"\n name=\"body.prepend\"\n />\n <template v-for=\"(row, index) in filtered\">\n <RuiDataTableGroupRow\n v-if=\"!isRow(row)\"\n :key=\"`group-${row.identifier}`\"\n :row=\"row\"\n >\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 </RuiDataTableGroupRow>\n <RuiDataTableRow\n v-else\n :key=\"`row-${getRowId(row)}`\"\n :row=\"row\"\n :index=\"index\"\n >\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 </RuiDataTableRow>\n </template>\n <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n <RuiDataTableEmptyRow\n v-if=\"noData && empty && !loading\"\n :empty=\"empty\"\n >\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 </RuiDataTableEmptyRow>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n v-if=\"$slots['body.append']\"\n :colspan=\"colspan\"\n name=\"body.append\"\n />\n </tbody>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,SAAS,YAAY,oBAAoB;EACjD,MAAM,EAAE,iBAAiB,oBAAuB;EAChD,MAAM,EAAE,aAAa,wBAA2B;;uBAI9C,mBAwFQ,SAAA,EAxFA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,KAAK,EAAA,GAAA;IAGlBA,KAAAA,OAAM,kBADd,WAIE,KAAA,QAAA,gBAAA~~;;KAFC~~,SAAS,MAAA,OAAA~~;;sBAGZ~~,mBAsDW,UAAA,MAAA,WAtDsB,QAAA,WAAf,KAAK,UAAK;8DAEjB,MAAA,KAAA,CAAK,CAAC,GAAG,KAAA,UAAA,GADlB,YAyBuB,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;+BAGEA,KAAAA,OAAM,kBAAA;YACX;mBAAc,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;iBAIZA,KAAAA,OAAM,0BAAA;YACX;mBAAsB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;mDAItB,YA0BkB,yBAAA;MAxBf,KAAG,OAAS,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;0CAGQ,MAAA,YAAA,IAAP,QAAG;;qBACD;oBAAS,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OADjB,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;SAIZA,KAAAA,OAAM,mBAAA;YACX;mBAAe,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;IAKM,QAAA,WAAW,QAAA,UAAA,UAAA,GAAzC,YAAmD,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAAA,UAAA,GAD5B,YAkBuB,8BAAA;;KAhBpB,OAAO,QAAA;8BAGAA,KAAAA,OAAM,aAAA;WACX;uBAGsB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;gBAGjBA,KAAAA,OAAM,uBAAA;WACX;uBAGgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BA,KAAAA,OAAM,iBADd,WAIE,KAAA,QAAA,eAAA~~;;KAFC~~,SAAS,MAAA,OAAA"}
1	+ {"version":3,"file":"RuiDataTableBody.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../src/components/tables/data-table/RuiDataTableBody.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableRowIdentity, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableEmptyRow from '@/components/tables/data-table/RuiDataTableEmptyRow.vue';\nimport RuiDataTableGroupRow from '@/components/tables/data-table/RuiDataTableGroupRow.vue';\nimport RuiDataTableLoadingRow from '@/components/tables/data-table/RuiDataTableLoadingRow.vue';\nimport RuiDataTableRow from '@/components/tables/data-table/RuiDataTableRow.vue';\nimport { type GroupHeader, isRow } from '@/composables/tables/data-table/types';\n\ndefineProps<{\n filtered: (T \| GroupHeader<T>)[];\n loading: boolean;\n noData: boolean;\n empty: { label?: string; description?: string };\n}>();\n\ndefineSlots<Partial<\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 }\n>>();\n\nconst { classes, colspan } = useDataTableStyling();\nconst { itemSlotKeys } = useDataTableColumns<T>();\nconst { getRowId } = useDataTableRowIdentity<T>();\n</script>\n\n<template>\n <tbody :class=\"classes.tbody\">\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n v-if=\"$slots['body.prepend']\"\n :colspan=\"colspan\"\n name=\"body.prepend\"\n />\n <template v-for=\"(row, index) in filtered\">\n <RuiDataTableGroupRow\n v-if=\"!isRow(row)\"\n :key=\"`group-${row.identifier}`\"\n :row=\"row\"\n >\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 </RuiDataTableGroupRow>\n <RuiDataTableRow\n v-else\n :key=\"`row-${getRowId(row)}`\"\n :row=\"row\"\n :index=\"index\"\n >\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 </RuiDataTableRow>\n </template>\n <RuiDataTableLoadingRow v-if=\"loading && noData\" />\n <RuiDataTableEmptyRow\n v-if=\"noData && empty && !loading\"\n :empty=\"empty\"\n >\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 </RuiDataTableEmptyRow>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n v-if=\"$slots['body.append']\"\n :colspan=\"colspan\"\n name=\"body.append\"\n />\n </tbody>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiCA,MAAM,EAAE,SAAS,YAAY,oBAAoB;EACjD,MAAM,EAAE,iBAAiB,oBAAuB;EAChD,MAAM,EAAE,aAAa,wBAA2B;;uBAI9C,mBAwFQ,SAAA,EAxFA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,KAAK,EAAA,GAAA;IAGlBA,KAAAA,OAAM,kBADd,WAIE,KAAA,QAAA,gBAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;sBAGnB,mBAsDW,UAAA,MAAA,WAtDsB,QAAA,WAAf,KAAK,UAAK;8DAEjB,MAAA,KAAA,CAAK,CAAC,GAAG,KAAA,UAAA,GADlB,YAyBuB,8BAAA;MAvBpB,KAAG,SAAW,IAAI;MACb;+BAGEA,KAAAA,OAAM,kBAAA;YACX;mBAAc,aAAQ,CAGvB,WAGE,KAAA,QAAA,gBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;iBAIZA,KAAAA,OAAM,0BAAA;YACX;mBAAsB,aAAQ,CAG/B,WAGE,KAAA,QAAA,wBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;mDAItB,YA0BkB,yBAAA;MAxBf,KAAG,OAAS,MAAA,QAAA,CAAQ,CAAC,GAAG;MACnB;MACE;0CAGQ,MAAA,YAAA,IAAP,QAAG;;qBACD;oBAAS,aAAQ,CAG1B,WAGE,KAAA,QAAA,QAFe,OADjB,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;SAIZA,KAAAA,OAAM,mBAAA;YACX;mBAAe,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAHF,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;IAKM,QAAA,WAAW,QAAA,UAAA,UAAA,GAAzC,YAAmD,gCAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE3C,QAAA,UAAU,QAAA,SAAK,CAAK,QAAA,WAAA,UAAA,GAD5B,YAkBuB,8BAAA;;KAhBpB,OAAO,QAAA;8BAGAA,KAAAA,OAAM,aAAA;WACX;uBAGsB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;gBAGjBA,KAAAA,OAAM,uBAAA;WACX;uBAGgC,CAAjC,WAAiC,KAAA,QAAA,mBAAA,CAAA,CAAA;;;IAK7BA,KAAAA,OAAM,iBADd,WAIE,KAAA,QAAA,eAAA,EAFC,SAAS,MAAA,OAAA,EAAO,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}

package/dist/components/tables/data-table/RuiDataTableCell.vue.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableExpandedRow.vue.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableGroupRow.vue.d.ts CHANGED Viewed

@@ -21,7 +21,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,7 +22,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
         direction?: SortDirection;
     }) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableRow.vue.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     }>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -82,11 +82,10 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					expanded: unref(isExpanded)(unref(rowId)),
 					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
 				}, null, 8, ["expanded"])) : unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
-					key: 1,
 					column,
 					row: __props.row,
 					index: __props.index
-				}) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
+				}, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
 			}), 128))])) : createCommentVNode("", true)])) : unref(selectedData) && !unref(isMobile) ? (openBlock(), createElementBlock("td", {
 				key: 1,
 				class: normalizeClass(unref(classes).checkbox),

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <RuiExpandButton\n v-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <slot\n v-else-if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\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 </RuiDataTableExpandedRow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ,SAAA;EAMd,MAAM,EAAE,SAAS,OAAO,aAAa,oBAAoB;EACzD,MAAM,EAAE,WAAW,SAAS,iBAAiB,oBAAuB;EACpE,MAAM,EAAE,eAAe,YAAY,iBAAiB,UAAU,iBAAiB,sBAAyB;EACxG,MAAM,EAAE,YAAY,YAAY,mBAAmB,sBAAyB;EAC5E,MAAM,EAAE,UAAU,cAAc,wBAA2B;EAE3D,MAAM,QAAQ,eAA2B,SAAS,QAAA,GAAG,CAAC;EACtD,MAAM,WAAW,eAAwB,WAAW,IAAI,KAAK,CAAC,CAAC;EAC/D,MAAM,WAAW,eAAwB,cAAc,IAAI,KAAK,CAAC,CAAC;EAClE,MAAM,WAAW,eAAwB,IAAI,UAAU,KAAK,CAAC,CAAC,MAAM,oBAAoB,WAAW,IAAI,KAAK,CAAC,CAAC;EAC9G,MAAM,WAAW,eAAuB,OAAO,cAAc,WAAW,YAAY,UAAU,QAAA,GAAG,CAAC;EAIlG,SAAS,qBAAqB,QAAiC;GAC7D,OAAO,CAAC,CAAC,OAAO,gBAAgB,OAAO,QAAQ;EACjD;EAOA,SAAS,6BAA6B,QAAiC;GACrE,IAAI,OAAO,QAAQ,UACjB,OAAO;GACT,IAAI,aAAa,IAAI,OAAO,IAAI,SAAS,CAAC,GACxC,OAAO;GACT,MAAM,QAAQ,UAAU,QAAA,KAAK,OAAO,GAAG;GACvC,OAAO,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;EAC5D;EAIA,MAAM,sBAAsB,eAC1B,IAAI,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAO,WAAU,qBAAqB,MAAM,KAAK,6BAA6B,MAAM,CAAC,IAAI,CAAC,CACzH;EACA,MAAM,cAAc,eAClB,IAAI,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAO,WAAU,CAAC,qBAAqB,MAAM,CAAC,IAAI,IAAI,OAAO,CAC5F;EACA,MAAM,mBAAmB,eACvB,IAAI,QAAQ,MAAM,CAAC,CAAC,IAAI,YAAY,KAAK,IAAI,mBAAmB,CAAC,CAAC,SAAS,EAC7E;EAMA,MAAM,kBAAkB,eAAuB;GAC7C,MAAM,SAAS;GAIf,OAAO,IAAI,QAAQ,IACf,GAAG,OAAO,sBACV,GAAG,OAAO;EAChB,CAAC;;2DAIC,mBA0FK,MAAA;IAzFF,OAAK,eAAA;KAAG,MAAA,QAAA,IAAW,MAAA,OAAA,CAAO,CAAC,aAAa,MAAA,OAAA,CAAO,CAAC;KAAI,MAAA,QAAA;KAAU,MAAA,QAAA,IAAW,MAAA,eAAA,IAAe;IAAA,CAAA;IACxF,iBAAe,MAAA,YAAA,IAAe,MAAA,QAAA,IAAW,KAAA;IAC1C,WAAQ;OAIA,MAAA,gBAAA,KAAA,UAAA,GADR,mBA4CK,MA5CL,YA4CK,CAtCK,MAAA,YAAA,KAAA,UAAA,GADR,YAWE,qBAAA;;IATC,WAAO,sBAAwB,QAAA;IAC/B,eAAa,MAAA,QAAA;IACb,UAAU,MAAA,QAAA;IACV,MAAM,MAAA,KAAA,IAAK,OAAU,KAAA;IACtB,OAAM;IACN,OAAM;IACN,gBAAA;IACC,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAA,CAAQ,CAAC,QAAQ,MAAA,KAAA,GAAK,IAAA;IAC1C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAA,CAAe,CAAC,QAAQ,MAAA,KAAA,GAAO,QAAA,KAAK;;;;;;uBAE9C,mBAAe,QAAA,UAAA,IAGP,MAAA,mBAAA,CAAmB,CAAC,SAAM,KAAA,UAAA,GADlC,mBAwBM,OAxBN,YAwBM,EAAA,UAAA,IAAA,GApBJ,mBAmBW,UAAA,MAAA,WAlBuB,MAAA,mBAAA,IAAxB,QAAQ,gBAAW;sEACX,cAAA,GAAA,CAGR,OAAO,QAAG,YAAA,UAAA,GADlB,YAIE,yBAAA;;KAFC,UAAU,MAAA,UAAA,CAAU,CAAC,MAAA,KAAA,CAAK;KAC1B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;iCAGf,MAAA,YAAA,CAAY,CAAC,IAAI,OAAO,IAAI,SAAQ,CAAA,IADjD,WAME,KAAA,QAAA,QAJe,OAAO,IAAI,SAAQ,KAAA;;KACzB;KACR,KAAK,QAAA;KACL,OAAO,QAAA;uBAEV,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA;oDAQvB,MAAA,YAAA,KAAY,CAAK,MAAA,QAAA,KAAA,UAAA,GAD9B,mBAiBK,MAAA;;IAfF,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,QAAQ;IACxB,SAAQ;IACR,SAAQ;OAER,YAUE,qBAAA;IATC,WAAO,sBAAwB,QAAA;IAC/B,eAAa,MAAA,QAAA;IACb,UAAU,MAAA,QAAA;IACV,MAAM,MAAA,KAAA,IAAK,OAAU,KAAA;IACtB,OAAM;IACN,OAAM;IACN,gBAAA;IACC,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAA,CAAQ,CAAC,QAAQ,MAAA,KAAA,GAAK,IAAA;IAC1C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAA,CAAe,CAAC,QAAQ,MAAA,KAAA,GAAO,QAAA,KAAK;;;;;;8DAIhD,mBAiBmB,UAAA,MAAA,WAhBY,MAAA,WAAA,IAArB,QAAQ,aAAQ;wBAD1B,YAiBmB,0BAAA;KAfhB,KAAK;KACG;KACR,KAAK,QAAA;KACL,OAAO,QAAA;KACP,UAAQ,MAAA,KAAA;8BAGD,MAAA,YAAA,CAAY,CAAC,IAAI,OAAO,IAAI,SAAQ,CAAA,IAAA;WACzC;kBAAS,aAAQ,CAElB,WAGE,KAAA,QAAA,QAFe,OAAO,IAAI,SAAQ,KADpC,WAGE,EAAA,SAAA,KAAA,GADQ,QAAQ,CAAA,CAAA,CAAA;;;;;;;;gCAOhB,MAAA,QAAA,KAAA,UAAA,GADR,YAe0B,iCAAA;;IAbvB,KAAK,QAAA;IACL,OAAO,QAAA;6BAGA,MAAK,mBAAA;UACV;iBAAe,aAAQ,CAGxB,WAGE,KAAA,QAAA,iBAAA,eAAA,mBADQ,QAAQ,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <RuiExpandButton\n v-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <slot\n v-else-if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\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 </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}

package/dist/components/tables/use-pagination-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n page: number;\n total: number;\n limit: number;\n limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n limits: ComputedRef<LimitEntry[]>;\n currentLimit: WritableComputedRef<number>;\n pages: ComputedRef<number>;\n ranges: ComputedRef<PageRange[]>;\n indicatorText: ComputedRef<string>;\n currentRange: WritableComputedRef<number>;\n useInputJump: ComputedRef<boolean>;\n hasPrev: ComputedRef<boolean>;\n hasNext: ComputedRef<boolean>;\n onPrev: () => void;\n onNext: () => void;\n onFirst: () => void;\n onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n ~~// eslint-disable-next-line @rotki/composable-input-flexibility\n~~ modelValue: Ref<TablePaginationData>,\n tableDefaults: TableOptions,\n rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n const limits = computed<LimitEntry[]>(() =>\n (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n );\n\n const currentLimit = computed<number>({\n get: () => get(modelValue).limit,\n set: limit =>\n set(modelValue, {\n ...get(modelValue),\n limit,\n page: 1,\n }),\n });\n\n const pages = computed<number>(() => {\n const { limit, total } = get(modelValue);\n if (!total)\n return 0;\n\n return Math.ceil(total / limit);\n });\n\n function pageRangeText(page: number): string {\n const { limit, total } = get(modelValue);\n const start = (page - 1) * limit + 1;\n const end = Math.min(page * limit, total);\n return `${formatInteger(start)} - ${formatInteger(end)}`;\n }\n\n const useInputJump = computed<boolean>(() => {\n const threshold = toValue(rangesThreshold);\n return threshold > 0 && get(pages) > threshold;\n });\n\n const ranges = computed<PageRange[]>(() => {\n if (get(useInputJump))\n return [];\n\n return Array.from({ length: get(pages) }, (_, i) => {\n const page = i + 1;\n return { page, text: pageRangeText(page) };\n });\n });\n\n const indicatorText = computed<string>(() => {\n const { total } = get(modelValue);\n if (get(useInputJump))\n return `of ${formatInteger(get(pages))}`;\n\n return total ? `of ${formatInteger(total)}` : `0 of 0`;\n });\n\n const currentRange = computed<number>({\n get: () => get(modelValue).page,\n set: page =>\n set(modelValue, {\n ...get(modelValue),\n page,\n }),\n });\n\n const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n function goToPage(page: number): void {\n set(currentRange, page);\n }\n\n function onPrev(): void {\n if (get(hasPrev))\n goToPage(get(modelValue).page - 1);\n }\n\n function onNext(): void {\n if (get(hasNext))\n goToPage(get(modelValue).page + 1);\n }\n\n function onFirst(): void {\n if (get(hasPrev))\n goToPage(1);\n }\n\n function onLast(): void {\n if (get(hasNext))\n goToPage(get(pages));\n }\n\n return {\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 };\n}\n"],"mappings":";;;;AA+BA,SAAgB,~~wBAEd~~,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,UAAU,CAAC,CAAC,UAAU,IAAI,cAAc,MAAM,EAAA,CAAG,KAAI,WAAU,EAAE,MAAM,EAAE,CAChF;CAEA,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;GACA,MAAM;EACR,CAAC;CACL,CAAC;CAED,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,IAAI,CAAC,OACH,OAAO;EAET,OAAO,KAAK,KAAK,QAAQ,KAAK;CAChC,CAAC;CAED,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,KAAK;EACxC,OAAO,GAAG,cAAc,KAAK,EAAE,KAAK,cAAc,GAAG;CACvD;CAEA,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,eAAe;EACzC,OAAO,YAAY,KAAK,IAAI,KAAK,IAAI;CACvC,CAAC;CAED,MAAM,SAAS,eAA4B;EACzC,IAAI,IAAI,YAAY,GAClB,OAAO,CAAC;EAEV,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,IAAI,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;GACjB,OAAO;IAAE;IAAM,MAAM,cAAc,IAAI;GAAE;EAC3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,UAAU;EAChC,IAAI,IAAI,YAAY,GAClB,OAAO,MAAM,cAAc,IAAI,KAAK,CAAC;EAEvC,OAAO,QAAQ,MAAM,cAAc,KAAK,MAAM;CAChD,CAAC;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;EACF,CAAC;CACL,CAAC;CAED,MAAM,UAAU,eAAwB,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CAChE,MAAM,UAAU,eAAwB,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,IAAI;CAEzE,SAAS,SAAS,MAAoB;EACpC,IAAI,cAAc,IAAI;CACxB;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,UAAgB;EACvB,IAAI,IAAI,OAAO,GACb,SAAS,CAAC;CACd;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,KAAK,CAAC;CACvB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n page: number;\n total: number;\n limit: number;\n limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n limits: ComputedRef<LimitEntry[]>;\n currentLimit: WritableComputedRef<number>;\n pages: ComputedRef<number>;\n ranges: ComputedRef<PageRange[]>;\n indicatorText: ComputedRef<string>;\n currentRange: WritableComputedRef<number>;\n useInputJump: ComputedRef<boolean>;\n hasPrev: ComputedRef<boolean>;\n hasNext: ComputedRef<boolean>;\n onPrev: () => void;\n onNext: () => void;\n onFirst: () => void;\n onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n modelValue: Ref<TablePaginationData>,\n tableDefaults: TableOptions,\n rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n const limits = computed<LimitEntry[]>(() =>\n (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n );\n\n const currentLimit = computed<number>({\n get: () => get(modelValue).limit,\n set: limit =>\n set(modelValue, {\n ...get(modelValue),\n limit,\n page: 1,\n }),\n });\n\n const pages = computed<number>(() => {\n const { limit, total } = get(modelValue);\n if (!total)\n return 0;\n\n return Math.ceil(total / limit);\n });\n\n function pageRangeText(page: number): string {\n const { limit, total } = get(modelValue);\n const start = (page - 1) * limit + 1;\n const end = Math.min(page * limit, total);\n return `${formatInteger(start)} - ${formatInteger(end)}`;\n }\n\n const useInputJump = computed<boolean>(() => {\n const threshold = toValue(rangesThreshold);\n return threshold > 0 && get(pages) > threshold;\n });\n\n const ranges = computed<PageRange[]>(() => {\n if (get(useInputJump))\n return [];\n\n return Array.from({ length: get(pages) }, (_, i) => {\n const page = i + 1;\n return { page, text: pageRangeText(page) };\n });\n });\n\n const indicatorText = computed<string>(() => {\n const { total } = get(modelValue);\n if (get(useInputJump))\n return `of ${formatInteger(get(pages))}`;\n\n return total ? `of ${formatInteger(total)}` : `0 of 0`;\n });\n\n const currentRange = computed<number>({\n get: () => get(modelValue).page,\n set: page =>\n set(modelValue, {\n ...get(modelValue),\n page,\n }),\n });\n\n const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n function goToPage(page: number): void {\n set(currentRange, page);\n }\n\n function onPrev(): void {\n if (get(hasPrev))\n goToPage(get(modelValue).page - 1);\n }\n\n function onNext(): void {\n if (get(hasNext))\n goToPage(get(modelValue).page + 1);\n }\n\n function onFirst(): void {\n if (get(hasPrev))\n goToPage(1);\n }\n\n function onLast(): void {\n if (get(hasNext))\n goToPage(get(pages));\n }\n\n return {\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 };\n}\n"],"mappings":";;;;AA+BA,SAAgB,wBACd,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,UAAU,CAAC,CAAC,UAAU,IAAI,cAAc,MAAM,EAAA,CAAG,KAAI,WAAU,EAAE,MAAM,EAAE,CAChF;CAEA,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;GACA,MAAM;EACR,CAAC;CACL,CAAC;CAED,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,IAAI,CAAC,OACH,OAAO;EAET,OAAO,KAAK,KAAK,QAAQ,KAAK;CAChC,CAAC;CAED,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,KAAK;EACxC,OAAO,GAAG,cAAc,KAAK,EAAE,KAAK,cAAc,GAAG;CACvD;CAEA,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,eAAe;EACzC,OAAO,YAAY,KAAK,IAAI,KAAK,IAAI;CACvC,CAAC;CAED,MAAM,SAAS,eAA4B;EACzC,IAAI,IAAI,YAAY,GAClB,OAAO,CAAC;EAEV,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,IAAI,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;GACjB,OAAO;IAAE;IAAM,MAAM,cAAc,IAAI;GAAE;EAC3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,UAAU;EAChC,IAAI,IAAI,YAAY,GAClB,OAAO,MAAM,cAAc,IAAI,KAAK,CAAC;EAEvC,OAAO,QAAQ,MAAM,cAAc,KAAK,MAAM;CAChD,CAAC;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;EACF,CAAC;CACL,CAAC;CAED,MAAM,UAAU,eAAwB,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CAChE,MAAM,UAAU,eAAwB,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,IAAI;CAEzE,SAAS,SAAS,MAAoB;EACpC,IAAI,cAAc,IAAI;CACxB;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,UAAgB;EACvB,IAAI,IAAI,OAAO,GACb,SAAS,CAAC;CACd;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,KAAK,CAAC;CACvB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/components/tabs/tab-items/RuiTabItems.vue.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
     slots: {};
     emit: (event: "update:modelValue", value: T) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tabs/tabs/use-tab-scroll.js CHANGED Viewed

@@ -18,7 +18,8 @@ function useTabScroll({ bar, wrapper, vertical }) {
 			set$1(showArrows, false);
 			return;
 		}
-		set$1(showArrows, toValue(vertical) ? elem.scrollHeight > barElem.offsetHeight : elem.scrollWidth > barElem.offsetWidth);
+		const overflows = toValue(vertical) ? elem.scrollHeight > barElem.offsetHeight : elem.scrollWidth > barElem.offsetWidth;
+		set$1(showArrows, overflows);
 	}
 	useResizeObserver(bar, checkOverflow);
 	useResizeObserver(wrapper, () => {

package/dist/components/tabs/tabs/use-tab-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n /** The scrollable bar container element /\n bar: Readonly<ShallowRef<HTMLDivElement \| null>>;\n /* The wrapper element containing the tab buttons /\n wrapper: Readonly<ShallowRef<HTMLDivElement \| null>>;\n /* Getter for the current vertical orientation state /\n vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n showArrows: Readonly<Ref<boolean>>;\n prevArrowDisabled: ComputedRef<boolean>;\n nextArrowDisabled: ComputedRef<boolean>;\n onPrevSliderClick: () => void;\n onNextSliderClick: () => void;\n keepActiveTabVisible: () => void;\n}\n\n/\n Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n const showArrows = shallowRef<boolean>(false);\n\n const { width: barWidth, height: barHeight } = useElementSize(bar);\n const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n const { top, bottom, left, right } = toRefs(arrivedState);\n\n function checkOverflow(): void {\n const elem = get(wrapper);\n const barElem = get(bar);\n if (!elem \|\| !barElem) {\n set(showArrows, false);\n return;\n }\n\n const overflows = toValue(vertical)\n ? elem.scrollHeight > barElem.offsetHeight\n : elem.scrollWidth > barElem.offsetWidth;\n\n set(showArrows, overflows);\n }\n\n useResizeObserver(bar, checkOverflow);\n useResizeObserver(wrapper, () => {\n checkOverflow();\n keepActiveTabVisible();\n });\n\n const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n function scrollToActiveTab(): void {\n if (!get(showArrows))\n return;\n\n const elem = get(wrapper);\n const barElem = get(bar);\n\n if (!elem \|\| !barElem)\n return;\n\n const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n if (!activeTab)\n return;\n\n const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n const childTop = activeTab.offsetTop - elem.offsetTop;\n\n barElem.scrollTo({\n left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n behavior: 'smooth',\n });\n }\n\n function keepActiveTabVisible(): void {\n nextTick(scrollToActiveTab);\n }\n\n function onPrevSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) - get(barWidth));\n else\n set(y, get(y) - get(barHeight));\n }\n\n function onNextSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) + get(barWidth));\n else\n set(y, get(y) + get(barHeight));\n }\n\n return {\n showArrows: readonly(showArrows),\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,MAAI,YAAY,KAAK;GACrB;EACF;~~EAMA~~,~~MAAI~~,~~YAJc~~,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ,~~WAEN~~;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,GAAG,IAAI,MAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,MAAM,IAAI,MAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,MAAI,UAAU,GACjB;EAEF,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n /** The scrollable bar container element /\n bar: Readonly<ShallowRef<HTMLDivElement \| null>>;\n /* The wrapper element containing the tab buttons /\n wrapper: Readonly<ShallowRef<HTMLDivElement \| null>>;\n /* Getter for the current vertical orientation state /\n vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n showArrows: Readonly<Ref<boolean>>;\n prevArrowDisabled: ComputedRef<boolean>;\n nextArrowDisabled: ComputedRef<boolean>;\n onPrevSliderClick: () => void;\n onNextSliderClick: () => void;\n keepActiveTabVisible: () => void;\n}\n\n/\n Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n const showArrows = shallowRef<boolean>(false);\n\n const { width: barWidth, height: barHeight } = useElementSize(bar);\n const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n const { top, bottom, left, right } = toRefs(arrivedState);\n\n function checkOverflow(): void {\n const elem = get(wrapper);\n const barElem = get(bar);\n if (!elem \|\| !barElem) {\n set(showArrows, false);\n return;\n }\n\n const overflows = toValue(vertical)\n ? elem.scrollHeight > barElem.offsetHeight\n : elem.scrollWidth > barElem.offsetWidth;\n\n set(showArrows, overflows);\n }\n\n useResizeObserver(bar, checkOverflow);\n useResizeObserver(wrapper, () => {\n checkOverflow();\n keepActiveTabVisible();\n });\n\n const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n function scrollToActiveTab(): void {\n if (!get(showArrows))\n return;\n\n const elem = get(wrapper);\n const barElem = get(bar);\n\n if (!elem \|\| !barElem)\n return;\n\n const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n if (!activeTab)\n return;\n\n const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n const childTop = activeTab.offsetTop - elem.offsetTop;\n\n barElem.scrollTo({\n left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n behavior: 'smooth',\n });\n }\n\n function keepActiveTabVisible(): void {\n nextTick(scrollToActiveTab);\n }\n\n function onPrevSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) - get(barWidth));\n else\n set(y, get(y) - get(barHeight));\n }\n\n function onNextSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) + get(barWidth));\n else\n set(y, get(y) + get(barHeight));\n }\n\n return {\n showArrows: readonly(showArrows),\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,MAAI,YAAY,KAAK;GACrB;EACF;EAEA,MAAM,YAAY,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ;EAE/B,MAAI,YAAY,SAAS;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,GAAG,IAAI,MAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,MAAM,IAAI,MAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,MAAI,UAAU,GACjB;EAEF,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/forms/auto-complete/search.d.ts CHANGED Viewed

@@ -28,5 +28,4 @@ export interface UseAutoCompleteSearchReturn<TItem> {
     updateInternalSearch: (value?: string) => void;
     textValueToProperValue: (val: any, returnObject?: boolean) => TItem;
 }
-export declare function useAutoCompleteSearch<TItem>(options: MaybeRefOrGetter<TItem[]>, searchModel: Ref<string>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access
-opts: UseAutoCompleteSearchOptions<TItem>): UseAutoCompleteSearchReturn<TItem>;
+export declare function useAutoCompleteSearch<TItem>(options: MaybeRefOrGetter<TItem[]>, searchModel: Ref<string>, opts: UseAutoCompleteSearchOptions<TItem>): UseAutoCompleteSearchReturn<TItem>;