@zag-js/slider 0.1.16 → 0.2.0
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/index.d.ts +4 -0
- package/dist/index.js +69 -37
- package/dist/index.mjs +69 -37
- package/package.json +7 -7
package/dist/index.d.ts
CHANGED
|
@@ -172,6 +172,10 @@ declare const dom: {
|
|
|
172
172
|
getById: <T_1 = HTMLElement>(ctx: {
|
|
173
173
|
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
174
174
|
}, id: string) => T_1 | null;
|
|
175
|
+
createEmitter: (ctx: {
|
|
176
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
177
|
+
}, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
|
|
178
|
+
createListener: (target: HTMLElement) => <T_2 = any>(evt: string, handler: (e: CustomEvent<T_2>) => void) => () => void;
|
|
175
179
|
} & {
|
|
176
180
|
getRootId: (ctx: MachineContext) => string;
|
|
177
181
|
getThumbId: (ctx: MachineContext) => string;
|
package/dist/index.js
CHANGED
|
@@ -32,7 +32,7 @@ var dataAttr = (guard) => {
|
|
|
32
32
|
};
|
|
33
33
|
var runIfFn = (v, ...a) => {
|
|
34
34
|
const res = typeof v === "function" ? v(...a) : v;
|
|
35
|
-
return res
|
|
35
|
+
return res != null ? res : void 0;
|
|
36
36
|
};
|
|
37
37
|
var callAll = (...fns) => (...a) => {
|
|
38
38
|
fns.forEach(function(fn) {
|
|
@@ -44,8 +44,9 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
44
44
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
45
45
|
var isDom = () => typeof window !== "undefined";
|
|
46
46
|
function getPlatform() {
|
|
47
|
+
var _a;
|
|
47
48
|
const agent = navigator.userAgentData;
|
|
48
|
-
return (agent == null ? void 0 : agent.platform)
|
|
49
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
49
50
|
}
|
|
50
51
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
51
52
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -59,22 +60,44 @@ function isWindow(value) {
|
|
|
59
60
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
60
61
|
}
|
|
61
62
|
function getDocument(el) {
|
|
63
|
+
var _a;
|
|
62
64
|
if (isWindow(el))
|
|
63
65
|
return el.document;
|
|
64
66
|
if (isDocument(el))
|
|
65
67
|
return el;
|
|
66
|
-
return (el == null ? void 0 : el.ownerDocument)
|
|
68
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
67
69
|
}
|
|
68
70
|
function defineDomHelpers(helpers) {
|
|
69
71
|
const dom2 = {
|
|
70
72
|
getRootNode: (ctx) => {
|
|
71
|
-
var _a;
|
|
72
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx))
|
|
73
|
+
var _a, _b;
|
|
74
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
73
75
|
},
|
|
74
76
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
75
|
-
getWin: (ctx) =>
|
|
77
|
+
getWin: (ctx) => {
|
|
78
|
+
var _a;
|
|
79
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
80
|
+
},
|
|
76
81
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
77
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
82
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
83
|
+
createEmitter: (ctx, target) => {
|
|
84
|
+
const win = dom2.getWin(ctx);
|
|
85
|
+
return function emit(evt, detail, options) {
|
|
86
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
87
|
+
const eventName = `zag:${evt}`;
|
|
88
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
89
|
+
const event = new win.CustomEvent(eventName, init);
|
|
90
|
+
target.dispatchEvent(event);
|
|
91
|
+
};
|
|
92
|
+
},
|
|
93
|
+
createListener: (target) => {
|
|
94
|
+
return function listen(evt, handler) {
|
|
95
|
+
const eventName = `zag:${evt}`;
|
|
96
|
+
const listener = (e) => handler(e);
|
|
97
|
+
target.addEventListener(eventName, listener);
|
|
98
|
+
return () => target.removeEventListener(eventName, listener);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
78
101
|
};
|
|
79
102
|
return {
|
|
80
103
|
...dom2,
|
|
@@ -82,7 +105,8 @@ function defineDomHelpers(helpers) {
|
|
|
82
105
|
};
|
|
83
106
|
}
|
|
84
107
|
function getNativeEvent(e) {
|
|
85
|
-
|
|
108
|
+
var _a;
|
|
109
|
+
return (_a = e.nativeEvent) != null ? _a : e;
|
|
86
110
|
}
|
|
87
111
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
88
112
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -120,7 +144,8 @@ var fallback = {
|
|
|
120
144
|
clientY: 0
|
|
121
145
|
};
|
|
122
146
|
function getEventPoint(event, type = "page") {
|
|
123
|
-
|
|
147
|
+
var _a, _b;
|
|
148
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
124
149
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
125
150
|
}
|
|
126
151
|
function getPointRelativeToNode(point, element) {
|
|
@@ -143,9 +168,10 @@ var sameKeyMap = {
|
|
|
143
168
|
Right: "ArrowRight"
|
|
144
169
|
};
|
|
145
170
|
function getEventKey(event, options = {}) {
|
|
171
|
+
var _a;
|
|
146
172
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
147
173
|
let { key } = event;
|
|
148
|
-
key = sameKeyMap[key]
|
|
174
|
+
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
149
175
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
150
176
|
if (isRtl && key in rtlKeyMap) {
|
|
151
177
|
key = rtlKeyMap[key];
|
|
@@ -182,7 +208,8 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
182
208
|
};
|
|
183
209
|
}
|
|
184
210
|
function addPointerEvent(target, event, listener, options) {
|
|
185
|
-
|
|
211
|
+
var _a;
|
|
212
|
+
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
186
213
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
187
214
|
}
|
|
188
215
|
function wrapHandler(fn, filter = false) {
|
|
@@ -193,7 +220,8 @@ function wrapHandler(fn, filter = false) {
|
|
|
193
220
|
}
|
|
194
221
|
function filterPrimaryPointer(fn) {
|
|
195
222
|
return (event) => {
|
|
196
|
-
|
|
223
|
+
var _a;
|
|
224
|
+
const win = (_a = event.view) != null ? _a : window;
|
|
197
225
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
198
226
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
199
227
|
if (isPrimary)
|
|
@@ -248,7 +276,7 @@ var state = "default";
|
|
|
248
276
|
var savedUserSelect = "";
|
|
249
277
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
250
278
|
function disableTextSelection({ target, doc } = {}) {
|
|
251
|
-
const _document = doc
|
|
279
|
+
const _document = doc != null ? doc : document;
|
|
252
280
|
if (isIos()) {
|
|
253
281
|
if (state === "default") {
|
|
254
282
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -262,7 +290,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
262
290
|
return () => restoreTextSelection({ target, doc: _document });
|
|
263
291
|
}
|
|
264
292
|
function restoreTextSelection({ target, doc } = {}) {
|
|
265
|
-
const _document = doc
|
|
293
|
+
const _document = doc != null ? doc : document;
|
|
266
294
|
if (isIos()) {
|
|
267
295
|
if (state !== "disabled")
|
|
268
296
|
return;
|
|
@@ -282,7 +310,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
282
310
|
if (target && modifiedElementMap.has(target)) {
|
|
283
311
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
284
312
|
if (target.style.userSelect === "none") {
|
|
285
|
-
target.style.userSelect = targetOldUserSelect
|
|
313
|
+
target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
|
|
286
314
|
}
|
|
287
315
|
if (target.getAttribute("style") === "") {
|
|
288
316
|
target.removeAttribute("style");
|
|
@@ -316,7 +344,8 @@ function trackPointerMove(doc, opts) {
|
|
|
316
344
|
|
|
317
345
|
// ../../utilities/form-utils/dist/index.mjs
|
|
318
346
|
function getWindow(el) {
|
|
319
|
-
|
|
347
|
+
var _a;
|
|
348
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
320
349
|
}
|
|
321
350
|
function observeAttributes(node, attributes, fn) {
|
|
322
351
|
if (!node)
|
|
@@ -334,9 +363,10 @@ function observeAttributes(node, attributes, fn) {
|
|
|
334
363
|
return () => obs.disconnect();
|
|
335
364
|
}
|
|
336
365
|
function getDescriptor(el, options) {
|
|
366
|
+
var _a;
|
|
337
367
|
const { type, property } = options;
|
|
338
368
|
const proto = getWindow(el)[type].prototype;
|
|
339
|
-
return Object.getOwnPropertyDescriptor(proto, property)
|
|
369
|
+
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
340
370
|
}
|
|
341
371
|
function dispatchInputValueEvent(el, value) {
|
|
342
372
|
var _a;
|
|
@@ -379,7 +409,7 @@ function trackFieldsetDisabled(el, callback) {
|
|
|
379
409
|
// ../../utilities/number/dist/index.mjs
|
|
380
410
|
function round(v, t) {
|
|
381
411
|
let num = valueOf(v);
|
|
382
|
-
const p = 10 ** (t
|
|
412
|
+
const p = 10 ** (t != null ? t : 10);
|
|
383
413
|
num = Math.round(num * p) / p;
|
|
384
414
|
return t ? num.toFixed(t) : v.toString();
|
|
385
415
|
}
|
|
@@ -437,12 +467,14 @@ var transform = (a, b) => {
|
|
|
437
467
|
|
|
438
468
|
// src/slider.style.ts
|
|
439
469
|
function getVerticalThumbOffset(ctx) {
|
|
440
|
-
|
|
470
|
+
var _a;
|
|
471
|
+
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
441
472
|
const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
442
473
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
443
474
|
}
|
|
444
475
|
function getHorizontalThumbOffset(ctx) {
|
|
445
|
-
|
|
476
|
+
var _a;
|
|
477
|
+
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
446
478
|
if (ctx.isRtl) {
|
|
447
479
|
const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
448
480
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
@@ -552,11 +584,11 @@ var utils = {
|
|
|
552
584
|
return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
|
|
553
585
|
},
|
|
554
586
|
decrement(ctx, step) {
|
|
555
|
-
let value = decrement(ctx.value, step
|
|
587
|
+
let value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
556
588
|
return utils.convert(ctx, value);
|
|
557
589
|
},
|
|
558
590
|
increment(ctx, step) {
|
|
559
|
-
let value = increment(ctx.value, step
|
|
591
|
+
let value = increment(ctx.value, step != null ? step : ctx.step);
|
|
560
592
|
return utils.convert(ctx, value);
|
|
561
593
|
}
|
|
562
594
|
};
|
|
@@ -565,33 +597,33 @@ var utils = {
|
|
|
565
597
|
var dom = defineDomHelpers({
|
|
566
598
|
...styles,
|
|
567
599
|
getRootId: (ctx) => {
|
|
568
|
-
var _a;
|
|
569
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.root)
|
|
600
|
+
var _a, _b;
|
|
601
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
|
|
570
602
|
},
|
|
571
603
|
getThumbId: (ctx) => {
|
|
572
|
-
var _a;
|
|
573
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.thumb)
|
|
604
|
+
var _a, _b;
|
|
605
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
|
|
574
606
|
},
|
|
575
607
|
getControlId: (ctx) => {
|
|
576
|
-
var _a;
|
|
577
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.control)
|
|
608
|
+
var _a, _b;
|
|
609
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
|
|
578
610
|
},
|
|
579
611
|
getInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
580
612
|
getOutputId: (ctx) => {
|
|
581
|
-
var _a;
|
|
582
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.output)
|
|
613
|
+
var _a, _b;
|
|
614
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
|
|
583
615
|
},
|
|
584
616
|
getTrackId: (ctx) => {
|
|
585
|
-
var _a;
|
|
586
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.track)
|
|
617
|
+
var _a, _b;
|
|
618
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
|
|
587
619
|
},
|
|
588
620
|
getRangeId: (ctx) => {
|
|
589
|
-
var _a;
|
|
590
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.track)
|
|
621
|
+
var _a, _b;
|
|
622
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
|
|
591
623
|
},
|
|
592
624
|
getLabelId: (ctx) => {
|
|
593
|
-
var _a;
|
|
594
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.label)
|
|
625
|
+
var _a, _b;
|
|
626
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
|
|
595
627
|
},
|
|
596
628
|
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
597
629
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
@@ -690,7 +722,7 @@ function connect(state2, send, normalize) {
|
|
|
690
722
|
"data-invalid": dataAttr(isInvalid),
|
|
691
723
|
"aria-disabled": isDisabled || void 0,
|
|
692
724
|
"aria-label": ariaLabel,
|
|
693
|
-
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy
|
|
725
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
|
|
694
726
|
"aria-orientation": state2.context.orientation,
|
|
695
727
|
"aria-valuemax": state2.context.max,
|
|
696
728
|
"aria-valuemin": state2.context.min,
|
package/dist/index.mjs
CHANGED
|
@@ -4,7 +4,7 @@ var dataAttr = (guard) => {
|
|
|
4
4
|
};
|
|
5
5
|
var runIfFn = (v, ...a) => {
|
|
6
6
|
const res = typeof v === "function" ? v(...a) : v;
|
|
7
|
-
return res
|
|
7
|
+
return res != null ? res : void 0;
|
|
8
8
|
};
|
|
9
9
|
var callAll = (...fns) => (...a) => {
|
|
10
10
|
fns.forEach(function(fn) {
|
|
@@ -16,8 +16,9 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
16
16
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
17
17
|
var isDom = () => typeof window !== "undefined";
|
|
18
18
|
function getPlatform() {
|
|
19
|
+
var _a;
|
|
19
20
|
const agent = navigator.userAgentData;
|
|
20
|
-
return (agent == null ? void 0 : agent.platform)
|
|
21
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
21
22
|
}
|
|
22
23
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
23
24
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
@@ -31,22 +32,44 @@ function isWindow(value) {
|
|
|
31
32
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
32
33
|
}
|
|
33
34
|
function getDocument(el) {
|
|
35
|
+
var _a;
|
|
34
36
|
if (isWindow(el))
|
|
35
37
|
return el.document;
|
|
36
38
|
if (isDocument(el))
|
|
37
39
|
return el;
|
|
38
|
-
return (el == null ? void 0 : el.ownerDocument)
|
|
40
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
39
41
|
}
|
|
40
42
|
function defineDomHelpers(helpers) {
|
|
41
43
|
const dom2 = {
|
|
42
44
|
getRootNode: (ctx) => {
|
|
43
|
-
var _a;
|
|
44
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx))
|
|
45
|
+
var _a, _b;
|
|
46
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
45
47
|
},
|
|
46
48
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
47
|
-
getWin: (ctx) =>
|
|
49
|
+
getWin: (ctx) => {
|
|
50
|
+
var _a;
|
|
51
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
52
|
+
},
|
|
48
53
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
49
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
54
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
55
|
+
createEmitter: (ctx, target) => {
|
|
56
|
+
const win = dom2.getWin(ctx);
|
|
57
|
+
return function emit(evt, detail, options) {
|
|
58
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
59
|
+
const eventName = `zag:${evt}`;
|
|
60
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
61
|
+
const event = new win.CustomEvent(eventName, init);
|
|
62
|
+
target.dispatchEvent(event);
|
|
63
|
+
};
|
|
64
|
+
},
|
|
65
|
+
createListener: (target) => {
|
|
66
|
+
return function listen(evt, handler) {
|
|
67
|
+
const eventName = `zag:${evt}`;
|
|
68
|
+
const listener = (e) => handler(e);
|
|
69
|
+
target.addEventListener(eventName, listener);
|
|
70
|
+
return () => target.removeEventListener(eventName, listener);
|
|
71
|
+
};
|
|
72
|
+
}
|
|
50
73
|
};
|
|
51
74
|
return {
|
|
52
75
|
...dom2,
|
|
@@ -54,7 +77,8 @@ function defineDomHelpers(helpers) {
|
|
|
54
77
|
};
|
|
55
78
|
}
|
|
56
79
|
function getNativeEvent(e) {
|
|
57
|
-
|
|
80
|
+
var _a;
|
|
81
|
+
return (_a = e.nativeEvent) != null ? _a : e;
|
|
58
82
|
}
|
|
59
83
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
60
84
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
@@ -92,7 +116,8 @@ var fallback = {
|
|
|
92
116
|
clientY: 0
|
|
93
117
|
};
|
|
94
118
|
function getEventPoint(event, type = "page") {
|
|
95
|
-
|
|
119
|
+
var _a, _b;
|
|
120
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
96
121
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
97
122
|
}
|
|
98
123
|
function getPointRelativeToNode(point, element) {
|
|
@@ -115,9 +140,10 @@ var sameKeyMap = {
|
|
|
115
140
|
Right: "ArrowRight"
|
|
116
141
|
};
|
|
117
142
|
function getEventKey(event, options = {}) {
|
|
143
|
+
var _a;
|
|
118
144
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
119
145
|
let { key } = event;
|
|
120
|
-
key = sameKeyMap[key]
|
|
146
|
+
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
121
147
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
122
148
|
if (isRtl && key in rtlKeyMap) {
|
|
123
149
|
key = rtlKeyMap[key];
|
|
@@ -154,7 +180,8 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
154
180
|
};
|
|
155
181
|
}
|
|
156
182
|
function addPointerEvent(target, event, listener, options) {
|
|
157
|
-
|
|
183
|
+
var _a;
|
|
184
|
+
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
158
185
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
159
186
|
}
|
|
160
187
|
function wrapHandler(fn, filter = false) {
|
|
@@ -165,7 +192,8 @@ function wrapHandler(fn, filter = false) {
|
|
|
165
192
|
}
|
|
166
193
|
function filterPrimaryPointer(fn) {
|
|
167
194
|
return (event) => {
|
|
168
|
-
|
|
195
|
+
var _a;
|
|
196
|
+
const win = (_a = event.view) != null ? _a : window;
|
|
169
197
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
170
198
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
171
199
|
if (isPrimary)
|
|
@@ -220,7 +248,7 @@ var state = "default";
|
|
|
220
248
|
var savedUserSelect = "";
|
|
221
249
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
222
250
|
function disableTextSelection({ target, doc } = {}) {
|
|
223
|
-
const _document = doc
|
|
251
|
+
const _document = doc != null ? doc : document;
|
|
224
252
|
if (isIos()) {
|
|
225
253
|
if (state === "default") {
|
|
226
254
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -234,7 +262,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
234
262
|
return () => restoreTextSelection({ target, doc: _document });
|
|
235
263
|
}
|
|
236
264
|
function restoreTextSelection({ target, doc } = {}) {
|
|
237
|
-
const _document = doc
|
|
265
|
+
const _document = doc != null ? doc : document;
|
|
238
266
|
if (isIos()) {
|
|
239
267
|
if (state !== "disabled")
|
|
240
268
|
return;
|
|
@@ -254,7 +282,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
254
282
|
if (target && modifiedElementMap.has(target)) {
|
|
255
283
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
256
284
|
if (target.style.userSelect === "none") {
|
|
257
|
-
target.style.userSelect = targetOldUserSelect
|
|
285
|
+
target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
|
|
258
286
|
}
|
|
259
287
|
if (target.getAttribute("style") === "") {
|
|
260
288
|
target.removeAttribute("style");
|
|
@@ -288,7 +316,8 @@ function trackPointerMove(doc, opts) {
|
|
|
288
316
|
|
|
289
317
|
// ../../utilities/form-utils/dist/index.mjs
|
|
290
318
|
function getWindow(el) {
|
|
291
|
-
|
|
319
|
+
var _a;
|
|
320
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
292
321
|
}
|
|
293
322
|
function observeAttributes(node, attributes, fn) {
|
|
294
323
|
if (!node)
|
|
@@ -306,9 +335,10 @@ function observeAttributes(node, attributes, fn) {
|
|
|
306
335
|
return () => obs.disconnect();
|
|
307
336
|
}
|
|
308
337
|
function getDescriptor(el, options) {
|
|
338
|
+
var _a;
|
|
309
339
|
const { type, property } = options;
|
|
310
340
|
const proto = getWindow(el)[type].prototype;
|
|
311
|
-
return Object.getOwnPropertyDescriptor(proto, property)
|
|
341
|
+
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
312
342
|
}
|
|
313
343
|
function dispatchInputValueEvent(el, value) {
|
|
314
344
|
var _a;
|
|
@@ -351,7 +381,7 @@ function trackFieldsetDisabled(el, callback) {
|
|
|
351
381
|
// ../../utilities/number/dist/index.mjs
|
|
352
382
|
function round(v, t) {
|
|
353
383
|
let num = valueOf(v);
|
|
354
|
-
const p = 10 ** (t
|
|
384
|
+
const p = 10 ** (t != null ? t : 10);
|
|
355
385
|
num = Math.round(num * p) / p;
|
|
356
386
|
return t ? num.toFixed(t) : v.toString();
|
|
357
387
|
}
|
|
@@ -409,12 +439,14 @@ var transform = (a, b) => {
|
|
|
409
439
|
|
|
410
440
|
// src/slider.style.ts
|
|
411
441
|
function getVerticalThumbOffset(ctx) {
|
|
412
|
-
|
|
442
|
+
var _a;
|
|
443
|
+
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
413
444
|
const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
414
445
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
415
446
|
}
|
|
416
447
|
function getHorizontalThumbOffset(ctx) {
|
|
417
|
-
|
|
448
|
+
var _a;
|
|
449
|
+
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
418
450
|
if (ctx.isRtl) {
|
|
419
451
|
const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
420
452
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
@@ -524,11 +556,11 @@ var utils = {
|
|
|
524
556
|
return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
|
|
525
557
|
},
|
|
526
558
|
decrement(ctx, step) {
|
|
527
|
-
let value = decrement(ctx.value, step
|
|
559
|
+
let value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
528
560
|
return utils.convert(ctx, value);
|
|
529
561
|
},
|
|
530
562
|
increment(ctx, step) {
|
|
531
|
-
let value = increment(ctx.value, step
|
|
563
|
+
let value = increment(ctx.value, step != null ? step : ctx.step);
|
|
532
564
|
return utils.convert(ctx, value);
|
|
533
565
|
}
|
|
534
566
|
};
|
|
@@ -537,33 +569,33 @@ var utils = {
|
|
|
537
569
|
var dom = defineDomHelpers({
|
|
538
570
|
...styles,
|
|
539
571
|
getRootId: (ctx) => {
|
|
540
|
-
var _a;
|
|
541
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.root)
|
|
572
|
+
var _a, _b;
|
|
573
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
|
|
542
574
|
},
|
|
543
575
|
getThumbId: (ctx) => {
|
|
544
|
-
var _a;
|
|
545
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.thumb)
|
|
576
|
+
var _a, _b;
|
|
577
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
|
|
546
578
|
},
|
|
547
579
|
getControlId: (ctx) => {
|
|
548
|
-
var _a;
|
|
549
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.control)
|
|
580
|
+
var _a, _b;
|
|
581
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
|
|
550
582
|
},
|
|
551
583
|
getInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
552
584
|
getOutputId: (ctx) => {
|
|
553
|
-
var _a;
|
|
554
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.output)
|
|
585
|
+
var _a, _b;
|
|
586
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
|
|
555
587
|
},
|
|
556
588
|
getTrackId: (ctx) => {
|
|
557
|
-
var _a;
|
|
558
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.track)
|
|
589
|
+
var _a, _b;
|
|
590
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
|
|
559
591
|
},
|
|
560
592
|
getRangeId: (ctx) => {
|
|
561
|
-
var _a;
|
|
562
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.track)
|
|
593
|
+
var _a, _b;
|
|
594
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
|
|
563
595
|
},
|
|
564
596
|
getLabelId: (ctx) => {
|
|
565
|
-
var _a;
|
|
566
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.label)
|
|
597
|
+
var _a, _b;
|
|
598
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
|
|
567
599
|
},
|
|
568
600
|
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
569
601
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
@@ -662,7 +694,7 @@ function connect(state2, send, normalize) {
|
|
|
662
694
|
"data-invalid": dataAttr(isInvalid),
|
|
663
695
|
"aria-disabled": isDisabled || void 0,
|
|
664
696
|
"aria-label": ariaLabel,
|
|
665
|
-
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy
|
|
697
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
|
|
666
698
|
"aria-orientation": state2.context.orientation,
|
|
667
699
|
"aria-valuemax": state2.context.max,
|
|
668
700
|
"aria-valuemin": state2.context.min,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/slider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Core logic for the slider widget implemented as a state machine",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.
|
|
33
|
-
"@zag-js/element-size": "0.
|
|
34
|
-
"@zag-js/types": "0.
|
|
32
|
+
"@zag-js/core": "0.2.0",
|
|
33
|
+
"@zag-js/element-size": "0.3.0",
|
|
34
|
+
"@zag-js/types": "0.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zag-js/dom-utils": "0.
|
|
38
|
-
"@zag-js/form-utils": "0.
|
|
39
|
-
"@zag-js/number-utils": "0.
|
|
37
|
+
"@zag-js/dom-utils": "0.2.0",
|
|
38
|
+
"@zag-js/form-utils": "0.2.0",
|
|
39
|
+
"@zag-js/number-utils": "0.2.0"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build-fast": "tsup src/index.ts --format=esm,cjs",
|