ropav 0.0.9 → 0.0.10

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 (159) hide show
  1. package/dist/color-input.css +19 -19
  2. package/dist/color-input.js +8 -3
  3. package/dist/color-picker.css +20 -20
  4. package/dist/color-picker.js +107 -27
  5. package/dist/components/accordion/accordion-item.d.ts +4 -4
  6. package/dist/components/accordion/accordion.d.ts +1 -1
  7. package/dist/components/accordion/index.d.ts +4 -4
  8. package/dist/components/accordion/types.d.ts +1 -1
  9. package/dist/components/accordion/useAccordion.d.ts +1 -1
  10. package/dist/components/alert/alert.d.ts +1 -1
  11. package/dist/components/alert/index.d.ts +3 -3
  12. package/dist/components/alert/types.d.ts +1 -1
  13. package/dist/components/alert/useAlertColor.d.ts +1 -1
  14. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -1
  15. package/dist/components/aspect-ratio/index.d.ts +2 -2
  16. package/dist/components/avatar/avatar.d.ts +1 -1
  17. package/dist/components/avatar/index.d.ts +3 -3
  18. package/dist/components/avatar/types.d.ts +1 -1
  19. package/dist/components/avatar/useAvatarColor.d.ts +1 -1
  20. package/dist/components/badge/badge.d.ts +1 -1
  21. package/dist/components/badge/index.d.ts +3 -3
  22. package/dist/components/badge/types.d.ts +1 -1
  23. package/dist/components/badge/useBadgeColor.d.ts +1 -1
  24. package/dist/components/button/button.d.ts +1 -1
  25. package/dist/components/button/index.d.ts +2 -2
  26. package/dist/components/button/types.d.ts +1 -1
  27. package/dist/components/button/useButtonColor.d.ts +1 -1
  28. package/dist/components/button-group/button-group.d.ts +1 -1
  29. package/dist/components/button-group/index.d.ts +2 -2
  30. package/dist/components/button-link/button-link.d.ts +1 -1
  31. package/dist/components/button-link/index.d.ts +2 -2
  32. package/dist/components/button-link/types.d.ts +1 -1
  33. package/dist/components/card/card.d.ts +1 -1
  34. package/dist/components/card/index.d.ts +2 -2
  35. package/dist/components/checkbox/checkbox.d.ts +1 -1
  36. package/dist/components/checkbox/index.d.ts +2 -2
  37. package/dist/components/checkbox/types.d.ts +1 -1
  38. package/dist/components/checkbox/useCheckbox.d.ts +2 -2
  39. package/dist/components/collapse/collapse.d.ts +2 -2
  40. package/dist/components/collapse/index.d.ts +3 -3
  41. package/dist/components/collapse/useCollapse.d.ts +1 -1
  42. package/dist/components/color-input/color-input.d.ts +1 -1
  43. package/dist/components/color-input/index.d.ts +2 -2
  44. package/dist/components/color-input/types.d.ts +4 -3
  45. package/dist/components/color-input/useColorInput.d.ts +5 -5
  46. package/dist/components/color-input/useColorInputEyeDropper.d.ts +1 -1
  47. package/dist/components/color-input/useColorInputPopover.d.ts +2 -2
  48. package/dist/components/color-input/useColorInputValue.d.ts +1 -1
  49. package/dist/components/color-picker/color-picker-saturation.d.ts +1 -1
  50. package/dist/components/color-picker/color-picker-slider.d.ts +1 -1
  51. package/dist/components/color-picker/color-picker-utils.d.ts +1 -1
  52. package/dist/components/color-picker/color-picker.d.ts +1 -1
  53. package/dist/components/color-picker/index.d.ts +3 -3
  54. package/dist/components/color-picker/useColorPickerDrag.d.ts +7 -2
  55. package/dist/components/color-picker/useColorPickerSwatches.d.ts +1 -1
  56. package/dist/components/color-picker/useColorPickerValue.d.ts +2 -2
  57. package/dist/components/color-swatch/color-swatch.d.ts +1 -1
  58. package/dist/components/color-swatch/index.d.ts +2 -2
  59. package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +15 -6
  60. package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +1 -1
  61. package/dist/components/dropdown-menu/dropdown-menu.d.ts +1 -1
  62. package/dist/components/dropdown-menu/index.d.ts +3 -3
  63. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +11 -10
  64. package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +2 -2
  65. package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +2 -2
  66. package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +2 -2
  67. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +2 -2
  68. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +3 -3
  69. package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +12 -4
  70. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +3 -3
  71. package/dist/components/field/field.d.ts +2 -2
  72. package/dist/components/field/index.d.ts +2 -2
  73. package/dist/components/field/useField.d.ts +1 -1
  74. package/dist/components/icon-button/icon-button.d.ts +1 -1
  75. package/dist/components/icon-button/index.d.ts +2 -2
  76. package/dist/components/icon-button/types.d.ts +1 -1
  77. package/dist/components/input/index.d.ts +2 -2
  78. package/dist/components/input/input.d.ts +1 -1
  79. package/dist/components/input/useInput.d.ts +2 -2
  80. package/dist/components/modal/index.d.ts +2 -2
  81. package/dist/components/modal/modal.d.ts +1 -1
  82. package/dist/components/modal/types.d.ts +1 -1
  83. package/dist/components/modal/useModal.d.ts +1 -1
  84. package/dist/components/number-input/index.d.ts +2 -2
  85. package/dist/components/number-input/number-input.d.ts +1 -1
  86. package/dist/components/number-input/types.d.ts +1 -1
  87. package/dist/components/number-input/useNumberInput.d.ts +2 -2
  88. package/dist/components/overlay/index.d.ts +2 -2
  89. package/dist/components/overlay/overlay.d.ts +1 -1
  90. package/dist/components/overlay/useOverlay.d.ts +1 -1
  91. package/dist/components/popover/index.d.ts +3 -3
  92. package/dist/components/popover/popover.d.ts +2 -2
  93. package/dist/components/popover/types.d.ts +1 -0
  94. package/dist/components/popover/usePopover.d.ts +2 -1
  95. package/dist/components/progress/index.d.ts +3 -3
  96. package/dist/components/progress/progress.d.ts +1 -1
  97. package/dist/components/progress/types.d.ts +1 -1
  98. package/dist/components/progress/useProgress.d.ts +2 -2
  99. package/dist/components/radio/index.d.ts +3 -3
  100. package/dist/components/radio/radio-group.d.ts +1 -1
  101. package/dist/components/radio/radio.d.ts +1 -1
  102. package/dist/components/radio/types.d.ts +1 -1
  103. package/dist/components/radio/useRadio.d.ts +2 -2
  104. package/dist/components/select/index.d.ts +2 -2
  105. package/dist/components/select/select.d.ts +1 -1
  106. package/dist/components/select/useSelect.d.ts +2 -2
  107. package/dist/components/slider/index.d.ts +4 -4
  108. package/dist/components/slider/range-slider-tooltip.d.ts +34 -0
  109. package/dist/components/slider/range-slider.d.ts +4 -12
  110. package/dist/components/slider/slider.d.ts +1 -1
  111. package/dist/components/slider/sliderCore.d.ts +35 -0
  112. package/dist/components/slider/types.d.ts +2 -5
  113. package/dist/components/slider/useRangeSlider.d.ts +5 -7
  114. package/dist/components/slider/useRangeSliderPointer.d.ts +19 -0
  115. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +31 -2
  116. package/dist/components/slider/useRangeSliderTooltipState.d.ts +23 -0
  117. package/dist/components/slider/useSlider.d.ts +11 -15
  118. package/dist/components/switch/index.d.ts +2 -2
  119. package/dist/components/switch/switch.d.ts +1 -1
  120. package/dist/components/switch/types.d.ts +1 -1
  121. package/dist/components/switch/useSwitch.d.ts +2 -2
  122. package/dist/components/tabs/index.d.ts +6 -6
  123. package/dist/components/tabs/tabs-content.d.ts +2 -2
  124. package/dist/components/tabs/tabs-list.d.ts +4 -4
  125. package/dist/components/tabs/tabs-trigger.d.ts +5 -5
  126. package/dist/components/tabs/tabs.d.ts +5 -5
  127. package/dist/components/tabs/useTabs.d.ts +1 -1
  128. package/dist/components/textarea/index.d.ts +2 -2
  129. package/dist/components/textarea/textarea.d.ts +1 -1
  130. package/dist/components/textarea/useTextarea.d.ts +2 -2
  131. package/dist/components/toast/defaults.d.ts +7 -0
  132. package/dist/components/toast/index.d.ts +7 -0
  133. package/dist/components/toast/index.js +2 -0
  134. package/dist/components/toast/toast-provider.d.ts +21 -0
  135. package/dist/components/toast/toast-viewport.d.ts +34 -0
  136. package/dist/components/toast/toast.d.ts +31 -0
  137. package/dist/components/toast/types.d.ts +106 -0
  138. package/dist/components/toast/useToast.d.ts +4 -0
  139. package/dist/components/toast/useToastColor.d.ts +3 -0
  140. package/dist/components/toast/useToastState.d.ts +2 -0
  141. package/dist/components/tooltip/index.d.ts +2 -2
  142. package/dist/components/tooltip/tooltip.d.ts +2 -2
  143. package/dist/components/tooltip/types.d.ts +1 -1
  144. package/dist/components/tooltip/useTooltip.d.ts +3 -1
  145. package/dist/dropdown-menu.js +160 -39
  146. package/dist/index.d.ts +31 -30
  147. package/dist/index.js +2 -1
  148. package/dist/popover.css +28 -28
  149. package/dist/popover.js +25 -14
  150. package/dist/rafScheduler.js +34 -0
  151. package/dist/slider.css +355 -228
  152. package/dist/slider.js +890 -862
  153. package/dist/textarea.js +8 -2
  154. package/dist/toast.css +232 -0
  155. package/dist/toast.js +679 -0
  156. package/dist/tooltip.js +17 -10
  157. package/dist/utils/componentColors.d.ts +60 -0
  158. package/package.json +17 -9
  159. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +0 -4
