ropav 0.1.1 → 0.1.3

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 (56) hide show
  1. package/README.md +79 -0
  2. package/dist/accordion.css +5 -16
  3. package/dist/accordion.js +11 -28
  4. package/dist/button-link.js +2 -2
  5. package/dist/button.js +2 -2
  6. package/dist/collapse.js +1 -4
  7. package/dist/components/accordion/index.d.ts +1 -1
  8. package/dist/components/accordion/types.d.ts +0 -4
  9. package/dist/components/dialog/dialog-core.d.ts +4 -2
  10. package/dist/components/scroll-area/index.d.ts +3 -0
  11. package/dist/components/scroll-area/index.js +3 -0
  12. package/dist/components/scroll-area/scroll-area.d.ts +42 -0
  13. package/dist/components/scroll-area/scrollAreaCore.d.ts +25 -0
  14. package/dist/components/scroll-area/types.d.ts +33 -0
  15. package/dist/components/scroll-area/useScrollArea.d.ts +54 -0
  16. package/dist/components/scroll-area/useScrollAreaControls.d.ts +21 -0
  17. package/dist/components/scroll-area/useScrollAreaMetrics.d.ts +35 -0
  18. package/dist/components/scroll-area/useScrollAreaPointer.d.ts +17 -0
  19. package/dist/components/scroll-area/useScrollAreaPresentation.d.ts +49 -0
  20. package/dist/components/scroll-area/useScrollAreaVisibility.d.ts +27 -0
  21. package/dist/components/select/useSelect.d.ts +7 -5
  22. package/dist/components/select/useSelectNativeControl.d.ts +9 -0
  23. package/dist/components/select/useSelectNativeValue.d.ts +15 -0
  24. package/dist/components/slider/index.d.ts +1 -1
  25. package/dist/components/slider/range-slider.d.ts +7 -11
  26. package/dist/components/slider/slider.d.ts +7 -14
  27. package/dist/components/slider/sliderCore.d.ts +7 -4
  28. package/dist/components/slider/types.d.ts +46 -4
  29. package/dist/components/slider/useRangeSlider.d.ts +2 -1
  30. package/dist/components/slider/useSlider.d.ts +13 -3
  31. package/dist/dialog.js +23 -6
  32. package/dist/field.js +1 -1
  33. package/dist/index.d.ts +1 -0
  34. package/dist/index.js +3 -1
  35. package/dist/input.js +1 -1
  36. package/dist/modal.css +28 -29
  37. package/dist/modal.js +11 -12
  38. package/dist/number-input.css +3 -6
  39. package/dist/popover.js +1 -4
  40. package/dist/progress.js +1 -1
  41. package/dist/scroll-area.css +131 -0
  42. package/dist/scroll-area.js +696 -0
  43. package/dist/scroll-area2.js +23 -0
  44. package/dist/select.css +47 -45
  45. package/dist/select.js +168 -130
  46. package/dist/slider.css +256 -166
  47. package/dist/slider.js +334 -140
  48. package/dist/switch.css +17 -17
  49. package/dist/switch.js +10 -5
  50. package/dist/tabs.css +23 -18
  51. package/dist/tabs.js +16 -14
  52. package/dist/tooltip.js +1 -4
  53. package/dist/unplugin-icons.d.ts +5 -0
  54. package/dist/unplugin-icons.js +40 -0
  55. package/docs/public-styles-api.md +6 -3
  56. package/package.json +55 -35
