ropav 0.0.7 → 0.0.9

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 (191) hide show
  1. package/dist/accordion.css +10 -10
  2. package/dist/accordion.js +2 -4
  3. package/dist/alert.css +109 -0
  4. package/dist/alert.js +168 -0
  5. package/dist/aspect-ratio.css +17 -0
  6. package/dist/aspect-ratio.js +26 -0
  7. package/dist/avatar.css +97 -0
  8. package/dist/avatar.js +161 -0
  9. package/dist/badge.css +40 -115
  10. package/dist/badge.js +19 -18
  11. package/dist/base.css +609 -180
  12. package/dist/bem.js +0 -2
  13. package/dist/button-group.js +0 -2
  14. package/dist/button-link.css +161 -0
  15. package/dist/button-link.js +108 -0
  16. package/dist/button.css +50 -229
  17. package/dist/button.js +7 -11
  18. package/dist/card.css +50 -30
  19. package/dist/card.js +69 -38
  20. package/dist/check.js +12 -0
  21. package/dist/checkbox.css +16 -57
  22. package/dist/checkbox.js +14 -33
  23. package/dist/collapse.css +8 -8
  24. package/dist/collapse.js +4 -10
  25. package/dist/color-input.css +108 -0
  26. package/dist/color-input.js +344 -0
  27. package/dist/color-picker.css +304 -0
  28. package/dist/color-picker.js +717 -0
  29. package/dist/color-picker2.js +18 -0
  30. package/dist/color-swatch.css +50 -0
  31. package/dist/color-swatch.js +73 -0
  32. package/dist/color.js +190 -0
  33. package/dist/componentColors.js +206 -15
  34. package/dist/components/alert/alert.d.ts +30 -0
  35. package/dist/components/alert/index.d.ts +3 -0
  36. package/dist/components/alert/index.js +2 -0
  37. package/dist/components/alert/types.d.ts +20 -0
  38. package/dist/components/alert/useAlertColor.d.ts +3 -0
  39. package/dist/components/aspect-ratio/aspect-ratio.d.ts +21 -0
  40. package/dist/components/aspect-ratio/index.d.ts +2 -0
  41. package/dist/components/aspect-ratio/index.js +2 -0
  42. package/dist/components/aspect-ratio/types.d.ts +3 -0
  43. package/dist/components/avatar/avatar.d.ts +24 -0
  44. package/dist/components/avatar/index.d.ts +3 -0
  45. package/dist/components/avatar/index.js +2 -0
  46. package/dist/components/avatar/types.d.ts +20 -0
  47. package/dist/components/avatar/useAvatarColor.d.ts +3 -0
  48. package/dist/components/badge/types.d.ts +2 -1
  49. package/dist/components/badge/useBadgeColor.d.ts +3 -8
  50. package/dist/components/button/types.d.ts +1 -0
  51. package/dist/components/button/useButtonColor.d.ts +3 -13
  52. package/dist/components/button-link/button-link.d.ts +27 -0
  53. package/dist/components/button-link/index.d.ts +2 -0
  54. package/dist/components/button-link/index.js +2 -0
  55. package/dist/components/button-link/types.d.ts +20 -0
  56. package/dist/components/card/card.d.ts +4 -0
  57. package/dist/components/card/types.d.ts +4 -0
  58. package/dist/components/checkbox/types.d.ts +1 -0
  59. package/dist/components/checkbox/useCheckbox.d.ts +2 -4
  60. package/dist/components/collapse/types.d.ts +0 -2
  61. package/dist/components/color-input/color-input.d.ts +29 -0
  62. package/dist/components/color-input/index.d.ts +2 -0
  63. package/dist/components/color-input/index.js +2 -0
  64. package/dist/components/color-input/types.d.ts +34 -0
  65. package/dist/components/color-input/useColorInput.d.ts +27 -0
  66. package/dist/components/color-input/useColorInputEyeDropper.d.ts +13 -0
  67. package/dist/components/color-input/useColorInputPopover.d.ts +11 -0
  68. package/dist/components/color-input/useColorInputValue.d.ts +8 -0
  69. package/dist/components/color-picker/color-picker-saturation.d.ts +21 -0
  70. package/dist/components/color-picker/color-picker-slider.d.ts +21 -0
  71. package/dist/components/color-picker/color-picker-utils.d.ts +23 -0
  72. package/dist/components/color-picker/color-picker.d.ts +23 -0
  73. package/dist/components/color-picker/index.d.ts +3 -0
  74. package/dist/components/color-picker/index.js +3 -0
  75. package/dist/components/color-picker/types.d.ts +39 -0
  76. package/dist/components/color-picker/useColorPickerDrag.d.ts +11 -0
  77. package/dist/components/color-picker/useColorPickerSwatches.d.ts +21 -0
  78. package/dist/components/color-picker/useColorPickerValue.d.ts +15 -0
  79. package/dist/components/color-swatch/color-swatch.d.ts +21 -0
  80. package/dist/components/color-swatch/index.d.ts +2 -0
  81. package/dist/components/color-swatch/index.js +2 -0
  82. package/dist/components/color-swatch/types.d.ts +6 -0
  83. package/dist/components/color-swatch/useColorSwatchColor.d.ts +5 -0
  84. package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
  85. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +1 -1
  86. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +1 -1
  87. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +1 -1
  88. package/dist/components/field/types.d.ts +0 -2
  89. package/dist/components/field/useField.d.ts +1 -2
  90. package/dist/components/icon-button/types.d.ts +1 -0
  91. package/dist/components/input/types.d.ts +3 -0
  92. package/dist/components/modal/types.d.ts +0 -1
  93. package/dist/components/number-input/index.d.ts +2 -0
  94. package/dist/components/number-input/index.js +2 -0
  95. package/dist/components/number-input/number-input.d.ts +29 -0
  96. package/dist/components/number-input/types.d.ts +34 -0
  97. package/dist/components/number-input/useNumberInput.d.ts +31 -0
  98. package/dist/components/popover/index.d.ts +1 -0
  99. package/dist/components/popover/index.js +2 -1
  100. package/dist/components/popover/types.d.ts +6 -2
  101. package/dist/components/popover/usePopover.d.ts +5 -2
  102. package/dist/components/progress/types.d.ts +1 -1
  103. package/dist/components/radio/types.d.ts +3 -0
  104. package/dist/components/radio/useRadio.d.ts +2 -4
  105. package/dist/components/select/index.d.ts +1 -1
  106. package/dist/components/select/types.d.ts +3 -0
  107. package/dist/components/slider/index.d.ts +2 -1
  108. package/dist/components/slider/index.js +2 -2
  109. package/dist/components/slider/range-slider.d.ts +45 -0
  110. package/dist/components/slider/types.d.ts +14 -2
  111. package/dist/components/slider/useRangeSlider.d.ts +59 -0
  112. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +7 -0
  113. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +4 -0
  114. package/dist/components/switch/useSwitch.d.ts +2 -3
  115. package/dist/components/tooltip/types.d.ts +1 -0
  116. package/dist/dropdown-menu.css +17 -17
  117. package/dist/dropdown-menu.js +0 -2
  118. package/dist/field.css +17 -17
  119. package/dist/field.js +56 -51
  120. package/dist/icon-button.css +57 -236
  121. package/dist/icon-button.js +5 -8
  122. package/dist/index.d.ts +8 -0
  123. package/dist/index.js +16 -4
  124. package/dist/input.css +40 -46
  125. package/dist/input.js +39 -23
  126. package/dist/minus.js +12 -0
  127. package/dist/modal.css +37 -37
  128. package/dist/modal.js +10 -16
  129. package/dist/number-input.css +86 -0
  130. package/dist/number-input.js +350 -0
  131. package/dist/overlay.css +5 -5
  132. package/dist/overlay.js +3 -5
  133. package/dist/popover.css +62 -29
  134. package/dist/popover.js +25 -12
  135. package/dist/popover2.js +17 -0
  136. package/dist/progress.css +9 -30
  137. package/dist/progress.js +3 -8
  138. package/dist/radio.css +34 -62
  139. package/dist/radio.js +28 -18
  140. package/dist/select.css +105 -61
  141. package/dist/select.js +12 -10
  142. package/dist/slider.css +508 -41
  143. package/dist/slider.js +1122 -50
  144. package/dist/switch.css +19 -44
  145. package/dist/switch.js +4 -7
  146. package/dist/tabs.css +36 -36
  147. package/dist/tabs.js +1 -3
  148. package/dist/textarea.css +33 -25
  149. package/dist/textarea.js +0 -2
  150. package/dist/tooltip.css +7 -35
  151. package/dist/tooltip.js +13 -10
  152. package/dist/useButtonColor.js +16 -16
  153. package/dist/useClickOutside.js +0 -2
  154. package/dist/useCollapse.js +1 -3
  155. package/dist/useControlState.js +0 -2
  156. package/dist/useRequiredInject.js +0 -2
  157. package/dist/x.js +0 -2
  158. package/package.json +43 -7
  159. package/src/styles/_mixins.scss +25 -41
  160. package/src/styles/_tokens.scss +615 -182
  161. package/src/styles/_variables.scss +177 -49
  162. package/dist/accordion.js.map +0 -1
  163. package/dist/badge.js.map +0 -1
  164. package/dist/bem.js.map +0 -1
  165. package/dist/button-group.js.map +0 -1
  166. package/dist/button.js.map +0 -1
  167. package/dist/card.js.map +0 -1
  168. package/dist/checkbox.js.map +0 -1
  169. package/dist/collapse.js.map +0 -1
  170. package/dist/componentColors.js.map +0 -1
  171. package/dist/dropdown-menu.js.map +0 -1
  172. package/dist/field.js.map +0 -1
  173. package/dist/icon-button.js.map +0 -1
  174. package/dist/input.js.map +0 -1
  175. package/dist/modal.js.map +0 -1
  176. package/dist/overlay.js.map +0 -1
  177. package/dist/popover.js.map +0 -1
  178. package/dist/progress.js.map +0 -1
  179. package/dist/radio.js.map +0 -1
  180. package/dist/select.js.map +0 -1
  181. package/dist/slider.js.map +0 -1
  182. package/dist/switch.js.map +0 -1
  183. package/dist/tabs.js.map +0 -1
  184. package/dist/textarea.js.map +0 -1
  185. package/dist/tooltip.js.map +0 -1
  186. package/dist/useButtonColor.js.map +0 -1
  187. package/dist/useClickOutside.js.map +0 -1
  188. package/dist/useCollapse.js.map +0 -1
  189. package/dist/useControlState.js.map +0 -1
  190. package/dist/useRequiredInject.js.map +0 -1
  191. package/dist/x.js.map +0 -1
