@zag-js/slider 0.2.10 → 0.2.12
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/{chunk-DIZXKUD6.mjs → chunk-3UP6QL6A.mjs} +2 -4
- package/dist/{chunk-7YVG4DKQ.mjs → chunk-3Y7IIPR5.mjs} +0 -0
- package/dist/{chunk-RQG27JID.mjs → chunk-55KEN77D.mjs} +15 -46
- package/dist/{chunk-WEMXLFK3.mjs → chunk-5XVLG734.mjs} +22 -37
- package/dist/{chunk-GVCEKN7A.mjs → chunk-IJAAAKZQ.mjs} +2 -4
- package/dist/{chunk-OSBGE2HK.mjs → chunk-X363CZYV.mjs} +9 -14
- package/dist/{chunk-OLKQEDRG.mjs → chunk-YGFSMEUO.mjs} +2 -2
- package/dist/index.js +45 -100
- package/dist/index.mjs +7 -7
- package/dist/slider.anatomy.mjs +1 -1
- package/dist/slider.connect.js +23 -62
- package/dist/slider.connect.mjs +5 -5
- package/dist/slider.dom.js +16 -49
- package/dist/slider.dom.mjs +2 -2
- package/dist/slider.machine.js +38 -87
- package/dist/slider.machine.mjs +5 -5
- package/dist/slider.style.js +2 -4
- package/dist/slider.style.mjs +1 -1
- package/dist/slider.types.d.ts +1 -1
- package/dist/slider.utils.js +2 -2
- package/dist/slider.utils.mjs +1 -1
- package/package.json +9 -9
package/dist/index.js
CHANGED
|
@@ -51,11 +51,11 @@ var dataAttr = (guard) => {
|
|
|
51
51
|
// ../../utilities/core/src/functions.ts
|
|
52
52
|
var runIfFn = (v, ...a) => {
|
|
53
53
|
const res = typeof v === "function" ? v(...a) : v;
|
|
54
|
-
return res
|
|
54
|
+
return res ?? void 0;
|
|
55
55
|
};
|
|
56
56
|
var callAll = (...fns) => (...a) => {
|
|
57
57
|
fns.forEach(function(fn) {
|
|
58
|
-
fn
|
|
58
|
+
fn?.(...a);
|
|
59
59
|
});
|
|
60
60
|
};
|
|
61
61
|
|
|
@@ -76,9 +76,8 @@ function compact(obj) {
|
|
|
76
76
|
// ../../utilities/dom/src/platform.ts
|
|
77
77
|
var isDom = () => typeof window !== "undefined";
|
|
78
78
|
function getPlatform() {
|
|
79
|
-
var _a;
|
|
80
79
|
const agent = navigator.userAgentData;
|
|
81
|
-
return
|
|
80
|
+
return agent?.platform ?? navigator.platform;
|
|
82
81
|
}
|
|
83
82
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
84
83
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -91,31 +90,23 @@ function isDocument(el) {
|
|
|
91
90
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
92
91
|
}
|
|
93
92
|
function isWindow(value) {
|
|
94
|
-
return
|
|
93
|
+
return value?.toString() === "[object Window]";
|
|
95
94
|
}
|
|
96
95
|
function getDocument(el) {
|
|
97
|
-
var _a;
|
|
98
96
|
if (isWindow(el))
|
|
99
97
|
return el.document;
|
|
100
98
|
if (isDocument(el))
|
|
101
99
|
return el;
|
|
102
|
-
return
|
|
100
|
+
return el?.ownerDocument ?? document;
|
|
103
101
|
}
|
|
104
102
|
function getWindow(el) {
|
|
105
|
-
|
|
106
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
103
|
+
return el?.ownerDocument.defaultView ?? window;
|
|
107
104
|
}
|
|
108
105
|
function defineDomHelpers(helpers) {
|
|
109
106
|
const dom2 = {
|
|
110
|
-
getRootNode: (ctx) =>
|
|
111
|
-
var _a, _b;
|
|
112
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
113
|
-
},
|
|
107
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
114
108
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
115
|
-
getWin: (ctx) =>
|
|
116
|
-
var _a;
|
|
117
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
118
|
-
},
|
|
109
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
119
110
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
120
111
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
121
112
|
};
|
|
@@ -127,8 +118,7 @@ function defineDomHelpers(helpers) {
|
|
|
127
118
|
|
|
128
119
|
// ../../utilities/dom/src/event.ts
|
|
129
120
|
function getNativeEvent(e) {
|
|
130
|
-
|
|
131
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
121
|
+
return e.nativeEvent ?? e;
|
|
132
122
|
}
|
|
133
123
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
134
124
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -170,8 +160,7 @@ var fallback = {
|
|
|
170
160
|
clientY: 0
|
|
171
161
|
};
|
|
172
162
|
function getEventPoint(event, type = "page") {
|
|
173
|
-
|
|
174
|
-
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
163
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
175
164
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
176
165
|
}
|
|
177
166
|
|
|
@@ -198,10 +187,9 @@ var sameKeyMap = {
|
|
|
198
187
|
Right: "ArrowRight"
|
|
199
188
|
};
|
|
200
189
|
function getEventKey(event, options = {}) {
|
|
201
|
-
var _a;
|
|
202
190
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
203
191
|
let { key } = event;
|
|
204
|
-
key =
|
|
192
|
+
key = sameKeyMap[key] ?? key;
|
|
205
193
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
206
194
|
if (isRtl && key in rtlKeyMap) {
|
|
207
195
|
key = rtlKeyMap[key];
|
|
@@ -234,14 +222,13 @@ function extractInfo(event, type = "page") {
|
|
|
234
222
|
}
|
|
235
223
|
function addDomEvent(target, eventName, handler, options) {
|
|
236
224
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
237
|
-
node
|
|
225
|
+
node?.addEventListener(eventName, handler, options);
|
|
238
226
|
return () => {
|
|
239
|
-
node
|
|
227
|
+
node?.removeEventListener(eventName, handler, options);
|
|
240
228
|
};
|
|
241
229
|
}
|
|
242
230
|
function addPointerEvent(target, event, listener, options) {
|
|
243
|
-
|
|
244
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
231
|
+
const type = getEventName(event) ?? event;
|
|
245
232
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
246
233
|
}
|
|
247
234
|
function wrapHandler(fn, filter = false) {
|
|
@@ -252,8 +239,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
252
239
|
}
|
|
253
240
|
function filterPrimaryPointer(fn) {
|
|
254
241
|
return (event) => {
|
|
255
|
-
|
|
256
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
242
|
+
const win = event.view ?? window;
|
|
257
243
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
258
244
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
259
245
|
if (isPrimary)
|
|
@@ -329,7 +315,7 @@ var state = "default";
|
|
|
329
315
|
var savedUserSelect = "";
|
|
330
316
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
331
317
|
function disableTextSelection({ target, doc } = {}) {
|
|
332
|
-
const _document = doc
|
|
318
|
+
const _document = doc ?? document;
|
|
333
319
|
if (isIos()) {
|
|
334
320
|
if (state === "default") {
|
|
335
321
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -343,7 +329,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
343
329
|
return () => restoreTextSelection({ target, doc: _document });
|
|
344
330
|
}
|
|
345
331
|
function restoreTextSelection({ target, doc } = {}) {
|
|
346
|
-
const _document = doc
|
|
332
|
+
const _document = doc ?? document;
|
|
347
333
|
if (isIos()) {
|
|
348
334
|
if (state !== "disabled")
|
|
349
335
|
return;
|
|
@@ -363,7 +349,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
363
349
|
if (target && modifiedElementMap.has(target)) {
|
|
364
350
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
365
351
|
if (target.style.userSelect === "none") {
|
|
366
|
-
target.style.userSelect = targetOldUserSelect
|
|
352
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
367
353
|
}
|
|
368
354
|
if (target.getAttribute("style") === "") {
|
|
369
355
|
target.removeAttribute("style");
|
|
@@ -402,20 +388,18 @@ var import_numeric_range3 = require("@zag-js/numeric-range");
|
|
|
402
388
|
|
|
403
389
|
// ../../utilities/form-utils/src/input-event.ts
|
|
404
390
|
function getDescriptor(el, options) {
|
|
405
|
-
var _a;
|
|
406
391
|
const { type, property = "value" } = options;
|
|
407
392
|
const proto = getWindow(el)[type].prototype;
|
|
408
|
-
return
|
|
393
|
+
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
409
394
|
}
|
|
410
395
|
function dispatchInputValueEvent(el, value) {
|
|
411
|
-
var _a;
|
|
412
396
|
if (!el)
|
|
413
397
|
return;
|
|
414
398
|
const win = getWindow(el);
|
|
415
399
|
if (!(el instanceof win.HTMLInputElement))
|
|
416
400
|
return;
|
|
417
401
|
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
418
|
-
|
|
402
|
+
desc.set?.call(el, value);
|
|
419
403
|
const event = new win.Event("input", { bubbles: true });
|
|
420
404
|
el.dispatchEvent(event);
|
|
421
405
|
}
|
|
@@ -434,13 +418,13 @@ function trackFormReset(el, callback) {
|
|
|
434
418
|
if (!el)
|
|
435
419
|
return;
|
|
436
420
|
const form = getClosestForm(el);
|
|
437
|
-
form
|
|
421
|
+
form?.addEventListener("reset", callback, { passive: true });
|
|
438
422
|
return () => {
|
|
439
|
-
form
|
|
423
|
+
form?.removeEventListener("reset", callback);
|
|
440
424
|
};
|
|
441
425
|
}
|
|
442
426
|
function trackFieldsetDisabled(el, callback) {
|
|
443
|
-
const fieldset = el
|
|
427
|
+
const fieldset = el?.closest("fieldset");
|
|
444
428
|
if (!fieldset)
|
|
445
429
|
return;
|
|
446
430
|
callback(fieldset.disabled);
|
|
@@ -458,7 +442,7 @@ function trackFormControl(el, options) {
|
|
|
458
442
|
})
|
|
459
443
|
];
|
|
460
444
|
return () => {
|
|
461
|
-
cleanups.forEach((cleanup) => cleanup
|
|
445
|
+
cleanups.forEach((cleanup) => cleanup?.());
|
|
462
446
|
};
|
|
463
447
|
}
|
|
464
448
|
|
|
@@ -468,14 +452,12 @@ var import_numeric_range2 = require("@zag-js/numeric-range");
|
|
|
468
452
|
// src/slider.style.ts
|
|
469
453
|
var import_numeric_range = require("@zag-js/numeric-range");
|
|
470
454
|
function getVerticalThumbOffset(ctx) {
|
|
471
|
-
|
|
472
|
-
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
455
|
+
const { height = 0 } = ctx.thumbSize ?? {};
|
|
473
456
|
const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
474
457
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
475
458
|
}
|
|
476
459
|
function getHorizontalThumbOffset(ctx) {
|
|
477
|
-
|
|
478
|
-
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
460
|
+
const { width = 0 } = ctx.thumbSize ?? {};
|
|
479
461
|
if (ctx.isRtl) {
|
|
480
462
|
const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
481
463
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
@@ -582,35 +564,14 @@ var styles = {
|
|
|
582
564
|
// src/slider.dom.ts
|
|
583
565
|
var dom = defineDomHelpers({
|
|
584
566
|
...styles,
|
|
585
|
-
getRootId: (ctx) => {
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
},
|
|
589
|
-
getThumbId: (ctx) => {
|
|
590
|
-
var _a, _b;
|
|
591
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
|
|
592
|
-
},
|
|
593
|
-
getControlId: (ctx) => {
|
|
594
|
-
var _a, _b;
|
|
595
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
|
|
596
|
-
},
|
|
567
|
+
getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
|
|
568
|
+
getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
|
|
569
|
+
getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
|
|
597
570
|
getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
598
|
-
getOutputId: (ctx) => {
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
}
|
|
602
|
-
getTrackId: (ctx) => {
|
|
603
|
-
var _a, _b;
|
|
604
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
|
|
605
|
-
},
|
|
606
|
-
getRangeId: (ctx) => {
|
|
607
|
-
var _a, _b;
|
|
608
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
|
|
609
|
-
},
|
|
610
|
-
getLabelId: (ctx) => {
|
|
611
|
-
var _a, _b;
|
|
612
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
|
|
613
|
-
},
|
|
571
|
+
getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
|
|
572
|
+
getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
|
|
573
|
+
getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
|
|
574
|
+
getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
|
|
614
575
|
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
615
576
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
616
577
|
getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
|
|
@@ -641,10 +602,9 @@ var dom = defineDomHelpers({
|
|
|
641
602
|
|
|
642
603
|
// src/slider.connect.ts
|
|
643
604
|
function connect(state2, send, normalize) {
|
|
644
|
-
var _a, _b;
|
|
645
605
|
const ariaLabel = state2.context["aria-label"];
|
|
646
606
|
const ariaLabelledBy = state2.context["aria-labelledby"];
|
|
647
|
-
const ariaValueText =
|
|
607
|
+
const ariaValueText = state2.context.getAriaValueText?.(state2.context.value);
|
|
648
608
|
const isFocused = state2.matches("focus");
|
|
649
609
|
const isDragging = state2.matches("dragging");
|
|
650
610
|
const isDisabled = state2.context.disabled;
|
|
@@ -667,8 +627,7 @@ function connect(state2, send, normalize) {
|
|
|
667
627
|
getPercentValue: getPercentValueFn,
|
|
668
628
|
getValuePercent: getValuePercentFn,
|
|
669
629
|
focus() {
|
|
670
|
-
|
|
671
|
-
(_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
|
|
630
|
+
dom.getThumbEl(state2.context)?.focus();
|
|
672
631
|
},
|
|
673
632
|
increment() {
|
|
674
633
|
send("INCREMENT");
|
|
@@ -694,11 +653,10 @@ function connect(state2, send, normalize) {
|
|
|
694
653
|
id: dom.getLabelId(state2.context),
|
|
695
654
|
htmlFor: dom.getHiddenInputId(state2.context),
|
|
696
655
|
onClick(event) {
|
|
697
|
-
var _a2;
|
|
698
656
|
if (!isInteractive)
|
|
699
657
|
return;
|
|
700
658
|
event.preventDefault();
|
|
701
|
-
|
|
659
|
+
dom.getThumbEl(state2.context)?.focus();
|
|
702
660
|
},
|
|
703
661
|
style: dom.getLabelStyle()
|
|
704
662
|
}),
|
|
@@ -713,7 +671,7 @@ function connect(state2, send, normalize) {
|
|
|
713
671
|
"data-invalid": dataAttr(isInvalid),
|
|
714
672
|
"aria-disabled": isDisabled || void 0,
|
|
715
673
|
"aria-label": ariaLabel,
|
|
716
|
-
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy
|
|
674
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
|
|
717
675
|
"aria-orientation": state2.context.orientation,
|
|
718
676
|
"aria-valuemax": state2.context.max,
|
|
719
677
|
"aria-valuemin": state2.context.min,
|
|
@@ -872,7 +830,7 @@ function decrement(ctx, step) {
|
|
|
872
830
|
const index = 0;
|
|
873
831
|
const values = (0, import_numeric_range4.getPreviousStepValue)(index, {
|
|
874
832
|
...ctx,
|
|
875
|
-
step: step
|
|
833
|
+
step: step ?? ctx.step,
|
|
876
834
|
values: [ctx.value]
|
|
877
835
|
});
|
|
878
836
|
return values[index];
|
|
@@ -881,7 +839,7 @@ function increment(ctx, step) {
|
|
|
881
839
|
const index = 0;
|
|
882
840
|
const values = (0, import_numeric_range4.getNextStepValue)(index, {
|
|
883
841
|
...ctx,
|
|
884
|
-
step: step
|
|
842
|
+
step: step ?? ctx.step,
|
|
885
843
|
values: [ctx.value]
|
|
886
844
|
});
|
|
887
845
|
return values[index];
|
|
@@ -893,7 +851,7 @@ function machine(userContext) {
|
|
|
893
851
|
return (0, import_core.createMachine)(
|
|
894
852
|
{
|
|
895
853
|
id: "slider",
|
|
896
|
-
initial: "
|
|
854
|
+
initial: "idle",
|
|
897
855
|
context: {
|
|
898
856
|
thumbSize: null,
|
|
899
857
|
thumbAlignment: "contain",
|
|
@@ -932,15 +890,8 @@ function machine(userContext) {
|
|
|
932
890
|
actions: "decrement"
|
|
933
891
|
}
|
|
934
892
|
},
|
|
893
|
+
entry: ["checkValue"],
|
|
935
894
|
states: {
|
|
936
|
-
unknown: {
|
|
937
|
-
on: {
|
|
938
|
-
SETUP: {
|
|
939
|
-
target: "idle",
|
|
940
|
-
actions: ["checkValue"]
|
|
941
|
-
}
|
|
942
|
-
}
|
|
943
|
-
},
|
|
944
895
|
idle: {
|
|
945
896
|
on: {
|
|
946
897
|
POINTER_DOWN: {
|
|
@@ -1047,16 +998,13 @@ function machine(userContext) {
|
|
|
1047
998
|
ctx2.initialValue = value;
|
|
1048
999
|
},
|
|
1049
1000
|
invokeOnChangeStart(ctx2) {
|
|
1050
|
-
|
|
1051
|
-
(_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
1001
|
+
ctx2.onChangeStart?.({ value: ctx2.value });
|
|
1052
1002
|
},
|
|
1053
1003
|
invokeOnChangeEnd(ctx2) {
|
|
1054
|
-
|
|
1055
|
-
(_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
1004
|
+
ctx2.onChangeEnd?.({ value: ctx2.value });
|
|
1056
1005
|
},
|
|
1057
1006
|
invokeOnChange(ctx2) {
|
|
1058
|
-
|
|
1059
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
|
|
1007
|
+
ctx2.onChange?.({ value: ctx2.value });
|
|
1060
1008
|
},
|
|
1061
1009
|
dispatchChangeEvent(ctx2) {
|
|
1062
1010
|
dom.dispatchChangeEvent(ctx2);
|
|
@@ -1068,10 +1016,7 @@ function machine(userContext) {
|
|
|
1068
1016
|
ctx2.value = (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max);
|
|
1069
1017
|
},
|
|
1070
1018
|
focusThumb(ctx2) {
|
|
1071
|
-
raf(() =>
|
|
1072
|
-
var _a;
|
|
1073
|
-
return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
|
|
1074
|
-
});
|
|
1019
|
+
raf(() => dom.getThumbEl(ctx2)?.focus());
|
|
1075
1020
|
},
|
|
1076
1021
|
decrement(ctx2, evt) {
|
|
1077
1022
|
ctx2.value = decrement(ctx2, evt.step);
|
package/dist/index.mjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-X363CZYV.mjs";
|
|
4
4
|
import {
|
|
5
5
|
anatomy
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-3Y7IIPR5.mjs";
|
|
7
7
|
import {
|
|
8
8
|
machine
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-5XVLG734.mjs";
|
|
10
|
+
import "./chunk-3UP6QL6A.mjs";
|
|
11
11
|
import {
|
|
12
12
|
dom
|
|
13
|
-
} from "./chunk-
|
|
14
|
-
import "./chunk-
|
|
15
|
-
import "./chunk-
|
|
13
|
+
} from "./chunk-55KEN77D.mjs";
|
|
14
|
+
import "./chunk-IJAAAKZQ.mjs";
|
|
15
|
+
import "./chunk-YGFSMEUO.mjs";
|
|
16
16
|
export {
|
|
17
17
|
anatomy,
|
|
18
18
|
connect,
|
package/dist/slider.anatomy.mjs
CHANGED
package/dist/slider.connect.js
CHANGED
|
@@ -39,31 +39,23 @@ function isDocument(el) {
|
|
|
39
39
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
40
40
|
}
|
|
41
41
|
function isWindow(value) {
|
|
42
|
-
return
|
|
42
|
+
return value?.toString() === "[object Window]";
|
|
43
43
|
}
|
|
44
44
|
function getDocument(el) {
|
|
45
|
-
var _a;
|
|
46
45
|
if (isWindow(el))
|
|
47
46
|
return el.document;
|
|
48
47
|
if (isDocument(el))
|
|
49
48
|
return el;
|
|
50
|
-
return
|
|
49
|
+
return el?.ownerDocument ?? document;
|
|
51
50
|
}
|
|
52
51
|
function getWindow(el) {
|
|
53
|
-
|
|
54
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
52
|
+
return el?.ownerDocument.defaultView ?? window;
|
|
55
53
|
}
|
|
56
54
|
function defineDomHelpers(helpers) {
|
|
57
55
|
const dom2 = {
|
|
58
|
-
getRootNode: (ctx) =>
|
|
59
|
-
var _a, _b;
|
|
60
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
61
|
-
},
|
|
56
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
62
57
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
63
|
-
getWin: (ctx) =>
|
|
64
|
-
var _a;
|
|
65
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
66
|
-
},
|
|
58
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
67
59
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
68
60
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
69
61
|
};
|
|
@@ -75,8 +67,7 @@ function defineDomHelpers(helpers) {
|
|
|
75
67
|
|
|
76
68
|
// ../../utilities/dom/src/event.ts
|
|
77
69
|
function getNativeEvent(e) {
|
|
78
|
-
|
|
79
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
70
|
+
return e.nativeEvent ?? e;
|
|
80
71
|
}
|
|
81
72
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
82
73
|
var isLeftClick = (v) => v.button === 0;
|
|
@@ -114,8 +105,7 @@ var fallback = {
|
|
|
114
105
|
clientY: 0
|
|
115
106
|
};
|
|
116
107
|
function getEventPoint(event, type = "page") {
|
|
117
|
-
|
|
118
|
-
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
108
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
119
109
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
120
110
|
}
|
|
121
111
|
|
|
@@ -142,10 +132,9 @@ var sameKeyMap = {
|
|
|
142
132
|
Right: "ArrowRight"
|
|
143
133
|
};
|
|
144
134
|
function getEventKey(event, options = {}) {
|
|
145
|
-
var _a;
|
|
146
135
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
147
136
|
let { key } = event;
|
|
148
|
-
key =
|
|
137
|
+
key = sameKeyMap[key] ?? key;
|
|
149
138
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
150
139
|
if (isRtl && key in rtlKeyMap) {
|
|
151
140
|
key = rtlKeyMap[key];
|
|
@@ -185,20 +174,18 @@ var parts = anatomy.build();
|
|
|
185
174
|
|
|
186
175
|
// ../../utilities/form-utils/src/input-event.ts
|
|
187
176
|
function getDescriptor(el, options) {
|
|
188
|
-
var _a;
|
|
189
177
|
const { type, property = "value" } = options;
|
|
190
178
|
const proto = getWindow(el)[type].prototype;
|
|
191
|
-
return
|
|
179
|
+
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
192
180
|
}
|
|
193
181
|
function dispatchInputValueEvent(el, value) {
|
|
194
|
-
var _a;
|
|
195
182
|
if (!el)
|
|
196
183
|
return;
|
|
197
184
|
const win = getWindow(el);
|
|
198
185
|
if (!(el instanceof win.HTMLInputElement))
|
|
199
186
|
return;
|
|
200
187
|
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
201
|
-
|
|
188
|
+
desc.set?.call(el, value);
|
|
202
189
|
const event = new win.Event("input", { bubbles: true });
|
|
203
190
|
el.dispatchEvent(event);
|
|
204
191
|
}
|
|
@@ -209,14 +196,12 @@ var import_numeric_range2 = require("@zag-js/numeric-range");
|
|
|
209
196
|
// src/slider.style.ts
|
|
210
197
|
var import_numeric_range = require("@zag-js/numeric-range");
|
|
211
198
|
function getVerticalThumbOffset(ctx) {
|
|
212
|
-
|
|
213
|
-
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
199
|
+
const { height = 0 } = ctx.thumbSize ?? {};
|
|
214
200
|
const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
215
201
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
216
202
|
}
|
|
217
203
|
function getHorizontalThumbOffset(ctx) {
|
|
218
|
-
|
|
219
|
-
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
204
|
+
const { width = 0 } = ctx.thumbSize ?? {};
|
|
220
205
|
if (ctx.isRtl) {
|
|
221
206
|
const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
222
207
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
@@ -323,35 +308,14 @@ var styles = {
|
|
|
323
308
|
// src/slider.dom.ts
|
|
324
309
|
var dom = defineDomHelpers({
|
|
325
310
|
...styles,
|
|
326
|
-
getRootId: (ctx) => {
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
},
|
|
330
|
-
getThumbId: (ctx) => {
|
|
331
|
-
var _a, _b;
|
|
332
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
|
|
333
|
-
},
|
|
334
|
-
getControlId: (ctx) => {
|
|
335
|
-
var _a, _b;
|
|
336
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
|
|
337
|
-
},
|
|
311
|
+
getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
|
|
312
|
+
getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
|
|
313
|
+
getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
|
|
338
314
|
getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
339
|
-
getOutputId: (ctx) => {
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
}
|
|
343
|
-
getTrackId: (ctx) => {
|
|
344
|
-
var _a, _b;
|
|
345
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
|
|
346
|
-
},
|
|
347
|
-
getRangeId: (ctx) => {
|
|
348
|
-
var _a, _b;
|
|
349
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
|
|
350
|
-
},
|
|
351
|
-
getLabelId: (ctx) => {
|
|
352
|
-
var _a, _b;
|
|
353
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
|
|
354
|
-
},
|
|
315
|
+
getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
|
|
316
|
+
getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
|
|
317
|
+
getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
|
|
318
|
+
getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
|
|
355
319
|
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
356
320
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
357
321
|
getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
|
|
@@ -382,10 +346,9 @@ var dom = defineDomHelpers({
|
|
|
382
346
|
|
|
383
347
|
// src/slider.connect.ts
|
|
384
348
|
function connect(state, send, normalize) {
|
|
385
|
-
var _a, _b;
|
|
386
349
|
const ariaLabel = state.context["aria-label"];
|
|
387
350
|
const ariaLabelledBy = state.context["aria-labelledby"];
|
|
388
|
-
const ariaValueText =
|
|
351
|
+
const ariaValueText = state.context.getAriaValueText?.(state.context.value);
|
|
389
352
|
const isFocused = state.matches("focus");
|
|
390
353
|
const isDragging = state.matches("dragging");
|
|
391
354
|
const isDisabled = state.context.disabled;
|
|
@@ -408,8 +371,7 @@ function connect(state, send, normalize) {
|
|
|
408
371
|
getPercentValue: getPercentValueFn,
|
|
409
372
|
getValuePercent: getValuePercentFn,
|
|
410
373
|
focus() {
|
|
411
|
-
|
|
412
|
-
(_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
|
|
374
|
+
dom.getThumbEl(state.context)?.focus();
|
|
413
375
|
},
|
|
414
376
|
increment() {
|
|
415
377
|
send("INCREMENT");
|
|
@@ -435,11 +397,10 @@ function connect(state, send, normalize) {
|
|
|
435
397
|
id: dom.getLabelId(state.context),
|
|
436
398
|
htmlFor: dom.getHiddenInputId(state.context),
|
|
437
399
|
onClick(event) {
|
|
438
|
-
var _a2;
|
|
439
400
|
if (!isInteractive)
|
|
440
401
|
return;
|
|
441
402
|
event.preventDefault();
|
|
442
|
-
|
|
403
|
+
dom.getThumbEl(state.context)?.focus();
|
|
443
404
|
},
|
|
444
405
|
style: dom.getLabelStyle()
|
|
445
406
|
}),
|
|
@@ -454,7 +415,7 @@ function connect(state, send, normalize) {
|
|
|
454
415
|
"data-invalid": dataAttr(isInvalid),
|
|
455
416
|
"aria-disabled": isDisabled || void 0,
|
|
456
417
|
"aria-label": ariaLabel,
|
|
457
|
-
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy
|
|
418
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
|
|
458
419
|
"aria-orientation": state.context.orientation,
|
|
459
420
|
"aria-valuemax": state.context.max,
|
|
460
421
|
"aria-valuemin": state.context.min,
|
package/dist/slider.connect.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-X363CZYV.mjs";
|
|
4
|
+
import "./chunk-3Y7IIPR5.mjs";
|
|
5
|
+
import "./chunk-3UP6QL6A.mjs";
|
|
6
|
+
import "./chunk-55KEN77D.mjs";
|
|
7
|
+
import "./chunk-IJAAAKZQ.mjs";
|
|
8
8
|
export {
|
|
9
9
|
connect
|
|
10
10
|
};
|