package/dist/textarea.js CHANGED
@@ -58,6 +58,7 @@ function resetTextareaHeight(textarea) {
58
58
  function useTextarea(props, emitUpdate) {
59
59
  const textareaRef = ref(null);
60
60
  const control = useControlState(props);
61
+ let heightSyncPending = false;
61
62
  const autosizeRows = computed(() => {
62
63
  const minRows = normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;
63
64
  const maxRows = normalizeRows(props.maxRows);
@@ -100,11 +101,16 @@ function useTextarea(props, emitUpdate) {
100
101
  textarea.style.overflowY = maxHeight !== void 0 && contentHeight > maxHeight ? "auto" : "hidden";
101
102
  }
102
103
  function scheduleTextareaHeightSync() {
103
- nextTick(syncTextareaHeight);
104
+ if (heightSyncPending) return;
105
+ heightSyncPending = true;
106
+ nextTick(() => {
107
+ heightSyncPending = false;
108
+ syncTextareaHeight();
109
+ });
104
110
  }
105
111
  function onInput(e) {
106
112
  emitUpdate(e.target.value);
107
- syncTextareaHeight();
113
+ if (props.autosize) scheduleTextareaHeightSync();
108
114
  }
109
115
  function focusTextarea(e) {
110
116
  if (control.disabled) return;
package/dist/toast.css ADDED
@@ -0,0 +1,232 @@
1
+ .rp-toast[data-v-face18fc] {
2
+ --_rp-toast-bg: var(--rp-color-default);
3
+ --_rp-toast-fg: var(--rp-color-text);
4
+ --_rp-toast-title-fg: var(--rp-color-text);
5
+ --_rp-toast-icon-fg: var(--rp-color-cyan-light-color);
6
+ --_rp-toast-border: var(--rp-color-default-border);
7
+ --_rp-toast-radius: var(--rp-radius-md);
8
+ box-sizing: border-box;
9
+ display: flex;
10
+ align-items: flex-start;
11
+ width: 22rem;
12
+ max-width: 100%;
13
+ min-width: 0;
14
+ padding: var(--rp-spacing-4);
15
+ gap: var(--rp-spacing-3);
16
+ color: var(--_rp-toast-fg);
17
+ font-family: var(--rp-font-family);
18
+ font-size: var(--rp-font-size-sm);
19
+ line-height: var(--rp-line-height-md);
20
+ background-color: var(--_rp-toast-bg);
21
+ border: var(--rp-border-width-thin) solid var(--_rp-toast-border);
22
+ border-radius: var(--_rp-toast-radius);
23
+ box-shadow: var(--rp-shadow-md);
24
+ transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
25
+ }
26
+ .rp-toast--radius-none[data-v-face18fc] {
27
+ --_rp-toast-radius: var(--rp-radius-none);
28
+ }
29
+ .rp-toast--radius-xs[data-v-face18fc] {
30
+ --_rp-toast-radius: var(--rp-radius-xs);
31
+ }
32
+ .rp-toast--radius-sm[data-v-face18fc] {
33
+ --_rp-toast-radius: var(--rp-radius-sm);
34
+ }
35
+ .rp-toast--radius-md[data-v-face18fc] {
36
+ --_rp-toast-radius: var(--rp-radius-md);
37
+ }
38
+ .rp-toast--radius-lg[data-v-face18fc] {
39
+ --_rp-toast-radius: var(--rp-radius-lg);
40
+ }
41
+ .rp-toast--radius-xl[data-v-face18fc] {
42
+ --_rp-toast-radius: var(--rp-radius-xl);
43
+ }
44
+ .rp-toast__icon[data-v-face18fc] {
45
+ display: inline-flex;
46
+ flex: 0 0 auto;
47
+ align-items: center;
48
+ justify-content: center;
49
+ margin-top: 0.125rem;
50
+ color: var(--_rp-toast-icon-fg);
51
+ line-height: 0;
52
+ }
53
+ .rp-toast__icon[data-v-face18fc] > svg {
54
+ display: block;
55
+ width: 1rem;
56
+ height: 1rem;
57
+ }
58
+ .rp-toast__content[data-v-face18fc] {
59
+ display: grid;
60
+ flex: 1 1 auto;
61
+ min-width: 0;
62
+ gap: var(--rp-spacing-1);
63
+ }
64
+ .rp-toast__title[data-v-face18fc] {
65
+ color: var(--_rp-toast-title-fg);
66
+ font-size: var(--rp-font-size-md);
67
+ font-weight: var(--rp-font-weight-semibold);
68
+ line-height: var(--rp-line-height-xs);
69
+ }
70
+ .rp-toast__description[data-v-face18fc] {
71
+ margin: 0;
72
+ }
73
+ .rp-toast__body[data-v-face18fc], .rp-toast__description[data-v-face18fc] {
74
+ min-width: 0;
75
+ color: var(--_rp-toast-fg);
76
+ }
77
+ .rp-toast__action[data-v-face18fc] {
78
+ display: inline-flex;
79
+ flex: 0 0 auto;
80
+ align-items: center;
81
+ margin-left: auto;
82
+ }
83
+ .rp-toast__close[data-v-face18fc] {
84
+ box-sizing: border-box;
85
+ display: inline-flex;
86
+ flex: 0 0 auto;
87
+ align-items: center;
88
+ justify-content: center;
89
+ width: 1.75rem;
90
+ height: 1.75rem;
91
+ margin: calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) 0;
92
+ padding: 0;
93
+ color: var(--_rp-toast-icon-fg);
94
+ background: transparent;
95
+ border: 0;
96
+ border-radius: var(--rp-radius-sm);
97
+ cursor: pointer;
98
+ transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
99
+ }
100
+ .rp-toast__close[data-v-face18fc]:hover {
101
+ background-color: color-mix(in srgb, var(--_rp-toast-icon-fg) 12%, transparent);
102
+ }
103
+ .rp-toast__close[data-v-face18fc]:focus-visible {
104
+ outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
105
+ outline-offset: 2px;
106
+ }
107
+ .rp-toast__close[data-v-face18fc] > svg {
108
+ display: block;
109
+ width: 1rem;
110
+ height: 1rem;
111
+ }
112
+ .rp-toast-enter-active[data-v-face18fc],
113
+ .rp-toast-leave-active[data-v-face18fc] {
114
+ will-change: opacity, transform;
115
+ }
116
+ .rp-toast-enter-active[data-v-face18fc] {
117
+ transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
118
+ }
119
+ .rp-toast-leave-active[data-v-face18fc] {
120
+ transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
121
+ }
122
+ .rp-toast-enter-from[data-v-face18fc],
123
+ .rp-toast-leave-to[data-v-face18fc] {
124
+ opacity: 0;
125
+ transform: translate3d(0, calc(var(--rp-spacing-2) * -1), 0) scale(0.98);
126
+ }
127
+ @media (prefers-reduced-motion: reduce) {
128
+ .rp-toast-enter-active[data-v-face18fc],
129
+ .rp-toast-leave-active[data-v-face18fc] {
130
+ transition: none;
131
+ }
132
+ }.rp-toast-viewport[data-v-e4c0bb63] {
133
+ --_rp-toast-viewport-shift-x: 0;
134
+ --_rp-toast-viewport-shift-y: calc(var(--rp-spacing-3) * -1);
135
+ position: fixed;
136
+ z-index: 1001;
137
+ display: flex;
138
+ box-sizing: border-box;
139
+ width: min(24rem, 100vw);
140
+ max-height: 100vh;
141
+ max-height: 100dvh;
142
+ margin: 0;
143
+ padding: var(--rp-spacing-4);
144
+ overflow: hidden auto;
145
+ flex-direction: column;
146
+ gap: var(--rp-spacing-3);
147
+ list-style: none;
148
+ pointer-events: none;
149
+ }
150
+ .rp-toast-viewport--top-left[data-v-e4c0bb63] {
151
+ --_rp-toast-viewport-shift-x: calc(var(--rp-spacing-3) * -1);
152
+ --_rp-toast-viewport-shift-y: 0;
153
+ top: 0;
154
+ left: 0;
155
+ }
156
+ .rp-toast-viewport--top-center[data-v-e4c0bb63] {
157
+ top: 0;
158
+ left: 50%;
159
+ transform: translateX(-50%);
160
+ }
161
+ .rp-toast-viewport--top-right[data-v-e4c0bb63] {
162
+ --_rp-toast-viewport-shift-x: var(--rp-spacing-3);
163
+ --_rp-toast-viewport-shift-y: 0;
164
+ top: 0;
165
+ right: 0;
166
+ }
167
+ .rp-toast-viewport--bottom-left[data-v-e4c0bb63] {
168
+ --_rp-toast-viewport-shift-x: calc(var(--rp-spacing-3) * -1);
169
+ --_rp-toast-viewport-shift-y: 0;
170
+ bottom: 0;
171
+ left: 0;
172
+ }
173
+ .rp-toast-viewport--bottom-center[data-v-e4c0bb63] {
174
+ --_rp-toast-viewport-shift-y: var(--rp-spacing-3);
175
+ bottom: 0;
176
+ left: 50%;
177
+ transform: translateX(-50%);
178
+ }
179
+ .rp-toast-viewport--bottom-right[data-v-e4c0bb63] {
180
+ --_rp-toast-viewport-shift-x: var(--rp-spacing-3);
181
+ --_rp-toast-viewport-shift-y: 0;
182
+ right: 0;
183
+ bottom: 0;
184
+ }
185
+ .rp-toast-viewport__item[data-v-e4c0bb63] {
186
+ display: flex;
187
+ width: 100%;
188
+ flex: 0 0 auto;
189
+ pointer-events: auto;
190
+ }
191
+ .rp-toast-viewport__item[data-v-e4c0bb63] .rp-toast {
192
+ width: 100%;
193
+ }
194
+ .rp-toast-viewport-item-enter-active[data-v-e4c0bb63],
195
+ .rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
196
+ will-change: opacity, transform;
197
+ }
198
+ .rp-toast-viewport-item-enter-active[data-v-e4c0bb63] {
199
+ transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
200
+ }
201
+ .rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
202
+ position: absolute;
203
+ right: var(--rp-spacing-4);
204
+ left: var(--rp-spacing-4);
205
+ width: auto;
206
+ pointer-events: none;
207
+ transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
208
+ }
209
+ .rp-toast-viewport--empty .rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
210
+ position: relative;
211
+ right: auto;
212
+ left: auto;
213
+ width: 100%;
214
+ }
215
+ .rp-toast-viewport-item-move[data-v-e4c0bb63] {
216
+ transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
217
+ }
218
+ .rp-toast-viewport-item-enter-from[data-v-e4c0bb63],
219
+ .rp-toast-viewport-item-leave-to[data-v-e4c0bb63] {
220
+ opacity: 0;
221
+ transform: translate3d(var(--_rp-toast-viewport-shift-x), var(--_rp-toast-viewport-shift-y), 0) scale(0.98);
222
+ }
223
+ @media (prefers-reduced-motion: reduce) {
224
+ .rp-toast-viewport[data-v-e4c0bb63] {
225
+ scroll-behavior: auto;
226
+ }
227
+ .rp-toast-viewport-item-enter-active[data-v-e4c0bb63],
228
+ .rp-toast-viewport-item-leave-active[data-v-e4c0bb63],
229
+ .rp-toast-viewport-item-move[data-v-e4c0bb63] {
230
+ transition: none;
231
+ }
232
+ }