@zag-js/slider 0.1.8 → 0.1.11
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/LICENSE +21 -0
- package/dist/index.d.ts +228 -4
- package/dist/index.js +239 -245
- package/dist/index.mjs +237 -253
- package/package.json +15 -13
- package/dist/slider.connect.d.ts +0 -25
- package/dist/slider.dom.d.ts +0 -30
- package/dist/slider.machine.d.ts +0 -2
- package/dist/slider.style.d.ts +0 -23
- package/dist/slider.types.d.ts +0 -169
- package/dist/slider.utils.d.ts +0 -8
package/dist/index.mjs
CHANGED
|
@@ -1,150 +1,74 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
|
|
22
1
|
// ../../utilities/dom/dist/index.mjs
|
|
23
|
-
var __pow = Math.pow;
|
|
24
2
|
var dataAttr = (guard) => {
|
|
25
3
|
return guard ? "" : void 0;
|
|
26
4
|
};
|
|
27
|
-
var
|
|
5
|
+
var runIfFn = (v, ...a) => {
|
|
6
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
7
|
+
return res ?? void 0;
|
|
8
|
+
};
|
|
9
|
+
var callAll = (...fns) => (...a) => {
|
|
10
|
+
fns.forEach(function(fn) {
|
|
11
|
+
fn == null ? void 0 : fn(...a);
|
|
12
|
+
});
|
|
13
|
+
};
|
|
28
14
|
var isArray = (v) => Array.isArray(v);
|
|
29
15
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
30
16
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
17
|
+
var isDom = () => typeof window !== "undefined";
|
|
31
18
|
function getPlatform() {
|
|
32
|
-
var _a;
|
|
33
19
|
const agent = navigator.userAgentData;
|
|
34
|
-
return (
|
|
20
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
35
21
|
}
|
|
36
22
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
37
23
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
38
24
|
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
39
25
|
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
40
26
|
var isIos = () => isApple() && !isMac();
|
|
27
|
+
function isDocument(el) {
|
|
28
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
29
|
+
}
|
|
30
|
+
function isWindow(value) {
|
|
31
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
32
|
+
}
|
|
33
|
+
function getDocument(el) {
|
|
34
|
+
if (isWindow(el))
|
|
35
|
+
return el.document;
|
|
36
|
+
if (isDocument(el))
|
|
37
|
+
return el;
|
|
38
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
39
|
+
}
|
|
40
|
+
function getWindow(el) {
|
|
41
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
42
|
+
}
|
|
43
|
+
function defineDomHelpers(helpers) {
|
|
44
|
+
const dom2 = {
|
|
45
|
+
getRootNode: (ctx) => {
|
|
46
|
+
var _a;
|
|
47
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
48
|
+
},
|
|
49
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
50
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
51
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
52
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
53
|
+
};
|
|
54
|
+
return {
|
|
55
|
+
...dom2,
|
|
56
|
+
...helpers
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
function getNativeEvent(e) {
|
|
60
|
+
return e.nativeEvent ?? e;
|
|
61
|
+
}
|
|
41
62
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
42
63
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
43
64
|
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
44
65
|
var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
|
|
45
66
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
46
67
|
var isLeftClick = (v) => v.button === 0;
|
|
47
|
-
var
|
|
48
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
49
|
-
return res != null ? res : void 0;
|
|
50
|
-
};
|
|
51
|
-
var noop = () => {
|
|
52
|
-
};
|
|
53
|
-
var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
54
|
-
var isRef = (v) => hasProp(v, "current");
|
|
55
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
56
|
-
function extractInfo(event, type = "page") {
|
|
57
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
|
|
58
|
-
return {
|
|
59
|
-
point: {
|
|
60
|
-
x: point[`${type}X`],
|
|
61
|
-
y: point[`${type}Y`]
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
66
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
67
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
68
|
-
return () => {
|
|
69
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
function addPointerEvent(target, event, listener, options) {
|
|
73
|
-
var _a;
|
|
74
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
75
|
-
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
76
|
-
}
|
|
77
|
-
function wrapHandler(fn, filter = false) {
|
|
78
|
-
const listener = (event) => {
|
|
79
|
-
fn(event, extractInfo(event));
|
|
80
|
-
};
|
|
81
|
-
return filter ? filterPrimaryPointer(listener) : listener;
|
|
82
|
-
}
|
|
83
|
-
function filterPrimaryPointer(fn) {
|
|
84
|
-
return (event) => {
|
|
85
|
-
var _a;
|
|
86
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
87
|
-
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
88
|
-
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
89
|
-
if (isPrimary)
|
|
90
|
-
fn(event);
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
var mouseEventNames = {
|
|
94
|
-
pointerdown: "mousedown",
|
|
95
|
-
pointermove: "mousemove",
|
|
96
|
-
pointerup: "mouseup",
|
|
97
|
-
pointercancel: "mousecancel",
|
|
98
|
-
pointerover: "mouseover",
|
|
99
|
-
pointerout: "mouseout",
|
|
100
|
-
pointerenter: "mouseenter",
|
|
101
|
-
pointerleave: "mouseleave"
|
|
102
|
-
};
|
|
103
|
-
var touchEventNames = {
|
|
104
|
-
pointerdown: "touchstart",
|
|
105
|
-
pointermove: "touchmove",
|
|
106
|
-
pointerup: "touchend",
|
|
107
|
-
pointercancel: "touchcancel"
|
|
108
|
-
};
|
|
109
|
-
function getEventName(evt) {
|
|
110
|
-
if (supportsPointerEvent())
|
|
111
|
-
return evt;
|
|
112
|
-
if (supportsTouchEvent())
|
|
113
|
-
return touchEventNames[evt];
|
|
114
|
-
if (supportsMouseEvent())
|
|
115
|
-
return mouseEventNames[evt];
|
|
116
|
-
return evt;
|
|
117
|
-
}
|
|
118
|
-
function nextTick(fn) {
|
|
119
|
-
const set = /* @__PURE__ */ new Set();
|
|
120
|
-
function raf2(fn2) {
|
|
121
|
-
const id = globalThis.requestAnimationFrame(fn2);
|
|
122
|
-
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
123
|
-
}
|
|
124
|
-
raf2(() => raf2(fn));
|
|
125
|
-
return function cleanup() {
|
|
126
|
-
set.forEach(function(fn2) {
|
|
127
|
-
fn2();
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
function raf(fn) {
|
|
132
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
133
|
-
return function cleanup() {
|
|
134
|
-
globalThis.cancelAnimationFrame(id);
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
function getOwnerWindow(el) {
|
|
138
|
-
var _a;
|
|
139
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
140
|
-
}
|
|
141
|
-
function getNativeEvent(e) {
|
|
142
|
-
var _a;
|
|
143
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
144
|
-
}
|
|
68
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
145
69
|
function observeAttributes(node, attributes, fn) {
|
|
146
70
|
if (!node)
|
|
147
|
-
return
|
|
71
|
+
return;
|
|
148
72
|
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
149
73
|
const win = node.ownerDocument.defaultView || window;
|
|
150
74
|
const obs = new win.MutationObserver((changes) => {
|
|
@@ -182,20 +106,57 @@ function trackFieldsetDisabled(el, callback) {
|
|
|
182
106
|
callback(fieldset.disabled);
|
|
183
107
|
return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
|
|
184
108
|
}
|
|
109
|
+
function getElementOffset(element) {
|
|
110
|
+
let left = 0;
|
|
111
|
+
let top = 0;
|
|
112
|
+
let el = element;
|
|
113
|
+
if (el.parentNode) {
|
|
114
|
+
do {
|
|
115
|
+
left += el.offsetLeft;
|
|
116
|
+
top += el.offsetTop;
|
|
117
|
+
} while ((el = el.offsetParent) && el.nodeType < 9);
|
|
118
|
+
el = element;
|
|
119
|
+
do {
|
|
120
|
+
left -= el.scrollLeft;
|
|
121
|
+
top -= el.scrollTop;
|
|
122
|
+
} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
|
|
123
|
+
}
|
|
124
|
+
return {
|
|
125
|
+
top,
|
|
126
|
+
right: innerWidth - left - element.offsetWidth,
|
|
127
|
+
bottom: innerHeight - top - element.offsetHeight,
|
|
128
|
+
left
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
var fallback = {
|
|
132
|
+
pageX: 0,
|
|
133
|
+
pageY: 0,
|
|
134
|
+
clientX: 0,
|
|
135
|
+
clientY: 0
|
|
136
|
+
};
|
|
137
|
+
function getEventPoint(event, type = "page") {
|
|
138
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
139
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
140
|
+
}
|
|
141
|
+
function getPointRelativeToNode(point, element) {
|
|
142
|
+
const offset = getElementOffset(element);
|
|
143
|
+
const x = point.x - offset.left;
|
|
144
|
+
const y = point.y - offset.top;
|
|
145
|
+
return { x, y };
|
|
146
|
+
}
|
|
185
147
|
function getDescriptor(el, options) {
|
|
186
|
-
var _a;
|
|
187
148
|
const { type, property } = options;
|
|
188
|
-
const
|
|
189
|
-
|
|
190
|
-
const proto = win[_type].prototype;
|
|
191
|
-
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
149
|
+
const proto = getWindow(el)[type].prototype;
|
|
150
|
+
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
192
151
|
}
|
|
193
152
|
function dispatchInputValueEvent(el, value) {
|
|
194
153
|
var _a;
|
|
195
|
-
|
|
154
|
+
if (!el)
|
|
155
|
+
return;
|
|
156
|
+
const win = getWindow(el);
|
|
196
157
|
if (!(el instanceof win.HTMLInputElement))
|
|
197
158
|
return;
|
|
198
|
-
const desc = getDescriptor(el, { type: "
|
|
159
|
+
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
199
160
|
(_a = desc.set) == null ? void 0 : _a.call(el, value);
|
|
200
161
|
const event = new win.Event("input", { bubbles: true });
|
|
201
162
|
el.dispatchEvent(event);
|
|
@@ -216,10 +177,9 @@ var sameKeyMap = {
|
|
|
216
177
|
Right: "ArrowRight"
|
|
217
178
|
};
|
|
218
179
|
function getEventKey(event, options = {}) {
|
|
219
|
-
var _a;
|
|
220
180
|
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
221
181
|
let { key } = event;
|
|
222
|
-
key =
|
|
182
|
+
key = sameKeyMap[key] ?? key;
|
|
223
183
|
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
224
184
|
if (isRtl && key in rtlKeyMap) {
|
|
225
185
|
key = rtlKeyMap[key];
|
|
@@ -237,11 +197,92 @@ function getEventStep(event) {
|
|
|
237
197
|
return isSkipKey ? 10 : 1;
|
|
238
198
|
}
|
|
239
199
|
}
|
|
200
|
+
var isRef = (v) => hasProp(v, "current");
|
|
201
|
+
var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
202
|
+
function extractInfo(event, type = "page") {
|
|
203
|
+
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
|
|
204
|
+
return {
|
|
205
|
+
point: {
|
|
206
|
+
x: point[`${type}X`],
|
|
207
|
+
y: point[`${type}Y`]
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
212
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
213
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
214
|
+
return () => {
|
|
215
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
function addPointerEvent(target, event, listener, options) {
|
|
219
|
+
const type = getEventName(event) ?? event;
|
|
220
|
+
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
221
|
+
}
|
|
222
|
+
function wrapHandler(fn, filter = false) {
|
|
223
|
+
const listener = (event) => {
|
|
224
|
+
fn(event, extractInfo(event));
|
|
225
|
+
};
|
|
226
|
+
return filter ? filterPrimaryPointer(listener) : listener;
|
|
227
|
+
}
|
|
228
|
+
function filterPrimaryPointer(fn) {
|
|
229
|
+
return (event) => {
|
|
230
|
+
const win = event.view ?? window;
|
|
231
|
+
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
232
|
+
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
233
|
+
if (isPrimary)
|
|
234
|
+
fn(event);
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
var mouseEventNames = {
|
|
238
|
+
pointerdown: "mousedown",
|
|
239
|
+
pointermove: "mousemove",
|
|
240
|
+
pointerup: "mouseup",
|
|
241
|
+
pointercancel: "mousecancel",
|
|
242
|
+
pointerover: "mouseover",
|
|
243
|
+
pointerout: "mouseout",
|
|
244
|
+
pointerenter: "mouseenter",
|
|
245
|
+
pointerleave: "mouseleave"
|
|
246
|
+
};
|
|
247
|
+
var touchEventNames = {
|
|
248
|
+
pointerdown: "touchstart",
|
|
249
|
+
pointermove: "touchmove",
|
|
250
|
+
pointerup: "touchend",
|
|
251
|
+
pointercancel: "touchcancel"
|
|
252
|
+
};
|
|
253
|
+
function getEventName(evt) {
|
|
254
|
+
if (supportsPointerEvent())
|
|
255
|
+
return evt;
|
|
256
|
+
if (supportsTouchEvent())
|
|
257
|
+
return touchEventNames[evt];
|
|
258
|
+
if (supportsMouseEvent())
|
|
259
|
+
return mouseEventNames[evt];
|
|
260
|
+
return evt;
|
|
261
|
+
}
|
|
262
|
+
function nextTick(fn) {
|
|
263
|
+
const set = /* @__PURE__ */ new Set();
|
|
264
|
+
function raf2(fn2) {
|
|
265
|
+
const id = globalThis.requestAnimationFrame(fn2);
|
|
266
|
+
set.add(() => globalThis.cancelAnimationFrame(id));
|
|
267
|
+
}
|
|
268
|
+
raf2(() => raf2(fn));
|
|
269
|
+
return function cleanup() {
|
|
270
|
+
set.forEach(function(fn2) {
|
|
271
|
+
fn2();
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
}
|
|
275
|
+
function raf(fn) {
|
|
276
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
277
|
+
return function cleanup() {
|
|
278
|
+
globalThis.cancelAnimationFrame(id);
|
|
279
|
+
};
|
|
280
|
+
}
|
|
240
281
|
var state = "default";
|
|
241
282
|
var savedUserSelect = "";
|
|
242
283
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
243
284
|
function disableTextSelection({ target, doc } = {}) {
|
|
244
|
-
const _document = doc
|
|
285
|
+
const _document = doc ?? document;
|
|
245
286
|
if (isIos()) {
|
|
246
287
|
if (state === "default") {
|
|
247
288
|
savedUserSelect = _document.documentElement.style.webkitUserSelect;
|
|
@@ -255,7 +296,7 @@ function disableTextSelection({ target, doc } = {}) {
|
|
|
255
296
|
return () => restoreTextSelection({ target, doc: _document });
|
|
256
297
|
}
|
|
257
298
|
function restoreTextSelection({ target, doc } = {}) {
|
|
258
|
-
const _document = doc
|
|
299
|
+
const _document = doc ?? document;
|
|
259
300
|
if (isIos()) {
|
|
260
301
|
if (state !== "disabled")
|
|
261
302
|
return;
|
|
@@ -275,7 +316,7 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
275
316
|
if (target && modifiedElementMap.has(target)) {
|
|
276
317
|
let targetOldUserSelect = modifiedElementMap.get(target);
|
|
277
318
|
if (target.style.userSelect === "none") {
|
|
278
|
-
target.style.userSelect = targetOldUserSelect
|
|
319
|
+
target.style.userSelect = targetOldUserSelect ?? "";
|
|
279
320
|
}
|
|
280
321
|
if (target.getAttribute("style") === "") {
|
|
281
322
|
target.removeAttribute("style");
|
|
@@ -284,13 +325,13 @@ function restoreTextSelection({ target, doc } = {}) {
|
|
|
284
325
|
}
|
|
285
326
|
}
|
|
286
327
|
}
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
const {
|
|
328
|
+
var THRESHOLD = 5;
|
|
329
|
+
function trackPointerMove(doc, opts) {
|
|
330
|
+
const { onPointerMove, onPointerUp } = opts;
|
|
290
331
|
const handlePointerMove = (event, info) => {
|
|
291
332
|
const { point: p } = info;
|
|
292
|
-
const distance = Math.sqrt(
|
|
293
|
-
if (distance <
|
|
333
|
+
const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
|
|
334
|
+
if (distance < THRESHOLD)
|
|
294
335
|
return;
|
|
295
336
|
if (isMouseEvent(event) && isLeftClick(event)) {
|
|
296
337
|
onPointerUp();
|
|
@@ -298,33 +339,13 @@ function trackPointerMove(opts) {
|
|
|
298
339
|
}
|
|
299
340
|
onPointerMove(info, event);
|
|
300
341
|
};
|
|
301
|
-
return
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
// ../../utilities/rect/dist/index.mjs
|
|
305
|
-
var isArray2 = (v) => Array.isArray(v);
|
|
306
|
-
var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
|
|
307
|
-
var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
308
|
-
var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
|
|
309
|
-
var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
310
|
-
function getEventPoint(e, t = "page") {
|
|
311
|
-
const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
|
|
312
|
-
return { x: p[`${t}X`], y: p[`${t}Y`] };
|
|
313
|
-
}
|
|
314
|
-
function relativeToNode(p, el) {
|
|
315
|
-
const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
|
|
316
|
-
const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
|
|
317
|
-
return {
|
|
318
|
-
point: { x: dx, y: dy },
|
|
319
|
-
progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
|
|
320
|
-
};
|
|
342
|
+
return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
|
|
321
343
|
}
|
|
322
344
|
|
|
323
345
|
// ../../utilities/number/dist/index.mjs
|
|
324
|
-
var __pow2 = Math.pow;
|
|
325
346
|
function round(v, t) {
|
|
326
347
|
let num = valueOf(v);
|
|
327
|
-
const p =
|
|
348
|
+
const p = 10 ** (t ?? 10);
|
|
328
349
|
num = Math.round(num * p) / p;
|
|
329
350
|
return t ? num.toFixed(t) : v.toString();
|
|
330
351
|
}
|
|
@@ -360,7 +381,7 @@ function valueOf(v) {
|
|
|
360
381
|
function decimalOperation(a, op, b) {
|
|
361
382
|
let result = op === "+" ? a + b : a - b;
|
|
362
383
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
363
|
-
const multiplier =
|
|
384
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
364
385
|
a = Math.round(a * multiplier);
|
|
365
386
|
b = Math.round(b * multiplier);
|
|
366
387
|
result = op === "+" ? a + b : a - b;
|
|
@@ -382,14 +403,12 @@ var transform = (a, b) => {
|
|
|
382
403
|
|
|
383
404
|
// src/slider.style.ts
|
|
384
405
|
function getVerticalThumbOffset(ctx) {
|
|
385
|
-
|
|
386
|
-
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
406
|
+
const { height = 0 } = ctx.thumbSize ?? {};
|
|
387
407
|
const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
388
408
|
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
389
409
|
}
|
|
390
410
|
function getHorizontalThumbOffset(ctx) {
|
|
391
|
-
|
|
392
|
-
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
411
|
+
const { width = 0 } = ctx.thumbSize ?? {};
|
|
393
412
|
if (ctx.isRtl) {
|
|
394
413
|
const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
395
414
|
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
@@ -499,69 +518,64 @@ var utils = {
|
|
|
499
518
|
return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
|
|
500
519
|
},
|
|
501
520
|
decrement(ctx, step) {
|
|
502
|
-
let value = decrement(ctx.value, step
|
|
521
|
+
let value = decrement(ctx.value, step ?? ctx.step);
|
|
503
522
|
return utils.convert(ctx, value);
|
|
504
523
|
},
|
|
505
524
|
increment(ctx, step) {
|
|
506
|
-
let value = increment(ctx.value, step
|
|
525
|
+
let value = increment(ctx.value, step ?? ctx.step);
|
|
507
526
|
return utils.convert(ctx, value);
|
|
508
527
|
}
|
|
509
528
|
};
|
|
510
529
|
|
|
511
530
|
// src/slider.dom.ts
|
|
512
|
-
var dom =
|
|
513
|
-
|
|
514
|
-
var _a;
|
|
515
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
516
|
-
},
|
|
517
|
-
getRootNode: (ctx) => {
|
|
518
|
-
var _a;
|
|
519
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
520
|
-
},
|
|
531
|
+
var dom = defineDomHelpers({
|
|
532
|
+
...styles,
|
|
521
533
|
getRootId: (ctx) => {
|
|
522
|
-
var _a
|
|
523
|
-
return (
|
|
534
|
+
var _a;
|
|
535
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
|
|
524
536
|
},
|
|
525
537
|
getThumbId: (ctx) => {
|
|
526
|
-
var _a
|
|
527
|
-
return (
|
|
538
|
+
var _a;
|
|
539
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
|
|
528
540
|
},
|
|
529
541
|
getControlId: (ctx) => {
|
|
530
|
-
var _a
|
|
531
|
-
return (
|
|
542
|
+
var _a;
|
|
543
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
|
|
532
544
|
},
|
|
533
|
-
getInputId: (ctx) => `slider:${ctx.
|
|
545
|
+
getInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
534
546
|
getOutputId: (ctx) => {
|
|
535
|
-
var _a
|
|
536
|
-
return (
|
|
547
|
+
var _a;
|
|
548
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
|
|
537
549
|
},
|
|
538
550
|
getTrackId: (ctx) => {
|
|
539
|
-
var _a
|
|
540
|
-
return (
|
|
551
|
+
var _a;
|
|
552
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
|
|
541
553
|
},
|
|
542
554
|
getRangeId: (ctx) => {
|
|
543
|
-
var _a
|
|
544
|
-
return (
|
|
555
|
+
var _a;
|
|
556
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
|
|
545
557
|
},
|
|
546
558
|
getLabelId: (ctx) => {
|
|
547
|
-
var _a
|
|
548
|
-
return (
|
|
559
|
+
var _a;
|
|
560
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
|
|
549
561
|
},
|
|
550
|
-
getMarkerId: (ctx, value) => `slider:${ctx.
|
|
551
|
-
getRootEl: (ctx) => dom.
|
|
552
|
-
getThumbEl: (ctx) => dom.
|
|
553
|
-
getControlEl: (ctx) => dom.
|
|
554
|
-
getInputEl: (ctx) => dom.
|
|
562
|
+
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
563
|
+
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
564
|
+
getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
|
|
565
|
+
getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
|
|
566
|
+
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
555
567
|
getValueFromPoint(ctx, point) {
|
|
556
|
-
const
|
|
557
|
-
if (!
|
|
568
|
+
const el = dom.getControlEl(ctx);
|
|
569
|
+
if (!el)
|
|
558
570
|
return;
|
|
559
|
-
const
|
|
571
|
+
const relativePoint = getPointRelativeToNode(point, el);
|
|
572
|
+
const percentX = relativePoint.x / el.offsetWidth;
|
|
573
|
+
const percentY = relativePoint.y / el.offsetHeight;
|
|
560
574
|
let percent;
|
|
561
575
|
if (ctx.isHorizontal) {
|
|
562
|
-
percent = ctx.isRtl ? 1 -
|
|
576
|
+
percent = ctx.isRtl ? 1 - percentX : percentX;
|
|
563
577
|
} else {
|
|
564
|
-
percent = 1 -
|
|
578
|
+
percent = 1 - percentY;
|
|
565
579
|
}
|
|
566
580
|
return utils.fromPercent(ctx, percent);
|
|
567
581
|
},
|
|
@@ -573,22 +587,8 @@ var dom = __spreadProps(__spreadValues({}, styles), {
|
|
|
573
587
|
}
|
|
574
588
|
});
|
|
575
589
|
|
|
576
|
-
// ../../types/dist/index.mjs
|
|
577
|
-
function createNormalizer(fn) {
|
|
578
|
-
return new Proxy({}, {
|
|
579
|
-
get() {
|
|
580
|
-
return fn;
|
|
581
|
-
}
|
|
582
|
-
});
|
|
583
|
-
}
|
|
584
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
585
|
-
|
|
586
|
-
// ../../utilities/core/dist/index.mjs
|
|
587
|
-
var isLeftClick2 = (v) => v.button === 0;
|
|
588
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
589
|
-
|
|
590
590
|
// src/slider.connect.ts
|
|
591
|
-
function connect(state2, send, normalize
|
|
591
|
+
function connect(state2, send, normalize) {
|
|
592
592
|
var _a, _b;
|
|
593
593
|
const ariaLabel = state2.context["aria-label"];
|
|
594
594
|
const ariaLabelledBy = state2.context["aria-labelledby"];
|
|
@@ -656,7 +656,7 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
656
656
|
"data-invalid": dataAttr(isInvalid),
|
|
657
657
|
"aria-disabled": isDisabled || void 0,
|
|
658
658
|
"aria-label": ariaLabel,
|
|
659
|
-
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy
|
|
659
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
|
|
660
660
|
"aria-orientation": state2.context.orientation,
|
|
661
661
|
"aria-valuemax": state2.context.max,
|
|
662
662
|
"aria-valuemin": state2.context.min,
|
|
@@ -765,7 +765,7 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
765
765
|
if (!isInteractive)
|
|
766
766
|
return;
|
|
767
767
|
const evt = getNativeEvent(event);
|
|
768
|
-
if (!
|
|
768
|
+
if (!isLeftClick(evt) || isModifiedEvent(evt))
|
|
769
769
|
return;
|
|
770
770
|
const point = getEventPoint(evt);
|
|
771
771
|
send({ type: "POINTER_DOWN", point });
|
|
@@ -800,15 +800,14 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
800
800
|
}
|
|
801
801
|
|
|
802
802
|
// src/slider.machine.ts
|
|
803
|
-
import { createMachine
|
|
804
|
-
function machine(ctx
|
|
803
|
+
import { createMachine } from "@zag-js/core";
|
|
804
|
+
function machine(ctx) {
|
|
805
805
|
return createMachine({
|
|
806
806
|
id: "slider",
|
|
807
807
|
initial: "unknown",
|
|
808
|
-
context:
|
|
808
|
+
context: {
|
|
809
809
|
thumbSize: null,
|
|
810
810
|
thumbAlignment: "contain",
|
|
811
|
-
uid: "",
|
|
812
811
|
disabled: false,
|
|
813
812
|
threshold: 5,
|
|
814
813
|
dir: "ltr",
|
|
@@ -818,8 +817,9 @@ function machine(ctx = {}) {
|
|
|
818
817
|
value: 0,
|
|
819
818
|
step: 1,
|
|
820
819
|
min: 0,
|
|
821
|
-
max: 100
|
|
822
|
-
|
|
820
|
+
max: 100,
|
|
821
|
+
...ctx
|
|
822
|
+
},
|
|
823
823
|
computed: {
|
|
824
824
|
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
|
|
825
825
|
isVertical: (ctx2) => ctx2.orientation === "vertical",
|
|
@@ -847,7 +847,7 @@ function machine(ctx = {}) {
|
|
|
847
847
|
on: {
|
|
848
848
|
SETUP: {
|
|
849
849
|
target: "idle",
|
|
850
|
-
actions: ["
|
|
850
|
+
actions: ["setThumbSize", "checkValue"]
|
|
851
851
|
}
|
|
852
852
|
}
|
|
853
853
|
},
|
|
@@ -919,30 +919,21 @@ function machine(ctx = {}) {
|
|
|
919
919
|
},
|
|
920
920
|
activities: {
|
|
921
921
|
trackFieldsetDisabled(ctx2) {
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
ctx2.disabled = disabled;
|
|
927
|
-
}
|
|
928
|
-
});
|
|
922
|
+
return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
|
|
923
|
+
if (disabled) {
|
|
924
|
+
ctx2.disabled = disabled;
|
|
925
|
+
}
|
|
929
926
|
});
|
|
930
|
-
return () => cleanup == null ? void 0 : cleanup();
|
|
931
927
|
},
|
|
932
928
|
trackFormReset(ctx2) {
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
ctx2.value = ctx2.initialValue;
|
|
938
|
-
}
|
|
939
|
-
});
|
|
929
|
+
return trackFormReset(dom.getInputEl(ctx2), () => {
|
|
930
|
+
if (ctx2.initialValue != null) {
|
|
931
|
+
ctx2.value = ctx2.initialValue;
|
|
932
|
+
}
|
|
940
933
|
});
|
|
941
|
-
return () => cleanup == null ? void 0 : cleanup();
|
|
942
934
|
},
|
|
943
935
|
trackPointerMove(ctx2, _evt, { send }) {
|
|
944
|
-
return trackPointerMove({
|
|
945
|
-
ctx: ctx2,
|
|
936
|
+
return trackPointerMove(dom.getDoc(ctx2), {
|
|
946
937
|
onPointerMove(info) {
|
|
947
938
|
send({ type: "POINTER_MOVE", point: info.point });
|
|
948
939
|
},
|
|
@@ -953,13 +944,6 @@ function machine(ctx = {}) {
|
|
|
953
944
|
}
|
|
954
945
|
},
|
|
955
946
|
actions: {
|
|
956
|
-
setupDocument(ctx2, evt) {
|
|
957
|
-
if (evt.doc)
|
|
958
|
-
ctx2.doc = ref(evt.doc);
|
|
959
|
-
if (evt.root)
|
|
960
|
-
ctx2.rootNode = ref(evt.root);
|
|
961
|
-
ctx2.uid = evt.id;
|
|
962
|
-
},
|
|
963
947
|
checkValue(ctx2) {
|
|
964
948
|
const value = utils.convert(ctx2, ctx2.value);
|
|
965
949
|
Object.assign(ctx2, { value, initialValue: value });
|