@vertz/ui-primitives 0.2.21 → 0.2.23
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/dist/shared/{chunk-q8dm19a5.js → chunk-2db2dnp3.js} +0 -1
- package/dist/shared/chunk-3h1mxp95.js +148 -0
- package/dist/shared/chunk-3kwh27dv.js +135 -0
- package/dist/shared/chunk-4894pmy6.js +184 -0
- package/dist/shared/{chunk-v9qddmh9.js → chunk-56reyd5r.js} +20 -29
- package/dist/shared/chunk-67sn29eh.js +125 -0
- package/dist/shared/chunk-7cb3z0s8.js +287 -0
- package/dist/shared/chunk-8c01c8mb.js +217 -0
- package/dist/shared/chunk-99tk72t3.js +69 -0
- package/dist/shared/chunk-9gfp3ffv.js +204 -0
- package/dist/shared/chunk-b25npqer.js +149 -0
- package/dist/shared/chunk-cgb2j94g.js +141 -0
- package/dist/shared/chunk-e1jcf22s.js +79 -0
- package/dist/shared/chunk-e3h0ddmx.js +168 -0
- package/dist/shared/chunk-f2vx4tpw.js +168 -0
- package/dist/shared/chunk-h3v10x04.js +271 -0
- package/dist/shared/chunk-hdvdfd1c.js +96 -0
- package/dist/shared/{chunk-zf0rhm9e.js → chunk-j902w020.js} +1 -1
- package/dist/shared/chunk-jdygp28a.js +260 -0
- package/dist/shared/chunk-jqre4qtw.js +180 -0
- package/dist/shared/{chunk-pvy0tcd7.js → chunk-mgr904ap.js} +75 -35
- package/dist/shared/chunk-mr1tb0dp.js +167 -0
- package/dist/shared/chunk-nj420k31.js +54 -0
- package/dist/shared/chunk-p0x7hgv6.js +181 -0
- package/dist/shared/{chunk-gzgyfhz6.js → chunk-pn6shbcs.js} +134 -82
- package/dist/shared/chunk-pzx0vpq1.js +223 -0
- package/dist/shared/chunk-tn0m98j8.js +42 -0
- package/dist/shared/{chunk-g67tnd19.js → chunk-ttb2tt03.js} +49 -29
- package/dist/shared/{chunk-vvjyx7fe.js → chunk-vevfhpc9.js} +1 -1
- package/dist/shared/chunk-vy874zxe.js +68 -0
- package/dist/shared/chunk-ww7k2azn.js +297 -0
- package/dist/shared/{chunk-f501vw7e.js → chunk-xa1b96mb.js} +2 -2
- package/dist/shared/chunk-xs6gp369.js +245 -0
- package/dist/shared/chunk-y4mmmayp.js +206 -0
- package/dist/src/accordion/accordion.js +1 -1
- package/dist/src/alert-dialog/alert-dialog.js +1 -1
- package/dist/src/badge/badge.js +1 -1
- package/dist/src/button/button.js +1 -1
- package/dist/src/calendar/calendar.js +1 -1
- package/dist/src/carousel/carousel.js +1 -1
- package/dist/src/checkbox/checkbox.js +1 -1
- package/dist/src/collapsible/collapsible.js +1 -1
- package/dist/src/combobox/combobox.js +1 -1
- package/dist/src/command/command.js +1 -1
- package/dist/src/context-menu/context-menu.js +1 -1
- package/dist/src/date-picker/date-picker.js +1 -1
- package/dist/src/dialog/dialog.js +1 -1
- package/dist/src/dropdown-menu/dropdown-menu.js +1 -1
- package/dist/src/hover-card/hover-card.js +1 -1
- package/dist/src/index.d.ts +281 -106
- package/dist/src/index.js +5779 -4266
- package/dist/src/menu/menu.js +1 -1
- package/dist/src/menubar/menubar.js +1 -1
- package/dist/src/navigation-menu/navigation-menu.js +1 -1
- package/dist/src/popover/popover.js +1 -1
- package/dist/src/progress/progress.js +1 -1
- package/dist/src/radio/radio.js +1 -1
- package/dist/src/resizable-panel/resizable-panel.js +1 -1
- package/dist/src/scroll-area/scroll-area.js +1 -1
- package/dist/src/select/select.js +1 -1
- package/dist/src/sheet/sheet.js +1 -1
- package/dist/src/slider/slider.js +1 -1
- package/dist/src/switch/switch.js +1 -1
- package/dist/src/tabs/tabs.js +1 -1
- package/dist/src/toast/toast.js +1 -1
- package/dist/src/toggle/toggle.js +1 -1
- package/dist/src/toggle-group/toggle-group.js +1 -1
- package/dist/src/tooltip/tooltip.js +1 -1
- package/dist/src/utils.d.ts +1 -1
- package/dist/src/utils.js +3 -3
- package/package.json +3 -3
- package/dist/shared/chunk-0gn67thm.js +0 -88
- package/dist/shared/chunk-1dzcjmfq.js +0 -46
- package/dist/shared/chunk-1hv9yd28.js +0 -178
- package/dist/shared/chunk-2d05qxdw.js +0 -282
- package/dist/shared/chunk-4jnweh3m.js +0 -165
- package/dist/shared/chunk-90hmpm0w.js +0 -34
- package/dist/shared/chunk-ac86qw7a.js +0 -71
- package/dist/shared/chunk-b02fkvts.js +0 -128
- package/dist/shared/chunk-bsx59bv9.js +0 -61
- package/dist/shared/chunk-cm2akzrm.js +0 -161
- package/dist/shared/chunk-cvms20w3.js +0 -132
- package/dist/shared/chunk-d8n8mggh.js +0 -239
- package/dist/shared/chunk-er9625ar.js +0 -204
- package/dist/shared/chunk-ewxzhtej.js +0 -117
- package/dist/shared/chunk-ey4485fh.js +0 -196
- package/dist/shared/chunk-gbxbkmte.js +0 -175
- package/dist/shared/chunk-je7tqf67.js +0 -133
- package/dist/shared/chunk-kr5qg80z.js +0 -288
- package/dist/shared/chunk-kytkmdpc.js +0 -199
- package/dist/shared/chunk-q2q20y9a.js +0 -60
- package/dist/shared/chunk-q9fgfgh9.js +0 -267
- package/dist/shared/chunk-qfk1ycfw.js +0 -142
- package/dist/shared/chunk-te4pdqnh.js +0 -219
- package/dist/shared/chunk-vm37m55w.js +0 -175
- package/dist/shared/chunk-y5vdb6br.js +0 -151
- package/dist/shared/chunk-ztvj60xp.js +0 -185
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Keys,
|
|
3
|
-
isKey
|
|
4
|
-
} from "./chunk-7867pr13.js";
|
|
5
|
-
import {
|
|
6
|
-
uniqueId
|
|
7
|
-
} from "./chunk-8y1jf6xr.js";
|
|
8
|
-
import {
|
|
9
|
-
applyAttrs
|
|
10
|
-
} from "./chunk-q8dm19a5.js";
|
|
11
|
-
|
|
12
|
-
// src/switch/switch.tsx
|
|
13
|
-
import { computed, signal } from "@vertz/ui";
|
|
14
|
-
import { __attr, __element, __on } from "@vertz/ui/internals";
|
|
15
|
-
function SwitchRoot(options = {}) {
|
|
16
|
-
const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
|
|
17
|
-
const checked = signal(defaultChecked, "checked");
|
|
18
|
-
function toggle() {
|
|
19
|
-
if (disabled)
|
|
20
|
-
return;
|
|
21
|
-
checked.value = !checked.value;
|
|
22
|
-
onCheckedChange?.(checked.value);
|
|
23
|
-
}
|
|
24
|
-
const el = computed(() => (() => {
|
|
25
|
-
const __el0 = __element("button");
|
|
26
|
-
__el0.setAttribute("type", "button");
|
|
27
|
-
__el0.setAttribute("role", "switch");
|
|
28
|
-
{
|
|
29
|
-
const __v = uniqueId("switch");
|
|
30
|
-
if (__v != null && __v !== false)
|
|
31
|
-
__el0.setAttribute("id", __v === true ? "" : __v);
|
|
32
|
-
}
|
|
33
|
-
__attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
|
|
34
|
-
__attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
|
|
35
|
-
{
|
|
36
|
-
const __v = disabled;
|
|
37
|
-
if (__v != null && __v !== false)
|
|
38
|
-
__el0.setAttribute("disabled", __v === true ? "" : __v);
|
|
39
|
-
}
|
|
40
|
-
{
|
|
41
|
-
const __v = disabled ? "true" : undefined;
|
|
42
|
-
if (__v != null && __v !== false)
|
|
43
|
-
__el0.setAttribute("aria-disabled", __v === true ? "" : __v);
|
|
44
|
-
}
|
|
45
|
-
__on(__el0, "click", toggle);
|
|
46
|
-
__on(__el0, "keydown", (e) => {
|
|
47
|
-
if (isKey(e, Keys.Space)) {
|
|
48
|
-
e.preventDefault();
|
|
49
|
-
toggle();
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
return __el0;
|
|
53
|
-
})());
|
|
54
|
-
applyAttrs(el.value, attrs);
|
|
55
|
-
return el.value;
|
|
56
|
-
}
|
|
57
|
-
var Switch = {
|
|
58
|
-
Root: SwitchRoot
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export { Switch };
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
applyAttrs
|
|
3
|
-
} from "./chunk-q8dm19a5.js";
|
|
4
|
-
|
|
5
|
-
// src/scroll-area/scroll-area.tsx
|
|
6
|
-
import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
|
|
7
|
-
import { signal } from "@vertz/ui";
|
|
8
|
-
function ScrollAreaRoot(options = {}) {
|
|
9
|
-
const { orientation = "vertical", type: _type, ...attrs } = options;
|
|
10
|
-
const state = {
|
|
11
|
-
scrollTop: signal(0),
|
|
12
|
-
scrollLeft: signal(0)
|
|
13
|
-
};
|
|
14
|
-
let isDraggingY = false;
|
|
15
|
-
let startY = 0;
|
|
16
|
-
let startScrollTop = 0;
|
|
17
|
-
let isDraggingX = false;
|
|
18
|
-
let startX = 0;
|
|
19
|
-
let startScrollLeft = 0;
|
|
20
|
-
function syncThumbY() {
|
|
21
|
-
const { scrollTop, scrollHeight, clientHeight } = viewport;
|
|
22
|
-
if (scrollHeight <= clientHeight) {
|
|
23
|
-
thumbY.style.height = "0";
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
const ratio = clientHeight / scrollHeight;
|
|
27
|
-
thumbY.style.height = `${ratio * 100}%`;
|
|
28
|
-
const scrollRatio = scrollTop / (scrollHeight - clientHeight);
|
|
29
|
-
thumbY.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
|
|
30
|
-
state.scrollTop.value = scrollTop;
|
|
31
|
-
}
|
|
32
|
-
function syncThumbX() {
|
|
33
|
-
const { scrollLeft, scrollWidth, clientWidth } = viewport;
|
|
34
|
-
if (scrollWidth <= clientWidth) {
|
|
35
|
-
thumbX.style.width = "0";
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
const ratio = clientWidth / scrollWidth;
|
|
39
|
-
thumbX.style.width = `${ratio * 100}%`;
|
|
40
|
-
const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
|
|
41
|
-
thumbX.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
|
|
42
|
-
state.scrollLeft.value = scrollLeft;
|
|
43
|
-
}
|
|
44
|
-
function update() {
|
|
45
|
-
syncThumbY();
|
|
46
|
-
syncThumbX();
|
|
47
|
-
}
|
|
48
|
-
function handleViewportScroll() {
|
|
49
|
-
if (orientation === "vertical" || orientation === "both")
|
|
50
|
-
syncThumbY();
|
|
51
|
-
if (orientation === "horizontal" || orientation === "both")
|
|
52
|
-
syncThumbX();
|
|
53
|
-
}
|
|
54
|
-
function handleThumbYDown(e) {
|
|
55
|
-
isDraggingY = true;
|
|
56
|
-
startY = e.clientY;
|
|
57
|
-
startScrollTop = viewport.scrollTop;
|
|
58
|
-
thumbY.setPointerCapture(e.pointerId);
|
|
59
|
-
e.preventDefault();
|
|
60
|
-
}
|
|
61
|
-
function handleThumbYMove(e) {
|
|
62
|
-
if (!isDraggingY)
|
|
63
|
-
return;
|
|
64
|
-
const delta = e.clientY - startY;
|
|
65
|
-
const scrollbarHeight = scrollbarY.clientHeight;
|
|
66
|
-
const scrollRange = viewport.scrollHeight - viewport.clientHeight;
|
|
67
|
-
if (scrollbarHeight > 0) {
|
|
68
|
-
viewport.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
function handleThumbYUp(e) {
|
|
72
|
-
isDraggingY = false;
|
|
73
|
-
thumbY.releasePointerCapture(e.pointerId);
|
|
74
|
-
}
|
|
75
|
-
function handleThumbXDown(e) {
|
|
76
|
-
isDraggingX = true;
|
|
77
|
-
startX = e.clientX;
|
|
78
|
-
startScrollLeft = viewport.scrollLeft;
|
|
79
|
-
thumbX.setPointerCapture(e.pointerId);
|
|
80
|
-
e.preventDefault();
|
|
81
|
-
}
|
|
82
|
-
function handleThumbXMove(e) {
|
|
83
|
-
if (!isDraggingX)
|
|
84
|
-
return;
|
|
85
|
-
const delta = e.clientX - startX;
|
|
86
|
-
const scrollbarWidth = scrollbarX.clientWidth;
|
|
87
|
-
const scrollRange = viewport.scrollWidth - viewport.clientWidth;
|
|
88
|
-
if (scrollbarWidth > 0) {
|
|
89
|
-
viewport.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
function handleThumbXUp(e) {
|
|
93
|
-
isDraggingX = false;
|
|
94
|
-
thumbX.releasePointerCapture(e.pointerId);
|
|
95
|
-
}
|
|
96
|
-
const thumbY = (() => {
|
|
97
|
-
const __el0 = __element("div");
|
|
98
|
-
__on(__el0, "pointerdown", handleThumbYDown);
|
|
99
|
-
__on(__el0, "pointermove", handleThumbYMove);
|
|
100
|
-
__on(__el0, "pointerup", handleThumbYUp);
|
|
101
|
-
return __el0;
|
|
102
|
-
})();
|
|
103
|
-
const scrollbarY = (() => {
|
|
104
|
-
const __el1 = __element("div");
|
|
105
|
-
__el1.setAttribute("aria-hidden", "true");
|
|
106
|
-
__el1.setAttribute("data-orientation", "vertical");
|
|
107
|
-
__enterChildren(__el1);
|
|
108
|
-
__insert(__el1, thumbY);
|
|
109
|
-
__exitChildren();
|
|
110
|
-
return __el1;
|
|
111
|
-
})();
|
|
112
|
-
const thumbX = (() => {
|
|
113
|
-
const __el2 = __element("div");
|
|
114
|
-
__on(__el2, "pointerdown", handleThumbXDown);
|
|
115
|
-
__on(__el2, "pointermove", handleThumbXMove);
|
|
116
|
-
__on(__el2, "pointerup", handleThumbXUp);
|
|
117
|
-
return __el2;
|
|
118
|
-
})();
|
|
119
|
-
const scrollbarX = (() => {
|
|
120
|
-
const __el3 = __element("div");
|
|
121
|
-
__el3.setAttribute("aria-hidden", "true");
|
|
122
|
-
__el3.setAttribute("data-orientation", "horizontal");
|
|
123
|
-
__enterChildren(__el3);
|
|
124
|
-
__insert(__el3, thumbX);
|
|
125
|
-
__exitChildren();
|
|
126
|
-
return __el3;
|
|
127
|
-
})();
|
|
128
|
-
const content = (() => {
|
|
129
|
-
const __el4 = __element("div");
|
|
130
|
-
return __el4;
|
|
131
|
-
})();
|
|
132
|
-
const viewport = (() => {
|
|
133
|
-
const __el5 = __element("div");
|
|
134
|
-
__el5.setAttribute("style", "overflow: scroll;");
|
|
135
|
-
__on(__el5, "scroll", handleViewportScroll);
|
|
136
|
-
__enterChildren(__el5);
|
|
137
|
-
__insert(__el5, content);
|
|
138
|
-
__exitChildren();
|
|
139
|
-
return __el5;
|
|
140
|
-
})();
|
|
141
|
-
viewport.style.scrollbarWidth = "none";
|
|
142
|
-
const root = (() => {
|
|
143
|
-
const __el6 = __element("div");
|
|
144
|
-
__el6.setAttribute("style", "position: relative; overflow: hidden;");
|
|
145
|
-
__enterChildren(__el6);
|
|
146
|
-
__insert(__el6, viewport);
|
|
147
|
-
__exitChildren();
|
|
148
|
-
return __el6;
|
|
149
|
-
})();
|
|
150
|
-
if (orientation === "vertical" || orientation === "both")
|
|
151
|
-
root.appendChild(scrollbarY);
|
|
152
|
-
if (orientation === "horizontal" || orientation === "both")
|
|
153
|
-
root.appendChild(scrollbarX);
|
|
154
|
-
applyAttrs(root, attrs);
|
|
155
|
-
return { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
|
|
156
|
-
}
|
|
157
|
-
var ScrollArea = {
|
|
158
|
-
Root: ScrollAreaRoot
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
export { ScrollArea };
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
setRovingTabindex
|
|
3
|
-
} from "./chunk-e2v1c9ex.js";
|
|
4
|
-
import {
|
|
5
|
-
handleListNavigation
|
|
6
|
-
} from "./chunk-7867pr13.js";
|
|
7
|
-
import {
|
|
8
|
-
setChecked,
|
|
9
|
-
setDataState,
|
|
10
|
-
setDisabled
|
|
11
|
-
} from "./chunk-vvjyx7fe.js";
|
|
12
|
-
import {
|
|
13
|
-
uniqueId
|
|
14
|
-
} from "./chunk-8y1jf6xr.js";
|
|
15
|
-
import {
|
|
16
|
-
applyAttrs
|
|
17
|
-
} from "./chunk-q8dm19a5.js";
|
|
18
|
-
|
|
19
|
-
// src/radio/radio.tsx
|
|
20
|
-
import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
|
|
21
|
-
import { signal } from "@vertz/ui";
|
|
22
|
-
function RadioGroup(items, itemValues, selectItem) {
|
|
23
|
-
return (() => {
|
|
24
|
-
const __el0 = __element("div");
|
|
25
|
-
__el0.setAttribute("role", "radiogroup");
|
|
26
|
-
{
|
|
27
|
-
const __v = uniqueId("radiogroup");
|
|
28
|
-
if (__v != null && __v !== false)
|
|
29
|
-
__el0.setAttribute("id", __v === true ? "" : __v);
|
|
30
|
-
}
|
|
31
|
-
__on(__el0, "keydown", (event) => {
|
|
32
|
-
const result = handleListNavigation(event, items, { orientation: "vertical" });
|
|
33
|
-
if (result) {
|
|
34
|
-
const idx = items.indexOf(result);
|
|
35
|
-
if (idx >= 0) {
|
|
36
|
-
const val = itemValues[idx];
|
|
37
|
-
if (val !== undefined)
|
|
38
|
-
selectItem(val);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
return __el0;
|
|
43
|
-
})();
|
|
44
|
-
}
|
|
45
|
-
function RadioItem(value, label, isActive, disabled, selectItem) {
|
|
46
|
-
const el = (() => {
|
|
47
|
-
const __el0 = __element("div");
|
|
48
|
-
__el0.setAttribute("role", "radio");
|
|
49
|
-
{
|
|
50
|
-
const __v = uniqueId("radio");
|
|
51
|
-
if (__v != null && __v !== false)
|
|
52
|
-
__el0.setAttribute("id", __v === true ? "" : __v);
|
|
53
|
-
}
|
|
54
|
-
{
|
|
55
|
-
const __v = value;
|
|
56
|
-
if (__v != null && __v !== false)
|
|
57
|
-
__el0.setAttribute("data-value", __v === true ? "" : __v);
|
|
58
|
-
}
|
|
59
|
-
{
|
|
60
|
-
const __v = isActive ? "true" : "false";
|
|
61
|
-
if (__v != null && __v !== false)
|
|
62
|
-
__el0.setAttribute("aria-checked", __v === true ? "" : __v);
|
|
63
|
-
}
|
|
64
|
-
{
|
|
65
|
-
const __v = isActive ? "checked" : "unchecked";
|
|
66
|
-
if (__v != null && __v !== false)
|
|
67
|
-
__el0.setAttribute("data-state", __v === true ? "" : __v);
|
|
68
|
-
}
|
|
69
|
-
__on(__el0, "click", () => {
|
|
70
|
-
if (!disabled)
|
|
71
|
-
selectItem(value);
|
|
72
|
-
});
|
|
73
|
-
__enterChildren(__el0);
|
|
74
|
-
__insert(__el0, label ?? value);
|
|
75
|
-
__exitChildren();
|
|
76
|
-
return __el0;
|
|
77
|
-
})();
|
|
78
|
-
if (disabled) {
|
|
79
|
-
setDisabled(el, true);
|
|
80
|
-
el.setAttribute("data-disabled", "");
|
|
81
|
-
}
|
|
82
|
-
return el;
|
|
83
|
-
}
|
|
84
|
-
function RadioRoot(options = {}) {
|
|
85
|
-
const { defaultValue = "", onValueChange, ...attrs } = options;
|
|
86
|
-
const state = { value: signal(defaultValue) };
|
|
87
|
-
const items = [];
|
|
88
|
-
const itemValues = [];
|
|
89
|
-
function selectItem(value) {
|
|
90
|
-
state.value.value = value;
|
|
91
|
-
for (let i = 0;i < items.length; i++) {
|
|
92
|
-
const item = items[i];
|
|
93
|
-
if (!item)
|
|
94
|
-
continue;
|
|
95
|
-
const isActive = itemValues[i] === value;
|
|
96
|
-
setChecked(item, isActive);
|
|
97
|
-
setDataState(item, isActive ? "checked" : "unchecked");
|
|
98
|
-
}
|
|
99
|
-
setRovingTabindex(items, itemValues.indexOf(value));
|
|
100
|
-
onValueChange?.(value);
|
|
101
|
-
}
|
|
102
|
-
const root = RadioGroup(items, itemValues, selectItem);
|
|
103
|
-
const cleanups = [];
|
|
104
|
-
function Item(value, label, itemOptions) {
|
|
105
|
-
const isActive = value === state.value.peek();
|
|
106
|
-
const disabled = itemOptions?.disabled ?? false;
|
|
107
|
-
const item = RadioItem(value, label, isActive, disabled, selectItem);
|
|
108
|
-
const handleClick = () => {
|
|
109
|
-
if (!disabled)
|
|
110
|
-
item.focus();
|
|
111
|
-
};
|
|
112
|
-
item.addEventListener("click", handleClick);
|
|
113
|
-
cleanups.push(() => item.removeEventListener("click", handleClick));
|
|
114
|
-
items.push(item);
|
|
115
|
-
itemValues.push(value);
|
|
116
|
-
root.appendChild(item);
|
|
117
|
-
setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
|
|
118
|
-
return item;
|
|
119
|
-
}
|
|
120
|
-
function destroy() {
|
|
121
|
-
for (const cleanup of cleanups)
|
|
122
|
-
cleanup();
|
|
123
|
-
cleanups.length = 0;
|
|
124
|
-
}
|
|
125
|
-
applyAttrs(root, attrs);
|
|
126
|
-
return { root, state, Item, destroy };
|
|
127
|
-
}
|
|
128
|
-
var Radio = {
|
|
129
|
-
Root: RadioRoot
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
export { Radio };
|
|
@@ -1,239 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Keys,
|
|
3
|
-
isKey
|
|
4
|
-
} from "./chunk-7867pr13.js";
|
|
5
|
-
import {
|
|
6
|
-
setHidden
|
|
7
|
-
} from "./chunk-vvjyx7fe.js";
|
|
8
|
-
import {
|
|
9
|
-
uniqueId
|
|
10
|
-
} from "./chunk-8y1jf6xr.js";
|
|
11
|
-
import {
|
|
12
|
-
applyAttrs
|
|
13
|
-
} from "./chunk-q8dm19a5.js";
|
|
14
|
-
|
|
15
|
-
// src/command/command.tsx
|
|
16
|
-
import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
|
|
17
|
-
import { signal } from "@vertz/ui";
|
|
18
|
-
function CommandRoot(options = {}) {
|
|
19
|
-
const { filter: customFilter, onSelect, onInputChange, placeholder, ...attrs } = options;
|
|
20
|
-
const listId = uniqueId("command-list");
|
|
21
|
-
const state = {
|
|
22
|
-
inputValue: signal(""),
|
|
23
|
-
activeIndex: signal(0)
|
|
24
|
-
};
|
|
25
|
-
const allItems = [];
|
|
26
|
-
const groups = new Map;
|
|
27
|
-
const defaultFilter = (value, search) => {
|
|
28
|
-
return value.toLowerCase().includes(search.toLowerCase());
|
|
29
|
-
};
|
|
30
|
-
const filterFn = customFilter ?? defaultFilter;
|
|
31
|
-
function getVisibleItems() {
|
|
32
|
-
return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
|
|
33
|
-
}
|
|
34
|
-
function updateActiveItem() {
|
|
35
|
-
const visible = getVisibleItems();
|
|
36
|
-
const activeIdx = state.activeIndex.peek();
|
|
37
|
-
for (const item of allItems) {
|
|
38
|
-
item.setAttribute("aria-selected", "false");
|
|
39
|
-
}
|
|
40
|
-
if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
|
|
41
|
-
visible[activeIdx]?.setAttribute("aria-selected", "true");
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
function runFilter() {
|
|
45
|
-
const search = state.inputValue.peek();
|
|
46
|
-
let visibleCount = 0;
|
|
47
|
-
for (const item of allItems) {
|
|
48
|
-
const value = item.getAttribute("data-value") ?? "";
|
|
49
|
-
const text = item.textContent ?? "";
|
|
50
|
-
const keywords = item.getAttribute("data-keywords") ?? "";
|
|
51
|
-
const searchable = `${value} ${text} ${keywords}`;
|
|
52
|
-
const matches = search === "" || filterFn(searchable, search);
|
|
53
|
-
setHidden(item, !matches);
|
|
54
|
-
if (matches)
|
|
55
|
-
visibleCount++;
|
|
56
|
-
}
|
|
57
|
-
for (const [groupEl, group] of groups) {
|
|
58
|
-
const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
|
|
59
|
-
setHidden(group.heading, !hasVisible);
|
|
60
|
-
if (!hasVisible) {
|
|
61
|
-
groupEl.style.display = "none";
|
|
62
|
-
} else {
|
|
63
|
-
groupEl.style.display = "";
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
setHidden(empty, visibleCount > 0);
|
|
67
|
-
state.activeIndex.value = 0;
|
|
68
|
-
updateActiveItem();
|
|
69
|
-
}
|
|
70
|
-
const input = (() => {
|
|
71
|
-
const __el0 = __element("input");
|
|
72
|
-
__el0.setAttribute("type", "text");
|
|
73
|
-
__el0.setAttribute("role", "combobox");
|
|
74
|
-
__el0.setAttribute("aria-autocomplete", "list");
|
|
75
|
-
__el0.setAttribute("aria-expanded", "true");
|
|
76
|
-
{
|
|
77
|
-
const __v = listId;
|
|
78
|
-
if (__v != null && __v !== false)
|
|
79
|
-
__el0.setAttribute("aria-controls", __v === true ? "" : __v);
|
|
80
|
-
}
|
|
81
|
-
{
|
|
82
|
-
const __v = placeholder;
|
|
83
|
-
if (__v != null && __v !== false)
|
|
84
|
-
__el0.setAttribute("placeholder", __v === true ? "" : __v);
|
|
85
|
-
}
|
|
86
|
-
__on(__el0, "input", () => {
|
|
87
|
-
state.inputValue.value = input.value;
|
|
88
|
-
onInputChange?.(input.value);
|
|
89
|
-
runFilter();
|
|
90
|
-
});
|
|
91
|
-
__on(__el0, "keydown", (event) => {
|
|
92
|
-
const visible = getVisibleItems();
|
|
93
|
-
if (isKey(event, Keys.ArrowDown)) {
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
|
|
96
|
-
state.activeIndex.value = next;
|
|
97
|
-
updateActiveItem();
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
if (isKey(event, Keys.ArrowUp)) {
|
|
101
|
-
event.preventDefault();
|
|
102
|
-
const prev = Math.max(state.activeIndex.peek() - 1, 0);
|
|
103
|
-
state.activeIndex.value = prev;
|
|
104
|
-
updateActiveItem();
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
if (isKey(event, Keys.Enter)) {
|
|
108
|
-
event.preventDefault();
|
|
109
|
-
const active = visible[state.activeIndex.peek()];
|
|
110
|
-
if (active) {
|
|
111
|
-
const val = active.getAttribute("data-value");
|
|
112
|
-
if (val !== null) {
|
|
113
|
-
onSelect?.(val);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
if (isKey(event, Keys.Escape)) {
|
|
119
|
-
event.preventDefault();
|
|
120
|
-
input.value = "";
|
|
121
|
-
state.inputValue.value = "";
|
|
122
|
-
onInputChange?.("");
|
|
123
|
-
runFilter();
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
return __el0;
|
|
127
|
-
})();
|
|
128
|
-
const list = (() => {
|
|
129
|
-
const __el1 = __element("div");
|
|
130
|
-
__el1.setAttribute("role", "listbox");
|
|
131
|
-
{
|
|
132
|
-
const __v = listId;
|
|
133
|
-
if (__v != null && __v !== false)
|
|
134
|
-
__el1.setAttribute("id", __v === true ? "" : __v);
|
|
135
|
-
}
|
|
136
|
-
return __el1;
|
|
137
|
-
})();
|
|
138
|
-
const empty = (() => {
|
|
139
|
-
const __el2 = __element("div");
|
|
140
|
-
__el2.setAttribute("aria-hidden", "true");
|
|
141
|
-
__el2.setAttribute("style", "display: none");
|
|
142
|
-
return __el2;
|
|
143
|
-
})();
|
|
144
|
-
const root = (() => {
|
|
145
|
-
const __el3 = __element("div");
|
|
146
|
-
__enterChildren(__el3);
|
|
147
|
-
__insert(__el3, input);
|
|
148
|
-
__insert(__el3, list);
|
|
149
|
-
__insert(__el3, empty);
|
|
150
|
-
__exitChildren();
|
|
151
|
-
return __el3;
|
|
152
|
-
})();
|
|
153
|
-
applyAttrs(root, attrs);
|
|
154
|
-
function createItem(value, label, keywords, parent) {
|
|
155
|
-
const item = (() => {
|
|
156
|
-
const __el4 = __element("div");
|
|
157
|
-
__el4.setAttribute("role", "option");
|
|
158
|
-
{
|
|
159
|
-
const __v = value;
|
|
160
|
-
if (__v != null && __v !== false)
|
|
161
|
-
__el4.setAttribute("data-value", __v === true ? "" : __v);
|
|
162
|
-
}
|
|
163
|
-
__el4.setAttribute("aria-selected", "false");
|
|
164
|
-
{
|
|
165
|
-
const __v = keywords && keywords.length > 0 ? keywords.join(" ") : undefined;
|
|
166
|
-
if (__v != null && __v !== false)
|
|
167
|
-
__el4.setAttribute("data-keywords", __v === true ? "" : __v);
|
|
168
|
-
}
|
|
169
|
-
__on(__el4, "click", () => {
|
|
170
|
-
onSelect?.(value);
|
|
171
|
-
});
|
|
172
|
-
__enterChildren(__el4);
|
|
173
|
-
__insert(__el4, label ?? value);
|
|
174
|
-
__exitChildren();
|
|
175
|
-
return __el4;
|
|
176
|
-
})();
|
|
177
|
-
allItems.push(item);
|
|
178
|
-
(parent ?? list).appendChild(item);
|
|
179
|
-
updateActiveItem();
|
|
180
|
-
return item;
|
|
181
|
-
}
|
|
182
|
-
function Item(value, label, keywords) {
|
|
183
|
-
return createItem(value, label, keywords);
|
|
184
|
-
}
|
|
185
|
-
function Group(label) {
|
|
186
|
-
const headingId = uniqueId("command-group");
|
|
187
|
-
const heading = (() => {
|
|
188
|
-
const __el5 = __element("div");
|
|
189
|
-
{
|
|
190
|
-
const __v = headingId;
|
|
191
|
-
if (__v != null && __v !== false)
|
|
192
|
-
__el5.setAttribute("id", __v === true ? "" : __v);
|
|
193
|
-
}
|
|
194
|
-
__enterChildren(__el5);
|
|
195
|
-
__insert(__el5, label);
|
|
196
|
-
__exitChildren();
|
|
197
|
-
return __el5;
|
|
198
|
-
})();
|
|
199
|
-
const el = (() => {
|
|
200
|
-
const __el6 = __element("div");
|
|
201
|
-
__el6.setAttribute("role", "group");
|
|
202
|
-
{
|
|
203
|
-
const __v = headingId;
|
|
204
|
-
if (__v != null && __v !== false)
|
|
205
|
-
__el6.setAttribute("aria-labelledby", __v === true ? "" : __v);
|
|
206
|
-
}
|
|
207
|
-
__enterChildren(__el6);
|
|
208
|
-
__insert(__el6, heading);
|
|
209
|
-
__exitChildren();
|
|
210
|
-
return __el6;
|
|
211
|
-
})();
|
|
212
|
-
const groupItems = [];
|
|
213
|
-
groups.set(el, { heading, items: groupItems });
|
|
214
|
-
list.appendChild(el);
|
|
215
|
-
return {
|
|
216
|
-
el,
|
|
217
|
-
Item: (value, itemLabel, keywords) => {
|
|
218
|
-
const item = createItem(value, itemLabel, keywords, el);
|
|
219
|
-
groupItems.push(item);
|
|
220
|
-
return item;
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
function Separator() {
|
|
225
|
-
const hr = (() => {
|
|
226
|
-
const __el7 = __element("hr");
|
|
227
|
-
__el7.setAttribute("role", "separator");
|
|
228
|
-
return __el7;
|
|
229
|
-
})();
|
|
230
|
-
list.appendChild(hr);
|
|
231
|
-
return hr;
|
|
232
|
-
}
|
|
233
|
-
return { root, input, list, empty, state, Item, Group, Separator };
|
|
234
|
-
}
|
|
235
|
-
var Command = {
|
|
236
|
-
Root: CommandRoot
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
export { Command };
|