ropav 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/README.md +16 -0
  2. package/dist/alert.css +18 -18
  3. package/dist/alert.js +15 -10
  4. package/dist/avatar.css +19 -19
  5. package/dist/avatar.js +14 -9
  6. package/dist/badge.css +16 -16
  7. package/dist/badge.js +12 -7
  8. package/dist/base.css +196 -56
  9. package/dist/button-link.css +32 -28
  10. package/dist/button-link.js +9 -5
  11. package/dist/button.css +32 -28
  12. package/dist/button.js +9 -5
  13. package/dist/checkbox.css +32 -32
  14. package/dist/checkbox.js +17 -9
  15. package/dist/chevron-right.js +12 -0
  16. package/dist/collectionNavigation.js +120 -0
  17. package/dist/color-input.js +2 -1
  18. package/dist/componentColors.js +94 -22
  19. package/dist/components/alert/types.d.ts +1 -0
  20. package/dist/components/alert/useAlertColor.d.ts +1 -1
  21. package/dist/components/avatar/types.d.ts +1 -0
  22. package/dist/components/avatar/useAvatarColor.d.ts +1 -1
  23. package/dist/components/badge/types.d.ts +1 -0
  24. package/dist/components/badge/useBadgeColor.d.ts +1 -1
  25. package/dist/components/button/types.d.ts +1 -0
  26. package/dist/components/button/useButtonColor.d.ts +1 -1
  27. package/dist/components/button-link/types.d.ts +1 -0
  28. package/dist/components/checkbox/types.d.ts +1 -0
  29. package/dist/components/dropdown-menu/dropdown-menu-primitive-core.d.ts +1 -0
  30. package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +0 -2
  31. package/dist/components/dropdown-menu/index.d.ts +1 -0
  32. package/dist/components/dropdown-menu/types.d.ts +4 -0
  33. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +2 -1
  34. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -0
  35. package/dist/components/icon-button/types.d.ts +1 -0
  36. package/dist/components/pagination/index.d.ts +4 -0
  37. package/dist/components/pagination/index.js +2 -0
  38. package/dist/components/pagination/pagination.d.ts +49 -0
  39. package/dist/components/pagination/types.d.ts +54 -0
  40. package/dist/components/pagination/usePagination.d.ts +19 -0
  41. package/dist/components/radio/types.d.ts +3 -0
  42. package/dist/components/scroll-area/scroll-area.d.ts +37 -3
  43. package/dist/components/scroll-area/types.d.ts +1 -0
  44. package/dist/components/scroll-area/useScrollArea.d.ts +4 -0
  45. package/dist/components/scroll-area/useScrollAreaControls.d.ts +4 -0
  46. package/dist/components/scroll-area/useScrollAreaPresentation.d.ts +1 -1
  47. package/dist/components/select/useSelect.d.ts +1 -1
  48. package/dist/components/slider/range-slider-tooltip.d.ts +2 -0
  49. package/dist/components/slider/types.d.ts +1 -1
  50. package/dist/components/slider/useRangeSlider.d.ts +2 -0
  51. package/dist/components/slider/useSlider.d.ts +2 -0
  52. package/dist/components/toast/types.d.ts +2 -0
  53. package/dist/components/toast/useToastColor.d.ts +1 -1
  54. package/dist/components/tooltip/types.d.ts +1 -0
  55. package/dist/components/tooltip/useTooltip.d.ts +1 -1
  56. package/dist/dropdown-menu.js +55 -30
  57. package/dist/icon-button.css +39 -35
  58. package/dist/icon-button.js +9 -5
  59. package/dist/index.d.ts +1 -0
  60. package/dist/index.js +2 -1
  61. package/dist/input.js +2 -1
  62. package/dist/number-input.js +2 -1
  63. package/dist/pagination.css +140 -0
  64. package/dist/pagination.js +442 -0
  65. package/dist/radio.js +15 -5
  66. package/dist/scroll-area.css +25 -25
  67. package/dist/scroll-area.js +102 -19
  68. package/dist/select.js +65 -46
  69. package/dist/slider.css +191 -191
  70. package/dist/slider.js +49 -31
  71. package/dist/switch.js +2 -1
  72. package/dist/tabs.css +13 -13
  73. package/dist/tabs.js +38 -9
  74. package/dist/textarea.js +2 -1
  75. package/dist/toast.css +26 -26
  76. package/dist/toast.js +16 -9
  77. package/dist/tooltip.css +12 -12
  78. package/dist/tooltip.js +13 -8
  79. package/dist/unplugin-icons.js +38 -25
  80. package/dist/useButtonColor.js +6 -3
  81. package/dist/useControllableValue.js +27 -0
  82. package/dist/useFormControl.js +2 -27
  83. package/dist/utils/componentColors.d.ts +14 -1
  84. package/docs/public-styles-api.md +1 -1
  85. package/docs/public-tokens.md +648 -508
  86. package/package.json +8 -2
  87. package/src/styles/_tokens.scss +459 -319
  88. package/src/styles/styles-manifest.json +1122 -2
