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.
- package/README.md +79 -0
- package/dist/accordion.css +5 -16
- package/dist/accordion.js +11 -28
- package/dist/button-link.js +2 -2
- package/dist/button.js +2 -2
- package/dist/collapse.js +1 -4
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/accordion/types.d.ts +0 -4
- package/dist/components/dialog/dialog-core.d.ts +4 -2
- package/dist/components/scroll-area/index.d.ts +3 -0
- package/dist/components/scroll-area/index.js +3 -0
- package/dist/components/scroll-area/scroll-area.d.ts +42 -0
- package/dist/components/scroll-area/scrollAreaCore.d.ts +25 -0
- package/dist/components/scroll-area/types.d.ts +33 -0
- package/dist/components/scroll-area/useScrollArea.d.ts +54 -0
- package/dist/components/scroll-area/useScrollAreaControls.d.ts +21 -0
- package/dist/components/scroll-area/useScrollAreaMetrics.d.ts +35 -0
- package/dist/components/scroll-area/useScrollAreaPointer.d.ts +17 -0
- package/dist/components/scroll-area/useScrollAreaPresentation.d.ts +49 -0
- package/dist/components/scroll-area/useScrollAreaVisibility.d.ts +27 -0
- package/dist/components/select/useSelect.d.ts +7 -5
- package/dist/components/select/useSelectNativeControl.d.ts +9 -0
- package/dist/components/select/useSelectNativeValue.d.ts +15 -0
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/slider/range-slider.d.ts +7 -11
- package/dist/components/slider/slider.d.ts +7 -14
- package/dist/components/slider/sliderCore.d.ts +7 -4
- package/dist/components/slider/types.d.ts +46 -4
- package/dist/components/slider/useRangeSlider.d.ts +2 -1
- package/dist/components/slider/useSlider.d.ts +13 -3
- package/dist/dialog.js +23 -6
- package/dist/field.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -1
- package/dist/input.js +1 -1
- package/dist/modal.css +28 -29
- package/dist/modal.js +11 -12
- package/dist/number-input.css +3 -6
- package/dist/popover.js +1 -4
- package/dist/progress.js +1 -1
- package/dist/scroll-area.css +131 -0
- package/dist/scroll-area.js +696 -0
- package/dist/scroll-area2.js +23 -0
- package/dist/select.css +47 -45
- package/dist/select.js +168 -130
- package/dist/slider.css +256 -166
- package/dist/slider.js +334 -140
- package/dist/switch.css +17 -17
- package/dist/switch.js +10 -5
- package/dist/tabs.css +23 -18
- package/dist/tabs.js +16 -14
- package/dist/tooltip.js +1 -4
- package/dist/unplugin-icons.d.ts +5 -0
- package/dist/unplugin-icons.js +40 -0
- package/docs/public-styles-api.md +6 -3
- package/package.json +55 -35
package/dist/switch.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer ropav.components {
|
|
2
|
-
.rp-switch[data-v-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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-
|
|
43
|
-
var t1 = template("<label data-v-
|
|
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-
|
|
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-
|
|
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
|
|
50
|
-
|
|
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--
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
77
|
+
.rp-tabs-list--outline[data-v-af4a8aa3] {
|
|
73
78
|
position: relative;
|
|
74
79
|
}
|
|
75
|
-
.rp-tabs-list--outline[data-v-
|
|
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-
|
|
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-
|
|
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-
|
|
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 {
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
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-
|
|
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,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
|
|
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
|
|
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"`:
|
|
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.
|
|
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": "
|
|
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-
|
|
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-
|
|
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
|
+
}
|