ropav 0.0.9 → 0.0.11
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 +6 -0
- package/dist/accordion.css +115 -111
- package/dist/accordion.js +60 -16
- package/dist/alert.css +110 -108
- package/dist/alert.js +48 -26
- package/dist/aspect-ratio.css +17 -15
- package/dist/aspect-ratio.js +20 -6
- package/dist/avatar.css +98 -96
- package/dist/avatar.js +27 -16
- package/dist/badge.css +95 -93
- package/dist/badge.js +29 -16
- package/dist/base.css +672 -671
- package/dist/button-group.css +39 -37
- package/dist/button-group.js +23 -12
- package/dist/button-link.css +160 -158
- package/dist/button-link.js +43 -24
- package/dist/button.css +160 -158
- package/dist/button.js +37 -19
- package/dist/card.css +109 -107
- package/dist/card.js +42 -17
- package/dist/checkbox.css +139 -137
- package/dist/checkbox.js +79 -28
- package/dist/collapse.css +29 -27
- package/dist/collapse.js +44 -10
- package/dist/color-input.css +137 -107
- package/dist/color-input.js +91 -17
- package/dist/color-picker.css +309 -303
- package/dist/color-picker.js +250 -77
- package/dist/color-picker2.js +9 -1
- package/dist/color-swatch.css +48 -46
- package/dist/color-swatch.js +15 -11
- package/dist/color-swatch2.js +4 -0
- package/dist/components/accordion/accordion-item.d.ts +16 -4
- package/dist/components/accordion/accordion.d.ts +1 -1
- package/dist/components/accordion/index.d.ts +5 -4
- package/dist/components/accordion/index.js +2 -2
- package/dist/components/accordion/types.d.ts +10 -5
- package/dist/components/accordion/useAccordion.d.ts +1 -1
- package/dist/components/alert/alert.d.ts +3 -3
- package/dist/components/alert/index.d.ts +3 -3
- package/dist/components/alert/index.js +2 -2
- package/dist/components/alert/types.d.ts +5 -2
- package/dist/components/alert/useAlertColor.d.ts +1 -1
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -1
- package/dist/components/aspect-ratio/index.d.ts +3 -2
- package/dist/components/aspect-ratio/index.js +2 -2
- package/dist/components/aspect-ratio/types.d.ts +4 -1
- package/dist/components/avatar/avatar.d.ts +1 -1
- package/dist/components/avatar/index.d.ts +3 -3
- package/dist/components/avatar/index.js +2 -2
- package/dist/components/avatar/types.d.ts +5 -2
- package/dist/components/avatar/useAvatarColor.d.ts +1 -1
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/badge/index.d.ts +3 -3
- package/dist/components/badge/index.js +2 -2
- package/dist/components/badge/types.d.ts +5 -2
- package/dist/components/badge/useBadgeColor.d.ts +1 -1
- package/dist/components/button/button.d.ts +1 -1
- package/dist/components/button/index.d.ts +3 -2
- package/dist/components/button/index.js +2 -2
- package/dist/components/button/types.d.ts +5 -2
- package/dist/components/button/useButtonColor.d.ts +1 -1
- package/dist/components/button-group/button-group.d.ts +1 -1
- package/dist/components/button-group/index.d.ts +3 -2
- package/dist/components/button-group/index.js +2 -2
- package/dist/components/button-group/types.d.ts +4 -1
- package/dist/components/button-link/button-link.d.ts +1 -1
- package/dist/components/button-link/index.d.ts +3 -2
- package/dist/components/button-link/index.js +2 -2
- package/dist/components/button-link/types.d.ts +5 -2
- package/dist/components/card/card.d.ts +1 -1
- package/dist/components/card/index.d.ts +3 -2
- package/dist/components/card/index.js +2 -2
- package/dist/components/card/types.d.ts +5 -1
- package/dist/components/checkbox/checkbox.d.ts +5 -2
- package/dist/components/checkbox/index.d.ts +3 -2
- package/dist/components/checkbox/index.js +2 -2
- package/dist/components/checkbox/types.d.ts +7 -2
- package/dist/components/checkbox/useCheckbox.d.ts +4 -2
- package/dist/components/collapse/collapse.d.ts +2 -2
- package/dist/components/collapse/index.d.ts +4 -3
- package/dist/components/collapse/index.js +2 -2
- package/dist/components/collapse/types.d.ts +9 -2
- package/dist/components/collapse/useCollapse.d.ts +1 -1
- package/dist/components/color-input/color-input.d.ts +1 -1
- package/dist/components/color-input/index.d.ts +3 -2
- package/dist/components/color-input/index.js +2 -2
- package/dist/components/color-input/types.d.ts +8 -4
- package/dist/components/color-input/useColorInput.d.ts +5 -5
- package/dist/components/color-input/useColorInputEyeDropper.d.ts +1 -1
- package/dist/components/color-input/useColorInputPopover.d.ts +2 -2
- package/dist/components/color-input/useColorInputValue.d.ts +1 -1
- package/dist/components/color-picker/color-picker-saturation.d.ts +1 -1
- package/dist/components/color-picker/color-picker-slider.d.ts +1 -1
- package/dist/components/color-picker/color-picker-utils.d.ts +1 -1
- package/dist/components/color-picker/color-picker.d.ts +1 -1
- package/dist/components/color-picker/index.d.ts +3 -3
- package/dist/components/color-picker/index.js +2 -2
- package/dist/components/color-picker/types.d.ts +13 -1
- package/dist/components/color-picker/useColorPickerDrag.d.ts +7 -2
- package/dist/components/color-picker/useColorPickerSwatches.d.ts +1 -1
- package/dist/components/color-picker/useColorPickerValue.d.ts +2 -2
- package/dist/components/color-swatch/color-swatch.d.ts +1 -1
- package/dist/components/color-swatch/index.d.ts +3 -2
- package/dist/components/color-swatch/index.js +2 -1
- package/dist/components/color-swatch/types.d.ts +4 -1
- package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +15 -6
- package/dist/components/dropdown-menu/dropdown-menu-primitives.d.ts +724 -0
- package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +3 -3
- package/dist/components/dropdown-menu/index.d.ts +55 -3
- package/dist/components/dropdown-menu/index.js +2 -2
- package/dist/components/dropdown-menu/types.d.ts +142 -6
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +21 -12
- package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +6 -4
- package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +4 -3
- package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +2 -2
- package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +5 -5
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +3 -3
- package/dist/components/dropdown-menu/useDropdownMenuPortalPosition.d.ts +19 -0
- package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +25 -5
- package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +3 -3
- package/dist/components/field/field.d.ts +2 -2
- package/dist/components/field/index.d.ts +3 -2
- package/dist/components/field/index.js +2 -2
- package/dist/components/field/types.d.ts +4 -1
- package/dist/components/field/useField.d.ts +1 -1
- package/dist/components/floating/index.d.ts +1 -0
- package/dist/components/floating/index.js +0 -0
- package/dist/components/floating/types.d.ts +31 -0
- package/dist/components/floating/useFloatingPosition.d.ts +38 -0
- package/dist/components/focus-trap/focus-trap.d.ts +31 -0
- package/dist/components/focus-trap/index.d.ts +4 -0
- package/dist/components/focus-trap/index.js +3 -0
- package/dist/components/focus-trap/types.d.ts +41 -0
- package/dist/components/focus-trap/useFocusTrap.d.ts +2 -0
- package/dist/components/icon-button/icon-button.d.ts +1 -1
- package/dist/components/icon-button/index.d.ts +3 -2
- package/dist/components/icon-button/index.js +2 -1
- package/dist/components/icon-button/types.d.ts +5 -2
- package/dist/components/input/index.d.ts +3 -2
- package/dist/components/input/index.js +2 -1
- package/dist/components/input/input.d.ts +1 -1
- package/dist/components/input/types.d.ts +4 -1
- package/dist/components/input/useInput.d.ts +2 -2
- package/dist/components/modal/index.d.ts +3 -2
- package/dist/components/modal/index.js +2 -2
- package/dist/components/modal/modal.d.ts +1 -1
- package/dist/components/modal/types.d.ts +9 -2
- package/dist/components/modal/useModal.d.ts +1 -1
- package/dist/components/number-input/index.d.ts +3 -2
- package/dist/components/number-input/index.js +2 -2
- package/dist/components/number-input/number-input.d.ts +1 -1
- package/dist/components/number-input/types.d.ts +5 -2
- package/dist/components/number-input/useNumberInput.d.ts +2 -2
- package/dist/components/overlay/index.d.ts +3 -2
- package/dist/components/overlay/index.js +2 -1
- package/dist/components/overlay/overlay.d.ts +1 -1
- package/dist/components/overlay/types.d.ts +4 -1
- package/dist/components/overlay/useOverlay.d.ts +1 -1
- package/dist/components/popover/index.d.ts +3 -3
- package/dist/components/popover/index.js +2 -2
- package/dist/components/popover/popover.d.ts +2 -2
- package/dist/components/popover/types.d.ts +21 -11
- package/dist/components/popover/usePopover.d.ts +11 -2
- package/dist/components/progress/index.d.ts +3 -3
- package/dist/components/progress/index.js +2 -2
- package/dist/components/progress/progress.d.ts +1 -1
- package/dist/components/progress/types.d.ts +5 -2
- package/dist/components/progress/useProgress.d.ts +2 -2
- package/dist/components/radio/index.d.ts +4 -3
- package/dist/components/radio/index.js +2 -2
- package/dist/components/radio/radio-group.d.ts +1 -1
- package/dist/components/radio/radio.d.ts +9 -4
- package/dist/components/radio/types.d.ts +21 -4
- package/dist/components/radio/useRadio.d.ts +10 -5
- package/dist/components/select/index.d.ts +3 -2
- package/dist/components/select/index.js +2 -2
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/select/types.d.ts +4 -1
- package/dist/components/select/useSelect.d.ts +4 -3
- package/dist/components/slider/index.d.ts +4 -4
- package/dist/components/slider/index.js +2 -2
- package/dist/components/slider/range-slider-tooltip.d.ts +37 -0
- package/dist/components/slider/range-slider.d.ts +8 -13
- package/dist/components/slider/slider.d.ts +5 -2
- package/dist/components/slider/sliderCore.d.ts +35 -0
- package/dist/components/slider/types.d.ts +14 -7
- package/dist/components/slider/useRangeSlider.d.ts +5 -7
- package/dist/components/slider/useRangeSliderPointer.d.ts +19 -0
- package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +31 -2
- package/dist/components/slider/useRangeSliderTooltipState.d.ts +23 -0
- package/dist/components/slider/useSlider.d.ts +11 -15
- package/dist/components/switch/index.d.ts +3 -2
- package/dist/components/switch/index.js +2 -2
- package/dist/components/switch/switch.d.ts +5 -2
- package/dist/components/switch/types.d.ts +7 -2
- package/dist/components/switch/useSwitch.d.ts +4 -2
- package/dist/components/tabs/index.d.ts +7 -6
- package/dist/components/tabs/index.js +2 -2
- package/dist/components/tabs/tabs-content.d.ts +2 -2
- package/dist/components/tabs/tabs-list.d.ts +4 -4
- package/dist/components/tabs/tabs-trigger.d.ts +5 -5
- package/dist/components/tabs/tabs.d.ts +5 -5
- package/dist/components/tabs/types.d.ts +13 -4
- package/dist/components/tabs/useTabs.d.ts +1 -1
- package/dist/components/teleport-provider/index.d.ts +2 -0
- package/dist/components/teleport-provider/index.js +2 -0
- package/dist/components/teleport-provider/teleport-provider.d.ts +21 -0
- package/dist/components/teleport-provider/types.d.ts +4 -0
- package/dist/components/teleport-provider/useTeleportTarget.d.ts +5 -0
- package/dist/components/textarea/index.d.ts +3 -2
- package/dist/components/textarea/index.js +2 -2
- package/dist/components/textarea/textarea.d.ts +5 -2
- package/dist/components/textarea/types.d.ts +6 -1
- package/dist/components/textarea/useTextarea.d.ts +3 -2
- package/dist/components/toast/defaults.d.ts +7 -0
- package/dist/components/toast/index.d.ts +7 -0
- package/dist/components/toast/index.js +2 -0
- package/dist/components/toast/toast-provider.d.ts +21 -0
- package/dist/components/toast/toast-viewport.d.ts +34 -0
- package/dist/components/toast/toast.d.ts +31 -0
- package/dist/components/toast/types.d.ts +110 -0
- package/dist/components/toast/useToast.d.ts +4 -0
- package/dist/components/toast/useToastColor.d.ts +3 -0
- package/dist/components/toast/useToastState.d.ts +2 -0
- package/dist/components/tooltip/index.d.ts +3 -2
- package/dist/components/tooltip/index.js +2 -1
- package/dist/components/tooltip/tooltip.d.ts +2 -2
- package/dist/components/tooltip/types.d.ts +14 -13
- package/dist/components/tooltip/useTooltip.d.ts +15 -3
- package/dist/dropdown-menu.css +191 -107
- package/dist/dropdown-menu.js +1729 -107
- package/dist/field.css +41 -39
- package/dist/field.js +40 -16
- package/dist/focus-trap.js +80 -0
- package/dist/icon-button.css +193 -189
- package/dist/icon-button.js +23 -18
- package/dist/icon-button2.js +8 -0
- package/dist/index.d.ts +35 -30
- package/dist/index.js +36 -31
- package/dist/input.css +122 -120
- package/dist/input.js +47 -34
- package/dist/input2.js +9 -0
- package/dist/legacy-unlayered.css +5461 -0
- package/dist/modal.css +129 -127
- package/dist/modal.js +160 -200
- package/dist/number-input.css +87 -85
- package/dist/number-input.js +61 -17
- package/dist/overlay.css +26 -24
- package/dist/overlay.js +17 -9
- package/dist/overlay2.js +4 -0
- package/dist/popover.css +140 -107
- package/dist/popover.js +295 -189
- package/dist/popover2.js +6 -1
- package/dist/progress.css +101 -99
- package/dist/progress.js +50 -28
- package/dist/radio.css +114 -105
- package/dist/radio.js +154 -56
- package/dist/select.css +244 -242
- package/dist/select.js +92 -47
- package/dist/slider.css +1109 -904
- package/dist/slider.js +1118 -923
- package/dist/styles-api.d.ts +22 -0
- package/dist/styles-api.js +49 -0
- package/dist/switch.css +120 -108
- package/dist/switch.js +89 -33
- package/dist/tabs.css +286 -278
- package/dist/tabs.js +60 -21
- package/dist/teleport-provider.js +15 -0
- package/dist/textarea.css +132 -130
- package/dist/textarea.js +77 -29
- package/dist/toast.css +236 -0
- package/dist/toast.js +739 -0
- package/dist/tooltip.css +137 -107
- package/dist/tooltip.js +182 -223
- package/dist/tooltip2.js +8 -0
- package/dist/useClickOutside.js +1 -1
- package/dist/useFloatingPosition.js +1284 -0
- package/dist/useFocusTrap.js +130 -0
- package/dist/useTeleportTarget.js +29 -0
- package/dist/utils/componentColors.d.ts +60 -0
- package/docs/public-styles-api.md +133 -0
- package/docs/public-tokens.md +545 -0
- package/package.json +44 -12
- package/src/styles/_tokens.scss +33 -28
- package/src/styles/_utilities.scss +11 -9
- package/src/styles/styles-manifest.json +4125 -0
- package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +0 -4
package/dist/card.css
CHANGED
|
@@ -1,108 +1,110 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
1
|
+
@layer ropav.components {
|
|
2
|
+
.rp-card[data-v-2c467155] {
|
|
3
|
+
--_rp-card-bg: var(--rp-color-default);
|
|
4
|
+
--_rp-card-border: var(--rp-color-default-border);
|
|
5
|
+
--_rp-card-fg: var(--rp-color-text);
|
|
6
|
+
--_rp-card-header-border: var(--rp-color-default-border);
|
|
7
|
+
--_rp-card-footer-border: var(--rp-color-default-border);
|
|
8
|
+
--_rp-card-padding: var(--rp-spacing-5);
|
|
9
|
+
--_rp-card-radius: var(--rp-radius-sm);
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
min-width: 0;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
font-family: var(--rp-font-family);
|
|
16
|
+
color: var(--_rp-card-fg);
|
|
17
|
+
background-color: var(--_rp-card-bg);
|
|
18
|
+
border: var(--rp-border-width-thin) solid var(--_rp-card-border);
|
|
19
|
+
border-radius: var(--_rp-card-radius);
|
|
20
|
+
transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
|
|
21
|
+
}
|
|
22
|
+
.rp-card--layer-base[data-v-2c467155] {
|
|
23
|
+
--_rp-card-bg: var(--rp-color-body);
|
|
24
|
+
}
|
|
25
|
+
.rp-card--layer-surface[data-v-2c467155] {
|
|
26
|
+
--_rp-card-bg: var(--rp-color-default);
|
|
27
|
+
}
|
|
28
|
+
.rp-card--layer-raised[data-v-2c467155] {
|
|
29
|
+
--_rp-card-bg: var(--rp-color-default);
|
|
30
|
+
}
|
|
31
|
+
.rp-card--borderless[data-v-2c467155] {
|
|
32
|
+
--_rp-card-border: transparent;
|
|
33
|
+
}
|
|
34
|
+
.rp-card--header-bordered .rp-card__header[data-v-2c467155] {
|
|
35
|
+
border-bottom: var(--rp-border-width-thin) solid var(--_rp-card-header-border);
|
|
36
|
+
}
|
|
37
|
+
.rp-card--footer-bordered .rp-card__footer[data-v-2c467155] {
|
|
38
|
+
border-top: var(--rp-border-width-thin) solid var(--_rp-card-footer-border);
|
|
39
|
+
}
|
|
40
|
+
.rp-card--header-compact .rp-card__header[data-v-2c467155] {
|
|
41
|
+
padding-block-end: calc(var(--_rp-card-padding) / 2);
|
|
42
|
+
}
|
|
43
|
+
.rp-card--header-compact .rp-card__body[data-v-2c467155] {
|
|
44
|
+
padding-block-start: calc(var(--_rp-card-padding) / 2);
|
|
45
|
+
}
|
|
46
|
+
.rp-card--footer-compact .rp-card__body[data-v-2c467155] {
|
|
47
|
+
padding-block-end: calc(var(--_rp-card-padding) / 2);
|
|
48
|
+
}
|
|
49
|
+
.rp-card--footer-compact .rp-card__footer[data-v-2c467155] {
|
|
50
|
+
padding-block-start: calc(var(--_rp-card-padding) / 2);
|
|
51
|
+
}
|
|
52
|
+
.rp-card--padding-none[data-v-2c467155] {
|
|
53
|
+
--_rp-card-padding: var(--rp-spacing-0);
|
|
54
|
+
}
|
|
55
|
+
.rp-card--padding-sm[data-v-2c467155] {
|
|
56
|
+
--_rp-card-padding: var(--rp-spacing-3);
|
|
57
|
+
}
|
|
58
|
+
.rp-card--padding-md[data-v-2c467155] {
|
|
59
|
+
--_rp-card-padding: var(--rp-spacing-5);
|
|
60
|
+
}
|
|
61
|
+
.rp-card--padding-lg[data-v-2c467155] {
|
|
62
|
+
--_rp-card-padding: var(--rp-spacing-6);
|
|
63
|
+
}
|
|
64
|
+
.rp-card--radius-none[data-v-2c467155] {
|
|
65
|
+
--_rp-card-radius: var(--rp-radius-none);
|
|
66
|
+
}
|
|
67
|
+
.rp-card--radius-xs[data-v-2c467155] {
|
|
68
|
+
--_rp-card-radius: var(--rp-radius-xs);
|
|
69
|
+
}
|
|
70
|
+
.rp-card--radius-sm[data-v-2c467155] {
|
|
71
|
+
--_rp-card-radius: var(--rp-radius-sm);
|
|
72
|
+
}
|
|
73
|
+
.rp-card--radius-md[data-v-2c467155] {
|
|
74
|
+
--_rp-card-radius: var(--rp-radius-md);
|
|
75
|
+
}
|
|
76
|
+
.rp-card--radius-lg[data-v-2c467155] {
|
|
77
|
+
--_rp-card-radius: var(--rp-radius-lg);
|
|
78
|
+
}
|
|
79
|
+
.rp-card--radius-xl[data-v-2c467155] {
|
|
80
|
+
--_rp-card-radius: var(--rp-radius-xl);
|
|
81
|
+
}
|
|
82
|
+
.rp-card__header[data-v-2c467155], .rp-card__body[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
padding: var(--_rp-card-padding);
|
|
85
|
+
}
|
|
86
|
+
.rp-card__header[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
|
|
87
|
+
display: grid;
|
|
88
|
+
gap: var(--rp-spacing-1);
|
|
89
|
+
}
|
|
90
|
+
.rp-card__body[data-v-2c467155] {
|
|
91
|
+
flex: 1 1 auto;
|
|
92
|
+
min-width: 0;
|
|
93
|
+
color: var(--rp-color-text);
|
|
94
|
+
font-size: var(--rp-font-size-md);
|
|
95
|
+
line-height: var(--rp-line-height-md);
|
|
96
|
+
}
|
|
97
|
+
.rp-card__title[data-v-2c467155] {
|
|
98
|
+
margin: 0;
|
|
99
|
+
color: var(--rp-color-text);
|
|
100
|
+
font-size: var(--rp-font-size-lg);
|
|
101
|
+
font-weight: var(--rp-font-weight-semibold);
|
|
102
|
+
line-height: var(--rp-line-height-xs);
|
|
103
|
+
}
|
|
104
|
+
.rp-card__description[data-v-2c467155] {
|
|
105
|
+
margin: 0;
|
|
106
|
+
color: var(--rp-color-dimmed);
|
|
107
|
+
font-size: var(--rp-font-size-sm);
|
|
108
|
+
line-height: var(--rp-line-height-md);
|
|
109
|
+
}
|
|
108
110
|
}
|
package/dist/card.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import './card.css';
|
|
2
2
|
import { t as bem } from "./bem.js";
|
|
3
|
+
import { n as useStylesApi } from "./styles-api.js";
|
|
3
4
|
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
4
|
-
import { computed, createIf, createSlot, defineVaporComponent, renderEffect,
|
|
5
|
+
import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
|
|
5
6
|
//#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts
|
|
6
|
-
var t0 = template("<div data-v-
|
|
7
|
-
var t1 = template("<p data-v-
|
|
8
|
-
var t2 = template("<div data-v-
|
|
9
|
-
var t3 = template("<div data-v-
|
|
10
|
-
var t4 = template("<div data-v-269e2bc4 class=rp-card__footer>");
|
|
11
|
-
var t5 = template("<div data-v-269e2bc4>", 1);
|
|
7
|
+
var t0 = template("<div data-v-2c467155> ");
|
|
8
|
+
var t1 = template("<p data-v-2c467155> ");
|
|
9
|
+
var t2 = template("<div data-v-2c467155>");
|
|
10
|
+
var t3 = template("<div data-v-2c467155>", 1);
|
|
12
11
|
//#endregion
|
|
13
12
|
//#region src/components/card/card.vue
|
|
14
13
|
var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
|
|
15
14
|
name: "RpCard",
|
|
15
|
+
inheritAttrs: false,
|
|
16
16
|
__name: "card",
|
|
17
17
|
props: {
|
|
18
18
|
layer: {},
|
|
@@ -38,7 +38,9 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
|
|
|
38
38
|
String,
|
|
39
39
|
Object,
|
|
40
40
|
Array
|
|
41
|
-
] }
|
|
41
|
+
] },
|
|
42
|
+
classNames: {},
|
|
43
|
+
styles: {}
|
|
42
44
|
},
|
|
43
45
|
setup(__props) {
|
|
44
46
|
const props = __props;
|
|
@@ -60,22 +62,31 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
|
|
|
60
62
|
"footer-bordered": props.footerBorder,
|
|
61
63
|
"footer-compact": hasCompactFooterSpacing.value
|
|
62
64
|
}));
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
+
const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
|
|
66
|
+
const rootAttrs = computed(() => getRootAttrs({ class: rootClass.value }));
|
|
67
|
+
const n19 = t3();
|
|
68
|
+
renderEffect(() => setDynamicProps(n19, [rootAttrs.value]));
|
|
65
69
|
setInsertionState(n19, null, 0);
|
|
66
70
|
createIf(() => hasHeader.value, () => {
|
|
67
71
|
const n10 = t2();
|
|
72
|
+
renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("header", { class: "rp-card__header" })]));
|
|
68
73
|
setInsertionState(n10, null, 0);
|
|
69
74
|
createSlot("header", null, () => {
|
|
70
75
|
return [createIf(() => hasTitle.value, () => {
|
|
71
76
|
const n6 = t0();
|
|
72
77
|
const x6 = txt(n6);
|
|
73
|
-
renderEffect(() =>
|
|
78
|
+
renderEffect(() => {
|
|
79
|
+
setDynamicProps(n6, [unref(getPartAttrs)("title", { class: "rp-card__title" })]);
|
|
80
|
+
setText(x6, toDisplayString(__props.title));
|
|
81
|
+
});
|
|
74
82
|
return n6;
|
|
75
83
|
}), createIf(() => hasDescription.value, () => {
|
|
76
84
|
const n9 = t1();
|
|
77
85
|
const x9 = txt(n9);
|
|
78
|
-
renderEffect(() =>
|
|
86
|
+
renderEffect(() => {
|
|
87
|
+
setDynamicProps(n9, [unref(getPartAttrs)("description", { class: "rp-card__description" })]);
|
|
88
|
+
setText(x9, toDisplayString(__props.description));
|
|
89
|
+
});
|
|
79
90
|
return n9;
|
|
80
91
|
})];
|
|
81
92
|
}, 1);
|
|
@@ -83,21 +94,35 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
|
|
|
83
94
|
});
|
|
84
95
|
setInsertionState(n19, null, 1);
|
|
85
96
|
createIf(() => hasBody.value, () => {
|
|
86
|
-
const n14 =
|
|
87
|
-
renderEffect(() =>
|
|
97
|
+
const n14 = t2();
|
|
98
|
+
renderEffect(() => setDynamicProps(n14, [unref(getPartAttrs)("body", {
|
|
99
|
+
class: "rp-card__body",
|
|
100
|
+
compatibilityClass: __props.bodyClass
|
|
101
|
+
})]));
|
|
88
102
|
setInsertionState(n14, null, 0);
|
|
89
103
|
createSlot("default", null, null, 1);
|
|
90
104
|
return n14;
|
|
91
105
|
});
|
|
92
106
|
setInsertionState(n19, null, 2);
|
|
93
107
|
createIf(() => hasFooter.value, () => {
|
|
94
|
-
const n18 =
|
|
108
|
+
const n18 = t2();
|
|
109
|
+
renderEffect(() => setDynamicProps(n18, [unref(getPartAttrs)("footer", { class: "rp-card__footer" })]));
|
|
95
110
|
setInsertionState(n18, null, 0);
|
|
96
111
|
createSlot("footer", null, null, 1);
|
|
97
112
|
return n18;
|
|
98
113
|
});
|
|
99
114
|
return n19;
|
|
100
115
|
}
|
|
101
|
-
}), [["__scopeId", "data-v-
|
|
116
|
+
}), [["__scopeId", "data-v-2c467155"]]);
|
|
102
117
|
//#endregion
|
|
103
|
-
|
|
118
|
+
//#region src/components/card/types.ts
|
|
119
|
+
var cardParts = [
|
|
120
|
+
"root",
|
|
121
|
+
"header",
|
|
122
|
+
"title",
|
|
123
|
+
"description",
|
|
124
|
+
"body",
|
|
125
|
+
"footer"
|
|
126
|
+
];
|
|
127
|
+
//#endregion
|
|
128
|
+
export { card_default as n, cardParts as t };
|
package/dist/checkbox.css
CHANGED
|
@@ -1,141 +1,143 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
.rp-checkbox-icon-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
.rp-checkbox-icon-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
.rp-checkbox-icon-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
1
|
+
@layer ropav.components {
|
|
2
|
+
.rp-checkbox[data-v-bad0fe43] {
|
|
3
|
+
--_rp-checkbox-color: var(--rp-color-control-selected-bg);
|
|
4
|
+
--_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
|
|
5
|
+
--_rp-checkbox-size: 24px;
|
|
6
|
+
--_rp-checkbox-font-size: var(--rp-font-size-md);
|
|
7
|
+
--_rp-checkbox-radius: 4px;
|
|
8
|
+
--_rp-checkbox-checked-bg: var(--_rp-checkbox-color);
|
|
9
|
+
--_rp-checkbox-checked-border: var(--_rp-checkbox-color);
|
|
10
|
+
--_rp-checkbox-checked-icon: var(--_rp-checkbox-on-color);
|
|
11
|
+
--_rp-checkbox-invalid-border: var(--rp-color-red-filled);
|
|
12
|
+
--_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
font-family: var(--rp-font-family);
|
|
17
|
+
user-select: none;
|
|
18
|
+
vertical-align: top;
|
|
19
|
+
}
|
|
20
|
+
.rp-checkbox--disabled[data-v-bad0fe43] {
|
|
21
|
+
opacity: var(--rp-opacity-disabled);
|
|
22
|
+
cursor: not-allowed;
|
|
23
|
+
}
|
|
24
|
+
.rp-checkbox[data-v-bad0fe43] {
|
|
25
|
+
gap: var(--rp-spacing-2);
|
|
26
|
+
font-size: var(--_rp-checkbox-font-size);
|
|
27
|
+
}
|
|
28
|
+
.rp-checkbox__native[data-v-bad0fe43] {
|
|
29
|
+
position: absolute;
|
|
30
|
+
width: 1px;
|
|
31
|
+
height: 1px;
|
|
32
|
+
padding: 0;
|
|
33
|
+
margin: -1px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
clip: rect(0, 0, 0, 0);
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
border-width: 0;
|
|
38
|
+
pointer-events: none;
|
|
39
|
+
}
|
|
40
|
+
.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
|
|
41
|
+
border-color: var(--rp-color-control-border-focus);
|
|
42
|
+
box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
|
|
43
|
+
}
|
|
44
|
+
.rp-checkbox__box[data-v-bad0fe43] {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
width: var(--_rp-checkbox-size);
|
|
49
|
+
height: var(--_rp-checkbox-size);
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
|
|
52
|
+
border-radius: var(--_rp-checkbox-radius);
|
|
53
|
+
background-color: var(--rp-color-control-bg);
|
|
54
|
+
transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
|
|
55
|
+
}
|
|
56
|
+
.rp-checkbox--checked .rp-checkbox__box[data-v-bad0fe43], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-bad0fe43] {
|
|
57
|
+
background-color: var(--_rp-checkbox-checked-bg);
|
|
58
|
+
border-color: var(--_rp-checkbox-checked-border);
|
|
59
|
+
}
|
|
60
|
+
.rp-checkbox--invalid .rp-checkbox__box[data-v-bad0fe43] {
|
|
61
|
+
border-color: var(--_rp-checkbox-invalid-border);
|
|
62
|
+
}
|
|
63
|
+
.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
|
|
64
|
+
border-color: var(--_rp-checkbox-invalid-border);
|
|
65
|
+
box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
|
|
66
|
+
}
|
|
67
|
+
.rp-checkbox__icon[data-v-bad0fe43] {
|
|
68
|
+
width: 60%;
|
|
69
|
+
height: 60%;
|
|
70
|
+
color: var(--_rp-checkbox-checked-icon);
|
|
71
|
+
transform-origin: center;
|
|
72
|
+
}
|
|
73
|
+
.rp-checkbox__icon[data-v-bad0fe43] [stroke-width] {
|
|
74
|
+
stroke-width: 3;
|
|
75
|
+
}
|
|
76
|
+
.rp-checkbox__label[data-v-bad0fe43] {
|
|
77
|
+
line-height: var(--rp-line-height-md);
|
|
78
|
+
color: var(--rp-color-text);
|
|
79
|
+
}
|
|
80
|
+
.rp-checkbox--outline[data-v-bad0fe43] {
|
|
81
|
+
--_rp-checkbox-checked-bg: var(--rp-color-control-bg);
|
|
82
|
+
--_rp-checkbox-checked-border: var(--_rp-checkbox-color);
|
|
83
|
+
--_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
|
|
84
|
+
}
|
|
85
|
+
.rp-checkbox--size-xs[data-v-bad0fe43] {
|
|
86
|
+
--_rp-checkbox-size: 16px;
|
|
87
|
+
--_rp-checkbox-font-size: var(--rp-font-size-xs);
|
|
88
|
+
}
|
|
89
|
+
.rp-checkbox--size-sm[data-v-bad0fe43] {
|
|
90
|
+
--_rp-checkbox-size: 20px;
|
|
91
|
+
--_rp-checkbox-font-size: var(--rp-font-size-sm);
|
|
92
|
+
}
|
|
93
|
+
.rp-checkbox--size-md[data-v-bad0fe43] {
|
|
94
|
+
--_rp-checkbox-size: 24px;
|
|
95
|
+
--_rp-checkbox-font-size: var(--rp-font-size-md);
|
|
96
|
+
}
|
|
97
|
+
.rp-checkbox--size-lg[data-v-bad0fe43] {
|
|
98
|
+
--_rp-checkbox-size: 30px;
|
|
99
|
+
--_rp-checkbox-font-size: var(--rp-font-size-lg);
|
|
100
|
+
}
|
|
101
|
+
.rp-checkbox--size-xl[data-v-bad0fe43] {
|
|
102
|
+
--_rp-checkbox-size: 36px;
|
|
103
|
+
--_rp-checkbox-font-size: var(--rp-font-size-xl);
|
|
104
|
+
}
|
|
105
|
+
.rp-checkbox--radius-xs[data-v-bad0fe43] {
|
|
106
|
+
--_rp-checkbox-radius: 2px;
|
|
107
|
+
}
|
|
108
|
+
.rp-checkbox--radius-sm[data-v-bad0fe43] {
|
|
109
|
+
--_rp-checkbox-radius: 4px;
|
|
110
|
+
}
|
|
111
|
+
.rp-checkbox--radius-md[data-v-bad0fe43] {
|
|
112
|
+
--_rp-checkbox-radius: 6px;
|
|
113
|
+
}
|
|
114
|
+
.rp-checkbox--radius-lg[data-v-bad0fe43] {
|
|
115
|
+
--_rp-checkbox-radius: 8px;
|
|
116
|
+
}
|
|
117
|
+
.rp-checkbox--radius-xl[data-v-bad0fe43] {
|
|
118
|
+
--_rp-checkbox-radius: var(--rp-radius-full);
|
|
119
|
+
}
|
|
120
|
+
.rp-checkbox-icon-enter-active[data-v-bad0fe43],
|
|
121
|
+
.rp-checkbox-icon-leave-active[data-v-bad0fe43] {
|
|
122
|
+
transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
|
|
123
|
+
}
|
|
124
|
+
.rp-checkbox-icon-enter-from[data-v-bad0fe43],
|
|
125
|
+
.rp-checkbox-icon-leave-to[data-v-bad0fe43] {
|
|
126
|
+
opacity: 0;
|
|
127
|
+
transform: translateY(3px) scale(0.85);
|
|
128
|
+
}
|
|
129
|
+
.rp-checkbox-icon-enter-to[data-v-bad0fe43],
|
|
130
|
+
.rp-checkbox-icon-leave-from[data-v-bad0fe43] {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
transform: translateY(0) scale(1);
|
|
133
|
+
}
|
|
134
|
+
.rp-checkbox-icon-leave-to[data-v-bad0fe43] {
|
|
135
|
+
transform: translateY(-3px) scale(0.85);
|
|
135
136
|
}
|
|
136
137
|
@media (prefers-reduced-motion: reduce) {
|
|
137
|
-
.rp-checkbox-icon-enter-active[data-v-
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
.rp-checkbox-icon-enter-active[data-v-bad0fe43],
|
|
139
|
+
.rp-checkbox-icon-leave-active[data-v-bad0fe43] {
|
|
140
|
+
transition: none;
|
|
141
|
+
}
|
|
140
142
|
}
|
|
141
143
|
}
|