@@ -5,8 +5,8 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
5
5
  import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
6
6
  import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
7
7
  //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
8
- var t0 = template("<span data-v-cda9a84b>");
9
- var t1 = template("<button data-v-cda9a84b>", 1);
8
+ var t0 = template("<span data-v-5d5bd5fa>");
9
+ var t1 = template("<button data-v-5d5bd5fa>", 1);
10
10
  //#endregion
11
11
  //#region src/components/icon-button/icon-button.vue
12
12
  var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -17,7 +17,11 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
17
17
  ariaLabel: {},
18
18
  variant: {},
19
19
  color: {},
20
- autoContrast: { type: Boolean },
20
+ autoContrast: {
21
+ type: Boolean,
22
+ default: true
23
+ },
24
+ contrastColor: {},
21
25
  size: {},
22
26
  radius: {},
23
27
  type: { default: "button" },
@@ -39,7 +43,7 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
39
43
  [`size-${props.size}`]: Boolean(props.size),
40
44
  [`radius-${props.radius}`]: Boolean(props.radius)
41
45
  }), "rp-icon-button"]);
42
- const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
46
+ const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
43
47
  const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
44
48
  const rootAttrs = computed(() => getRootAttrs({
45
49
  class: rootClass.value,
@@ -65,6 +69,6 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
65
69
  }, 261);
66
70
  return n6;
67
71
  }
68
- }), [["__scopeId", "data-v-cda9a84b"]]);
72
+ }), [["__scopeId", "data-v-5d5bd5fa"]]);
69
73
  //#endregion
70
74
  export { icon_button_default as t };
package/dist/index.d.ts CHANGED
@@ -23,6 +23,7 @@ export * from './components/input/index.js';
23
23
  export * from './components/modal/index.js';
24
24
  export * from './components/number-input/index.js';
25
25
  export * from './components/overlay/index.js';
26
+ export * from './components/pagination/index.js';
26
27
  export * from './components/popover/index.js';
27
28
  export * from './components/progress/index.js';
28
29
  export * from './components/radio/index.js';
package/dist/index.js CHANGED
@@ -34,6 +34,7 @@ import { t as scroll_area_default } from "./scroll-area.js";
34
34
  import { n as modal_default, t as modalParts } from "./modal.js";
35
35
  import { n as number_input_default, t as numberInputParts } from "./number-input.js";
36
36
  import { n as overlay_layer_provider_default, t as overlayParts } from "./overlay2.js";
37
+ import { a as pagination_default, c as normalizePaginationTotal, i as paginationSizes, l as usePagination, n as paginationParts, o as getPaginationItems, r as paginationRadiuses, s as normalizePaginationPage, t as paginationColors } from "./pagination.js";
37
38
  import { n as popoverPlacements, t as popoverParts } from "./popover2.js";
38
39
  import { a as progress_default, i as progressSizes, n as progressParts, r as progressRadiuses, t as progressColors } from "./progress.js";
39
40
  import { i as radioParts, n as radio_default, r as radioGroupParts, t as radio_group_default } from "./radio.js";
@@ -47,4 +48,4 @@ import { t as teleport_provider_default } from "./teleport-provider.js";
47
48
  import { n as textarea_default, t as textareaParts } from "./textarea.js";
48
49
  import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
49
50
  import { t as tooltipParts } from "./tooltip2.js";
50
- export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
51
+ export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, pagination_default as Pagination, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, getPaginationItems, iconButtonParts, inputParts, modalParts, normalizePaginationPage, normalizePaginationTotal, numberInputParts, overlayParts, paginationColors, paginationParts, paginationRadiuses, paginationSizes, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, usePagination, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
package/dist/input.js CHANGED
@@ -2,7 +2,8 @@ import './input.css';
2
2
  import { t as bem } from "./bem.js";
3
3
  import { n as useStylesApi, t as presence } from "./styles-api.js";
4
4
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
5
- import { a as useTextFormControl, o as useControllableValue, t as claimNestedFormControlOwner } from "./useFormControl.js";
5
+ import { t as useControllableValue } from "./useControllableValue.js";
6
+ import { a as useTextFormControl, t as claimNestedFormControlOwner } from "./useFormControl.js";
6
7
  import { t as useControlState } from "./useControlState.js";