package/dist/popover.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import './popover.css';
2
2
  import { t as bem } from "./bem.js";
3
3
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
4
- import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onMounted, ref, renderEffect, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
4
+ import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
5
5
  //#region src/components/popover/usePopover.ts
6
6
  var DEFAULT_PLACEMENT = "bottom";
7
7
  var DEFAULT_ROLE = "dialog";
@@ -16,21 +16,24 @@ function isHTMLElement(value) {
16
16
  function getTargetPosition(rect, placement) {
17
17
  const centerX = rect.left + rect.width / 2;
18
18
  const centerY = rect.top + rect.height / 2;
19
- switch (placement) {
19
+ const [side, alignment = "center"] = placement.split("-");
20
+ const alignedX = alignment === "start" ? rect.left : alignment === "end" ? rect.right : centerX;
21
+ const alignedY = alignment === "start" ? rect.top : alignment === "end" ? rect.bottom : centerY;
22
+ switch (side) {
20
23
  case "right": return {
21
24
  x: rect.right,
22
- y: centerY
25
+ y: alignedY
23
26
  };
24
27
  case "bottom": return {
25
- x: centerX,
28
+ x: alignedX,
26
29
  y: rect.bottom
27
30
  };
28
31
  case "left": return {
29
32
  x: rect.left,
30
- y: centerY
33
+ y: alignedY
31
34
  };
32
35
  default: return {
33
- x: centerX,
36
+ x: alignedX,
34
37
  y: rect.top
35
38
  };
36
39
  }
@@ -102,6 +105,9 @@ function usePopover(props, emitOpenChange) {
102
105
  const isVisible = computed(() => isOpen.value && !isDisabled.value);
103
106
  const shouldRenderContent = computed(() => !isDisabled.value);
104
107
  const shouldWireTarget = computed(() => isTargetMode.value && !isDisabled.value);
108
+ const ariaLabel = computed(() => props.ariaLabel || void 0);
109
+ const ariaLabelledby = computed(() => props.ariaLabelledby || void 0);
110
+ const ariaDescribedby = computed(() => props.ariaDescribedby || void 0);
105
111
  const rootClass = computed(() => bem("rp-popover", {
106
112
  [`placement-${placement.value}`]: true,
107
113
  target: isTargetMode.value,
@@ -262,6 +268,9 @@ function usePopover(props, emitOpenChange) {
262
268
  isVisible,
263
269
  isTargetMode,
264
270
  popoverRole,
271
+ ariaLabel,
272
+ ariaLabelledby,
273
+ ariaDescribedby,
265
274
  shouldRenderContent,
266
275
  rootClass,
267
276
  contentStyle,
@@ -276,8 +285,8 @@ function usePopover(props, emitOpenChange) {
276
285
  }
277
286
  //#endregion
278
287
  //#region src/components/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
279
- var t0 = template("<section data-v-afdc2686 class=rp-popover__content>");
280
- var t1 = template("<span data-v-afdc2686>", 1);
288
+ var t0 = template("<section data-v-fd62ef9b class=rp-popover__content>");
289
+ var t1 = template("<span data-v-fd62ef9b>", 1);
281
290
  //#endregion
282
291
  //#region src/components/popover/popover.vue
283
292
  var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -297,6 +306,9 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
297
306
  default: false
298
307
  },
299
308
  role: { default: "dialog" },
309
+ ariaLabel: {},
310
+ ariaLabelledby: {},
311
+ ariaDescribedby: {},
300
312
  closeOnOutsideClick: {
301
313
  type: Boolean,
302
314
  default: true
@@ -310,7 +322,7 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
310
322
  setup(__props, { emit: __emit }) {
311
323
  const props = __props;
312
324
  const emit = __emit;
313
- const { rootRef, popoverId, isVisible, isTargetMode, popoverRole, shouldRenderContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
325
+ const { rootRef, popoverId, isVisible, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
314
326
  emit("update:open", open);
315
327
  });
316
328
  const n12 = t1();
@@ -335,6 +347,9 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
335
347
  renderEffect(() => {
336
348
  setProp(n10, "id", unref(popoverId));
337
349
  setProp(n10, "role", unref(popoverRole));
350
+ setAttr(n10, "aria-label", unref(ariaLabel));
351
+ setAttr(n10, "aria-labelledby", unref(ariaLabelledby));
352
+ setAttr(n10, "aria-describedby", unref(ariaDescribedby));
338
353
  setStyle(n10, unref(contentStyle));
339
354
  });
340
355
  setInsertionState(n10, null, 0);
@@ -360,8 +375,6 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
360
375
  setStaticTemplateRef(n12, rootRef, null, "rootRef");
361
376
  return n12;
362
377
  }
363
- }), [["__scopeId", "data-v-afdc2686"]]);
378
+ }), [["__scopeId", "data-v-fd62ef9b"]]);
364
379
  //#endregion
365
380
  export { popover_default as t };
366
-
367
- //# sourceMappingURL=popover.js.map
@@ -0,0 +1,17 @@
1
+ //#region src/components/popover/types.ts
2
+ var popoverPlacements = [
3
+ "top-start",
4
+ "top",
5
+ "top-end",
6
+ "right-start",
7
+ "right",
8
+ "right-end",
9
+ "bottom-start",
10
+ "bottom",
11
+ "bottom-end",
12
+ "left-start",
13
+ "left",
14
+ "left-end"
15
+ ];
16
+ //#endregion
17
+ export { popoverPlacements as t };
package/dist/progress.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .rp-progress[data-v-7870ef03] {
2
- --_rp-progress-color: var(--_rp-progress-custom-color, var(--rp-color-control-selected-bg));
2
+ --_rp-progress-color: var(--rp-color-control-selected-bg);
3
3
  --_rp-progress-track-bg: var(--rp-color-control-track-bg);
4
4
  --_rp-progress-track-height: 8px;
5
- --_rp-progress-font-size: var(--rp-font-size-base);
5
+ --_rp-progress-font-size: var(--rp-font-size-md);
6
6
  --_rp-progress-radius: var(--rp-radius-full);
7
7
  --_rp-progress-value: 0%;
8
8
  --_rp-progress-ratio: 0;
@@ -12,7 +12,7 @@
12
12
  gap: var(--rp-spacing-2);
13
13
  font-family: var(--rp-font-family);
14
14
  font-size: var(--_rp-progress-font-size);
15
- line-height: var(--rp-line-height-normal);
15
+ line-height: var(--rp-line-height-md);
16
16
  }
17
17
  .rp-progress__header[data-v-7870ef03] {
18
18
  display: flex;
@@ -27,7 +27,7 @@
27
27
  }
28
28
  .rp-progress__value[data-v-7870ef03] {
29
29
  flex-shrink: 0;
30
- color: var(--rp-color-text-secondary);
30
+ color: var(--rp-color-dimmed);
31
31
  font-variant-numeric: tabular-nums;
32
32
  }
33
33
  .rp-progress__track[data-v-7870ef03] {
@@ -53,45 +53,24 @@
53
53
  min-width: 2rem;
54
54
  animation: rp-progress-indeterminate-7870ef03 1200ms ease-in-out infinite;
55
55
  }
56
- .rp-progress--color-primary[data-v-7870ef03] {
57
- --_rp-progress-color: var(--rp-color-primary);
58
- }
59
- .rp-progress--color-secondary[data-v-7870ef03] {
60
- --_rp-progress-color: var(--rp-color-secondary);
61
- }
62
- .rp-progress--color-success[data-v-7870ef03] {
63
- --_rp-progress-color: var(--rp-color-success);
64
- }
65
- .rp-progress--color-warning[data-v-7870ef03] {
66
- --_rp-progress-color: var(--rp-color-warning);
67
- }
68
- .rp-progress--color-danger[data-v-7870ef03] {
69
- --_rp-progress-color: var(--rp-color-danger);
70
- }
71
- .rp-progress--color-info[data-v-7870ef03] {
72
- --_rp-progress-color: var(--rp-color-info);
73
- }
74
- .rp-progress--color-neutral[data-v-7870ef03] {
75
- --_rp-progress-color: var(--rp-color-neutral);
76
- }
77
56
  .rp-progress--size-xs[data-v-7870ef03] {
78
- --_rp-progress-track-height: 4px;
57
+ --_rp-progress-track-height: 3px;
79
58
  --_rp-progress-font-size: var(--rp-font-size-xs);
80
59
  }
81
60
  .rp-progress--size-sm[data-v-7870ef03] {
82
- --_rp-progress-track-height: 6px;
61
+ --_rp-progress-track-height: 5px;
83
62
  --_rp-progress-font-size: var(--rp-font-size-sm);
84
63
  }
85
64
  .rp-progress--size-md[data-v-7870ef03] {
86
65
  --_rp-progress-track-height: 8px;
87
- --_rp-progress-font-size: var(--rp-font-size-base);
66
+ --_rp-progress-font-size: var(--rp-font-size-md);
88
67
  }
89
68
  .rp-progress--size-lg[data-v-7870ef03] {
90
- --_rp-progress-track-height: 10px;
69
+ --_rp-progress-track-height: 12px;
91
70
  --_rp-progress-font-size: var(--rp-font-size-lg);
92
71
  }
93
72
  .rp-progress--size-xl[data-v-7870ef03] {
94
- --_rp-progress-track-height: 12px;
73
+ --_rp-progress-track-height: 16px;
95
74
  --_rp-progress-font-size: var(--rp-font-size-xl);
96
75
  }
97
76
  .rp-progress--radius-none[data-v-7870ef03] {
package/dist/progress.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import './progress.css';
2
2
  import { t as bem } from "./bem.js";
3
+ import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
3
4
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
4
- import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
5
5
  import { t as useControlState } from "./useControlState.js";
6
6
  import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref } from "vue";
7
7
  //#region src/components/progress/useProgress.ts
@@ -33,9 +33,6 @@ function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
33
33
  if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
34
34
  if (formatter) return String(formatter(value, percent));
35
35
  }
36
- function setProgressStyleValue(style, property, value) {
37
- if (value) style[property] = value;
38
- }
39
36
  function useProgress(props) {
40
37
  const control = useControlState(props);
41
38
  const bounds = computed(() => normalizeProgressBounds(props.min, props.max));
@@ -47,7 +44,6 @@ function useProgress(props) {
47
44
  return {
48
45
  control,
49
46
  rootClass: computed(() => bem("rp-progress", {
50
- [`color-${props.color}`]: isComponentPresetColor(props.color),
51
47
  [`size-${props.size}`]: Boolean(props.size),
52
48
  [`radius-${props.radius}`]: Boolean(props.radius),
53
49
  indeterminate: isIndeterminate.value
@@ -57,7 +53,8 @@ function useProgress(props) {
57
53
  "--_rp-progress-value": `${valuePercent.value}%`,
58
54
  "--_rp-progress-ratio": `${valuePercent.value / 100}`
59
55
  };
60
- setProgressStyleValue(style, "--_rp-progress-custom-color", getComponentCustomColor(props.color));
56
+ const colorValue = getComponentColorValue(props.color);
57
+ if (colorValue) style["--_rp-progress-color"] = colorValue;
61
58
  return style;
62
59
  }),
63
60
  isIndeterminate,
@@ -174,5 +171,3 @@ var progressRadiuses = [
174
171
  ];
175
172
  //#endregion
176
173
  export { progress_default as i, progressRadiuses as n, progressSizes as r, progressColors as t };
177
-
178
- //# sourceMappingURL=progress.js.map
package/dist/radio.css CHANGED
@@ -1,9 +1,9 @@
1
- .rp-radio[data-v-18269eb4] {
2
- --_rp-radio-color: var(--_rp-radio-custom-color, var(--rp-color-control-selected-bg));
3
- --_rp-radio-on-color: var(--_rp-radio-custom-on-color, var(--rp-color-control-selected-fg));
4
- --_rp-radio-size: 18px;
5
- --_rp-radio-dot: 8px;
6
- --_rp-radio-font-size: var(--rp-font-size-base);
1
+ .rp-radio[data-v-c9fb5041] {
2
+ --_rp-radio-color: var(--rp-color-control-selected-bg);
3
+ --_rp-radio-on-color: var(--rp-color-control-selected-fg);
4
+ --_rp-radio-size: 24px;
5
+ --_rp-radio-dot: 10px;
6
+ --_rp-radio-font-size: var(--rp-font-size-md);
7
7
  --_rp-radio-checked-bg: var(--_rp-radio-color);
8
8
  --_rp-radio-checked-border: var(--_rp-radio-color);
9
9
  --_rp-radio-checked-dot: var(--_rp-radio-on-color);
@@ -13,15 +13,15 @@
13
13
  font-family: var(--rp-font-family);
14
14
  user-select: none;
15
15
  }
16
- .rp-radio--disabled[data-v-18269eb4] {
16
+ .rp-radio--disabled[data-v-c9fb5041] {
17
17
  opacity: var(--rp-opacity-disabled);
18
18
  cursor: not-allowed;
19
19
  }
20
- .rp-radio[data-v-18269eb4] {
20
+ .rp-radio[data-v-c9fb5041] {
21
21
  gap: var(--rp-spacing-2);
22
22
  font-size: var(--_rp-radio-font-size);
23
23
  }
24
- .rp-radio__native[data-v-18269eb4] {
24
+ .rp-radio__native[data-v-c9fb5041] {
25
25
  position: absolute;
26
26
  width: 1px;
27
27
  height: 1px;
@@ -33,11 +33,11 @@
33
33
  border-width: 0;
34
34
  pointer-events: none;
35
35
  }
36
- .rp-radio__native:focus-visible + .rp-radio__dot[data-v-18269eb4] {
37
- border-color: var(--rp-color-primary);
36
+ .rp-radio__native:focus-visible + .rp-radio__dot[data-v-c9fb5041] {
37
+ border-color: var(--rp-color-control-border-focus);
38
38
  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
39
39
  }
40
- .rp-radio__dot[data-v-18269eb4] {
40
+ .rp-radio__dot[data-v-c9fb5041] {
41
41
  display: inline-flex;
42
42
  align-items: center;
43
43
  justify-content: center;
@@ -49,7 +49,7 @@
49
49
  background-color: var(--rp-color-control-bg);
50
50
  transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
51
51
  }
52
- .rp-radio__dot[data-v-18269eb4]::after {
52
+ .rp-radio__dot[data-v-c9fb5041]::after {
53
53
  content: "";
54
54
  width: var(--_rp-radio-dot);
55
55
  height: var(--_rp-radio-dot);
@@ -58,75 +58,47 @@
58
58
  transform: scale(0);
59
59
  transition: transform var(--rp-transition-fast);
60
60
  }
61
- .rp-radio--checked .rp-radio__dot[data-v-18269eb4] {
61
+ .rp-radio--checked .rp-radio__dot[data-v-c9fb5041] {
62
62
  background-color: var(--_rp-radio-checked-bg);
63
63
  border-color: var(--_rp-radio-checked-border);
64
64
  }
65
- .rp-radio--checked .rp-radio__dot[data-v-18269eb4]::after {
65
+ .rp-radio--checked .rp-radio__dot[data-v-c9fb5041]::after {
66
66
  transform: scale(1);
67
67
  }
68
- .rp-radio__label[data-v-18269eb4] {
69
- line-height: var(--rp-line-height-normal);
68
+ .rp-radio__label[data-v-c9fb5041] {
69
+ line-height: var(--rp-line-height-md);
70
70
  color: var(--rp-color-text);
71
71
  }
72
- .rp-radio--color-primary[data-v-18269eb4] {
73
- --_rp-radio-color: var(--rp-color-primary);
74
- --_rp-radio-on-color: var(--rp-color-on-primary);
75
- }
76
- .rp-radio--color-secondary[data-v-18269eb4] {
77
- --_rp-radio-color: var(--rp-color-secondary);
78
- --_rp-radio-on-color: var(--rp-color-on-secondary);
79
- }
80
- .rp-radio--color-success[data-v-18269eb4] {
81
- --_rp-radio-color: var(--rp-color-success);
82
- --_rp-radio-on-color: var(--rp-color-on-success);
83
- }
84
- .rp-radio--color-warning[data-v-18269eb4] {
85
- --_rp-radio-color: var(--rp-color-warning);
86
- --_rp-radio-on-color: var(--rp-color-on-warning);
87
- }
88
- .rp-radio--color-danger[data-v-18269eb4] {
89
- --_rp-radio-color: var(--rp-color-danger);
90
- --_rp-radio-on-color: var(--rp-color-on-danger);
91
- }
92
- .rp-radio--color-info[data-v-18269eb4] {
93
- --_rp-radio-color: var(--rp-color-info);
94
- --_rp-radio-on-color: var(--rp-color-on-info);
95
- }
96
- .rp-radio--color-neutral[data-v-18269eb4] {
97
- --_rp-radio-color: var(--rp-color-neutral);
98
- --_rp-radio-on-color: var(--rp-color-on-neutral);
99
- }
100
- .rp-radio--outline[data-v-18269eb4] {
72
+ .rp-radio--outline[data-v-c9fb5041] {
101
73
  --_rp-radio-checked-bg: var(--rp-color-control-bg);
102
74
  --_rp-radio-checked-border: var(--_rp-radio-color);
103
75
  --_rp-radio-checked-dot: var(--_rp-radio-color);
104
76
  }
105
- .rp-radio--size-xs[data-v-18269eb4] {
106
- --_rp-radio-size: 14px;
77
+ .rp-radio--size-xs[data-v-c9fb5041] {
78
+ --_rp-radio-size: 16px;
107
79
  --_rp-radio-dot: 6px;
108
80
  --_rp-radio-font-size: var(--rp-font-size-xs);
109
81
  }
110
- .rp-radio--size-sm[data-v-18269eb4] {
111
- --_rp-radio-size: 16px;
112
- --_rp-radio-dot: 7px;
113
- --_rp-radio-font-size: var(--rp-font-size-sm);
114
- }
115
- .rp-radio--size-md[data-v-18269eb4] {
116
- --_rp-radio-size: 18px;
82
+ .rp-radio--size-sm[data-v-c9fb5041] {
83
+ --_rp-radio-size: 20px;
117
84
  --_rp-radio-dot: 8px;
118
- --_rp-radio-font-size: var(--rp-font-size-base);
85
+ --_rp-radio-font-size: var(--rp-font-size-sm);
119
86
  }
120
- .rp-radio--size-lg[data-v-18269eb4] {
121
- --_rp-radio-size: 22px;
87
+ .rp-radio--size-md[data-v-c9fb5041] {
88
+ --_rp-radio-size: 24px;
122
89
  --_rp-radio-dot: 10px;
90
+ --_rp-radio-font-size: var(--rp-font-size-md);
91
+ }
92
+ .rp-radio--size-lg[data-v-c9fb5041] {
93
+ --_rp-radio-size: 30px;
94
+ --_rp-radio-dot: 14px;
123
95
  --_rp-radio-font-size: var(--rp-font-size-lg);
124
96
  }
125
- .rp-radio--size-xl[data-v-18269eb4] {
126
- --_rp-radio-size: 26px;
127
- --_rp-radio-dot: 12px;
97
+ .rp-radio--size-xl[data-v-c9fb5041] {
98
+ --_rp-radio-size: 36px;
99
+ --_rp-radio-dot: 16px;
128
100
  --_rp-radio-font-size: var(--rp-font-size-xl);
129
- }.rp-radio-group[data-v-a2c46e46] {
101
+ }.rp-radio-group[data-v-4ef9fed2] {
130
102
  display: flex;
131
103
  flex-direction: column;
132
104
  gap: var(--rp-spacing-3);
package/dist/radio.js CHANGED
@@ -1,21 +1,22 @@
1
1
  import './radio.css';
2
- import { t as useRequiredInject } from "./useRequiredInject.js";
3
2
  import { t as bem } from "./bem.js";
3
+ import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
4
4
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
5
- import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
5
+ import { t as useRequiredInject } from "./useRequiredInject.js";
6
6
  import { t as useControlState } from "./useControlState.js";
7
7
  import { child, computed, createIf, createSlot, defineVaporComponent, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setValue, template, unref, useId } from "vue";
8
8
  //#region src/components/radio/types.ts
9
9
  var radioGroupKey = Symbol("radioGroup");
10
10
  //#endregion
11
11
  //#region src/components/radio/useRadio.ts
12
- function getRadioColorStyle(color) {
13
- const customColor = getComponentCustomColor(color);
14
- if (!customColor) return void 0;
15
- return {
16
- "--_rp-radio-custom-color": customColor,
17
- "--_rp-radio-custom-on-color": "var(--rp-color-on-primary)"
18
- };
12
+ function getRadioColorStyle(color, autoContrast) {
13
+ const colorValue = getComponentColorValue(color);
14
+ if (color && !colorValue) return void 0;
15
+ if (!colorValue && !autoContrast) return void 0;
16
+ const style = {};
17
+ if (colorValue) style["--_rp-radio-color"] = colorValue;
18
+ if (autoContrast) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
19
+ return style;
19
20
  }
20
21
  function useRadio(props) {
21
22
  const group = useRequiredInject(radioGroupKey, "RpRadio");
@@ -23,15 +24,15 @@ function useRadio(props) {
23
24
  const isDisabled = computed(() => props.disabled || group.disabled);
24
25
  const variant = computed(() => props.variant ?? group.variant);
25
26
  const color = computed(() => props.color ?? group.color);
27
+ const autoContrast = computed(() => props.autoContrast ?? group.autoContrast);
26
28
  const size = computed(() => props.size ?? group.size);
27
29
  const rootClass = computed(() => bem("rp-radio", {
28
30
  checked: isChecked.value,
29
31
  disabled: isDisabled.value,
30
32
  [variant.value ?? ""]: Boolean(variant.value),
31
- [`color-${color.value}`]: isComponentPresetColor(color.value),
32
33
  [`size-${size.value}`]: Boolean(size.value)
33
34
  }));
34
- const rootStyle = computed(() => getRadioColorStyle(color.value));
35
+ const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value));
35
36
  function onSelect() {
36
37
  if (isDisabled.value) return;
37
38
  group.select(props.value);
@@ -72,6 +73,9 @@ function useRadioGroup(props, emitUpdate) {
72
73
  get color() {
73
74
  return props.color;
74
75
  },
76
+ get autoContrast() {
77
+ return props.autoContrast;
78
+ },
75
79
  get size() {
76
80
  return props.size;
77
81
  },
@@ -86,8 +90,8 @@ function useRadioGroup(props, emitUpdate) {
86
90
  }
87
91
  //#endregion
88
92
  //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
89
- var t0$1 = template("<span data-v-18269eb4 class=rp-radio__label>");
90
- var t1 = template("<label data-v-18269eb4><input data-v-18269eb4 type=radio class=rp-radio__native><span data-v-18269eb4 class=rp-radio__dot></span>", 1);
93
+ var t0$1 = template("<span data-v-c9fb5041 class=rp-radio__label>");
94
+ var t1 = template("<label data-v-c9fb5041><input data-v-c9fb5041 type=radio class=rp-radio__native><span data-v-c9fb5041 class=rp-radio__dot></span>", 1);
91
95
  //#endregion
92
96
  //#region src/components/radio/radio.vue
93
97
  var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -97,6 +101,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
97
101
  value: {},
98
102
  variant: { default: void 0 },
99
103
  color: { default: void 0 },
104
+ autoContrast: {
105
+ type: Boolean,
106
+ default: void 0
107
+ },
100
108
  size: { default: void 0 },
101
109
  disabled: {
102
110
  type: Boolean,
@@ -130,10 +138,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
130
138
  });
131
139
  return n5;
132
140
  }
133
- }), [["__scopeId", "data-v-18269eb4"]]);
141
+ }), [["__scopeId", "data-v-c9fb5041"]]);
134
142
  //#endregion
135
143
  //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
136
- var t0 = template("<div data-v-a2c46e46 role=radiogroup>", 1);
144
+ var t0 = template("<div data-v-4ef9fed2 role=radiogroup>", 1);
137
145
  //#endregion
138
146
  //#region src/components/radio/radio-group.vue
139
147
  var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -145,6 +153,10 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
145
153
  modelValue: {},
146
154
  variant: { default: void 0 },
147
155
  color: { default: void 0 },
156
+ autoContrast: {
157
+ type: Boolean,
158
+ default: void 0
159
+ },
148
160
  size: { default: void 0 },
149
161
  disabled: {
150
162
  type: Boolean,
@@ -187,8 +199,6 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
187
199
  createSlot("default", null, null, 1);
188
200
  return n1;
189
201
  }
190
- }), [["__scopeId", "data-v-a2c46e46"]]);
202
+ }), [["__scopeId", "data-v-4ef9fed2"]]);
191
203
  //#endregion
192
204
  export { radio_default as n, radio_group_default as t };
193
-
194
- //# sourceMappingURL=radio.js.map