@rotki/ui-library 3.0.0-beta.3 → 3.0.0-beta.4
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.
- package/README.md +27 -14
- package/dist/components/accordions/accordion/RuiAccordion.js.map +1 -1
- package/dist/components/accordions/accordion/RuiAccordion.vue.d.ts +1 -1
- package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/accordions/accordions/RuiAccordions.js.map +1 -1
- package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/alerts/RuiAlert.js.map +1 -1
- package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/avatars/RuiAvatar.js.map +1 -1
- package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/avatars/RuiAvatarGroup.js.map +1 -1
- package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/buttons/button/RuiButton.js.map +1 -1
- package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/buttons/button-group/RuiButtonGroup.js.map +1 -1
- package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/calendar/RuiCalendar.js.map +1 -1
- package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/calendar/RuiCalendarGrid.js.map +1 -1
- package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/calendar/RuiCalendarHeader.js.map +1 -1
- package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/calendar/RuiCalendarMenu.js.map +1 -1
- package/dist/components/calendar/RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/cards/RuiCard.js.map +1 -1
- package/dist/components/cards/RuiCard.vue.d.ts +1 -1
- package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/cards/RuiCardHeader.js.map +1 -1
- package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/chips/RuiChip.js.map +1 -1
- package/dist/components/chips/RuiChip.vue.d.ts +1 -1
- package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorBoard.js.map +1 -1
- package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorDisplay.js.map +1 -1
- package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorHue.js.map +1 -1
- package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorInput.js.map +1 -1
- package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorPicker.js.map +1 -1
- package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePicker.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePickerMenu.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue.d.ts +1 -1
- package/dist/components/date-time-picker/RuiDateTimePickerMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/RuiTimezoneSelect.js.map +1 -1
- package/dist/components/date-time-picker/RuiTimezoneSelect.vue.d.ts +2 -2
- package/dist/components/date-time-picker/RuiTimezoneSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/divider/RuiDivider.js.map +1 -1
- package/dist/components/divider/RuiDivider.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue.d.ts +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteOption.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteOption.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.vue.d.ts +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteOptionList.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteSelection.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoCompleteSelection.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/auto-complete/auto-complete-props.d.ts +2 -2
- package/dist/components/forms/category-picker/RuiCategoryPicker.js.map +1 -1
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue.d.ts +2 -2
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js +6 -2
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/checkbox/RuiCheckbox.js.map +1 -1
- package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.js.map +1 -1
- package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/field-defaults/RuiFieldDefaults.js.map +1 -1
- package/dist/components/forms/field-defaults/RuiFieldDefaults.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/field-label/RuiFieldLabel.js.map +1 -1
- package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.js.map +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.vue.d.ts +4 -1
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js +17 -8
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/radio-button/radio/RuiRadio.js.map +1 -1
- package/dist/components/forms/radio-button/radio/RuiRadio.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/radio-button/radio-group/RuiRadioGroup.js.map +1 -1
- package/dist/components/forms/radio-button/radio-group/RuiRadioGroup.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/revealable-text-field/RuiRevealableTextField.js.map +1 -1
- package/dist/components/forms/revealable-text-field/RuiRevealableTextField.vue.d.ts +1 -1
- package/dist/components/forms/revealable-text-field/RuiRevealableTextField.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/select/RuiMenuSelect.js.map +1 -1
- package/dist/components/forms/select/RuiMenuSelect.vue.d.ts +2 -2
- package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/select/RuiSimpleSelect.js.map +1 -1
- package/dist/components/forms/select/RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/slider/RuiSlider.js.map +1 -1
- package/dist/components/forms/slider/RuiSlider.vue.d.ts +1 -1
- package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/slider/RuiSliderTicks.js.map +1 -1
- package/dist/components/forms/slider/RuiSliderTicks.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/switch/RuiSwitch.js.map +1 -1
- package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/text-area/RuiTextArea.js.map +1 -1
- package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js +1 -2
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/icons/RuiIcon.js.map +1 -1
- package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js +11 -10
- package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/index.d.ts +57 -57
- package/dist/components/loaders/RuiSkeletonBase.js.map +1 -1
- package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/loaders/RuiSkeletonLoader.js.map +1 -1
- package/dist/components/loaders/RuiSkeletonLoader.vue.d.ts +1 -1
- package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/logos/RuiLogo.js.map +1 -1
- package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/badge/RuiBadge.js.map +1 -1
- package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/bottom-sheet/RuiBottomSheet.js.map +1 -1
- package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/dialog/RuiDialog.js.map +1 -1
- package/dist/components/overlays/dialog/RuiDialog.vue.d.ts +1 -1
- package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/menu/RuiMenu.js.map +1 -1
- package/dist/components/overlays/menu/RuiMenu.vue.d.ts +1 -1
- package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue.d.ts +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/notification/RuiNotification.js.map +1 -1
- package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/tooltip/RuiTooltip.js.map +1 -1
- package/dist/components/overlays/tooltip/RuiTooltip.vue.d.ts +1 -1
- package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/progress/RuiProgress.js.map +1 -1
- package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/steppers/RuiFooterStepper.js.map +1 -1
- package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js +6 -2
- package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/steppers/RuiStepper.js.map +1 -1
- package/dist/components/steppers/RuiStepper.vue.d.ts +1 -1
- package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/steppers/RuiStepperIcon.js.map +1 -1
- package/dist/components/steppers/RuiStepperIcon.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiDataTable.js.map +1 -1
- package/dist/components/tables/RuiDataTable.vue.d.ts +11 -2
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js +8 -3
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiExpandButton.js.map +1 -1
- package/dist/components/tables/RuiExpandButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTable.js.map +1 -1
- package/dist/components/tables/RuiTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableEmptyState.js.map +1 -1
- package/dist/components/tables/RuiTableEmptyState.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableErrorState.js.map +1 -1
- package/dist/components/tables/RuiTableErrorState.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableHead.js.map +1 -1
- package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableLoadingState.js.map +1 -1
- package/dist/components/tables/RuiTableLoadingState.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTablePagination.js.map +1 -1
- package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableAppendRow.js +7 -0
- package/dist/components/tables/data-table/RuiDataTableAppendRow.js.map +1 -0
- package/dist/components/tables/data-table/RuiDataTableAppendRow.vue.d.ts +26 -0
- package/dist/components/tables/data-table/RuiDataTableAppendRow.vue_vue_type_script_setup_true_lang.js +39 -0
- package/dist/components/tables/data-table/RuiDataTableAppendRow.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/tables/data-table/RuiDataTableBody.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableBody.vue.d.ts +5 -1
- package/dist/components/tables/data-table/RuiDataTableBody.vue_vue_type_script_setup_true_lang.js +18 -10
- package/dist/components/tables/data-table/RuiDataTableBody.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableCell.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableCell.vue.d.ts +1 -1
- package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableEmptyRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableEmptyRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableErrorRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableErrorRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableExpandedRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableExpandedRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableGroupRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableLoadingRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableLoadingRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableMobileSort.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableMobileSort.vue.d.ts +1 -1
- package/dist/components/tables/data-table/RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableRow.js.map +1 -1
- package/dist/components/tables/data-table/RuiDataTableRow.vue.d.ts +5 -1
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js +144 -88
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/data-table/context.d.ts +1 -1
- package/dist/components/tables/data-table-styles.js +1 -1
- package/dist/components/tables/data-table-styles.js.map +1 -1
- package/dist/components/tabs/tab/RuiTab.js.map +1 -1
- package/dist/components/tabs/tab/RuiTab.vue.d.ts +1 -1
- package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tab-item/RuiTabItem.js.map +1 -1
- package/dist/components/tabs/tab-item/RuiTabItem.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tab-items/RuiTabItems.js.map +1 -1
- package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tabs/RuiTabs.js.map +1 -1
- package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/time-picker/RuiTimePicker.js.map +1 -1
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js +12 -8
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/composables/floating.d.ts +1 -1
- package/dist/composables/icons.d.ts +1 -1
- package/dist/composables/icons.js +1 -7
- package/dist/composables/icons.js.map +1 -1
- package/dist/composables/tables/data-table/columns.d.ts +1 -1
- package/dist/composables/tables/data-table/grouping.d.ts +1 -1
- package/dist/composables/tables/data-table/page-scroll.d.ts +1 -1
- package/dist/composables/tables/data-table/pagination.d.ts +2 -2
- package/dist/composables/tables/data-table/sort.d.ts +2 -2
- package/dist/composables/tables/data-table/types.d.ts +2 -2
- package/dist/i18n/keys.d.ts +9 -0
- package/dist/i18n/keys.js +9 -0
- package/dist/i18n/keys.js.map +1 -1
- package/dist/icons/icons_1.d.ts +26 -26
- package/dist/icons/icons_1.js +348 -365
- package/dist/icons/icons_1.js.map +1 -1
- package/dist/icons/icons_2.d.ts +28 -28
- package/dist/icons/icons_2.js +434 -323
- package/dist/icons/icons_2.js.map +1 -1
- package/dist/icons/icons_3.d.ts +32 -32
- package/dist/icons/icons_3.js +334 -364
- package/dist/icons/icons_3.js.map +1 -1
- package/dist/icons/icons_4.d.ts +64 -64
- package/dist/icons/icons_4.js +769 -669
- package/dist/icons/icons_4.js.map +1 -1
- package/dist/icons/icons_5.d.ts +66 -9
- package/dist/icons/icons_5.js +693 -83
- package/dist/icons/icons_5.js.map +1 -1
- package/dist/icons/index.d.ts +1 -1
- package/dist/icons/index.js +108 -51
- package/dist/icons/index.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +6 -6
- package/dist/style.css +22 -4
- package/dist/types/theme.d.ts +1 -1
- package/dist/utils/tv.d.ts +1 -1
- package/dist/vendor/@vueuse/core/dist/index.js +63 -55
- package/dist/vendor/@vueuse/core/dist/index.js.map +1 -1
- package/dist/vendor/@vueuse/shared/dist/index.js +4 -4
- package/dist/vendor/@vueuse/shared/dist/index.js.map +1 -1
- package/dist/web-types.json +88 -4
- package/package.json +26 -26
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiStepper.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n root?: VueClassValue;\n title?: VueClassValue;\n subtitle?: VueClassValue;\n}\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n classNames?: RuiStepperClassNames;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n inheritAttrs: false,\n});\n\nconst {\n step,\n steps,\n iconTop = false,\n custom = false,\n classNames,\n orientation = StepperOrientation.horizontal,\n keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\n },\n variants: {\n orientation: {\n [StepperOrientation.horizontal]: {\n root: 'whitespace-nowrap lg:whitespace-normal',\n step: '',\n divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n },\n [StepperOrientation.vertical]: {\n root: 'flex-col inline-flex',\n // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-3',\n // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.active]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.done]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.error]: {\n step: 'text-rui-error',\n title: '',\n subtitle: '',\n },\n [StepperState.warning]: {\n step: 'text-rui-warning',\n title: '',\n subtitle: '',\n },\n [StepperState.info]: {\n step: 'text-rui-info',\n title: '',\n subtitle: '',\n },\n [StepperState.success]: {\n step: 'text-rui-success',\n title: '',\n subtitle: '',\n },\n },\n iconTop: {\n true: {\n step: 'flex-col',\n label: 'ml-0 mt-4 items-center text-center',\n },\n },\n custom: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n // the line runs through the 32px marker's center\n { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n ],\n defaultVariants: {\n state: StepperState.inactive,\n orientation: StepperOrientation.horizontal,\n custom: false,\n },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n if (step === undefined)\n return steps;\n\n return steps.map((item, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === step)\n stepStatus = StepperState.active;\n\n if (index + 1 < step)\n stepStatus = StepperState.done;\n\n return {\n ...item,\n state: stepStatus,\n };\n });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (!elem) {\n return;\n }\n const activeStep = elem.querySelector('[data-active]');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n :tabindex=\"scrollTabindex\"\n role=\"list\"\n aria-label=\"Progress steps\"\n :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :data-orientation=\"orientation\"\n :data-icon-top=\"iconTop || undefined\"\n :data-custom=\"custom || undefined\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\n :class=\"ui.divider()\"\n />\n <div\n role=\"listitem\"\n :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n :data-state=\"resolveState(state)\"\n :data-active=\"state === StepperState.active || undefined\"\n :class=\"stepUi(resolveState(state)).step()\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\n />\n <RuiProgress\n v-if=\"loading\"\n class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n :size=\"custom ? 40 : 32\"\n variant=\"indeterminate\"\n circular\n thickness=\"2\"\n color=\"primary\"\n />\n </div>\n </slot>\n <div\n v-if=\"title || description\"\n :class=\"ui.label()\"\n data-id=\"stepper-label\"\n >\n <span\n v-if=\"title\"\n :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RuiStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n root?: VueClassValue;\n title?: VueClassValue;\n subtitle?: VueClassValue;\n}\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n classNames?: RuiStepperClassNames;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n inheritAttrs: false,\n});\n\nconst {\n step,\n steps,\n iconTop = false,\n custom = false,\n classNames,\n orientation = StepperOrientation.horizontal,\n keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\n },\n variants: {\n orientation: {\n [StepperOrientation.horizontal]: {\n root: 'whitespace-nowrap lg:whitespace-normal',\n step: '',\n divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n },\n [StepperOrientation.vertical]: {\n root: 'flex-col inline-flex',\n // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-3',\n // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.active]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.done]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.error]: {\n step: 'text-rui-error',\n title: '',\n subtitle: '',\n },\n [StepperState.warning]: {\n step: 'text-rui-warning',\n title: '',\n subtitle: '',\n },\n [StepperState.info]: {\n step: 'text-rui-info',\n title: '',\n subtitle: '',\n },\n [StepperState.success]: {\n step: 'text-rui-success',\n title: '',\n subtitle: '',\n },\n },\n iconTop: {\n true: {\n step: 'flex-col',\n label: 'ml-0 mt-4 items-center text-center',\n },\n },\n custom: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n // the line runs through the 32px marker's center\n { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n ],\n defaultVariants: {\n state: StepperState.inactive,\n orientation: StepperOrientation.horizontal,\n custom: false,\n },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n if (step === undefined)\n return steps;\n\n return steps.map((item, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === step)\n stepStatus = StepperState.active;\n\n if (index + 1 < step)\n stepStatus = StepperState.done;\n\n return {\n ...item,\n state: stepStatus,\n };\n });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (!elem) {\n return;\n }\n const activeStep = elem.querySelector('[data-active]');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n :tabindex=\"scrollTabindex\"\n role=\"list\"\n aria-label=\"Progress steps\"\n :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :data-orientation=\"orientation\"\n :data-icon-top=\"iconTop || undefined\"\n :data-custom=\"custom || undefined\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\n :class=\"ui.divider()\"\n />\n <div\n role=\"listitem\"\n :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n :data-state=\"resolveState(state)\"\n :data-active=\"state === StepperState.active || undefined\"\n :class=\"stepUi(resolveState(state)).step()\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\n />\n <RuiProgress\n v-if=\"loading\"\n class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n :size=\"custom ? 40 : 32\"\n variant=\"indeterminate\"\n circular\n thickness=\"2\"\n color=\"primary\"\n />\n </div>\n </slot>\n <div\n v-if=\"title || description\"\n :class=\"ui.label()\"\n data-id=\"stepper-label\"\n >\n <span\n v-if=\"title\"\n :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { VueClassValue } from '../../types/class-value';
|
|
1
|
+
import type { VueClassValue } from '../../types/class-value.js';
|
|
2
2
|
import { StepperOrientation, StepperState, type StepperStep } from '../../types/stepper.js';
|
|
3
3
|
export interface RuiStepperClassNames {
|
|
4
4
|
root?: VueClassValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n root?: VueClassValue;\n title?: VueClassValue;\n subtitle?: VueClassValue;\n}\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n classNames?: RuiStepperClassNames;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n inheritAttrs: false,\n});\n\nconst {\n step,\n steps,\n iconTop = false,\n custom = false,\n classNames,\n orientation = StepperOrientation.horizontal,\n keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\n },\n variants: {\n orientation: {\n [StepperOrientation.horizontal]: {\n root: 'whitespace-nowrap lg:whitespace-normal',\n step: '',\n divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n },\n [StepperOrientation.vertical]: {\n root: 'flex-col inline-flex',\n // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-3',\n // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.active]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.done]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.error]: {\n step: 'text-rui-error',\n title: '',\n subtitle: '',\n },\n [StepperState.warning]: {\n step: 'text-rui-warning',\n title: '',\n subtitle: '',\n },\n [StepperState.info]: {\n step: 'text-rui-info',\n title: '',\n subtitle: '',\n },\n [StepperState.success]: {\n step: 'text-rui-success',\n title: '',\n subtitle: '',\n },\n },\n iconTop: {\n true: {\n step: 'flex-col',\n label: 'ml-0 mt-4 items-center text-center',\n },\n },\n custom: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n // the line runs through the 32px marker's center\n { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n ],\n defaultVariants: {\n state: StepperState.inactive,\n orientation: StepperOrientation.horizontal,\n custom: false,\n },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n if (step === undefined)\n return steps;\n\n return steps.map((item, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === step)\n stepStatus = StepperState.active;\n\n if (index + 1 < step)\n stepStatus = StepperState.done;\n\n return {\n ...item,\n state: stepStatus,\n };\n });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (!elem) {\n return;\n }\n const activeStep = elem.querySelector('[data-active]');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n :tabindex=\"scrollTabindex\"\n role=\"list\"\n aria-label=\"Progress steps\"\n :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :data-orientation=\"orientation\"\n :data-icon-top=\"iconTop || undefined\"\n :data-custom=\"custom || undefined\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\n :class=\"ui.divider()\"\n />\n <div\n role=\"listitem\"\n :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n :data-state=\"resolveState(state)\"\n :data-active=\"state === StepperState.active || undefined\"\n :class=\"stepUi(resolveState(state)).step()\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\n />\n <RuiProgress\n v-if=\"loading\"\n class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n :size=\"custom ? 40 : 32\"\n variant=\"indeterminate\"\n circular\n thickness=\"2\"\n color=\"primary\"\n />\n </div>\n </slot>\n <div\n v-if=\"title || description\"\n :class=\"ui.label()\"\n data-id=\"stepper-label\"\n >\n <span\n v-if=\"title\"\n :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,aAAa,eAA+B,YAAY;EAC9D,MAAM,iBAAiB,kBAAkB,UAAU;EAEnD,MAAM,UAAU,GAAG;GACjB,OAAO;IAEL,MAAM;IACN,MAAM;IACN,OAAO;IACP,UAAU;IACV,OAAO;IAEP,SAAS;GACX;GACA,UAAU;IACR,aAAa;MACV,mBAAmB,aAAa;MAC/B,MAAM;MACN,MAAM;MACN,SAAS;KACX;MACC,mBAAmB,WAAW;MAC7B,MAAM;MAEN,MAAM;MAEN,SAAS;KACX;IACF;IACA,OAAO;MAEJ,aAAa,WAAW;MACvB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,SAAS;MACrB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,QAAQ;MACpB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;IACF;IACA,SAAS,EACP,MAAM;KACJ,MAAM;KACN,OAAO;IACT,EACF;IACA,QAAQ;KACN,MAAM,CAAC;KACP,OAAO,CAAC;IACV;GACF;GACA,kBAAkB;IAChB;KAAE,QAAQ;KAAM,OAAO,aAAa;KAAU,OAAO,EAAE,MAAM,gBAAgB;IAAE;IAE/E;KAAE,aAAa,mBAAmB;KAAU,QAAQ;KAAM,OAAO,EAAE,SAAS,OAAO;IAAE;IACrF;KAAE,aAAa,mBAAmB;KAAU,SAAS;KAAM,OAAO,EAAE,SAAS,sBAAsB;IAAE;GACvG;GACA,iBAAiB;IACf,OAAO,aAAa;IACpB,aAAa,mBAAmB;IAChC,QAAQ;GACV;EACF,CAAC;EAGD,MAAM,KAAK,eAA2C,QAAQ;GAAE,aAAU,QAAA;GAAG,QAAK,QAAA;GAAG,SAAM,QAAA;EAAE,CAAC,CAAC;;;;;;;;;EAU/F,SAAS,OAAO,OAAiD;GAC/D,OAAO,QAAQ;IAAE,aAAU,QAAA;IAAG,QAAK,QAAA;IAAG,SAAM,QAAA;IAAG;GAAM,CAAC;EACxD;EAGA,MAAM,eAAe,eAA8B;GACjD,IAAI,QAAA,SAAS,KAAA,GACX,OAAO,QAAA;GAET,OAAO,QAAA,MAAM,KAAK,MAAM,UAAU;IAChC,IAAI,aAA2B,aAAa;IAE5C,IAAI,QAAQ,MAAM,QAAA,MAChB,aAAa,aAAa;IAE5B,IAAI,QAAQ,IAAI,QAAA,MACd,aAAa,aAAa;IAE5B,OAAO;KACL,GAAG;KACH,OAAO;IACT;GACF,CAAC;EACH,CAAC;EAED,SAAS,aAAa,OAA+C;GACnE,OAAO,SAAS,aAAa;EAC/B;EAEA,YAAY,QAAA,YAAY;GACtB,IAAI,CAAC,QAAA,qBAAqB,QAAA,gBAAgB,mBAAmB,YAC3D;GAGF,eAAe;IACb,MAAM,OAAO,IAAI,UAAU;IAC3B,IAAI,CAAC,MACH;IAGF,KADwB,cAAc,eACtC,CAAA,EAAY,iBAAiB;KAC3B,UAAU;KACV,QAAQ;IACV,CAAC;GACH,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAuEM,OAvEN,WAuEM;IAtEA,SAAA;IAAJ,KAAI;IACH,UAAU,MAAA,cAAA;IACX,MAAK;IACL,cAAW;IACV,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAE,QAAA,YAAY,MAAMA,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;GAC9CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,oBAAkB,QAAA;IAClB,iBAAe,QAAA,WAAW,KAAA;IAC1B,eAAa,QAAA,UAAU,KAAA;GAExB,CAAA,GAAA,EAAA,UAAA,IAAA,GAAA,mBA2DW,UAAA,MAAA,WA1DiD,MAAA,YAAA,IAAY,EAA5D,OAAO,aAAa,OAAO,WAAW,UAAK;IAC/C,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CAIH,QAAK,KADb,UAAA,GAAA,mBAIE,MAAA;;KAFA,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAEpB,GAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,mBAgDM,OAAA;KA/CJ,MAAK;KACJ,gBAAc,UAAU,MAAA,YAAA,CAAY,CAAC,SAAM,SAAY,KAAA;KACvD,cAAY,aAAa,KAAK;KAC9B,eAAa,UAAU,MAAA,YAAA,CAAY,CAAC,UAAU,KAAA;KAC9C,OAAK,eAAE,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,KAAI,CAAA;IAExC,GAAA,CAAA,WAoBO,KAAA,QAAA,QApBP,WAoBO,EAAA,SAAA,KAAA,GAAA;KAlBK;KAAK,OAAS,QAAK;IAAA,CAAA,SAkBxB,CAhBL,mBAeM,OAfN,YAeM,CAdJ,YAIE,wBAAA;KAHC,OAAO,QAAK;KACL;KACP,MAAM,QAAA,SAAM,OAAA;;;;;IAGP,CAAA,GAAA,WADR,UAAA,GAAA,YAQE,qBAAA;;KANA,OAAM;KACL,MAAM,QAAA,SAAM,KAAA;KACb,SAAQ;KACR,UAAA;KACA,WAAU;KACV,OAAM;IAKJ,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAA,SAAS,eADjB,UAAA,GAAA,mBAmBM,OAAA;;KAjBH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAGA,GAAA,CAAA,SADR,UAAA,GAAA,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,MAAK,GAAI,QAAA,UAAU,QAAA,YAAY,KAAK,GACnE,iBAAiB,CAAA;IAEpB,GAAA,gBAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGF,eADR,UAAA,GAAA,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,SAAQ,GAAI,QAAA,UAAU,QAAA,YAAY,QAAQ,GACzE,cAAc,CAAA;IAEjB,GAAA,gBAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,EAAA"}
|
|
1
|
+
{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n root?: VueClassValue;\n title?: VueClassValue;\n subtitle?: VueClassValue;\n}\n\nexport interface Props {\n step?: number;\n steps: StepperStep[];\n iconTop?: boolean;\n custom?: boolean;\n classNames?: RuiStepperClassNames;\n orientation?: StepperOrientation;\n keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n name: 'RuiStepper',\n inheritAttrs: false,\n});\n\nconst {\n step,\n steps,\n iconTop = false,\n custom = false,\n classNames,\n orientation = StepperOrientation.horizontal,\n keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n slots: {\n // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n step: 'flex items-center px-6 relative',\n title: '',\n subtitle: '',\n label: 'flex flex-col items-start text-left ml-2',\n // the connector is decoration, so it takes the light divider rather than a control's edge\n divider: 'border-rui-divider',\n },\n variants: {\n orientation: {\n [StepperOrientation.horizontal]: {\n root: 'whitespace-nowrap lg:whitespace-normal',\n step: '',\n divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n },\n [StepperOrientation.vertical]: {\n root: 'flex-col inline-flex',\n // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n step: 'px-1 py-3',\n // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n },\n },\n state: {\n // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n [StepperState.inactive]: {\n step: 'text-rui-text-disabled',\n title: 'text-rui-text-secondary',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.active]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.done]: {\n step: 'text-rui-text',\n title: '',\n subtitle: 'text-rui-text-secondary',\n },\n [StepperState.error]: {\n step: 'text-rui-error',\n title: '',\n subtitle: '',\n },\n [StepperState.warning]: {\n step: 'text-rui-warning',\n title: '',\n subtitle: '',\n },\n [StepperState.info]: {\n step: 'text-rui-info',\n title: '',\n subtitle: '',\n },\n [StepperState.success]: {\n step: 'text-rui-success',\n title: '',\n subtitle: '',\n },\n },\n iconTop: {\n true: {\n step: 'flex-col',\n label: 'ml-0 mt-4 items-center text-center',\n },\n },\n custom: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n // the line runs through the 32px marker's center\n { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n ],\n defaultVariants: {\n state: StepperState.inactive,\n orientation: StepperOrientation.horizontal,\n custom: false,\n },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n if (step === undefined)\n return steps;\n\n return steps.map((item, index) => {\n let stepStatus: StepperState = StepperState.inactive;\n\n if (index + 1 === step)\n stepStatus = StepperState.active;\n\n if (index + 1 < step)\n stepStatus = StepperState.done;\n\n return {\n ...item,\n state: stepStatus,\n };\n });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n return;\n }\n\n nextTick(() => {\n const elem = get(wrapperRef);\n if (!elem) {\n return;\n }\n const activeStep = elem.querySelector('[data-active]');\n activeStep?.scrollIntoView?.({\n behavior: 'smooth',\n inline: 'center',\n });\n });\n});\n</script>\n\n<template>\n <div\n ref=\"wrapperRef\"\n :tabindex=\"scrollTabindex\"\n role=\"list\"\n aria-label=\"Progress steps\"\n :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :data-orientation=\"orientation\"\n :data-icon-top=\"iconTop || undefined\"\n :data-custom=\"custom || undefined\"\n >\n <template\n v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n :key=\"index\"\n >\n <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n <hr\n v-if=\"index > 0\"\n aria-hidden=\"true\"\n :class=\"ui.divider()\"\n />\n <div\n role=\"listitem\"\n :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n :data-state=\"resolveState(state)\"\n :data-active=\"state === StepperState.active || undefined\"\n :class=\"stepUi(resolveState(state)).step()\"\n >\n <slot\n name=\"icon\"\n v-bind=\"{ state, index: index + 1 }\"\n >\n <div class=\"relative flex py-2\">\n <RuiStepperIcon\n :index=\"index + 1\"\n :state=\"state\"\n :size=\"custom ? 'lg' : 'md'\"\n />\n <RuiProgress\n v-if=\"loading\"\n class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n :size=\"custom ? 40 : 32\"\n variant=\"indeterminate\"\n circular\n thickness=\"2\"\n color=\"primary\"\n />\n </div>\n </slot>\n <div\n v-if=\"title || description\"\n :class=\"ui.label()\"\n data-id=\"stepper-label\"\n >\n <span\n v-if=\"title\"\n :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n class=\"text-subtitle-2\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n class=\"text-caption\"\n >\n {{ description }}\n </span>\n </div>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiStepperIcon.js","names":[],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n state?: StepperState;\n index: number;\n /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n [StepperState.success]: 'lu-circle-check',\n [StepperState.error]: 'lu-circle-alert',\n [StepperState.warning]: 'lu-triangle-alert',\n [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n variants: {\n size: {\n md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n },\n state: {\n [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n [StepperState.error]: '',\n [StepperState.warning]: '',\n [StepperState.info]: '',\n [StepperState.success]: '',\n },\n status: {\n true: '![--rui-icon-size:100%]',\n false: '',\n },\n },\n defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n <RuiIcon\n v-if=\"state === StepperState.done\"\n name=\"lu-check\"\n />\n <RuiIcon\n v-else-if=\"statusIcon\"\n :name=\"statusIcon\"\n />\n <span v-else>{{ index }}</span>\n </span>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RuiStepperIcon.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n state?: StepperState;\n index: number;\n /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n [StepperState.success]: 'lu-circle-check',\n [StepperState.error]: 'lu-circle-alert',\n [StepperState.warning]: 'lu-triangle-alert',\n [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n variants: {\n size: {\n md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n },\n state: {\n [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n [StepperState.error]: '',\n [StepperState.warning]: '',\n [StepperState.info]: '',\n [StepperState.success]: '',\n },\n status: {\n true: '![--rui-icon-size:100%]',\n false: '',\n },\n },\n defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n <RuiIcon\n v-if=\"state === StepperState.done\"\n name=\"lu-check\"\n />\n <RuiIcon\n v-else-if=\"statusIcon\"\n :name=\"statusIcon\"\n />\n <span v-else>{{ index }}</span>\n </span>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n state?: StepperState;\n index: number;\n /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n [StepperState.success]: 'lu-circle-check',\n [StepperState.error]: 'lu-circle-alert',\n [StepperState.warning]: 'lu-triangle-alert',\n [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n variants: {\n size: {\n md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n },\n state: {\n [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n [StepperState.error]: '',\n [StepperState.warning]: '',\n [StepperState.info]: '',\n [StepperState.success]: '',\n },\n status: {\n true: '![--rui-icon-size:100%]',\n false: '',\n },\n },\n defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n <RuiIcon\n v-if=\"state === StepperState.done\"\n name=\"lu-check\"\n />\n <RuiIcon\n v-else-if=\"statusIcon\"\n :name=\"statusIcon\"\n />\n <span v-else>{{ index }}</span>\n </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;;;;;;EAOA,MAAM,cAAc,GAAG;GACrB,MAAM;GACN,UAAU;IACR,MAAM;KACJ,IAAI;KACJ,IAAI;IACN;IACA,OAAO;MACJ,aAAa,WAAW;MAExB,aAAa,SAAS;MAEtB,aAAa,OAAO;MACpB,aAAa,QAAQ;MACrB,aAAa,UAAU;MACvB,aAAa,OAAO;MACpB,aAAa,UAAU;IAC1B;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;GACF;GACA,iBAAiB;IAAE,MAAM;IAAM,OAAO,aAAa;IAAU,QAAQ;GAAM;EAC7E,CAAC;EAED,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,
|
|
1
|
+
{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","RuiIcon","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n state?: StepperState;\n index: number;\n /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n [StepperState.success]: 'lu-circle-check',\n [StepperState.error]: 'lu-circle-alert',\n [StepperState.warning]: 'lu-triangle-alert',\n [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n variants: {\n size: {\n md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n },\n state: {\n [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n [StepperState.error]: '',\n [StepperState.warning]: '',\n [StepperState.info]: '',\n [StepperState.success]: '',\n },\n status: {\n true: '![--rui-icon-size:100%]',\n false: '',\n },\n },\n defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n <RuiIcon\n v-if=\"state === StepperState.done\"\n name=\"lu-check\"\n />\n <RuiIcon\n v-else-if=\"statusIcon\"\n :name=\"statusIcon\"\n />\n <span v-else>{{ index }}</span>\n </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;;;;;;EAOA,MAAM,cAAc,GAAG;GACrB,MAAM;GACN,UAAU;IACR,MAAM;KACJ,IAAI;KACJ,IAAI;IACN;IACA,OAAO;MACJ,aAAa,WAAW;MAExB,aAAa,SAAS;MAEtB,aAAa,OAAO;MACpB,aAAa,QAAQ;MACrB,aAAa,UAAU;MACvB,aAAa,OAAO;MACpB,aAAa,UAAU;IAC1B;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;GACF;GACA,iBAAiB;IAAE,MAAM;IAAM,OAAO,aAAa;IAAU,QAAQ;GAAM;EAC7E,CAAC;EAED,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,OAAAA,UAAA,GAAAC,mBAUO,QAAA,EAVA,OAAKC,eAAEC,MAAA,WAAA,CAAW,CAAA;IAAA,MAAG,QAAA;IAAI,OAAE,QAAA;IAAK,QAAA,CAAA,CAAYA,MAAA,UAAA;GAAU,CAAA,CAAA,EAAA,GAAA,CAEnD,QAAA,UAAUA,MAAA,YAAA,CAAY,CAAC,QAD/BH,UAAA,GAAAI,YAGEC,iBAAA;;IADA,MAAK;GAGMF,CAAAA,KAAAA,MAAA,UAAA,KADbH,UAAA,GAAAI,YAGEC,iBAAA;;IADC,MAAMF,MAAA,UAAA;GAETH,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA+B,QAAA,YAAAK,gBAAf,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiDataTable.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /**\n * list of items for each row\n */\n rows: readonly T[];\n /**\n * the attribute used to identify each row uniquely for selection, usually `id`\n */\n rowAttr: K;\n /**\n * model for internal searching\n */\n search?: string;\n /**\n * model for items per page\n * will be used if the `pagination` model isn't specified\n */\n itemsPerPage?: number;\n /**\n * list of column definitions\n */\n cols?: TableColumn<T>[];\n /**\n * attribute to use from column definitions to display column titles\n */\n columnAttr?: keyof TableColumn<T>;\n /**\n * flag to show a more or less spacious table\n */\n dense?: boolean;\n /**\n * flag to outline the flag with a border\n */\n outlined?: boolean;\n /**\n * should add zebra-striping to the table row\n */\n striped?: boolean;\n /**\n * flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n */\n loading?: boolean;\n disablePerPage?: boolean;\n /**\n * Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n */\n rangesThreshold?: number;\n /**\n * The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n */\n empty?: {\n label?: string;\n description?: string;\n };\n /**\n * Why the last read failed. Shown above any rows kept from an earlier read,\n * or in place of the empty state; `loading` still takes precedence.\n */\n error?: string;\n /** Heading for that failure. */\n errorTitle?: string;\n /** Label for the retry control; without one, no control is offered. */\n retryText?: string;\n /**\n * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n * while the table runs past it.\n */\n hidePagination?: boolean;\n\n rounded?: 'sm' | 'md' | 'lg';\n /**\n * make expansion work like accordion\n */\n singleExpand?: boolean;\n /**\n * make table head stick to top on scroll\n */\n stickyHeader?: boolean;\n stickyOffset?: number;\n /**\n * Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n */\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) | string;\n /**\n * Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n */\n mobileBreakpoint?: number;\n /**\n * What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n */\n mobileBreakpointBasis?: 'viewport' | 'container';\n /**\n * Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n */\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n error = '',\n errorTitle = '',\n retryText = '',\n hidePagination = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n 'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'error': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) || get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n const width = get(scrollerWidth);\n return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n mappedGroups,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n if (!isNestedTable || paginationModifiers.external)\n return false;\n const { limits } = get(paginationData);\n const sizes = limits ?? toValue(tableDefaults.limits);\n // the rows themselves, not the pagination total, which is only filled in after mount\n return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place: two stuck bars would stack.\n */\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => !isNestedTable && get(showPagination));\nconst stickyPagination = computed<boolean>(() => !isNestedTable && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n const element: unknown = get(paginationBar)?.$el;\n return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, stickyPagination);\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n const label = cols?.find(column => column.key === key)?.[columnAttr];\n return {\n key: String(key),\n label: label === undefined || label === null ? String(key) : String(label),\n };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n groupLabels,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getGroupSize,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n v-if=\"showMobileSort\"\n :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <div\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n :tabindex=\"scrollerTabindex\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :style=\"viewportStyle\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"headerLoading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"headerLoading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n :error=\"error\"\n :error-title=\"errorTitle\"\n :retry-text=\"retryText\"\n @retry=\"emit('retry')\"\n >\n <template\n v-if=\"slots.error\"\n #error\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"error\" />\n </template>\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n <div\n v-if=\"paginationData && showPagination && !isNestedTable\"\n ref=\"paginationSentinel\"\n class=\"border-0!\"\n aria-hidden=\"true\"\n data-id=\"table-pagination-sentinel\"\n />\n <RuiTablePagination\n v-if=\"paginationData && showPagination\"\n ref=\"paginationBar\"\n v-model=\"paginationData\"\n :class=\"ui.pagination({ sticky: stickyPagination })\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n :data-sticky=\"stickyPagination || undefined\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RuiDataTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /**\n * list of items for each row\n */\n rows: readonly T[];\n /**\n * the attribute used to identify each row uniquely for selection, usually `id`\n */\n rowAttr: K;\n /**\n * model for internal searching\n */\n search?: string;\n /**\n * model for items per page\n * will be used if the `pagination` model isn't specified\n */\n itemsPerPage?: number;\n /**\n * list of column definitions\n */\n cols?: TableColumn<T>[];\n /**\n * attribute to use from column definitions to display column titles\n */\n columnAttr?: keyof TableColumn<T>;\n /**\n * flag to show a more or less spacious table\n */\n dense?: boolean;\n /**\n * flag to outline the flag with a border\n */\n outlined?: boolean;\n /**\n * should add zebra-striping to the table row\n */\n striped?: boolean;\n /**\n * flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n */\n loading?: boolean;\n disablePerPage?: boolean;\n /**\n * Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n */\n rangesThreshold?: number;\n /**\n * The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n */\n empty?: {\n label?: string;\n description?: string;\n };\n /**\n * Why the last read failed. Shown above any rows kept from an earlier read,\n * or in place of the empty state; `loading` still takes precedence.\n */\n error?: string;\n /** Heading for that failure. */\n errorTitle?: string;\n /** Label for the retry control; without one, no control is offered. */\n retryText?: string;\n /**\n * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n * while the table runs past it.\n */\n hidePagination?: boolean;\n\n rounded?: 'sm' | 'md' | 'lg';\n /**\n * make expansion work like accordion\n */\n singleExpand?: boolean;\n /**\n * make table head stick to top on scroll\n */\n stickyHeader?: boolean;\n stickyOffset?: number;\n /**\n * Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n */\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) | string;\n /**\n * Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n */\n mobileBreakpoint?: number;\n /**\n * What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n */\n mobileBreakpointBasis?: 'viewport' | 'container';\n /**\n * Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n */\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n error = '',\n errorTitle = '',\n retryText = '',\n hidePagination = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n 'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n /**\n * A full-width row after every row, read as the second half of the same item: no divider between\n * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n * that would otherwise widen the table. It comes before an open expanded panel.\n */\n 'row-append': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'error': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) || get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n const width = get(scrollerWidth);\n return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n mappedGroups,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n if (!isNestedTable || paginationModifiers.external)\n return false;\n const { limits } = get(paginationData);\n const sizes = limits ?? toValue(tableDefaults.limits);\n // the rows themselves, not the pagination total, which is only filled in after mount\n return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place: two stuck bars would stack.\n */\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => !isNestedTable && get(showPagination));\nconst stickyPagination = computed<boolean>(() => !isNestedTable && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n const element: unknown = get(paginationBar)?.$el;\n return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, stickyPagination);\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n const label = cols?.find(column => column.key === key)?.[columnAttr];\n return {\n key: String(key),\n label: label === undefined || label === null ? String(key) : String(label),\n };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n groupLabels,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getGroupSize,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n v-if=\"showMobileSort\"\n :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <div\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n :tabindex=\"scrollerTabindex\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :style=\"viewportStyle\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"headerLoading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"headerLoading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n :error=\"error\"\n :error-title=\"errorTitle\"\n :retry-text=\"retryText\"\n @retry=\"emit('retry')\"\n >\n <template\n v-if=\"slots.error\"\n #error\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"error\" />\n </template>\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['row-append']\"\n #row-append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"row-append\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n <div\n v-if=\"paginationData && showPagination && !isNestedTable\"\n ref=\"paginationSentinel\"\n class=\"border-0!\"\n aria-hidden=\"true\"\n data-id=\"table-pagination-sentinel\"\n />\n <RuiTablePagination\n v-if=\"paginationData && showPagination\"\n ref=\"paginationBar\"\n v-model=\"paginationData\"\n :class=\"ui.pagination({ sticky: stickyPagination })\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n :data-sticky=\"stickyPagination || undefined\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { GroupHeader } from '../../composables/tables/data-table/types.js';
|
|
2
|
-
import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from './RuiTableHead.vue';
|
|
3
|
-
import { type TablePaginationData } from './RuiTablePagination.vue';
|
|
2
|
+
import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from './RuiTableHead.vue.js';
|
|
3
|
+
import { type TablePaginationData } from './RuiTablePagination.vue.js';
|
|
4
4
|
import { GroupExpandButtonPosition } from './table-props.js';
|
|
5
5
|
export type { GroupedTableRow, GroupHeader, TableOptions } from '../../composables/tables/data-table/types.js';
|
|
6
6
|
export interface Props<T, K extends keyof T> {
|
|
@@ -169,6 +169,15 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
|
|
|
169
169
|
row: T;
|
|
170
170
|
index: number;
|
|
171
171
|
}) => any;
|
|
172
|
+
/**
|
|
173
|
+
* A full-width row after every row, read as the second half of the same item: no divider between
|
|
174
|
+
* them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,
|
|
175
|
+
* that would otherwise widen the table. It comes before an open expanded panel.
|
|
176
|
+
*/
|
|
177
|
+
'row-append': (props: {
|
|
178
|
+
row: T;
|
|
179
|
+
index: number;
|
|
180
|
+
}) => any;
|
|
172
181
|
'no-data': () => any;
|
|
173
182
|
'empty-description': () => any;
|
|
174
183
|
error: () => any;
|
|
@@ -505,20 +505,25 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
|
|
|
505
505
|
fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "expanded-item", normalizeProps(guardReactiveProps(slotData)))]),
|
|
506
506
|
key: "4"
|
|
507
507
|
} : void 0,
|
|
508
|
+
slots["row-append"] ? {
|
|
509
|
+
name: "row-append",
|
|
510
|
+
fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "row-append", normalizeProps(guardReactiveProps(slotData)))]),
|
|
511
|
+
key: "5"
|
|
512
|
+
} : void 0,
|
|
508
513
|
slots["no-data"] ? {
|
|
509
514
|
name: "no-data",
|
|
510
515
|
fn: withCtx(() => [renderSlot(_ctx.$slots, "no-data")]),
|
|
511
|
-
key: "
|
|
516
|
+
key: "6"
|
|
512
517
|
} : void 0,
|
|
513
518
|
slots["empty-description"] ? {
|
|
514
519
|
name: "empty-description",
|
|
515
520
|
fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-description")]),
|
|
516
|
-
key: "
|
|
521
|
+
key: "7"
|
|
517
522
|
} : void 0,
|
|
518
523
|
slots["body.append"] ? {
|
|
519
524
|
name: "body.append",
|
|
520
525
|
fn: withCtx((slotData) => [renderSlot(_ctx.$slots, "body.append", normalizeProps(guardReactiveProps(slotData)))]),
|
|
521
|
-
key: "
|
|
526
|
+
key: "8"
|
|
522
527
|
} : void 0
|
|
523
528
|
]), 1032, [
|
|
524
529
|
"filtered",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiDataTable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /**\n * list of items for each row\n */\n rows: readonly T[];\n /**\n * the attribute used to identify each row uniquely for selection, usually `id`\n */\n rowAttr: K;\n /**\n * model for internal searching\n */\n search?: string;\n /**\n * model for items per page\n * will be used if the `pagination` model isn't specified\n */\n itemsPerPage?: number;\n /**\n * list of column definitions\n */\n cols?: TableColumn<T>[];\n /**\n * attribute to use from column definitions to display column titles\n */\n columnAttr?: keyof TableColumn<T>;\n /**\n * flag to show a more or less spacious table\n */\n dense?: boolean;\n /**\n * flag to outline the flag with a border\n */\n outlined?: boolean;\n /**\n * should add zebra-striping to the table row\n */\n striped?: boolean;\n /**\n * flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n */\n loading?: boolean;\n disablePerPage?: boolean;\n /**\n * Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n */\n rangesThreshold?: number;\n /**\n * The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n */\n empty?: {\n label?: string;\n description?: string;\n };\n /**\n * Why the last read failed. Shown above any rows kept from an earlier read,\n * or in place of the empty state; `loading` still takes precedence.\n */\n error?: string;\n /** Heading for that failure. */\n errorTitle?: string;\n /** Label for the retry control; without one, no control is offered. */\n retryText?: string;\n /**\n * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n * while the table runs past it.\n */\n hidePagination?: boolean;\n\n rounded?: 'sm' | 'md' | 'lg';\n /**\n * make expansion work like accordion\n */\n singleExpand?: boolean;\n /**\n * make table head stick to top on scroll\n */\n stickyHeader?: boolean;\n stickyOffset?: number;\n /**\n * Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n */\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) | string;\n /**\n * Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n */\n mobileBreakpoint?: number;\n /**\n * What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n */\n mobileBreakpointBasis?: 'viewport' | 'container';\n /**\n * Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n */\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n error = '',\n errorTitle = '',\n retryText = '',\n hidePagination = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n 'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'error': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) || get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n const width = get(scrollerWidth);\n return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n mappedGroups,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n if (!isNestedTable || paginationModifiers.external)\n return false;\n const { limits } = get(paginationData);\n const sizes = limits ?? toValue(tableDefaults.limits);\n // the rows themselves, not the pagination total, which is only filled in after mount\n return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place: two stuck bars would stack.\n */\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => !isNestedTable && get(showPagination));\nconst stickyPagination = computed<boolean>(() => !isNestedTable && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n const element: unknown = get(paginationBar)?.$el;\n return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, stickyPagination);\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n const label = cols?.find(column => column.key === key)?.[columnAttr];\n return {\n key: String(key),\n label: label === undefined || label === null ? String(key) : String(label),\n };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n groupLabels,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getGroupSize,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n v-if=\"showMobileSort\"\n :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <div\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n :tabindex=\"scrollerTabindex\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :style=\"viewportStyle\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"headerLoading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"headerLoading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n :error=\"error\"\n :error-title=\"errorTitle\"\n :retry-text=\"retryText\"\n @retry=\"emit('retry')\"\n >\n <template\n v-if=\"slots.error\"\n #error\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"error\" />\n </template>\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n <div\n v-if=\"paginationData && showPagination && !isNestedTable\"\n ref=\"paginationSentinel\"\n class=\"border-0!\"\n aria-hidden=\"true\"\n data-id=\"table-pagination-sentinel\"\n />\n <RuiTablePagination\n v-if=\"paginationData && showPagination\"\n ref=\"paginationBar\"\n v-model=\"paginationData\"\n :class=\"ui.pagination({ sticky: stickyPagination })\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n :data-sticky=\"stickyPagination || undefined\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RuiDataTable.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_createVNode","RuiDataTableMobileSort","_createCommentVNode","_createBlock","RuiTableHead","_createSlots","_renderList","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","RuiDataTableBody","RuiTablePagination","_isRef"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n type GroupData,\n type TableColumn,\n type TableRowKeyData,\n type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n /**\n * list of items for each row\n */\n rows: readonly T[];\n /**\n * the attribute used to identify each row uniquely for selection, usually `id`\n */\n rowAttr: K;\n /**\n * model for internal searching\n */\n search?: string;\n /**\n * model for items per page\n * will be used if the `pagination` model isn't specified\n */\n itemsPerPage?: number;\n /**\n * list of column definitions\n */\n cols?: TableColumn<T>[];\n /**\n * attribute to use from column definitions to display column titles\n */\n columnAttr?: keyof TableColumn<T>;\n /**\n * flag to show a more or less spacious table\n */\n dense?: boolean;\n /**\n * flag to outline the flag with a border\n */\n outlined?: boolean;\n /**\n * should add zebra-striping to the table row\n */\n striped?: boolean;\n /**\n * flag to show loading state of the table\n * triggers indefinite progress at the bottom of the table header\n */\n loading?: boolean;\n disablePerPage?: boolean;\n /**\n * Maximum number of pages before the jump-to-page dropdown is replaced with\n * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n */\n rangesThreshold?: number;\n /**\n * The text and icon shown when there are no rows, e.g.\n * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n */\n empty?: {\n label?: string;\n description?: string;\n };\n /**\n * Why the last read failed. Shown above any rows kept from an earlier read,\n * or in place of the empty state; `loading` still takes precedence.\n */\n error?: string;\n /** Heading for that failure. */\n errorTitle?: string;\n /** Label for the retry control; without one, no control is offered. */\n retryText?: string;\n /**\n * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n * while the table runs past it.\n */\n hidePagination?: boolean;\n\n rounded?: 'sm' | 'md' | 'lg';\n /**\n * make expansion work like accordion\n */\n singleExpand?: boolean;\n /**\n * make table head stick to top on scroll\n */\n stickyHeader?: boolean;\n stickyOffset?: number;\n /**\n * Affects how the items per page work across the app.\n * When true, changing the items per page setting in one table will affect other tables.\n */\n globalItemsPerPage?: boolean;\n groupExpandButtonPosition?: GroupExpandButtonPosition;\n disabledRows?: readonly T[];\n multiPageSelect?: boolean;\n itemClass?: ((item: T) => string) | string;\n /**\n * Render each row as a stacked card instead of a table row once the measured\n * width is narrower than this width (in pixels). Columns flagged with\n * `mobileHidden` are dropped in this layout. Falls back to the global\n * `mobileBreakpoint` table default; leave both unset to keep the default table\n * layout at every width.\n */\n mobileBreakpoint?: number;\n /**\n * What the `mobileBreakpoint` is measured against: the browser `viewport`\n * (default) or this table's own `container` width. Use `container` when the\n * table lives in a narrow region of a wider window. Falls back to the global\n * `mobileBreakpointBasis` table default.\n */\n mobileBreakpointBasis?: 'viewport' | 'container';\n /**\n * Force the stacked mobile card layout on (`true`) or off (`false`),\n * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n */\n mobile?: boolean;\n}\n\ndefineOptions({\n name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n rows,\n rowAttr,\n search = '',\n itemsPerPage = 10,\n cols,\n columnAttr = 'label',\n dense = false,\n outlined = false,\n striped = false,\n loading = false,\n disablePerPage = false,\n rangesThreshold = 500,\n empty = { label: 'No item found' },\n error = '',\n errorTitle = '',\n retryText = '',\n hidePagination = false,\n rounded = 'md',\n singleExpand = false,\n stickyHeader = false,\n stickyOffset,\n globalItemsPerPage = undefined,\n groupExpandButtonPosition = GroupExpandButtonPosition.start,\n disabledRows,\n multiPageSelect = false,\n itemClass = '',\n mobileBreakpoint,\n mobileBreakpointBasis,\n mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n 'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n 'copy:group': [value: GroupData<T>];\n 'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'body.prepend': (props: { colspan: number }) => any;\n 'body.append': (props: { colspan: number }) => any;\n 'group.header': (props: {\n colspan: number;\n header: GroupHeader<T>;\n isOpen: boolean;\n toggle: () => void;\n }) => any;\n 'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n 'expanded-item': (props: { row: T; index: number }) => any;\n /**\n * A full-width row after every row, read as the second half of the same item: no divider between\n * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n * that would otherwise widen the table. It comes before an open expanded panel.\n */\n 'row-append': (props: { row: T; index: number }) => any;\n 'no-data': () => any;\n 'empty-description': () => any;\n 'error': () => any;\n 'tfoot': () => any;\n }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n if (mobileBreakpoint !== undefined)\n return mobileBreakpoint;\n const globalBreakpoint = tableDefaults.mobileBreakpoint;\n return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n if (mobileBreakpointBasis !== undefined)\n return mobileBreakpointBasis;\n const globalBasis = tableDefaults.mobileBreakpointBasis;\n return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n const breakpoint = get(resolvedMobileBreakpoint);\n if (breakpoint === undefined)\n return mobile;\n if (mobile)\n return true;\n // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n const width = get(resolvedMobileBasis) === 'container'\n ? (get(containerWidth) || get(windowWidth))\n : get(windowWidth);\n return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n () => stickyHeader,\n stickyHeaderOffset,\n { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n const width = get(scrollerWidth);\n return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n { rowAttr, singleExpand },\n { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n emit('update:options', opts);\n}\n\nconst {\n sortData,\n sortedMap,\n sorted,\n onSort: applySort,\n} = useTableSort<T>(\n { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n {\n sort,\n pagination,\n emitUpdateOptions,\n },\n);\n\nconst {\n groupKeys,\n groupKey,\n grouped,\n mappedGroups,\n isExpandedGroup,\n isHiddenRow,\n onToggleExpandGroup,\n onUngroup,\n} = useTableGrouping<T, IdType>(\n { rowAttr },\n {\n group,\n collapsed,\n sorted,\n },\n);\n\nconst {\n paginationData,\n filtered,\n setInternalTotal,\n resetPagination,\n} = useTablePagination<T>(\n {\n itemsPerPage,\n paginationModifiersExternal: paginationModifiers.external,\n globalItemsPerPage,\n },\n {\n pagination,\n grouped,\n isHiddenRow,\n sort,\n emitUpdateOptions,\n tableDefaults,\n },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n if (!isNestedTable || paginationModifiers.external)\n return false;\n const { limits } = get(paginationData);\n const sizes = limits ?? toValue(tableDefaults.limits);\n // the rows themselves, not the pagination total, which is only filled in after mount\n return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place: two stuck bars would stack.\n */\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => !isNestedTable && get(showPagination));\nconst stickyPagination = computed<boolean>(() => !isNestedTable && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n const element: unknown = get(paginationBar)?.$el;\n return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, stickyPagination);\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n const label = cols?.find(column => column.key === key)?.[columnAttr];\n return {\n key: String(key),\n label: label === undefined || label === null ? String(key) : String(label),\n };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n outlined,\n rounded,\n dense,\n striped,\n mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n cols: () => cols,\n columnAttr,\n rows: () => rows,\n expandable,\n groupKeys,\n selectedData,\n slots,\n isMobile,\n tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n Object.keys(slots)\n .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n isAllSelected,\n indeterminate,\n isSelected,\n isDisabledRow,\n onToggleAll,\n onSelect,\n onCheckboxClick,\n deselectRemovedRows,\n resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n applySort(payload);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n if ((get(expanded)?.length ?? 0) > 0)\n set(expanded, []);\n if (!multiPageSelect)\n onToggleAll(false);\n resetCheckboxShiftState();\n await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n resetPagination();\n onToggleAll(false);\n resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n if (!multiPageSelect)\n deselectRemovedRows();\n setInternalTotal(items);\n});\n\nonMounted(() => {\n setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n const s = get(ui);\n return {\n td: s.td(),\n tr: s.tr(),\n trSelected: s.tr({ rowVariant: 'selected' }),\n trExpandable: s.tr({ rowVariant: 'expandable' }),\n trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n trGroup: s.tr({ rowVariant: 'group' }),\n trEmpty: s.tr({ rowVariant: 'empty' }),\n checkbox: s.checkbox(),\n tbody: s.tbody(),\n tbodyLoader: s.tbodyLoader(),\n };\n});\n\nprovideDataTableContext<T, IdType>({\n // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n classes,\n columns,\n colspan,\n expandable,\n groupKey,\n groupLabels,\n isMobile,\n selectedData,\n // Static values\n cellValue,\n columnAttr,\n dense,\n getGroupSize,\n getRowId: (row: T) => row[rowAttr],\n itemSlotKeys,\n groupExpandButtonPosition,\n isDisabledRow,\n isExpanded,\n isExpandedGroup,\n isSelected,\n itemClass,\n onCheckboxClick,\n onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n onSelect,\n onToggleExpand,\n onToggleExpandGroup,\n onUngroup,\n});\n</script>\n\n<template>\n <div\n ref=\"tableWrapper\"\n :class=\"ui.wrapper()\"\n data-id=\"table-wrapper\"\n >\n <div\n v-if=\"showMobileSort\"\n :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n data-id=\"table-mobile-toolbar-sticky\"\n >\n <div\n class=\"flex justify-end p-2\"\n data-id=\"table-mobile-toolbar\"\n >\n <RuiDataTableMobileSort\n :columns=\"columns\"\n :column-attr=\"columnAttr\"\n :sorted-map=\"sortedMap\"\n :dense=\"dense\"\n @sort=\"onSort($event)\"\n />\n </div>\n </div>\n <div\n ref=\"tableScroller\"\n :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n :tabindex=\"scrollerTabindex\"\n data-id=\"table-scroller\"\n >\n <table\n ref=\"table\"\n :class=\"ui.table()\"\n :style=\"viewportStyle\"\n :aria-busy=\"loading\"\n >\n <RuiTableHead\n v-if=\"!isMobile\"\n :loading=\"headerLoading\"\n :indeterminate=\"indeterminate\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :disable-check-all=\"!filtered?.length\"\n :is-all-selected=\"isAllSelected\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n :stick=\"stick\"\n :sticky-header=\"stickyHeader\"\n @sort=\"onSort($event)\"\n @select:all=\"onToggleAll($event)\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiTableHead\n v-if=\"stickyHeader && !isMobile\"\n :loading=\"headerLoading\"\n :capitalize-headers=\"!cols\"\n :colspan=\"colspan\"\n :column-attr=\"columnAttr\"\n :columns=\"columns\"\n :dense=\"dense\"\n :selectable=\"!!selectedData\"\n :sort-data=\"sortData\"\n :sorted-map=\"sortedMap\"\n data-id=\"head-clone\"\n class=\"opacity-0 invisible\"\n >\n <template\n v-for=\"headerSlot in headerSlots\"\n #[headerSlot]=\"slotData\"\n >\n <slot\n :name=\"headerSlot\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiTableHead>\n <RuiDataTableBody\n :filtered=\"filtered\"\n :loading=\"loading\"\n :no-data=\"noData\"\n :empty=\"empty\"\n :error=\"error\"\n :error-title=\"errorTitle\"\n :retry-text=\"retryText\"\n @retry=\"emit('retry')\"\n >\n <template\n v-if=\"slots.error\"\n #error\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"error\" />\n </template>\n <template\n v-if=\"slots['body.prepend']\"\n #body.prepend=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.prepend\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header']\"\n #group.header=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['group.header.content']\"\n #group.header.content=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"group.header.content\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-for=\"key in itemSlotKeys\"\n #[`item.${key}`]=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n :name=\"`item.${key}`\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['row-append']\"\n #row-append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"row-append\"\n v-bind=\"slotData\"\n />\n </template>\n <template\n v-if=\"slots['no-data']\"\n #no-data\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"no-data\" />\n </template>\n <template\n v-if=\"slots['empty-description']\"\n #empty-description\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"empty-description\" />\n </template>\n <template\n v-if=\"slots['body.append']\"\n #body.append=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"body.append\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableBody>\n <tfoot>\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot name=\"tfoot\" />\n </tfoot>\n </table>\n </div>\n <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n <div\n v-if=\"paginationData && showPagination && !isNestedTable\"\n ref=\"paginationSentinel\"\n class=\"border-0!\"\n aria-hidden=\"true\"\n data-id=\"table-pagination-sentinel\"\n />\n <RuiTablePagination\n v-if=\"paginationData && showPagination\"\n ref=\"paginationBar\"\n v-model=\"paginationData\"\n :class=\"ui.pagination({ sticky: stickyPagination })\"\n :dense=\"dense\"\n :loading=\"loading\"\n :mobile=\"isMobile\"\n :disable-per-page=\"disablePerPage\"\n :ranges-threshold=\"rangesThreshold\"\n :data-sticky=\"stickyPagination || undefined\"\n data-id=\"table-pagination\"\n @update:model-value=\"onPaginate()\"\n />\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiExpandButton.js","names":[],"sources":["../../../src/components/tables/RuiExpandButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n expanded: boolean;\n icon?: RuiIcons;\n}\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { expanded, icon = 'lu-chevron-down' } = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n</script>\n\n<template>\n <!-- a fixed name with aria-expanded carrying the state; a caller's aria-label in $attrs wins -->\n <RuiButton\n class=\"relative\"\n aria-label=\"Expand row\"\n :aria-expanded=\"expanded\"\n data-id=\"expand-button\"\n icon\n size=\"sm\"\n variant=\"text\"\n v-bind=\"$attrs\"\n >\n <slot>\n <RuiIcon\n class=\"transition\"\n :class=\"{ 'rotate-180': expanded }\"\n :name=\"icon\"\n />\n </slot>\n </RuiButton>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RuiExpandButton.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiExpandButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n expanded: boolean;\n icon?: RuiIcons;\n}\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { expanded, icon = 'lu-chevron-down' } = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n</script>\n\n<template>\n <!-- a fixed name with aria-expanded carrying the state; a caller's aria-label in $attrs wins -->\n <RuiButton\n class=\"relative\"\n aria-label=\"Expand row\"\n :aria-expanded=\"expanded\"\n data-id=\"expand-button\"\n icon\n size=\"sm\"\n variant=\"text\"\n v-bind=\"$attrs\"\n >\n <slot>\n <RuiIcon\n class=\"transition\"\n :class=\"{ 'rotate-180': expanded }\"\n :name=\"icon\"\n />\n </slot>\n </RuiButton>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiExpandButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/tables/RuiExpandButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n expanded: boolean;\n icon?: RuiIcons;\n}\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { expanded, icon = 'lu-chevron-down' } = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n</script>\n\n<template>\n <!-- a fixed name with aria-expanded carrying the state; a caller's aria-label in $attrs wins -->\n <RuiButton\n class=\"relative\"\n aria-label=\"Expand row\"\n :aria-expanded=\"expanded\"\n data-id=\"expand-button\"\n icon\n size=\"sm\"\n variant=\"text\"\n v-bind=\"$attrs\"\n >\n <slot>\n <RuiIcon\n class=\"transition\"\n :class=\"{ 'rotate-180': expanded }\"\n :name=\"icon\"\n />\n </slot>\n </RuiButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;GAuBE,
|
|
1
|
+
{"version":3,"file":"RuiExpandButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","RuiButton","_mergeProps","_withCtx","_renderSlot","_createVNode","RuiIcon","_normalizeClass"],"sources":["../../../src/components/tables/RuiExpandButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n expanded: boolean;\n icon?: RuiIcons;\n}\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst { expanded, icon = 'lu-chevron-down' } = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n</script>\n\n<template>\n <!-- a fixed name with aria-expanded carrying the state; a caller's aria-label in $attrs wins -->\n <RuiButton\n class=\"relative\"\n aria-label=\"Expand row\"\n :aria-expanded=\"expanded\"\n data-id=\"expand-button\"\n icon\n size=\"sm\"\n variant=\"text\"\n v-bind=\"$attrs\"\n >\n <slot>\n <RuiIcon\n class=\"transition\"\n :class=\"{ 'rotate-180': expanded }\"\n :name=\"icon\"\n />\n </slot>\n </RuiButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;GAuBE,OAAAC,UAAA,GAAAC,YAiBYC,mBAjBZC,WAiBY;IAhBV,OAAM;IACN,cAAW;IACV,iBAAe,QAAA;IAChB,WAAQ;IACR,MAAA;IACA,MAAK;IACL,SAAQ;GACAJ,GAAAA,KAAAA,MAAM,GAAA;IAEd,SAAAK,cAMO,CANPC,WAMO,KAAA,QAAA,WAAA,CAAA,SAAA,CALLC,YAIEC,iBAAA;KAHA,OAAKC,eAAA,CAAC,cAAY,EAAA,cACM,QAAA,SAAQ,CAAA,CAAA;KAC/B,MAAM,QAAA"}
|