package/dist/switch.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer ropav.components {
2
- .rp-switch[data-v-d966892e] {
2
+ .rp-switch[data-v-81b33803] {
3
3
  --_rp-switch-color: var(--rp-color-control-selected-bg);
4
4
  --_rp-switch-font-size: var(--rp-font-size-md);
5
5
  --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
26
26
  font-family: var(--rp-font-family);
27
27
  user-select: none;
28
28
  }
29
- .rp-switch--disabled[data-v-d966892e] {
29
+ .rp-switch--disabled[data-v-81b33803] {
30
30
  opacity: var(--rp-opacity-disabled);
31
31
  cursor: not-allowed;
32
32
  }
33
- .rp-switch[data-v-d966892e] {
33
+ .rp-switch[data-v-81b33803] {
34
34
  gap: var(--rp-spacing-2);
35
35
  font-size: var(--_rp-switch-font-size);
36
36
  }
37
- .rp-switch__native[data-v-d966892e] {
37
+ .rp-switch__native[data-v-81b33803] {
38
38
  position: absolute;
39
39
  width: 1px;
40
40
  height: 1px;
@@ -46,11 +46,11 @@
46
46
  border-width: 0;
47
47
  pointer-events: none;
48
48
  }
49
- .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
49
+ .rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
50
50
  border-color: var(--rp-color-control-border-focus);
51
51
  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
52
52
  }
53
- .rp-switch__track[data-v-d966892e] {
53
+ .rp-switch__track[data-v-81b33803] {
54
54
  position: relative;
55
55
  display: inline-flex;
56
56
  align-items: center;
@@ -61,17 +61,17 @@
61
61
  border-radius: var(--rp-radius-full);
62
62
  transition: background-color var(--rp-transition-fast);
63
63
  }
64
- .rp-switch--checked .rp-switch__track[data-v-d966892e] {
64
+ .rp-switch--checked .rp-switch__track[data-v-81b33803] {
65
65
  background-color: var(--_rp-switch-color);
66
66
  }
67
- .rp-switch--invalid .rp-switch__track[data-v-d966892e] {
67
+ .rp-switch--invalid .rp-switch__track[data-v-81b33803] {
68
68
  outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
69
69
  outline-offset: var(--_rp-switch-thumb-offset);
70
70
  }
71
- .rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
71
+ .rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
72
72
  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
73
73
  }
74
- .rp-switch__thumb[data-v-d966892e] {
74
+ .rp-switch__thumb[data-v-81b33803] {
75
75
  position: absolute;
76
76
  left: var(--_rp-switch-thumb-offset);
77
77
  width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
81
81
  box-shadow: var(--rp-shadow-sm);
82
82
  transition: transform var(--rp-transition-fast);
83
83
  }
84
- .rp-switch--checked .rp-switch__thumb[data-v-d966892e] {
84
+ .rp-switch--checked .rp-switch__thumb[data-v-81b33803] {
85
85
  transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
86
86
  }
87
- .rp-switch__label[data-v-d966892e] {
87
+ .rp-switch__label[data-v-81b33803] {
88
88
  line-height: var(--rp-line-height-md);
89
89
  color: var(--rp-color-text);
90
90
  }
91
- .rp-switch--size-xs[data-v-d966892e] {
91
+ .rp-switch--size-xs[data-v-81b33803] {
92
92
  --_rp-switch-default-track-width: 32px;
93
93
  --_rp-switch-default-track-height: 16px;
94
94
  --_rp-switch-default-thumb-size: 12px;
95
95
  --_rp-switch-font-size: var(--rp-font-size-xs);
96
96
  }
97
- .rp-switch--size-sm[data-v-d966892e] {
97
+ .rp-switch--size-sm[data-v-81b33803] {
98
98
  --_rp-switch-default-track-width: 38px;
99
99
  --_rp-switch-default-track-height: 20px;
100
100
  --_rp-switch-default-thumb-size: 14px;
101
101
  --_rp-switch-font-size: var(--rp-font-size-sm);
102
102
  }
103
- .rp-switch--size-md[data-v-d966892e] {
103
+ .rp-switch--size-md[data-v-81b33803] {
104
104
  --_rp-switch-default-track-width: 46px;
105
105
  --_rp-switch-default-track-height: 24px;
106
106
  --_rp-switch-default-thumb-size: 18px;
107
107
  --_rp-switch-font-size: var(--rp-font-size-md);
108
108
  }
109
- .rp-switch--size-lg[data-v-d966892e] {
109
+ .rp-switch--size-lg[data-v-81b33803] {
110
110
  --_rp-switch-default-track-width: 56px;
111
111
  --_rp-switch-default-track-height: 30px;
112
112
  --_rp-switch-default-thumb-size: 22px;
113
113
  --_rp-switch-font-size: var(--rp-font-size-lg);
114
114
  }
115
- .rp-switch--size-xl[data-v-d966892e] {
115
+ .rp-switch--size-xl[data-v-81b33803] {
116
116
  --_rp-switch-default-track-width: 72px;
117
117
  --_rp-switch-default-track-height: 36px;
118
118
  --_rp-switch-default-thumb-size: 28px;
package/dist/switch.js CHANGED
@@ -5,7 +5,7 @@ import { n as getComponentColorValue } from "./componentColors.js";
5
5
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
6
6
  import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
7
7
  import { t as useControlState } from "./useControlState.js";
8
- import { child, computed, createIf, createSlot, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
8
+ import { child, computed, createIf, createSlot, defineVaporComponent, next, nextTick, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
9
9
  //#region src/components/switch/useSwitch.ts
10
10
  function getSwitchColorStyle(color) {
11
11
  const colorValue = getComponentColorValue(color);
@@ -23,7 +23,11 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
23
23
  }));
24
24
  const rootStyle = computed(() => getSwitchColorStyle(props.color));
25
25
  function onChange(e) {
26
- emitUpdate(e.target.checked);
26
+ const input = e.target;
27
+ emitUpdate(input.checked);
28
+ nextTick(() => {
29
+ input.checked = getValue();
30
+ });
27
31
  }
28
32
  function focus(options) {
29
33
  inputRef.value?.focus(options);
@@ -39,8 +43,8 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
39
43
  }
40
44
  //#endregion
41
45
  //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
42
- var t0 = template("<span data-v-d966892e>");
43
- var t1 = template("<label data-v-d966892e><input data-v-d966892e><span data-v-d966892e><span data-v-d966892e></span></span>", 1);
46
+ var t0 = template("<span data-v-81b33803>");
47
+ var t1 = template("<label data-v-81b33803><input data-v-81b33803><span data-v-81b33803><span data-v-81b33803></span></span>", 1);
44
48
  //#endregion
45
49
  //#region src/components/switch/switch.vue
46
50
  var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -113,6 +117,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
113
117
  }),
114
118
  "data-disabled": presence(control.disabled),
115
119
  "data-invalid": presence(control.invalid),
120
+ "data-state": controllable.value.value ? "checked" : "unchecked",
116
121
  onChange(event) {
117
122
  onChange(event);
118
123
  attrs.onChange?.(event);
@@ -165,7 +170,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
165
170
  });
166
171
  return n7;
167
172
  }
168
- }), [["__scopeId", "data-v-d966892e"]]);
173
+ }), [["__scopeId", "data-v-81b33803"]]);
169
174
  //#endregion
170
175
  //#region src/components/switch/types.ts
171
176
  var switchParts = [
package/dist/tabs.css CHANGED
@@ -34,45 +34,50 @@
34
34
  flex: 1 1 0;
35
35
  }
36
36
  }@layer ropav.components {
37
- .rp-tabs-list[data-v-5016edc1] {
37
+ .rp-tabs-list[data-v-af4a8aa3] {
38
38
  box-sizing: border-box;
39
39
  display: flex;
40
+ flex-direction: column;
40
41
  align-items: stretch;
41
42
  width: 100%;
42
43
  min-width: 0;
44
+ max-width: 100%;
43
45
  padding: 0;
44
- gap: 0;
45
46
  font-family: var(--rp-font-family);
46
47
  background-color: transparent;
47
48
  border: 0;
48
49
  }
49
- .rp-tabs-list--vertical[data-v-5016edc1] {
50
- flex-direction: column;
50
+ .rp-tabs-list[data-v-af4a8aa3] .rp-scroll-area__content {
51
+ display: flex;
52
+ align-items: stretch;
51
53
  width: max-content;
54
+ min-width: 100%;
55
+ gap: 0;
52
56
  }
53
- .rp-tabs-list--line[data-v-5016edc1] {
57
+ .rp-tabs-list--vertical[data-v-af4a8aa3] {
58
+ width: max-content;
59
+ }
60
+ .rp-tabs-list--vertical[data-v-af4a8aa3] .rp-scroll-area__content {
61
+ flex-direction: column;
62
+ }
63
+ .rp-tabs-list--line[data-v-af4a8aa3] .rp-scroll-area__content {
54
64
  border-bottom: var(--rp-border-width-medium) solid var(--rp-color-default-border);
55
65
  }
56
- .rp-tabs-list--line.rp-tabs-list--vertical[data-v-5016edc1] {
66
+ .rp-tabs-list--line.rp-tabs-list--vertical[data-v-af4a8aa3] .rp-scroll-area__content {
57
67
  border-bottom: 0;
58
68
  border-left: var(--rp-border-width-medium) solid var(--rp-color-default-border);
59
69
  }
60
- .rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-5016edc1] {
70
+ .rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3] .rp-scroll-area__content {
61
71
  border-right: var(--rp-border-width-medium) solid var(--rp-color-default-border);
62
72
  border-left: 0;
63
73
  }
64
- .rp-tabs-list--pills[data-v-5016edc1], .rp-tabs-list--outline[data-v-5016edc1] {
65
- max-width: 100%;
66
- overflow-x: auto;
67
- overflow-y: hidden;
68
- }
69
- .rp-tabs-list--pills[data-v-5016edc1] {
74
+ .rp-tabs-list--pills[data-v-af4a8aa3] .rp-scroll-area__content {
70
75
  gap: var(--rp-spacing-2);
71
76
  }
72
- .rp-tabs-list--outline[data-v-5016edc1] {
77
+ .rp-tabs-list--outline[data-v-af4a8aa3] {
73
78
  position: relative;
74
79
  }
75
- .rp-tabs-list--outline[data-v-5016edc1]::after {
80
+ .rp-tabs-list--outline[data-v-af4a8aa3]::after {
76
81
  position: absolute;
77
82
  z-index: 0;
78
83
  right: 0;
@@ -83,7 +88,7 @@
83
88
  background-color: var(--rp-color-default-border);
84
89
  pointer-events: none;
85
90
  }
86
- .rp-tabs-list--outline.rp-tabs-list--vertical[data-v-5016edc1]::after {
91
+ .rp-tabs-list--outline.rp-tabs-list--vertical[data-v-af4a8aa3]::after {
87
92
  top: 0;
88
93
  right: auto;
89
94
  bottom: 0;
@@ -91,11 +96,11 @@
91
96
  width: var(--rp-border-width-thin);
92
97
  height: auto;
93
98
  }
94
- .rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-5016edc1]::after {
99
+ .rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-af4a8aa3]::after {
95
100
  right: 0;
96
101
  left: auto;
97
102
  }
98
- .rp-tabs-list--disabled[data-v-5016edc1] {
103
+ .rp-tabs-list--disabled[data-v-af4a8aa3] {
99
104
  opacity: var(--rp-opacity-disabled);
100
105
  cursor: not-allowed;
101
106
  }
package/dist/tabs.js CHANGED
@@ -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 useRequiredInject } from "./useRequiredInject.js";
6
- import { computed, createIf, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
6
+ import { t as scroll_area_default } from "./scroll-area.js";
7
+ import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
7
8
  //#region src/components/tabs/useTabs.ts
8
9
  var TABLIST_SELECTOR = ".rp-tabs-list";
9
10
  var TRIGGER_SELECTOR = ".rp-tabs-trigger";
@@ -389,7 +390,7 @@ function useTabsContent(props) {
389
390
  }
390
391
  //#endregion
391
392
  //#region src/components/tabs/tabs.vue?vue&type=script&setup=true&vapor=true&lang.ts
392
- var t0$3 = template("<div data-v-163486d1>", 1);
393
+ var t0$2 = template("<div data-v-163486d1>", 1);
393
394
  //#endregion
394
395
  //#region src/components/tabs/tabs.vue
395
396
  var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -432,7 +433,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
432
433
  ...internalRootProps.value,
433
434
  "data-disabled": presence(props.disabled)
434
435
  }));
435
- const n1 = t0$3();
436
+ const n1 = t0$2();
436
437
  renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
437
438
  setInsertionState(n1, null, 0);
438
439
  createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
@@ -441,7 +442,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
441
442
  }), [["__scopeId", "data-v-163486d1"]]);
442
443
  //#endregion
443
444
  //#region src/components/tabs/tabs-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
444
- var t0$2 = template("<section data-v-7206185c>", 1);
445
+ var t0$1 = template("<section data-v-7206185c>", 1);
445
446
  //#endregion
446
447
  //#region src/components/tabs/tabs-content.vue
447
448
  var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -467,7 +468,7 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
467
468
  const { getRootAttrs } = useStylesApi(props, "root");
468
469
  const rootAttrs = computed(() => getRootAttrs(internalRootProps.value));
469
470
  return createIf(() => unref(shouldRenderContent), () => {
470
- const n3 = t0$2();
471
+ const n3 = t0$1();
471
472
  renderEffect(() => setDynamicProps(n3, [rootAttrs.value]));
472
473
  setInsertionState(n3, null, 0);
473
474
  createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
@@ -476,9 +477,6 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
476
477
  }
477
478
  }), [["__scopeId", "data-v-7206185c"]]);
478
479
  //#endregion
479
- //#region src/components/tabs/tabs-list.vue?vue&type=script&setup=true&vapor=true&lang.ts
480
- var t0$1 = template("<div data-v-5016edc1>", 1);
481
- //#endregion
482
480
  //#region src/components/tabs/tabs-list.vue
483
481
  var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
484
482
  name: "RpTabsList",
@@ -495,18 +493,22 @@ var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
495
493
  setup(__props) {
496
494
  const props = __props;
497
495
  const { rootProps: internalRootProps, slotProps } = useTabsList(props);
496
+ const scrollbarAxis = computed(() => slotProps.value.orientation === "horizontal" ? "x" : "y");
498
497
  const { getRootAttrs } = useStylesApi(props, "root");
499
498
  const rootAttrs = computed(() => getRootAttrs({
500
499
  ...internalRootProps.value,
501
500
  "data-disabled": presence(internalRootProps.value["data-disabled"])
502
501
  }));
503
- const n1 = t0$1();
504
- renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
505
- setInsertionState(n1, null, 0);
506
- createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
507
- return n1;
502
+ return createComponent(scroll_area_default, { $: [() => rootAttrs.value, {
503
+ embedded: "",
504
+ type: "auto",
505
+ scrollbars: () => scrollbarAxis.value,
506
+ "viewport-attrs": () => ({ tabindex: -1 })
507
+ }] }, extend(() => {
508
+ return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
509
+ }, { _: 8 }), true);
508
510
  }
509
- }), [["__scopeId", "data-v-5016edc1"]]);
511
+ }), [["__scopeId", "data-v-af4a8aa3"]]);
510
512
  //#endregion
