@serendie/ui 3.2.2-dev.202604251110 → 3.2.2-dev.202604270058
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/client.js +35 -32
- package/dist/components/Slider/Slider.d.ts +47 -0
- package/dist/components/Slider/Slider.js +232 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Slider/index.js +5 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +39 -36
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-context.js +5 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-control.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-dragging-indicator.js +18 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-hidden-input.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-label.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker-group.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-marker.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-range.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root-provider.js +20 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-root.js +46 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-thumb.js +21 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-track.js +16 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider-value-text.js +17 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/slider.js +32 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-context.js +10 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider-thumb-props-context.js +10 -0
- package/dist/node_modules/@ark-ui/react/dist/components/slider/use-slider.js +19 -0
- package/dist/node_modules/@zag-js/dom-query/dist/event.js +36 -31
- package/dist/node_modules/@zag-js/dom-query/dist/form.js +31 -21
- package/dist/node_modules/@zag-js/dom-query/dist/pointer-move.js +29 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.anatomy.js +17 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.connect.js +272 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.dom.js +88 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.machine.js +309 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.style.js +119 -0
- package/dist/node_modules/@zag-js/slider/dist/slider.utils.js +105 -0
- package/dist/node_modules/@zag-js/utils/dist/number.js +63 -8
- package/dist/node_modules/@zag-js/utils/dist/object.js +17 -8
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
import { isLeftClick as L, isModifierKey as H, getEventPoint as G, getEventStep as K, getEventKey as X } from "../../dom-query/dist/event.js";
|
|
2
|
+
import { dataAttr as r, ariaAttr as Y } from "../../dom-query/dist/shared.js";
|
|
3
|
+
import { parts as u } from "./slider.anatomy.js";
|
|
4
|
+
import { getMarkerId as j, getControlId as q, getRangeId as J, getHiddenInputId as M, getLabelId as O, getThumbId as Q, getTrackId as Z, getValueTextId as $, getRootId as z, getFirstThumbEl as tt } from "./slider.dom.js";
|
|
5
|
+
import { getThumbStyle as U, getMarkerStyle as et, getMarkerGroupStyle as at, getControlStyle as rt, getRangeStyle as nt, getRootStyle as it } from "./slider.style.js";
|
|
6
|
+
import { getRangeAtIndex as E } from "./slider.utils.js";
|
|
7
|
+
import { first as ot, last as dt } from "../../utils/dist/array.js";
|
|
8
|
+
import { getPercentValue as lt, getValuePercent as st } from "../../utils/dist/number.js";
|
|
9
|
+
function Pt(g, l) {
|
|
10
|
+
const { state: I, send: n, context: v, prop: e, computed: D, scope: o } = g, h = e("aria-label"), T = e("aria-labelledby"), c = v.get("value"), A = v.get("focusedIndex"), p = I.matches("focus"), f = I.matches("dragging"), s = D("isDisabled"), b = e("invalid"), m = D("isInteractive"), V = e("orientation") === "horizontal", w = e("orientation") === "vertical";
|
|
11
|
+
function k(t) {
|
|
12
|
+
return st(t, e("min"), e("max"));
|
|
13
|
+
}
|
|
14
|
+
function C(t) {
|
|
15
|
+
return lt(t, e("min"), e("max"), e("step"));
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
value: c,
|
|
19
|
+
dragging: f,
|
|
20
|
+
focused: p,
|
|
21
|
+
setValue(t) {
|
|
22
|
+
n({ type: "SET_VALUE", value: t });
|
|
23
|
+
},
|
|
24
|
+
getThumbValue(t) {
|
|
25
|
+
return c[t];
|
|
26
|
+
},
|
|
27
|
+
setThumbValue(t, a) {
|
|
28
|
+
n({ type: "SET_VALUE", index: t, value: a });
|
|
29
|
+
},
|
|
30
|
+
getValuePercent: k,
|
|
31
|
+
getPercentValue: C,
|
|
32
|
+
getThumbPercent(t) {
|
|
33
|
+
return k(c[t]);
|
|
34
|
+
},
|
|
35
|
+
setThumbPercent(t, a) {
|
|
36
|
+
const i = C(a);
|
|
37
|
+
n({ type: "SET_VALUE", index: t, value: i });
|
|
38
|
+
},
|
|
39
|
+
getThumbMin(t) {
|
|
40
|
+
return E(g, t).min;
|
|
41
|
+
},
|
|
42
|
+
getThumbMax(t) {
|
|
43
|
+
return E(g, t).max;
|
|
44
|
+
},
|
|
45
|
+
increment(t) {
|
|
46
|
+
n({ type: "INCREMENT", index: t });
|
|
47
|
+
},
|
|
48
|
+
decrement(t) {
|
|
49
|
+
n({ type: "DECREMENT", index: t });
|
|
50
|
+
},
|
|
51
|
+
focus() {
|
|
52
|
+
m && n({ type: "FOCUS", index: 0 });
|
|
53
|
+
},
|
|
54
|
+
getLabelProps() {
|
|
55
|
+
return l.label({
|
|
56
|
+
...u.label.attrs,
|
|
57
|
+
dir: e("dir"),
|
|
58
|
+
"data-disabled": r(s),
|
|
59
|
+
"data-orientation": e("orientation"),
|
|
60
|
+
"data-invalid": r(b),
|
|
61
|
+
"data-dragging": r(f),
|
|
62
|
+
"data-focus": r(p),
|
|
63
|
+
id: O(o),
|
|
64
|
+
htmlFor: M(o, 0),
|
|
65
|
+
onClick(t) {
|
|
66
|
+
var a;
|
|
67
|
+
m && (t.preventDefault(), (a = tt(o)) == null || a.focus());
|
|
68
|
+
},
|
|
69
|
+
style: {
|
|
70
|
+
userSelect: "none",
|
|
71
|
+
WebkitUserSelect: "none"
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
},
|
|
75
|
+
getRootProps() {
|
|
76
|
+
return l.element({
|
|
77
|
+
...u.root.attrs,
|
|
78
|
+
"data-disabled": r(s),
|
|
79
|
+
"data-orientation": e("orientation"),
|
|
80
|
+
"data-dragging": r(f),
|
|
81
|
+
"data-invalid": r(b),
|
|
82
|
+
"data-focus": r(p),
|
|
83
|
+
id: z(o),
|
|
84
|
+
dir: e("dir"),
|
|
85
|
+
style: it(g)
|
|
86
|
+
});
|
|
87
|
+
},
|
|
88
|
+
getValueTextProps() {
|
|
89
|
+
return l.element({
|
|
90
|
+
...u.valueText.attrs,
|
|
91
|
+
dir: e("dir"),
|
|
92
|
+
"data-disabled": r(s),
|
|
93
|
+
"data-orientation": e("orientation"),
|
|
94
|
+
"data-invalid": r(b),
|
|
95
|
+
"data-focus": r(p),
|
|
96
|
+
id: $(o)
|
|
97
|
+
});
|
|
98
|
+
},
|
|
99
|
+
getTrackProps() {
|
|
100
|
+
return l.element({
|
|
101
|
+
...u.track.attrs,
|
|
102
|
+
dir: e("dir"),
|
|
103
|
+
id: Z(o),
|
|
104
|
+
"data-disabled": r(s),
|
|
105
|
+
"data-invalid": r(b),
|
|
106
|
+
"data-dragging": r(f),
|
|
107
|
+
"data-orientation": e("orientation"),
|
|
108
|
+
"data-focus": r(p),
|
|
109
|
+
style: { position: "relative" }
|
|
110
|
+
});
|
|
111
|
+
},
|
|
112
|
+
getThumbProps(t) {
|
|
113
|
+
var _;
|
|
114
|
+
const { index: a = 0, name: i } = t, N = c[a], S = E(g, a), W = (_ = e("getAriaValueText")) == null ? void 0 : _({ value: N, index: a }), F = Array.isArray(h) ? h[a] : h, B = Array.isArray(T) ? T[a] : T;
|
|
115
|
+
return l.element({
|
|
116
|
+
...u.thumb.attrs,
|
|
117
|
+
dir: e("dir"),
|
|
118
|
+
"data-index": a,
|
|
119
|
+
"data-name": i,
|
|
120
|
+
id: Q(o, a),
|
|
121
|
+
"data-disabled": r(s),
|
|
122
|
+
"data-orientation": e("orientation"),
|
|
123
|
+
"data-focus": r(p && A === a),
|
|
124
|
+
"data-dragging": r(f && A === a),
|
|
125
|
+
draggable: !1,
|
|
126
|
+
"aria-disabled": Y(s),
|
|
127
|
+
"aria-label": F,
|
|
128
|
+
"aria-labelledby": B ?? O(o),
|
|
129
|
+
"aria-orientation": e("orientation"),
|
|
130
|
+
"aria-valuemax": S.max,
|
|
131
|
+
"aria-valuemin": S.min,
|
|
132
|
+
"aria-valuenow": c[a],
|
|
133
|
+
"aria-valuetext": W,
|
|
134
|
+
role: "slider",
|
|
135
|
+
tabIndex: s ? void 0 : 0,
|
|
136
|
+
style: U(g, a),
|
|
137
|
+
onPointerDown(d) {
|
|
138
|
+
if (!m || !L(d)) return;
|
|
139
|
+
const P = d.currentTarget.getBoundingClientRect(), x = {
|
|
140
|
+
x: P.left + P.width / 2,
|
|
141
|
+
y: P.top + P.height / 2
|
|
142
|
+
}, R = {
|
|
143
|
+
x: d.clientX - x.x,
|
|
144
|
+
y: d.clientY - x.y
|
|
145
|
+
};
|
|
146
|
+
n({ type: "THUMB_POINTER_DOWN", index: a, offset: R }), d.stopPropagation();
|
|
147
|
+
},
|
|
148
|
+
onBlur() {
|
|
149
|
+
m && n({ type: "BLUR" });
|
|
150
|
+
},
|
|
151
|
+
onFocus() {
|
|
152
|
+
m && n({ type: "FOCUS", index: a });
|
|
153
|
+
},
|
|
154
|
+
onKeyDown(d) {
|
|
155
|
+
if (d.defaultPrevented || !m) return;
|
|
156
|
+
const y = K(d) * e("step"), P = {
|
|
157
|
+
ArrowUp() {
|
|
158
|
+
V || n({ type: "ARROW_INC", step: y, src: "ArrowUp" });
|
|
159
|
+
},
|
|
160
|
+
ArrowDown() {
|
|
161
|
+
V || n({ type: "ARROW_DEC", step: y, src: "ArrowDown" });
|
|
162
|
+
},
|
|
163
|
+
ArrowLeft() {
|
|
164
|
+
w || n({ type: "ARROW_DEC", step: y, src: "ArrowLeft" });
|
|
165
|
+
},
|
|
166
|
+
ArrowRight() {
|
|
167
|
+
w || n({ type: "ARROW_INC", step: y, src: "ArrowRight" });
|
|
168
|
+
},
|
|
169
|
+
PageUp() {
|
|
170
|
+
n({ type: "ARROW_INC", step: y, src: "PageUp" });
|
|
171
|
+
},
|
|
172
|
+
PageDown() {
|
|
173
|
+
n({ type: "ARROW_DEC", step: y, src: "PageDown" });
|
|
174
|
+
},
|
|
175
|
+
Home() {
|
|
176
|
+
n({ type: "HOME" });
|
|
177
|
+
},
|
|
178
|
+
End() {
|
|
179
|
+
n({ type: "END" });
|
|
180
|
+
}
|
|
181
|
+
}, x = X(d, {
|
|
182
|
+
dir: e("dir"),
|
|
183
|
+
orientation: e("orientation")
|
|
184
|
+
}), R = P[x];
|
|
185
|
+
R && (R(d), d.preventDefault(), d.stopPropagation());
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
},
|
|
189
|
+
getHiddenInputProps(t) {
|
|
190
|
+
const { index: a = 0, name: i } = t;
|
|
191
|
+
return l.input({
|
|
192
|
+
name: i ?? (e("name") ? e("name") + (c.length > 1 ? "[]" : "") : void 0),
|
|
193
|
+
form: e("form"),
|
|
194
|
+
type: "text",
|
|
195
|
+
hidden: !0,
|
|
196
|
+
defaultValue: c[a],
|
|
197
|
+
id: M(o, a)
|
|
198
|
+
});
|
|
199
|
+
},
|
|
200
|
+
getRangeProps() {
|
|
201
|
+
return l.element({
|
|
202
|
+
id: J(o),
|
|
203
|
+
...u.range.attrs,
|
|
204
|
+
dir: e("dir"),
|
|
205
|
+
"data-dragging": r(f),
|
|
206
|
+
"data-focus": r(p),
|
|
207
|
+
"data-invalid": r(b),
|
|
208
|
+
"data-disabled": r(s),
|
|
209
|
+
"data-orientation": e("orientation"),
|
|
210
|
+
style: nt(g)
|
|
211
|
+
});
|
|
212
|
+
},
|
|
213
|
+
getControlProps() {
|
|
214
|
+
return l.element({
|
|
215
|
+
...u.control.attrs,
|
|
216
|
+
dir: e("dir"),
|
|
217
|
+
id: q(o),
|
|
218
|
+
"data-dragging": r(f),
|
|
219
|
+
"data-disabled": r(s),
|
|
220
|
+
"data-orientation": e("orientation"),
|
|
221
|
+
"data-invalid": r(b),
|
|
222
|
+
"data-focus": r(p),
|
|
223
|
+
style: rt(),
|
|
224
|
+
onPointerDown(t) {
|
|
225
|
+
if (!m || !L(t) || H(t)) return;
|
|
226
|
+
const a = G(t);
|
|
227
|
+
n({ type: "POINTER_DOWN", point: a }), t.preventDefault(), t.stopPropagation();
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
},
|
|
231
|
+
getMarkerGroupProps() {
|
|
232
|
+
return l.element({
|
|
233
|
+
...u.markerGroup.attrs,
|
|
234
|
+
role: "presentation",
|
|
235
|
+
dir: e("dir"),
|
|
236
|
+
"aria-hidden": !0,
|
|
237
|
+
"data-orientation": e("orientation"),
|
|
238
|
+
style: at()
|
|
239
|
+
});
|
|
240
|
+
},
|
|
241
|
+
getMarkerProps(t) {
|
|
242
|
+
const a = et(g, t.value);
|
|
243
|
+
let i;
|
|
244
|
+
return t.value < ot(c) ? i = "under-value" : t.value > dt(c) ? i = "over-value" : i = "at-value", l.element({
|
|
245
|
+
...u.marker.attrs,
|
|
246
|
+
id: j(o, t.value),
|
|
247
|
+
role: "presentation",
|
|
248
|
+
dir: e("dir"),
|
|
249
|
+
"data-orientation": e("orientation"),
|
|
250
|
+
"data-value": t.value,
|
|
251
|
+
"data-disabled": r(s),
|
|
252
|
+
"data-state": i,
|
|
253
|
+
style: a
|
|
254
|
+
});
|
|
255
|
+
},
|
|
256
|
+
getDraggingIndicatorProps(t) {
|
|
257
|
+
const { index: a = 0 } = t, i = a === A && f;
|
|
258
|
+
return l.element({
|
|
259
|
+
...u.draggingIndicator.attrs,
|
|
260
|
+
role: "presentation",
|
|
261
|
+
dir: e("dir"),
|
|
262
|
+
hidden: !i,
|
|
263
|
+
"data-orientation": e("orientation"),
|
|
264
|
+
"data-state": i ? "open" : "closed",
|
|
265
|
+
style: U(g, a)
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
}
|
|
270
|
+
export {
|
|
271
|
+
Pt as connect
|
|
272
|
+
};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { getPercentValue as P, clampPercent as u } from "../../utils/dist/number.js";
|
|
2
|
+
import { dispatchInputValueEvent as T } from "../../dom-query/dist/form.js";
|
|
3
|
+
import { queryAll as V } from "../../dom-query/dist/query.js";
|
|
4
|
+
var b = (t) => {
|
|
5
|
+
var e;
|
|
6
|
+
return ((e = t.ids) == null ? void 0 : e.root) ?? `slider:${t.id}`;
|
|
7
|
+
}, k = (t, e) => {
|
|
8
|
+
var r, n;
|
|
9
|
+
return ((n = (r = t.ids) == null ? void 0 : r.thumb) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:thumb:${e}`;
|
|
10
|
+
}, C = (t, e) => {
|
|
11
|
+
var r, n;
|
|
12
|
+
return ((n = (r = t.ids) == null ? void 0 : r.hiddenInput) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:input:${e}`;
|
|
13
|
+
}, R = (t) => {
|
|
14
|
+
var e;
|
|
15
|
+
return ((e = t.ids) == null ? void 0 : e.control) ?? `slider:${t.id}:control`;
|
|
16
|
+
}, O = (t) => {
|
|
17
|
+
var e;
|
|
18
|
+
return ((e = t.ids) == null ? void 0 : e.track) ?? `slider:${t.id}:track`;
|
|
19
|
+
}, q = (t) => {
|
|
20
|
+
var e;
|
|
21
|
+
return ((e = t.ids) == null ? void 0 : e.range) ?? `slider:${t.id}:range`;
|
|
22
|
+
}, x = (t) => {
|
|
23
|
+
var e;
|
|
24
|
+
return ((e = t.ids) == null ? void 0 : e.label) ?? `slider:${t.id}:label`;
|
|
25
|
+
}, D = (t) => {
|
|
26
|
+
var e;
|
|
27
|
+
return ((e = t.ids) == null ? void 0 : e.valueText) ?? `slider:${t.id}:value-text`;
|
|
28
|
+
}, F = (t, e) => {
|
|
29
|
+
var r, n;
|
|
30
|
+
return ((n = (r = t.ids) == null ? void 0 : r.marker) == null ? void 0 : n.call(r, e)) ?? `slider:${t.id}:marker:${e}`;
|
|
31
|
+
}, M = (t) => t.getById(b(t)), X = (t, e) => t.getById(k(t, e)), B = (t) => V(h(t), "[role=slider]"), Y = (t) => B(t)[0], H = (t, e) => t.getById(C(t, e)), h = (t) => t.getById(R(t)), j = (t, e, r) => e === "contain" ? (r === "vertical" ? (t == null ? void 0 : t.height) ?? 0 : (t == null ? void 0 : t.width) ?? 0) / 2 : 0, G = (t, e) => {
|
|
32
|
+
const { context: r, prop: n, scope: o, refs: l } = t, g = h(o);
|
|
33
|
+
if (!g) return;
|
|
34
|
+
const i = l.get("thumbDragOffset"), c = {
|
|
35
|
+
x: e.x - ((i == null ? void 0 : i.x) ?? 0),
|
|
36
|
+
y: e.y - ((i == null ? void 0 : i.y) ?? 0)
|
|
37
|
+
}, v = j(r.get("thumbSize"), n("thumbAlignment"), n("orientation")), d = w(c, g, v).getPercentValue({
|
|
38
|
+
orientation: n("orientation"),
|
|
39
|
+
dir: n("dir"),
|
|
40
|
+
inverted: { y: !0 }
|
|
41
|
+
});
|
|
42
|
+
return P(d, n("min"), n("max"), n("step"));
|
|
43
|
+
};
|
|
44
|
+
function w(t, e, r) {
|
|
45
|
+
const { left: n, top: o, width: l, height: g } = e.getBoundingClientRect(), i = l - r * 2, c = g - r * 2, v = n + r, f = o + r, d = {
|
|
46
|
+
x: t.x - v,
|
|
47
|
+
y: t.y - f
|
|
48
|
+
}, s = {
|
|
49
|
+
x: i > 0 ? u(d.x / i) : 0,
|
|
50
|
+
y: c > 0 ? u(d.y / c) : 0
|
|
51
|
+
};
|
|
52
|
+
function p(I = {}) {
|
|
53
|
+
const { dir: y = "ltr", orientation: m = "horizontal", inverted: a } = I, $ = typeof a == "object" ? a.x : a, E = typeof a == "object" ? a.y : a;
|
|
54
|
+
return m === "horizontal" ? y === "rtl" || $ ? 1 - s.x : s.x : E ? 1 - s.y : s.y;
|
|
55
|
+
}
|
|
56
|
+
return { offset: d, percent: s, getPercentValue: p };
|
|
57
|
+
}
|
|
58
|
+
var J = (t, e) => {
|
|
59
|
+
e.forEach((r, n) => {
|
|
60
|
+
const o = H(t, n);
|
|
61
|
+
o && T(o, { value: r });
|
|
62
|
+
});
|
|
63
|
+
}, K = (t) => ({
|
|
64
|
+
left: (t == null ? void 0 : t.offsetLeft) ?? 0,
|
|
65
|
+
top: (t == null ? void 0 : t.offsetTop) ?? 0,
|
|
66
|
+
width: (t == null ? void 0 : t.offsetWidth) ?? 0,
|
|
67
|
+
height: (t == null ? void 0 : t.offsetHeight) ?? 0
|
|
68
|
+
});
|
|
69
|
+
export {
|
|
70
|
+
J as dispatchChangeEvent,
|
|
71
|
+
h as getControlEl,
|
|
72
|
+
R as getControlId,
|
|
73
|
+
Y as getFirstThumbEl,
|
|
74
|
+
H as getHiddenInputEl,
|
|
75
|
+
C as getHiddenInputId,
|
|
76
|
+
x as getLabelId,
|
|
77
|
+
F as getMarkerId,
|
|
78
|
+
K as getOffsetRect,
|
|
79
|
+
G as getPointValue,
|
|
80
|
+
q as getRangeId,
|
|
81
|
+
M as getRootEl,
|
|
82
|
+
b as getRootId,
|
|
83
|
+
X as getThumbEl,
|
|
84
|
+
B as getThumbEls,
|
|
85
|
+
k as getThumbId,
|
|
86
|
+
O as getTrackId,
|
|
87
|
+
D as getValueTextId
|
|
88
|
+
};
|
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
import { getThumbEl as h, getPointValue as c, getHiddenInputEl as g, dispatchChangeEvent as f, getThumbEls as v, getRootEl as T, getOffsetRect as x } from "./slider.dom.js";
|
|
2
|
+
import { normalizeValues as b, constrainValue as I, getRangeAtIndex as d, increment as E, decrement as V, resolveThumbCollision as O, selectMovableThumb as C, getClosestIndex as D } from "./slider.utils.js";
|
|
3
|
+
import { createMachine as S } from "../../core/dist/create-machine.js";
|
|
4
|
+
import { setValueAtIndex as r, getValuePercent as A, getValueRanges as P, snapValueToStep as R, clampValue as N, isValueWithinRange as k } from "../../utils/dist/number.js";
|
|
5
|
+
import { raf as M } from "../../dom-query/dist/raf.js";
|
|
6
|
+
import { setElementValue as z, trackFormControl as p } from "../../dom-query/dist/form.js";
|
|
7
|
+
import { resizeObserverBorderBox as F } from "../../dom-query/dist/resize-observer.js";
|
|
8
|
+
import { callAll as _ } from "../../utils/dist/functions.js";
|
|
9
|
+
import { trackPointerMove as w } from "../../dom-query/dist/pointer-move.js";
|
|
10
|
+
import { memo as B } from "../../core/dist/memo.js";
|
|
11
|
+
import { isEqual as y } from "../../utils/dist/equal.js";
|
|
12
|
+
import { pick as U } from "../../utils/dist/object.js";
|
|
13
|
+
var W = (e, t) => (e == null ? void 0 : e.width) === (t == null ? void 0 : t.width) && (e == null ? void 0 : e.height) === (t == null ? void 0 : t.height), m = (e, t, n, a, s) => P(e, t, n, s * a).map((o) => {
|
|
14
|
+
const l = R(o.value, o.min, o.max, a), i = N(l, o.min, o.max);
|
|
15
|
+
if (!k(i, t, n))
|
|
16
|
+
throw new Error(
|
|
17
|
+
"[zag-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid"
|
|
18
|
+
);
|
|
19
|
+
return i;
|
|
20
|
+
}), ee = S({
|
|
21
|
+
props({ props: e }) {
|
|
22
|
+
const t = e.min ?? 0, n = e.max ?? 100, a = e.step ?? 1, s = e.defaultValue ?? [t], u = e.minStepsBetweenThumbs ?? 0;
|
|
23
|
+
return {
|
|
24
|
+
dir: "ltr",
|
|
25
|
+
thumbAlignment: "contain",
|
|
26
|
+
origin: "start",
|
|
27
|
+
orientation: "horizontal",
|
|
28
|
+
thumbCollisionBehavior: "none",
|
|
29
|
+
minStepsBetweenThumbs: u,
|
|
30
|
+
...e,
|
|
31
|
+
defaultValue: m(s, t, n, a, u),
|
|
32
|
+
value: e.value ? m(e.value, t, n, a, u) : void 0,
|
|
33
|
+
max: n,
|
|
34
|
+
step: a,
|
|
35
|
+
min: t
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
initialState() {
|
|
39
|
+
return "idle";
|
|
40
|
+
},
|
|
41
|
+
context({ prop: e, bindable: t, getContext: n }) {
|
|
42
|
+
return {
|
|
43
|
+
thumbSize: t(() => ({
|
|
44
|
+
defaultValue: e("thumbSize") || null
|
|
45
|
+
})),
|
|
46
|
+
value: t(() => ({
|
|
47
|
+
defaultValue: e("defaultValue"),
|
|
48
|
+
value: e("value"),
|
|
49
|
+
isEqual: y,
|
|
50
|
+
hash(a) {
|
|
51
|
+
return a.join(",");
|
|
52
|
+
},
|
|
53
|
+
onChange(a) {
|
|
54
|
+
var s;
|
|
55
|
+
(s = e("onValueChange")) == null || s({ value: a });
|
|
56
|
+
}
|
|
57
|
+
})),
|
|
58
|
+
focusedIndex: t(() => ({
|
|
59
|
+
defaultValue: -1,
|
|
60
|
+
onChange(a) {
|
|
61
|
+
var u;
|
|
62
|
+
const s = n();
|
|
63
|
+
(u = e("onFocusChange")) == null || u({ focusedIndex: a, value: s.get("value") });
|
|
64
|
+
}
|
|
65
|
+
})),
|
|
66
|
+
fieldsetDisabled: t(() => ({
|
|
67
|
+
defaultValue: !1
|
|
68
|
+
}))
|
|
69
|
+
};
|
|
70
|
+
},
|
|
71
|
+
refs() {
|
|
72
|
+
return {
|
|
73
|
+
thumbDragOffset: null,
|
|
74
|
+
thumbDragStartValue: null
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
computed: {
|
|
78
|
+
isHorizontal: ({ prop: e }) => e("orientation") === "horizontal",
|
|
79
|
+
isVertical: ({ prop: e }) => e("orientation") === "vertical",
|
|
80
|
+
isRtl: ({ prop: e }) => e("orientation") === "horizontal" && e("dir") === "rtl",
|
|
81
|
+
isDisabled: ({ context: e, prop: t }) => !!t("disabled") || e.get("fieldsetDisabled"),
|
|
82
|
+
isInteractive: ({ prop: e, computed: t }) => !(e("readOnly") || t("isDisabled")),
|
|
83
|
+
hasMeasuredThumbSize: ({ context: e }) => e.get("thumbSize") != null,
|
|
84
|
+
valuePercent: B(
|
|
85
|
+
({ context: e, prop: t }) => [e.get("value"), t("min"), t("max")],
|
|
86
|
+
([e, t, n]) => e.map((a) => 100 * A(a, t, n))
|
|
87
|
+
)
|
|
88
|
+
},
|
|
89
|
+
watch({ track: e, action: t, context: n, computed: a, send: s }) {
|
|
90
|
+
e([() => n.hash("value")], () => {
|
|
91
|
+
t(["syncInputElements", "dispatchChangeEvent"]);
|
|
92
|
+
}), e([() => a("isDisabled")], () => {
|
|
93
|
+
a("isDisabled") && s({ type: "POINTER_CANCEL" });
|
|
94
|
+
});
|
|
95
|
+
},
|
|
96
|
+
effects: ["trackFormControlState", "trackThumbSize"],
|
|
97
|
+
on: {
|
|
98
|
+
SET_VALUE: [
|
|
99
|
+
{
|
|
100
|
+
guard: "hasIndex",
|
|
101
|
+
actions: ["setValueAtIndex", "invokeOnChangeEnd"]
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
actions: ["setValue", "invokeOnChangeEnd"]
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
INCREMENT: {
|
|
108
|
+
actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
|
|
109
|
+
},
|
|
110
|
+
DECREMENT: {
|
|
111
|
+
actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
states: {
|
|
115
|
+
idle: {
|
|
116
|
+
on: {
|
|
117
|
+
POINTER_DOWN: {
|
|
118
|
+
target: "dragging",
|
|
119
|
+
actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
|
|
120
|
+
},
|
|
121
|
+
FOCUS: {
|
|
122
|
+
target: "focus",
|
|
123
|
+
actions: ["setFocusedIndex"]
|
|
124
|
+
},
|
|
125
|
+
THUMB_POINTER_DOWN: {
|
|
126
|
+
target: "dragging",
|
|
127
|
+
actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
focus: {
|
|
132
|
+
entry: ["focusActiveThumb"],
|
|
133
|
+
on: {
|
|
134
|
+
POINTER_DOWN: {
|
|
135
|
+
target: "dragging",
|
|
136
|
+
actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
|
|
137
|
+
},
|
|
138
|
+
THUMB_POINTER_DOWN: {
|
|
139
|
+
target: "dragging",
|
|
140
|
+
actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
|
|
141
|
+
},
|
|
142
|
+
ARROW_DEC: {
|
|
143
|
+
actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
|
|
144
|
+
},
|
|
145
|
+
ARROW_INC: {
|
|
146
|
+
actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
|
|
147
|
+
},
|
|
148
|
+
HOME: {
|
|
149
|
+
actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
|
|
150
|
+
},
|
|
151
|
+
END: {
|
|
152
|
+
actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
|
|
153
|
+
},
|
|
154
|
+
BLUR: {
|
|
155
|
+
target: "idle",
|
|
156
|
+
actions: ["clearFocusedIndex"]
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
dragging: {
|
|
161
|
+
entry: ["focusActiveThumb"],
|
|
162
|
+
effects: ["trackPointerMove"],
|
|
163
|
+
on: {
|
|
164
|
+
POINTER_UP: {
|
|
165
|
+
target: "focus",
|
|
166
|
+
actions: ["invokeOnChangeEnd", "clearThumbDragOffset", "clearThumbDragStartValue"]
|
|
167
|
+
},
|
|
168
|
+
POINTER_MOVE: {
|
|
169
|
+
actions: ["setPointerValue"]
|
|
170
|
+
},
|
|
171
|
+
POINTER_CANCEL: {
|
|
172
|
+
target: "idle",
|
|
173
|
+
actions: ["clearFocusedIndex", "clearThumbDragOffset", "clearThumbDragStartValue"]
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
implementations: {
|
|
179
|
+
guards: {
|
|
180
|
+
hasIndex: ({ event: e }) => e.index != null
|
|
181
|
+
},
|
|
182
|
+
effects: {
|
|
183
|
+
trackFormControlState({ context: e, scope: t }) {
|
|
184
|
+
return p(T(t), {
|
|
185
|
+
onFieldsetDisabledChange(n) {
|
|
186
|
+
e.set("fieldsetDisabled", n);
|
|
187
|
+
},
|
|
188
|
+
onFormReset() {
|
|
189
|
+
e.set("value", e.initial("value"));
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
},
|
|
193
|
+
trackPointerMove({ scope: e, send: t }) {
|
|
194
|
+
return w(e.getDoc(), {
|
|
195
|
+
onPointerMove(n) {
|
|
196
|
+
t({ type: "POINTER_MOVE", point: n.point });
|
|
197
|
+
},
|
|
198
|
+
onPointerUp() {
|
|
199
|
+
t({ type: "POINTER_UP" });
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
},
|
|
203
|
+
trackThumbSize({ context: e, scope: t, prop: n }) {
|
|
204
|
+
if (n("thumbAlignment") !== "contain" || n("thumbSize")) return;
|
|
205
|
+
const a = (o) => {
|
|
206
|
+
const l = x(o), i = U(l, ["width", "height"]);
|
|
207
|
+
W(e.get("thumbSize"), i) || e.set("thumbSize", i);
|
|
208
|
+
}, s = v(t);
|
|
209
|
+
s.forEach(a);
|
|
210
|
+
const u = s.map((o) => F.observe(o, () => a(o)));
|
|
211
|
+
return _(...u);
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
actions: {
|
|
215
|
+
dispatchChangeEvent({ context: e, scope: t }) {
|
|
216
|
+
f(t, e.get("value"));
|
|
217
|
+
},
|
|
218
|
+
syncInputElements({ context: e, scope: t }) {
|
|
219
|
+
e.get("value").forEach((n, a) => {
|
|
220
|
+
const s = g(t, a);
|
|
221
|
+
z(s, n.toString());
|
|
222
|
+
});
|
|
223
|
+
},
|
|
224
|
+
invokeOnChangeEnd({ prop: e, context: t }) {
|
|
225
|
+
queueMicrotask(() => {
|
|
226
|
+
var n;
|
|
227
|
+
(n = e("onValueChangeEnd")) == null || n({ value: t.get("value") });
|
|
228
|
+
});
|
|
229
|
+
},
|
|
230
|
+
setClosestThumbIndex(e) {
|
|
231
|
+
const { context: t, event: n } = e, a = c(e, n.point);
|
|
232
|
+
if (a == null) return;
|
|
233
|
+
const s = D(e, a);
|
|
234
|
+
t.set("focusedIndex", s);
|
|
235
|
+
},
|
|
236
|
+
setFocusedIndex(e) {
|
|
237
|
+
const { context: t, event: n } = e, a = C(e, n.index);
|
|
238
|
+
t.set("focusedIndex", a);
|
|
239
|
+
},
|
|
240
|
+
clearFocusedIndex({ context: e }) {
|
|
241
|
+
e.set("focusedIndex", -1);
|
|
242
|
+
},
|
|
243
|
+
setThumbDragOffset(e) {
|
|
244
|
+
const { refs: t, event: n } = e;
|
|
245
|
+
t.set("thumbDragOffset", n.offset ?? null);
|
|
246
|
+
},
|
|
247
|
+
clearThumbDragOffset({ refs: e }) {
|
|
248
|
+
e.set("thumbDragOffset", null);
|
|
249
|
+
},
|
|
250
|
+
setThumbDragStartValue({ refs: e, context: t }) {
|
|
251
|
+
e.set("thumbDragStartValue", t.get("value").slice());
|
|
252
|
+
},
|
|
253
|
+
clearThumbDragStartValue({ refs: e }) {
|
|
254
|
+
e.set("thumbDragStartValue", null);
|
|
255
|
+
},
|
|
256
|
+
setPointerValue(e) {
|
|
257
|
+
queueMicrotask(() => {
|
|
258
|
+
const { context: t, event: n, prop: a, refs: s } = e, u = c(e, n.point);
|
|
259
|
+
if (u == null) return;
|
|
260
|
+
const o = t.get("focusedIndex"), l = s.get("thumbDragStartValue"), i = O(
|
|
261
|
+
a("thumbCollisionBehavior"),
|
|
262
|
+
o,
|
|
263
|
+
u,
|
|
264
|
+
t.get("value"),
|
|
265
|
+
a("min"),
|
|
266
|
+
a("max"),
|
|
267
|
+
a("step"),
|
|
268
|
+
a("minStepsBetweenThumbs"),
|
|
269
|
+
l == null ? void 0 : l[o]
|
|
270
|
+
);
|
|
271
|
+
i.swapped && t.set("focusedIndex", i.index), t.set("value", i.values);
|
|
272
|
+
});
|
|
273
|
+
},
|
|
274
|
+
focusActiveThumb({ scope: e, context: t }) {
|
|
275
|
+
M(() => {
|
|
276
|
+
const n = h(e, t.get("focusedIndex"));
|
|
277
|
+
n == null || n.focus({ preventScroll: !0 });
|
|
278
|
+
});
|
|
279
|
+
},
|
|
280
|
+
decrementThumbAtIndex(e) {
|
|
281
|
+
const { context: t, event: n } = e, a = V(e, n.index, n.step);
|
|
282
|
+
t.set("value", a);
|
|
283
|
+
},
|
|
284
|
+
incrementThumbAtIndex(e) {
|
|
285
|
+
const { context: t, event: n } = e, a = E(e, n.index, n.step);
|
|
286
|
+
t.set("value", a);
|
|
287
|
+
},
|
|
288
|
+
setFocusedThumbToMin(e) {
|
|
289
|
+
const { context: t } = e, n = t.get("focusedIndex"), { min: a } = d(e, n);
|
|
290
|
+
t.set("value", (s) => r(s, n, a));
|
|
291
|
+
},
|
|
292
|
+
setFocusedThumbToMax(e) {
|
|
293
|
+
const { context: t } = e, n = t.get("focusedIndex"), { max: a } = d(e, n);
|
|
294
|
+
t.set("value", (s) => r(s, n, a));
|
|
295
|
+
},
|
|
296
|
+
setValueAtIndex(e) {
|
|
297
|
+
const { context: t, event: n } = e, a = I(e, n.value, n.index);
|
|
298
|
+
t.set("value", (s) => r(s, n.index, a));
|
|
299
|
+
},
|
|
300
|
+
setValue(e) {
|
|
301
|
+
const { context: t, event: n } = e, a = b(e, n.value);
|
|
302
|
+
t.set("value", a);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
});
|
|
307
|
+
export {
|
|
308
|
+
ee as machine
|
|
309
|
+
};
|