7
8
  import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
8
9
  //#region src/components/input/useInput.ts
@@ -3,7 +3,8 @@ import { t as bem } from "./bem.js";
3
3
  import { n as useStylesApi, t as presence } from "./styles-api.js";
4
4
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
5
5
  import { t as minus_default } from "./minus.js";
6
- import { i as useFormControl, n as provideNestedFormControlOwner, o as useControllableValue } from "./useFormControl.js";
6
+ import { t as useControllableValue } from "./useControllableValue.js";
7
+ import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
7
8
  import { t as useControlState } from "./useControlState.js";
8
9
  import { t as input_default } from "./input.js";
9
10
  import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers, withVaporModifiers } from "vue";
@@ -0,0 +1,140 @@
1
+ @layer ropav.components {
2
+ .rp-pagination[data-v-6ae45781] {
3
+ --_rp-pagination-item-size: var(--rp-size-control-md);
4
+ --_rp-pagination-font-size: var(--rp-font-size-md);
5
+ --_rp-pagination-radius: var(--rp-radius-sm);
6
+ --_rp-pagination-gap: var(--rp-spacing-1);
7
+ --_rp-pagination-active-bg: var(--rp-color-control-selected-bg);
8
+ --_rp-pagination-active-bg-hover: var(--rp-primary-color-filled-hover);
9
+ --_rp-pagination-active-fg: var(--rp-color-control-selected-fg);
10
+ --_rp-pagination-active-fg-hover: var(--_rp-pagination-active-fg);
11
+ display: inline-flex;
12
+ max-width: 100%;
13
+ color: var(--rp-color-control-fg);
14
+ font-family: var(--rp-font-family);
15
+ font-size: var(--_rp-pagination-font-size);
16
+ line-height: 1;
17
+ vertical-align: middle;
18
+ }
19
+ .rp-pagination__items[data-v-6ae45781] {
20
+ display: flex;
21
+ align-items: center;
22
+ max-width: 100%;
23
+ padding: 0;
24
+ margin: 0;
25
+ gap: var(--_rp-pagination-gap);
26
+ list-style: none;
27
+ }
28
+ .rp-pagination__item[data-v-6ae45781] {
29
+ display: flex;
30
+ flex: 0 0 auto;
31
+ }
32
+ .rp-pagination__page[data-v-6ae45781], .rp-pagination__control[data-v-6ae45781], .rp-pagination__ellipsis[data-v-6ae45781] {
33
+ display: inline-flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ box-sizing: border-box;
37
+ width: var(--_rp-pagination-item-size);
38
+ min-width: var(--_rp-pagination-item-size);
39
+ height: var(--_rp-pagination-item-size);
40
+ padding: 0;
41
+ color: inherit;
42
+ font: inherit;
43
+ line-height: 1;
44
+ background: transparent;
45
+ border: var(--rp-border-width-thin) solid transparent;
46
+ border-radius: var(--_rp-pagination-radius);
47
+ }
48
+ .rp-pagination__page[data-v-6ae45781], .rp-pagination__control[data-v-6ae45781] {
49
+ appearance: none;
50
+ cursor: pointer;
51
+ }
52
+ .rp-pagination__page[data-v-6ae45781]:hover:not(:disabled), .rp-pagination__control[data-v-6ae45781]:hover:not(:disabled) {
53
+ background-color: var(--rp-color-default-hover);
54
+ }
55
+ .rp-pagination__page[data-v-6ae45781]:focus-visible, .rp-pagination__control[data-v-6ae45781]:focus-visible {
56
+ outline: none;
57
+ border-color: var(--rp-color-control-border-focus);
58
+ box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
59
+ }
60
+ .rp-pagination__page[data-v-6ae45781]:disabled, .rp-pagination__control[data-v-6ae45781]:disabled {
61
+ opacity: var(--rp-opacity-disabled);
62
+ cursor: not-allowed;
63
+ }
64
+ .rp-pagination__page[data-v-6ae45781] {
65
+ width: auto;
66
+ padding-inline: var(--rp-spacing-2);
67
+ font-variant-numeric: tabular-nums;
68
+ transition: box-shadow var(--rp-transition-fast);
69
+ }
70
+ .rp-pagination__page--active[data-v-6ae45781] {
71
+ color: var(--_rp-pagination-active-fg);
72
+ font-weight: var(--rp-font-weight-medium);
73
+ background-color: var(--_rp-pagination-active-bg);
74
+ border-color: var(--_rp-pagination-active-bg);
75
+ }
76
+ .rp-pagination__page--active[data-v-6ae45781]:hover:not(:disabled) {
77
+ background-color: var(--_rp-pagination-active-bg-hover);
78
+ border-color: var(--_rp-pagination-active-bg-hover);
79
+ color: var(--_rp-pagination-active-fg-hover);
80
+ }
81
+ .rp-pagination__control[data-v-6ae45781] {
82
+ transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
83
+ }
84
+ .rp-pagination__control-icon[data-v-6ae45781], .rp-pagination__ellipsis[data-v-6ae45781] > svg {
85
+ display: block;
86
+ width: 1em;
87
+ height: 1em;
88
+ }
89
+ .rp-pagination__ellipsis[data-v-6ae45781] {
90
+ color: var(--rp-color-dimmed);
91
+ }
92
+ .rp-pagination:dir(rtl) .rp-pagination__control-icon[data-v-6ae45781] {
93
+ transform: rotate(180deg);
94
+ }
95
+ .rp-pagination--disabled .rp-pagination__page[data-v-6ae45781]:not(:disabled), .rp-pagination--disabled .rp-pagination__control[data-v-6ae45781]:not(:disabled) {
96
+ opacity: var(--rp-opacity-disabled);
97
+ cursor: not-allowed;
98
+ }
99
+ .rp-pagination--size-xs[data-v-6ae45781] {
100
+ --_rp-pagination-item-size: var(--rp-size-control-xs);
101
+ --_rp-pagination-font-size: var(--rp-font-size-xs);
102
+ }
103
+ .rp-pagination--size-sm[data-v-6ae45781] {
104
+ --_rp-pagination-item-size: var(--rp-size-control-sm);
105
+ --_rp-pagination-font-size: var(--rp-font-size-sm);
106
+ }
107
+ .rp-pagination--size-md[data-v-6ae45781] {
108
+ --_rp-pagination-item-size: var(--rp-size-control-md);
109
+ --_rp-pagination-font-size: var(--rp-font-size-md);
110
+ }
111
+ .rp-pagination--size-lg[data-v-6ae45781] {
112
+ --_rp-pagination-item-size: var(--rp-size-control-lg);
113
+ --_rp-pagination-font-size: var(--rp-font-size-lg);
114
+ }
115
+ .rp-pagination--size-xl[data-v-6ae45781] {
116
+ --_rp-pagination-item-size: var(--rp-size-control-xl);
117
+ --_rp-pagination-font-size: var(--rp-font-size-xl);
118
+ }
119
+ .rp-pagination--radius-none[data-v-6ae45781] {
120
+ --_rp-pagination-radius: var(--rp-radius-none);
121
+ }
122
+ .rp-pagination--radius-xs[data-v-6ae45781] {
123
+ --_rp-pagination-radius: var(--rp-radius-xs);
124
+ }
125
+ .rp-pagination--radius-sm[data-v-6ae45781] {
126
+ --_rp-pagination-radius: var(--rp-radius-sm);
127
+ }
128
+ .rp-pagination--radius-md[data-v-6ae45781] {
129
+ --_rp-pagination-radius: var(--rp-radius-md);
130
+ }
131
+ .rp-pagination--radius-lg[data-v-6ae45781] {
132
+ --_rp-pagination-radius: var(--rp-radius-lg);
133
+ }
134
+ .rp-pagination--radius-xl[data-v-6ae45781] {
135
+ --_rp-pagination-radius: var(--rp-radius-xl);
136
+ }
137
+ .rp-pagination--radius-full[data-v-6ae45781] {
138
+ --_rp-pagination-radius: var(--rp-radius-full);
139
+ }
140
+ }
@@ -0,0 +1,442 @@
1
+ import './pagination.css';
2
+ import { t as bem } from "./bem.js";
3
+ import { n as useStylesApi, t as presence } from "./styles-api.js";
4
+ import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
5
+ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
6
+ import { t as useControllableValue } from "./useControllableValue.js";
7
+ import { t as chevron_right_default } from "./chevron-right.js";
8
+ import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, markRaw, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
9
+ //#region ~icons/lucide/chevron-left
10
+ var t0$4 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m15 18l-6-6l6-6\">", 3, 1);
11
+ function render$3(_ctx) {
12
+ return t0$4();
13
+ }
14
+ var chevron_left_default = markRaw(defineVaporComponent({
15
+ name: "lucide-chevron-left",
16
+ render: render$3
17
+ }));
18
+ //#endregion
19
+ //#region ~icons/lucide/chevrons-left
20
+ var t0$3 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m11 17l-5-5l5-5m7 10l-5-5l5-5\">", 3, 1);
21
+ function render$2(_ctx) {
22
+ return t0$3();
23
+ }
24
+ var chevrons_left_default = markRaw(defineVaporComponent({
25
+ name: "lucide-chevrons-left",
26
+ render: render$2
27
+ }));
28
+ //#endregion
29
+ //#region ~icons/lucide/chevrons-right
30
+ var t0$2 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m6 17l5-5l-5-5m7 10l5-5l-5-5\">", 3, 1);
31
+ function render$1(_ctx) {
32
+ return t0$2();
33
+ }
34
+ var chevrons_right_default = markRaw(defineVaporComponent({
35
+ name: "lucide-chevrons-right",
36
+ render: render$1
37
+ }));
38
+ //#endregion
39
+ //#region ~icons/lucide/ellipsis
40
+ var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=1></circle><circle cx=19 cy=12 r=1></circle><circle cx=5 cy=12 r=1>", 3, 1);
41
+ function render(_ctx) {
42
+ return t0$1();
43
+ }
44
+ var ellipsis_default = markRaw(defineVaporComponent({
45
+ name: "lucide-ellipsis",
46
+ render
47
+ }));
48
+ //#endregion
49
+ //#region src/components/pagination/usePagination.ts
50
+ function normalizeCount(value, fallback) {
51
+ return Number.isFinite(value) ? Math.max(0, Math.floor(value)) : fallback;
52
+ }
53
+ function normalizePaginationTotal(total) {
54
+ return normalizeCount(total, 0);
55
+ }
56
+ function normalizePaginationPage(page, total) {
57
+ const safeTotal = normalizePaginationTotal(total);
58
+ return Math.min(Math.max(Number.isFinite(page) ? Math.floor(page) : 1, 1), Math.max(safeTotal, 1));
59
+ }
60
+ function getRange(start, end) {
61
+ return Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
62
+ }
63
+ function getPaginationItems(total, page, siblings = 1, boundaries = 1) {
64
+ const safeTotal = normalizePaginationTotal(total);
65
+ if (safeTotal === 0) return [];
66
+ const currentPage = normalizePaginationPage(page, safeTotal);
67
+ const siblingCount = normalizeCount(siblings, 1);
68
+ const boundaryCount = normalizeCount(boundaries, 1);
69
+ if (safeTotal <= siblingCount * 2 + boundaryCount * 2 + 3) return getRange(1, safeTotal).map((pageValue) => ({
70
+ type: "page",
71
+ key: `page-${pageValue}`,
72
+ page: pageValue
73
+ }));
74
+ const leftSibling = Math.max(currentPage - siblingCount, boundaryCount);
75
+ const rightSibling = Math.min(currentPage + siblingCount, safeTotal - boundaryCount);
76
+ const showLeftEllipsis = leftSibling > boundaryCount + 2;
77
+ const showRightEllipsis = rightSibling < safeTotal - boundaryCount - 1;
78
+ let pages;
79
+ if (!showLeftEllipsis && showRightEllipsis) pages = [...getRange(1, siblingCount * 2 + boundaryCount + 2), ...getRange(safeTotal - boundaryCount + 1, safeTotal)];
80
+ else if (showLeftEllipsis && !showRightEllipsis) {
81
+ const rightItemCount = siblingCount * 2 + boundaryCount + 2;
82
+ pages = [...getRange(1, boundaryCount), ...getRange(safeTotal - rightItemCount + 1, safeTotal)];
83
+ } else pages = [
84
+ ...getRange(1, boundaryCount),
85
+ ...getRange(leftSibling, rightSibling),
86
+ ...getRange(safeTotal - boundaryCount + 1, safeTotal)
87
+ ];
88
+ const items = [];
89
+ let previous = 0;
90
+ function addGap(next) {
91
+ const missingPages = next - previous - 1;
92
+ if (missingPages === 1) {
93
+ const pageValue = previous + 1;
94
+ items.push({
95
+ type: "page",
96
+ key: `page-${pageValue}`,
97
+ page: pageValue
98
+ });
99
+ } else if (missingPages > 1) items.push({
100
+ type: "ellipsis",
101
+ key: `ellipsis-${previous}-${next}`
102
+ });
103
+ }
104
+ for (const pageValue of pages) {
105
+ addGap(pageValue);
106
+ items.push({
107
+ type: "page",
108
+ key: `page-${pageValue}`,
109
+ page: pageValue
110
+ });
111
+ previous = pageValue;
112
+ }
113
+ addGap(safeTotal + 1);
114
+ return items;
115
+ }
116
+ function getPaginationColorStyle(color, autoContrast, contrastColor) {
117
+ const roles = getComponentVariantColorRoles({
118
+ color: color ?? "primary",
119
+ variant: "solid",
120
+ autoContrast,
121
+ contrastColor
122
+ });
123
+ if (!roles) return void 0;
124
+ return {
125
+ "--_rp-pagination-active-bg": roles.background,
126
+ "--_rp-pagination-active-bg-hover": roles.hover,
127
+ "--_rp-pagination-active-fg": roles.color,
128
+ "--_rp-pagination-active-fg-hover": roles.colorHover
129
+ };
130
+ }
131
+ function usePagination(props, getCurrentValue, onChange) {
132
+ const totalPages = computed(() => normalizePaginationTotal(props.total));
133
+ const currentPage = computed(() => normalizePaginationPage(getCurrentValue(), totalPages.value));
134
+ const items = computed(() => getPaginationItems(totalPages.value, currentPage.value, props.siblings ?? 1, props.boundaries ?? 1));
135
+ const rootClass = computed(() => bem("rp-pagination", {
136
+ [`size-${props.size}`]: Boolean(props.size),
137
+ [`radius-${props.radius}`]: Boolean(props.radius),
138
+ disabled: props.disabled
139
+ }));
140
+ const rootStyle = computed(() => getPaginationColorStyle(props.color, props.autoContrast ?? true, props.contrastColor));
141
+ const firstPage = computed(() => 1);
142
+ const previousPage = computed(() => Math.max(1, currentPage.value - 1));
143
+ const nextPage = computed(() => Math.min(Math.max(totalPages.value, 1), currentPage.value + 1));
144
+ const lastPage = computed(() => Math.max(totalPages.value, 1));
145
+ const isFirstDisabled = computed(() => props.disabled || totalPages.value === 0 || currentPage.value <= 1);
146
+ const isLastDisabled = computed(() => props.disabled || totalPages.value === 0 || currentPage.value >= totalPages.value);
147
+ function selectPage(page) {
148
+ if (props.disabled || totalPages.value === 0) return false;
149
+ const next = normalizePaginationPage(page, totalPages.value);
150
+ if (next === currentPage.value) return false;
151
+ onChange(next);
152
+ return true;
153
+ }
154
+ return {
155
+ totalPages,
156
+ currentPage,
157
+ items,
158
+ rootClass,
159
+ rootStyle,
160
+ firstPage,
161
+ previousPage,
162
+ nextPage,
163
+ lastPage,
164
+ isFirstDisabled,
165
+ isLastDisabled,
166
+ selectPage
167
+ };
168
+ }
169
+ //#endregion
170
+ //#region src/components/pagination/pagination.vue?vue&type=script&setup=true&vapor=true&lang.ts
171
+ var t0 = template("<li data-v-6ae45781 class=rp-pagination__item><button data-v-6ae45781></button>");
172
+ var t1 = template(" ");
173
+ var t2 = template("<button data-v-6ae45781></button>");
174
+ var t3 = template("<span data-v-6ae45781>");
175
+ var t4 = template("<li data-v-6ae45781 class=rp-pagination__item>");
176
+ var t5 = template("<li data-v-6ae45781 class=rp-pagination__item><button data-v-6ae45781>");
177
+ var t6 = template("<nav data-v-6ae45781><ul data-v-6ae45781>", 1);
178
+ delegateEvents("click");
179
+ //#endregion
180
+ //#region src/components/pagination/pagination.vue
181
+ var pagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
182
+ name: "RpPagination",
183
+ inheritAttrs: false,
184
+ __name: "pagination",
185
+ props: {
186
+ id: {},
187
+ modelValue: { default: void 0 },
188
+ defaultValue: { default: 1 },
189
+ total: {},
190
+ siblings: { default: 1 },
191
+ boundaries: { default: 1 },
192
+ withControls: {
193
+ type: Boolean,
194
+ default: true
195
+ },
196
+ withEdges: {
197
+ type: Boolean,
198
+ default: false
199
+ },
200
+ disabled: {
201
+ type: Boolean,
202
+ default: false
203
+ },
204
+ color: {},
205
+ autoContrast: {
206
+ type: Boolean,
207
+ default: true
208
+ },
209
+ contrastColor: {},
210
+ size: { default: "md" },
211
+ radius: { default: "sm" },
212
+ ariaLabel: { default: "Pagination" },
213
+ labelledby: {},
214
+ describedby: {},
215
+ firstLabel: { default: "Go to first page" },
216
+ previousLabel: { default: "Go to previous page" },
217
+ nextLabel: { default: "Go to next page" },
218
+ lastLabel: { default: "Go to last page" },
219
+ getPageAriaLabel: {},
220
+ classNames: {},
221
+ styles: {}
222
+ },
223
+ emits: ["update:modelValue", "change"],
224
+ setup(__props, { emit: __emit }) {
225
+ const props = __props;
226
+ const emit = __emit;
227
+ const controllable = useControllableValue({
228
+ modelValue: () => props.modelValue,
229
+ defaultValue: () => props.defaultValue,
230
+ onChange(page) {
231
+ emit("update:modelValue", page);
232
+ emit("change", page);
233
+ }
234
+ });
235
+ const { totalPages, currentPage, items, rootClass, rootStyle, firstPage, previousPage, nextPage, lastPage, isFirstDisabled, isLastDisabled, selectPage } = usePagination(props, () => controllable.value.value, (page) => controllable.setValue(page));
236
+ const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
237
+ const rootAttrs = computed(() => getRootAttrs({
238
+ id: props.id,
239
+ class: rootClass.value,
240
+ style: rootStyle.value,
241
+ "data-page": currentPage.value,
242
+ "data-total": totalPages.value,
243
+ "data-disabled": presence(props.disabled),
244
+ "aria-label": props.ariaLabel || void 0,
245
+ "aria-labelledby": props.labelledby,
246
+ "aria-describedby": props.describedby
247
+ }));
248
+ function getControlAttrs(control, isDisabled) {
249
+ return {
250
+ ...getPartAttrs("control", { class: ["rp-pagination__control", `rp-pagination__control--${control}`] }),
251
+ "data-control": control,
252
+ "data-disabled": presence(isDisabled)
253
+ };
254
+ }
255
+ function getPageAttrs(page) {
256
+ const active = page === currentPage.value;
257
+ return {
258
+ ...getPartAttrs("page", { class: ["rp-pagination__page", { "rp-pagination__page--active": active }] }),
259
+ "data-page": page,
260
+ "data-active": presence(active),
261
+ "data-disabled": presence(props.disabled)
262
+ };
263
+ }
264
+ function getPageLabel(page) {
265
+ const active = page === currentPage.value;
266
+ if (props.getPageAriaLabel) return props.getPageAriaLabel(page, active);
267
+ return active ? `Page ${page}, current page` : `Go to page ${page}`;
268
+ }
269
+ const n43 = t6();
270
+ const n42 = child(n43);
271
+ renderEffect(() => {
272
+ setDynamicProps(n43, [rootAttrs.value]);
273
+ setDynamicProps(n42, [unref(getPartAttrs)("items", { class: "rp-pagination__items" })]);
274
+ });
275
+ setInsertionState(n42, null, 0);
276
+ createIf(() => __props.withEdges, () => {
277
+ const n6 = t0();
278
+ const n5 = child(n6);
279
+ renderEffect(() => {
280
+ const _isFirstDisabled = unref(isFirstDisabled);
281
+ setDynamicProps(n5, [getControlAttrs("first", _isFirstDisabled), {
282
+ type: "button",
283
+ "aria-label": __props.firstLabel,
284
+ disabled: _isFirstDisabled
285
+ }]);
286
+ });
287
+ setInsertionState(n5, null, 0);
288
+ createSlot("first", {
289
+ page: () => unref(firstPage),
290
+ disabled: () => unref(isFirstDisabled)
291
+ }, () => {
292
+ return createComponent(unref(chevrons_left_default), {
293
+ class: "rp-pagination__control-icon",
294
+ "aria-hidden": "true"
295
+ });
296
+ }, 1);
297
+ n5.$evtclick = createInvoker(() => unref(selectPage)(unref(firstPage)));
298
+ return n6;
299
+ });
300
+ setInsertionState(n42, null, 1);
301
+ createIf(() => __props.withControls, () => {
302
+ const n13 = t0();
303
+ const n12 = child(n13);
304
+ renderEffect(() => {
305
+ const _isFirstDisabled = unref(isFirstDisabled);
306
+ setDynamicProps(n12, [getControlAttrs("previous", _isFirstDisabled), {
307
+ type: "button",
308
+ "aria-label": __props.previousLabel,
309
+ disabled: _isFirstDisabled
310
+ }]);
311
+ });
312
+ setInsertionState(n12, null, 0);
313
+ createSlot("previous", {
314
+ page: () => unref(previousPage),
315
+ disabled: () => unref(isFirstDisabled)
316
+ }, () => {
317
+ return createComponent(unref(chevron_left_default), {
318
+ class: "rp-pagination__control-icon",
319
+ "aria-hidden": "true"
320
+ });
321
+ }, 1);
322
+ n12.$evtclick = createInvoker(() => unref(selectPage)(unref(previousPage)));
323
+ return n13;
324
+ });
325
+ setInsertionState(n42, null, 2);
326
+ createFor(() => unref(items), (_for_item0) => {
327
+ const n27 = t4();
328
+ setInsertionState(n27, null, 0);
329
+ createIf(() => _for_item0.value.type === "page", () => {
330
+ const n21 = t2();
331
+ renderEffect(() => {
332
+ const _item = _for_item0.value;
333
+ setDynamicProps(n21, [getPageAttrs(_item.page), {
334
+ type: "button",
335
+ "aria-label": getPageLabel(_item.page),
336
+ "aria-current": _item.page === unref(currentPage) ? "page" : void 0,
337
+ disabled: __props.disabled
338
+ }]);
339
+ });
340
+ setInsertionState(n21, null, 0);
341
+ createSlot("page", {
342
+ page: () => _for_item0.value.page,
343
+ active: () => _for_item0.value.page === unref(currentPage)
344
+ }, () => {
345
+ const n20 = t1();
346
+ renderEffect(() => setText(n20, toDisplayString(_for_item0.value.page)));
347
+ return n20;
348
+ }, 1);
349
+ n21.$evtclick = createInvoker(() => unref(selectPage)(_for_item0.value.page));
350
+ return n21;
351
+ }, () => {
352
+ const n26 = t3();
353
+ renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("ellipsis", { class: "rp-pagination__ellipsis" }), { "aria-hidden": "true" }]));
354
+ setInsertionState(n26, null, 0);
355
+ createSlot("ellipsis", null, () => {
356
+ return createComponent(unref(ellipsis_default));
357
+ }, 1);
358
+ return n26;
359
+ }, 773);
360
+ return n27;
361
+ }, (item) => item.key, 8);
362
+ setInsertionState(n42, null, 3);
363
+ createIf(() => __props.withControls, () => {
364
+ const n34 = t0();
365
+ const n33 = child(n34);
366
+ renderEffect(() => {
367
+ const _isLastDisabled = unref(isLastDisabled);
368
+ setDynamicProps(n33, [getControlAttrs("next", _isLastDisabled), {
369
+ type: "button",
370
+ "aria-label": __props.nextLabel,
371
+ disabled: _isLastDisabled
372
+ }]);
373
+ });
374
+ setInsertionState(n33, null, 0);
375
+ createSlot("next", {
376
+ page: () => unref(nextPage),
377
+ disabled: () => unref(isLastDisabled)
378
+ }, () => {
379
+ return createComponent(unref(chevron_right_default), {
380
+ class: "rp-pagination__control-icon",
381
+ "aria-hidden": "true"
382
+ });
383
+ }, 1);
384
+ n33.$evtclick = createInvoker(() => unref(selectPage)(unref(nextPage)));
385
+ return n34;
386
+ });
387
+ setInsertionState(n42, null, 4);
388
+ createIf(() => __props.withEdges, () => {
389
+ const n41 = t5();
390
+ const n40 = child(n41);
391
+ renderEffect(() => {
392
+ const _isLastDisabled = unref(isLastDisabled);
393
+ setDynamicProps(n40, [getControlAttrs("last", _isLastDisabled), {
394
+ type: "button",
395
+ "aria-label": __props.lastLabel,
396
+ disabled: _isLastDisabled
397
+ }]);
398
+ });
399
+ setInsertionState(n40, null, 0);
400
+ createSlot("last", {
401
+ page: () => unref(lastPage),
402
+ disabled: () => unref(isLastDisabled)
403
+ }, () => {
404
+ return createComponent(unref(chevrons_right_default), {
405
+ class: "rp-pagination__control-icon",
406
+ "aria-hidden": "true"
407
+ });
408
+ }, 1);
409
+ n40.$evtclick = createInvoker(() => unref(selectPage)(unref(lastPage)));
410
+ return n41;
411
+ });
412
+ return n43;
413
+ }
414
+ }), [["__scopeId", "data-v-6ae45781"]]);
415
+ //#endregion
416
+ //#region src/components/pagination/types.ts
417
+ var paginationParts = [
418
+ "root",
419
+ "items",
420
+ "control",
421
+ "page",
422
+ "ellipsis"
423
+ ];
424
+ var paginationColors = componentColors;
425
+ var paginationSizes = [
426
+ "xs",
427
+ "sm",
428
+ "md",
429
+ "lg",
430
+ "xl"
431
+ ];
432
+ var paginationRadiuses = [
433
+ "none",
434
+ "xs",
435
+ "sm",
436
+ "md",
437
+ "lg",
438
+ "xl",
439
+ "full"
440
+ ];
441
+ //#endregion
442
+ export { pagination_default as a, normalizePaginationTotal as c, paginationSizes as i, usePagination as l, paginationParts as n, getPaginationItems as o, paginationRadiuses as r, normalizePaginationPage as s, paginationColors as t };