511
513
  //#region src/components/tabs/tabs-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
512
514
  var t0 = template("<button data-v-6df68725>", 1);
package/dist/tooltip.js CHANGED
@@ -317,10 +317,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
317
317
  to: () => unref(teleportTo),
318
318
  disabled: () => !__props.teleport
319
319
  }, () => {
320
- return createComponent(VaporTransition, {
321
- name: "rp-tooltip-content",
322
- persisted: ""
323
- }, extend(() => {
320
+ return createComponent(VaporTransition, { name: "rp-tooltip-content" }, extend(() => {
324
321
  return createIf(() => unref(shouldRenderContent), () => {
325
322
  const n11 = t2();
326
323
  renderEffect(() => setDynamicProps(n11, [
@@ -0,0 +1,5 @@
1
+ export interface VaporIconCompiler {
2
+ compiler(svg: string, collection: string, icon: string): string;
3
+ }
4
+ /** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
5
+ export declare function vaporIconCompiler(): VaporIconCompiler;
@@ -0,0 +1,40 @@
1
+ import { compile } from "@vue/compiler-vapor";
2
+ //#region src/unplugin-icons.ts
3
+ var randomIdHelper = "const __randId = () => Math.random().toString(36).substr(2, 10);";
4
+ function handleSVGId(svg) {
5
+ if (!/="url\(#/.test(svg)) return {
6
+ svg,
7
+ injectScripts: ""
8
+ };
9
+ const idMap = {};
10
+ return {
11
+ svg: svg.replace(/\b([\w-]+)="url\(#(.+?)\)"/g, (_, attr, id) => {
12
+ idMap[id] = `'${id}':'uicons-'+__randId()`;
13
+ return `:${attr}="'url(#'+idMap['${id}']+')'"`;
14
+ }).replace(/\bid="(.+?)"/g, (full, id) => {
15
+ if (idMap[id]) return `:id="idMap['${id}']"`;
16
+ return full;
17
+ }),
18
+ injectScripts: `${randomIdHelper}const idMap = {${Object.values(idMap).join(",")}};`
19
+ };
20
+ }
21
+ /** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
22
+ function vaporIconCompiler() {
23
+ return { compiler(svg, collection, icon) {
24
+ const name = `${collection}-${icon}`;
25
+ const { injectScripts, svg: handled } = handleSVGId(svg);
26
+ let { code } = compile(handled, {
27
+ filename: `${name}.vue`,
28
+ prefixIdentifiers: true
29
+ });
30
+ code = code.replace(/^export /gm, "");
31
+ const setup = injectScripts ? `,\n setup() {${injectScripts};return { idMap }}` : "";
32
+ return `${code}
33
+ import { defineVaporComponent, markRaw } from 'vue';
34
+
35
+ export default markRaw(defineVaporComponent({ name: ${JSON.stringify(name)}, render${setup} }))
36
+ /* vite-plugin-components disabled */`;
37
+ } };
38
+ }
39
+ //#endregion
40
+ export { vaporIconCompiler };
@@ -26,7 +26,7 @@ Ropav does not expose a `vars` prop. Public CSS variables are set through CSS, t
26
26
 
27
27
  - Classes merge as internal classes, compatibility classes, `classNames`, then root `class` attributes.
28
28
  - Styles merge as internal styles, compatibility styles, `styles`, then root `style` attributes. Later stages win a duplicate property.
29
- - `inputAttrs` styling and `thumbStyle` are compatibility stages because these escape hatches also carry non-styling behavior.
29
+ - `inputAttrs` styling is a compatibility stage because this escape hatch also carries non-styling behavior.
30
30
  - Attributes and native listeners are forwarded exactly once to the public root host. Internal native handlers run before consumer handlers.
31
31
  - Declared component events remain component events. Component-owned roles, ARIA and behavioral attributes remain authoritative.
32
32
  - Composite components do not copy root attributes into their child components. Teleported roots receive attributes on the rendered host, not on the virtual teleport node.
@@ -64,7 +64,8 @@ Only independently useful semantic elements are public parts. Conditional parts
64
64
  | Radio | `root`, `input`, `indicator`, `label` |
65
65
  | RadioGroup | `root` |
66
66
  | Select | `root`, `trigger`, `value`, `indicator`, `clear`, `content`, `option`, `empty` |
67
- | Slider, RangeSlider | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip` |
67
+ | Slider | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip` |
68
+ | RangeSlider | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip` |
68
69
  | Switch | `root`, `input`, `track`, `thumb`, `label` |
69
70
  | Tabs, TabsList, TabsTrigger, TabsContent | `root` on each component |
70
71
  | Textarea | `root`, `input` |
@@ -90,8 +91,10 @@ Boolean states use presence semantics: the attribute value is empty when true an
90
91
  - `data-selected`: Select options and ColorPicker swatches.
91
92
  - `data-highlighted`: Select options and DropdownMenu items.
92
93
  - `data-filled`: Slider and RangeSlider marks.
94
+ - `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
95
+ - `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
93
96
  - `data-submenu`: DropdownMenu items that own children.
94
- - `data-orientation="horizontal|vertical"`: Accordion, ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
97
+ - `data-orientation="horizontal|vertical"`: ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
95
98
  - `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
96
99
  - `data-side="top|right|bottom|left"`: the side component of the final placement for Popover, DropdownMenu and Tooltip.
97
100
  - `data-control="increment|decrement"`: NumberInput controls.
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "ropav",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
+ "packageManager": "pnpm@11.13.1",
6
7
  "engines": {
7
8
  "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
8
9
  },
@@ -131,6 +132,10 @@
131
132
  "types": "./dist/components/radio/index.d.ts",
132
133
  "import": "./dist/components/radio/index.js"
133
134
  },
135
+ "./scroll-area": {
136
+ "types": "./dist/components/scroll-area/index.d.ts",
137
+ "import": "./dist/components/scroll-area/index.js"
138
+ },
134
139
  "./select": {
135
140
  "types": "./dist/components/select/index.d.ts",
136
141
  "import": "./dist/components/select/index.js"
@@ -163,13 +168,58 @@
163
168
  "types": "./dist/components/tooltip/index.d.ts",
164
169
  "import": "./dist/components/tooltip/index.js"
165
170
  },
171
+ "./unplugin-icons": {
172
+ "types": "./dist/unplugin-icons.d.ts",
173
+ "import": "./dist/unplugin-icons.js"
174
+ },
166
175
  "./base.css": "./dist/base.css",
167
176
  "./styles-manifest": "./src/styles/styles-manifest.json",
168
177
  "./styles-manifest.json": "./src/styles/styles-manifest.json",
169
178
  "./scss/*.scss": "./src/styles/*.scss"
170
179
  },
180
+ "scripts": {
181
+ "dev": "pnpm run storybook",
182
+ "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
183
+ "tokens:check": "node scripts/check-tokens.mjs",
184
+ "styles:manifest:bootstrap": "node scripts/bootstrap-public-styles-manifest.mjs",
185
+ "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
186
+ "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
187
+ "lint": "oxlint",
188
+ "lint:fix": "oxlint --fix",
189
+ "format": "oxfmt",
190
+ "format:check": "oxfmt --check",
191
+ "test": "vitest run --project=unit",
192
+ "test:consumer-types": "pnpm run test:package",
193
+ "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
194
+ "test:exports": "pnpm run test:package",
195
+ "test:exports:built": "node scripts/check-exports.mjs",
196
+ "test:consumer-fixture:built": "node tests/fixtures/consumer-app/check.mjs && vue-tsc -p tests/fixtures/consumer-app/tsconfig.json --noEmit && vite build --config tests/fixtures/consumer-app/vite.config.ts && node tests/fixtures/consumer-app/assertions.mjs",
197
+ "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
198
+ "test:watch": "vitest --project=unit",
199
+ "test:typecheck": "vitest run --project=unit --typecheck",
200
+ "test:storybook": "vitest run --project=storybook",
201
+ "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
202
+ "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
203
+ "prepublishOnly": "pnpm run test:package",
204
+ "preview": "vite preview",
205
+ "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
206
+ "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
207
+ "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md",
208
+ "changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md -r 0",
209
+ "release": "pnpm run test:package && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
210
+ },
171
211
  "peerDependencies": {
172
- "vue": "^3.6.0-beta.4"
212
+ "@vue/compiler-vapor": "3.6.0-rc.1",
213
+ "unplugin-icons": "^23.0.1",
214
+ "vue": "^3.6.0-rc.1"
215
+ },
216
+ "peerDependenciesMeta": {
217
+ "@vue/compiler-vapor": {
218
+ "optional": true
219
+ },
220
+ "unplugin-icons": {
221
+ "optional": true
222
+ }
173
223
  },
174
224
  "dependencies": {
175
225
  "@floating-ui/dom": "^1.8.0",
@@ -183,7 +233,7 @@
183
233
  "@types/node": "^26.1.1",
184
234
  "@vitejs/plugin-vue": "^6.0.8",
185
235
  "@vitest/browser-playwright": "^4.1.10",
186
- "@vue/compiler-vapor": "3.6.0-beta.17",
236
+ "@vue/compiler-vapor": "3.6.0-rc.1",
187
237
  "@vue/tsconfig": "^0.9.1",
188
238
  "bumpp": "^11.1.0",
189
239
  "conventional-changelog": "^8.1.0",
@@ -200,41 +250,11 @@
200
250
  "vite": "^8.1.5",
201
251
  "vite-plugin-dts": "^5.0.3",
202
252
  "vitest": "^4.1.10",
203
- "vue": "3.6.0-beta.17",
253
+ "vue": "3.6.0-rc.1",
204
254
  "vue-tsc": "^3.3.7"
205
255
  },
206
256
  "repository": {
207
257
  "type": "git",
208
258
  "url": "https://github.com/daopk/ropav"
209
- },
210
- "scripts": {
211
- "dev": "pnpm run storybook",
212
- "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
213
- "tokens:check": "node scripts/check-tokens.mjs",
214
- "styles:manifest:bootstrap": "node scripts/bootstrap-public-styles-manifest.mjs",
215
- "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
216
- "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
217
- "lint": "oxlint",
218
- "lint:fix": "oxlint --fix",
219
- "format": "oxfmt",
220
- "format:check": "oxfmt --check",
221
- "test": "vitest run --project=unit",
222
- "test:consumer-types": "pnpm run test:package",
223
- "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
224
- "test:exports": "pnpm run test:package",
225
- "test:exports:built": "node scripts/check-exports.mjs",
226
- "test:consumer-fixture:built": "node tests/fixtures/consumer-app/check.mjs && vue-tsc -p tests/fixtures/consumer-app/tsconfig.json --noEmit && vite build --config tests/fixtures/consumer-app/vite.config.ts && node tests/fixtures/consumer-app/assertions.mjs",
227
- "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
228
- "test:watch": "vitest --project=unit",
229
- "test:typecheck": "vitest run --project=unit --typecheck",
230
- "test:storybook": "vitest run --project=storybook",
231
- "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
232
- "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
233
- "preview": "vite preview",
234
- "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
235
- "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
236
- "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md",
237
- "changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md -r 0",
238
- "release": "pnpm run test:package && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
239
259
  }
240
- }
260
+ }