@zag-js/slider 0.2.6 → 0.2.7
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-3JMGYHB3.mjs +469 -0
- package/dist/chunk-3Y7IIPR5.mjs +20 -0
- package/dist/chunk-FUTBDWTA.mjs +33 -0
- package/dist/chunk-GBYBRQZL.mjs +56 -0
- package/dist/chunk-MR2MUD77.mjs +179 -0
- package/dist/chunk-MXJ3RGFD.mjs +125 -0
- package/dist/chunk-SGCWELVB.mjs +44 -0
- package/dist/chunk-YCRSV2RE.mjs +288 -0
- package/dist/index.d.ts +8 -1085
- package/dist/index.js +63 -36
- package/dist/index.mjs +16 -1090
- package/dist/slider.anatomy.d.ts +6 -0
- package/dist/slider.anatomy.js +45 -0
- package/dist/slider.anatomy.mjs +8 -0
- package/dist/slider.connect.d.ts +29 -0
- package/dist/slider.connect.js +684 -0
- package/dist/slider.connect.mjs +12 -0
- package/dist/slider.dom.d.ts +52 -0
- package/dist/slider.dom.js +386 -0
- package/dist/slider.dom.mjs +9 -0
- package/dist/slider.machine.d.ts +7 -0
- package/dist/slider.machine.js +860 -0
- package/dist/slider.machine.mjs +11 -0
- package/dist/slider.style.d.ts +26 -0
- package/dist/slider.style.js +156 -0
- package/dist/slider.style.mjs +7 -0
- package/dist/slider.types.d.ts +161 -0
- package/dist/slider.types.js +18 -0
- package/dist/slider.types.mjs +0 -0
- package/dist/slider.utils.d.ts +13 -0
- package/dist/slider.utils.js +98 -0
- package/dist/slider.utils.mjs +7 -0
- package/package.json +24 -14
|
@@ -0,0 +1,684 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/slider.connect.ts
|
|
21
|
+
var slider_connect_exports = {};
|
|
22
|
+
__export(slider_connect_exports, {
|
|
23
|
+
connect: () => connect
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(slider_connect_exports);
|
|
26
|
+
|
|
27
|
+
// ../../utilities/dom/src/attrs.ts
|
|
28
|
+
var dataAttr = (guard) => {
|
|
29
|
+
return guard ? "" : void 0;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// ../../utilities/core/src/guard.ts
|
|
33
|
+
var isArray = (v) => Array.isArray(v);
|
|
34
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
35
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
36
|
+
|
|
37
|
+
// ../../utilities/dom/src/query.ts
|
|
38
|
+
function isDocument(el) {
|
|
39
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
40
|
+
}
|
|
41
|
+
function isWindow(value) {
|
|
42
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
43
|
+
}
|
|
44
|
+
function getDocument(el) {
|
|
45
|
+
var _a;
|
|
46
|
+
if (isWindow(el))
|
|
47
|
+
return el.document;
|
|
48
|
+
if (isDocument(el))
|
|
49
|
+
return el;
|
|
50
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
51
|
+
}
|
|
52
|
+
function getWindow(el) {
|
|
53
|
+
var _a;
|
|
54
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
55
|
+
}
|
|
56
|
+
function defineDomHelpers(helpers) {
|
|
57
|
+
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
|
+
},
|
|
62
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
63
|
+
getWin: (ctx) => {
|
|
64
|
+
var _a;
|
|
65
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
66
|
+
},
|
|
67
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
68
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
69
|
+
createEmitter: (ctx, target) => {
|
|
70
|
+
const win = dom2.getWin(ctx);
|
|
71
|
+
return function emit(evt, detail, options) {
|
|
72
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
73
|
+
const eventName = `zag:${evt}`;
|
|
74
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
75
|
+
const event = new win.CustomEvent(eventName, init);
|
|
76
|
+
target.dispatchEvent(event);
|
|
77
|
+
};
|
|
78
|
+
},
|
|
79
|
+
createListener: (target) => {
|
|
80
|
+
return function listen(evt, handler) {
|
|
81
|
+
const eventName = `zag:${evt}`;
|
|
82
|
+
const listener = (e) => handler(e);
|
|
83
|
+
target.addEventListener(eventName, listener);
|
|
84
|
+
return () => target.removeEventListener(eventName, listener);
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
return {
|
|
89
|
+
...dom2,
|
|
90
|
+
...helpers
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// ../../utilities/dom/src/event.ts
|
|
95
|
+
function getNativeEvent(e) {
|
|
96
|
+
var _a;
|
|
97
|
+
return (_a = e.nativeEvent) != null ? _a : e;
|
|
98
|
+
}
|
|
99
|
+
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
100
|
+
var isLeftClick = (v) => v.button === 0;
|
|
101
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
102
|
+
|
|
103
|
+
// ../../utilities/dom/src/get-element-offset.ts
|
|
104
|
+
function getElementOffset(element) {
|
|
105
|
+
let left = 0;
|
|
106
|
+
let top = 0;
|
|
107
|
+
let el = element;
|
|
108
|
+
if (el.parentNode) {
|
|
109
|
+
do {
|
|
110
|
+
left += el.offsetLeft;
|
|
111
|
+
top += el.offsetTop;
|
|
112
|
+
} while ((el = el.offsetParent) && el.nodeType < 9);
|
|
113
|
+
el = element;
|
|
114
|
+
do {
|
|
115
|
+
left -= el.scrollLeft;
|
|
116
|
+
top -= el.scrollTop;
|
|
117
|
+
} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
|
|
118
|
+
}
|
|
119
|
+
return {
|
|
120
|
+
top,
|
|
121
|
+
right: innerWidth - left - element.offsetWidth,
|
|
122
|
+
bottom: innerHeight - top - element.offsetHeight,
|
|
123
|
+
left
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// ../../utilities/dom/src/get-event-point.ts
|
|
128
|
+
var fallback = {
|
|
129
|
+
pageX: 0,
|
|
130
|
+
pageY: 0,
|
|
131
|
+
clientX: 0,
|
|
132
|
+
clientY: 0
|
|
133
|
+
};
|
|
134
|
+
function getEventPoint(event, type = "page") {
|
|
135
|
+
var _a, _b;
|
|
136
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
137
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// ../../utilities/dom/src/get-point-relative-to-element.ts
|
|
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
|
+
}
|
|
147
|
+
|
|
148
|
+
// ../../utilities/dom/src/keyboard-event.ts
|
|
149
|
+
var rtlKeyMap = {
|
|
150
|
+
ArrowLeft: "ArrowRight",
|
|
151
|
+
ArrowRight: "ArrowLeft"
|
|
152
|
+
};
|
|
153
|
+
var sameKeyMap = {
|
|
154
|
+
Up: "ArrowUp",
|
|
155
|
+
Down: "ArrowDown",
|
|
156
|
+
Esc: "Escape",
|
|
157
|
+
" ": "Space",
|
|
158
|
+
",": "Comma",
|
|
159
|
+
Left: "ArrowLeft",
|
|
160
|
+
Right: "ArrowRight"
|
|
161
|
+
};
|
|
162
|
+
function getEventKey(event, options = {}) {
|
|
163
|
+
var _a;
|
|
164
|
+
const { dir = "ltr", orientation = "horizontal" } = options;
|
|
165
|
+
let { key } = event;
|
|
166
|
+
key = (_a = sameKeyMap[key]) != null ? _a : key;
|
|
167
|
+
const isRtl = dir === "rtl" && orientation === "horizontal";
|
|
168
|
+
if (isRtl && key in rtlKeyMap) {
|
|
169
|
+
key = rtlKeyMap[key];
|
|
170
|
+
}
|
|
171
|
+
return key;
|
|
172
|
+
}
|
|
173
|
+
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
174
|
+
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
175
|
+
function getEventStep(event) {
|
|
176
|
+
if (event.ctrlKey || event.metaKey) {
|
|
177
|
+
return 0.1;
|
|
178
|
+
} else {
|
|
179
|
+
const isPageKey = PAGE_KEYS.has(event.key);
|
|
180
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
181
|
+
return isSkipKey ? 10 : 1;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// ../../utilities/number/src/number.ts
|
|
186
|
+
function round(v, t) {
|
|
187
|
+
let num = valueOf(v);
|
|
188
|
+
const p = 10 ** (t != null ? t : 10);
|
|
189
|
+
num = Math.round(num * p) / p;
|
|
190
|
+
return t ? num.toFixed(t) : v.toString();
|
|
191
|
+
}
|
|
192
|
+
var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
|
|
193
|
+
var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
|
|
194
|
+
function clamp(v, o) {
|
|
195
|
+
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
196
|
+
}
|
|
197
|
+
function countDecimals(value) {
|
|
198
|
+
if (!Number.isFinite(value))
|
|
199
|
+
return 0;
|
|
200
|
+
let e = 1, p = 0;
|
|
201
|
+
while (Math.round(value * e) / e !== value) {
|
|
202
|
+
e *= 10;
|
|
203
|
+
p += 1;
|
|
204
|
+
}
|
|
205
|
+
return p;
|
|
206
|
+
}
|
|
207
|
+
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
208
|
+
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
209
|
+
function snapToStep(value, step) {
|
|
210
|
+
const num = valueOf(value);
|
|
211
|
+
const p = countDecimals(step);
|
|
212
|
+
const v = Math.round(num / step) * step;
|
|
213
|
+
return round(v, p);
|
|
214
|
+
}
|
|
215
|
+
function valueOf(v) {
|
|
216
|
+
if (typeof v === "number")
|
|
217
|
+
return v;
|
|
218
|
+
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
219
|
+
return !Number.isNaN(num) ? num : 0;
|
|
220
|
+
}
|
|
221
|
+
function decimalOperation(a, op, b) {
|
|
222
|
+
let result = op === "+" ? a + b : a - b;
|
|
223
|
+
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
224
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
225
|
+
a = Math.round(a * multiplier);
|
|
226
|
+
b = Math.round(b * multiplier);
|
|
227
|
+
result = op === "+" ? a + b : a - b;
|
|
228
|
+
result /= multiplier;
|
|
229
|
+
}
|
|
230
|
+
return result;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
// ../../utilities/number/src/transform.ts
|
|
234
|
+
var transform = (a, b) => {
|
|
235
|
+
const i = { min: a[0], max: a[1] };
|
|
236
|
+
const o = { min: b[0], max: b[1] };
|
|
237
|
+
return (v) => {
|
|
238
|
+
if (i.min === i.max || o.min === o.max)
|
|
239
|
+
return o.min;
|
|
240
|
+
const ratio = (o.max - o.min) / (i.max - i.min);
|
|
241
|
+
return o.min + ratio * (v - i.min);
|
|
242
|
+
};
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
// src/slider.anatomy.ts
|
|
246
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
247
|
+
var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
|
|
248
|
+
"root",
|
|
249
|
+
"label",
|
|
250
|
+
"thumb",
|
|
251
|
+
"hiddenInput",
|
|
252
|
+
"output",
|
|
253
|
+
"track",
|
|
254
|
+
"range",
|
|
255
|
+
"control",
|
|
256
|
+
"markerGroup",
|
|
257
|
+
"marker"
|
|
258
|
+
);
|
|
259
|
+
var parts = anatomy.build();
|
|
260
|
+
|
|
261
|
+
// ../../utilities/form-utils/src/input-event.ts
|
|
262
|
+
function getDescriptor(el, options) {
|
|
263
|
+
var _a;
|
|
264
|
+
const { type, property = "value" } = options;
|
|
265
|
+
const proto = getWindow(el)[type].prototype;
|
|
266
|
+
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
267
|
+
}
|
|
268
|
+
function dispatchInputValueEvent(el, value) {
|
|
269
|
+
var _a;
|
|
270
|
+
if (!el)
|
|
271
|
+
return;
|
|
272
|
+
const win = getWindow(el);
|
|
273
|
+
if (!(el instanceof win.HTMLInputElement))
|
|
274
|
+
return;
|
|
275
|
+
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
276
|
+
(_a = desc.set) == null ? void 0 : _a.call(el, value);
|
|
277
|
+
const event = new win.Event("input", { bubbles: true });
|
|
278
|
+
el.dispatchEvent(event);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
// src/slider.style.ts
|
|
282
|
+
function getVerticalThumbOffset(ctx) {
|
|
283
|
+
var _a;
|
|
284
|
+
const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
285
|
+
const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
|
|
286
|
+
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
287
|
+
}
|
|
288
|
+
function getHorizontalThumbOffset(ctx) {
|
|
289
|
+
var _a;
|
|
290
|
+
const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
|
|
291
|
+
if (ctx.isRtl) {
|
|
292
|
+
const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
|
|
293
|
+
return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
|
|
294
|
+
}
|
|
295
|
+
const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
|
|
296
|
+
return parseFloat(getValue(ctx.value).toFixed(2));
|
|
297
|
+
}
|
|
298
|
+
function getThumbOffset(ctx) {
|
|
299
|
+
const percent = valueToPercent(ctx.value, ctx);
|
|
300
|
+
if (ctx.thumbAlignment === "center")
|
|
301
|
+
return `${percent}%`;
|
|
302
|
+
const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
|
|
303
|
+
return `calc(${percent}% - ${offset}px)`;
|
|
304
|
+
}
|
|
305
|
+
function getThumbStyle(ctx) {
|
|
306
|
+
const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
|
|
307
|
+
return {
|
|
308
|
+
visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
|
|
309
|
+
position: "absolute",
|
|
310
|
+
transform: "var(--slider-thumb-transform)",
|
|
311
|
+
[placementProp]: "var(--slider-thumb-offset)"
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
function getRangeOffsets(ctx) {
|
|
315
|
+
const percent = valueToPercent(ctx.value, ctx);
|
|
316
|
+
let start = "0%";
|
|
317
|
+
let end = `${100 - percent}%`;
|
|
318
|
+
if (ctx.origin === "center") {
|
|
319
|
+
const isNegative = percent < 50;
|
|
320
|
+
start = isNegative ? `${percent}%` : "50%";
|
|
321
|
+
end = isNegative ? "50%" : end;
|
|
322
|
+
}
|
|
323
|
+
return { start, end };
|
|
324
|
+
}
|
|
325
|
+
function getRangeStyle(ctx) {
|
|
326
|
+
if (ctx.isVertical) {
|
|
327
|
+
return {
|
|
328
|
+
position: "absolute",
|
|
329
|
+
bottom: "var(--slider-range-start)",
|
|
330
|
+
top: "var(--slider-range-end)"
|
|
331
|
+
};
|
|
332
|
+
}
|
|
333
|
+
return {
|
|
334
|
+
position: "absolute",
|
|
335
|
+
[ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
|
|
336
|
+
[ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
function getControlStyle() {
|
|
340
|
+
return {
|
|
341
|
+
touchAction: "none",
|
|
342
|
+
userSelect: "none",
|
|
343
|
+
position: "relative"
|
|
344
|
+
};
|
|
345
|
+
}
|
|
346
|
+
function getRootStyle(ctx) {
|
|
347
|
+
const range = getRangeOffsets(ctx);
|
|
348
|
+
return {
|
|
349
|
+
"--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
|
|
350
|
+
"--slider-thumb-offset": getThumbOffset(ctx),
|
|
351
|
+
"--slider-range-start": range.start,
|
|
352
|
+
"--slider-range-end": range.end
|
|
353
|
+
};
|
|
354
|
+
}
|
|
355
|
+
function getMarkerStyle(ctx, percent) {
|
|
356
|
+
return {
|
|
357
|
+
position: "absolute",
|
|
358
|
+
pointerEvents: "none",
|
|
359
|
+
[ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
function getLabelStyle() {
|
|
363
|
+
return { userSelect: "none" };
|
|
364
|
+
}
|
|
365
|
+
function getTrackStyle() {
|
|
366
|
+
return { position: "relative" };
|
|
367
|
+
}
|
|
368
|
+
function getMarkerGroupStyle() {
|
|
369
|
+
return {
|
|
370
|
+
userSelect: "none",
|
|
371
|
+
pointerEvents: "none",
|
|
372
|
+
position: "relative"
|
|
373
|
+
};
|
|
374
|
+
}
|
|
375
|
+
var styles = {
|
|
376
|
+
getThumbOffset,
|
|
377
|
+
getControlStyle,
|
|
378
|
+
getThumbStyle,
|
|
379
|
+
getRangeStyle,
|
|
380
|
+
getRootStyle,
|
|
381
|
+
getMarkerStyle,
|
|
382
|
+
getLabelStyle,
|
|
383
|
+
getTrackStyle,
|
|
384
|
+
getMarkerGroupStyle
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
// src/slider.utils.ts
|
|
388
|
+
var utils = {
|
|
389
|
+
fromPercent(ctx, percent) {
|
|
390
|
+
percent = clamp(percent, { min: 0, max: 1 });
|
|
391
|
+
return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
|
|
392
|
+
},
|
|
393
|
+
clamp(ctx, value) {
|
|
394
|
+
return clamp(value, ctx);
|
|
395
|
+
},
|
|
396
|
+
convert(ctx, value) {
|
|
397
|
+
return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
|
|
398
|
+
},
|
|
399
|
+
decrement(ctx, step) {
|
|
400
|
+
let value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
401
|
+
return utils.convert(ctx, value);
|
|
402
|
+
},
|
|
403
|
+
increment(ctx, step) {
|
|
404
|
+
let value = increment(ctx.value, step != null ? step : ctx.step);
|
|
405
|
+
return utils.convert(ctx, value);
|
|
406
|
+
}
|
|
407
|
+
};
|
|
408
|
+
|
|
409
|
+
// src/slider.dom.ts
|
|
410
|
+
var dom = defineDomHelpers({
|
|
411
|
+
...styles,
|
|
412
|
+
getRootId: (ctx) => {
|
|
413
|
+
var _a, _b;
|
|
414
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
|
|
415
|
+
},
|
|
416
|
+
getThumbId: (ctx) => {
|
|
417
|
+
var _a, _b;
|
|
418
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
|
|
419
|
+
},
|
|
420
|
+
getControlId: (ctx) => {
|
|
421
|
+
var _a, _b;
|
|
422
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
|
|
423
|
+
},
|
|
424
|
+
getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
|
|
425
|
+
getOutputId: (ctx) => {
|
|
426
|
+
var _a, _b;
|
|
427
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
|
|
428
|
+
},
|
|
429
|
+
getTrackId: (ctx) => {
|
|
430
|
+
var _a, _b;
|
|
431
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
|
|
432
|
+
},
|
|
433
|
+
getRangeId: (ctx) => {
|
|
434
|
+
var _a, _b;
|
|
435
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
|
|
436
|
+
},
|
|
437
|
+
getLabelId: (ctx) => {
|
|
438
|
+
var _a, _b;
|
|
439
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
|
|
440
|
+
},
|
|
441
|
+
getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
|
|
442
|
+
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
443
|
+
getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
|
|
444
|
+
getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
|
|
445
|
+
getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
|
|
446
|
+
getValueFromPoint(ctx, point) {
|
|
447
|
+
const el = dom.getControlEl(ctx);
|
|
448
|
+
if (!el)
|
|
449
|
+
return;
|
|
450
|
+
const relativePoint = getPointRelativeToNode(point, el);
|
|
451
|
+
const percentX = relativePoint.x / el.offsetWidth;
|
|
452
|
+
const percentY = relativePoint.y / el.offsetHeight;
|
|
453
|
+
let percent;
|
|
454
|
+
if (ctx.isHorizontal) {
|
|
455
|
+
percent = ctx.isRtl ? 1 - percentX : percentX;
|
|
456
|
+
} else {
|
|
457
|
+
percent = 1 - percentY;
|
|
458
|
+
}
|
|
459
|
+
return utils.fromPercent(ctx, percent);
|
|
460
|
+
},
|
|
461
|
+
dispatchChangeEvent(ctx) {
|
|
462
|
+
const input = dom.getHiddenInputEl(ctx);
|
|
463
|
+
if (!input)
|
|
464
|
+
return;
|
|
465
|
+
dispatchInputValueEvent(input, ctx.value);
|
|
466
|
+
}
|
|
467
|
+
});
|
|
468
|
+
|
|
469
|
+
// src/slider.connect.ts
|
|
470
|
+
function connect(state, send, normalize) {
|
|
471
|
+
var _a, _b;
|
|
472
|
+
const ariaLabel = state.context["aria-label"];
|
|
473
|
+
const ariaLabelledBy = state.context["aria-labelledby"];
|
|
474
|
+
const ariaValueText = (_b = (_a = state.context).getAriaValueText) == null ? void 0 : _b.call(_a, state.context.value);
|
|
475
|
+
const isFocused = state.matches("focus");
|
|
476
|
+
const isDragging = state.matches("dragging");
|
|
477
|
+
const isDisabled = state.context.disabled;
|
|
478
|
+
const isInteractive = state.context.isInteractive;
|
|
479
|
+
const isInvalid = state.context.invalid;
|
|
480
|
+
return {
|
|
481
|
+
isFocused,
|
|
482
|
+
isDragging,
|
|
483
|
+
value: state.context.value,
|
|
484
|
+
percent: valueToPercent(state.context.value, state.context),
|
|
485
|
+
setValue(value) {
|
|
486
|
+
send({ type: "SET_VALUE", value });
|
|
487
|
+
},
|
|
488
|
+
getPercentValue(percent) {
|
|
489
|
+
return percentToValue(percent, state.context);
|
|
490
|
+
},
|
|
491
|
+
focus() {
|
|
492
|
+
var _a2;
|
|
493
|
+
(_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
|
|
494
|
+
},
|
|
495
|
+
increment() {
|
|
496
|
+
send("INCREMENT");
|
|
497
|
+
},
|
|
498
|
+
decrement() {
|
|
499
|
+
send("DECREMENT");
|
|
500
|
+
},
|
|
501
|
+
rootProps: normalize.element({
|
|
502
|
+
...parts.root.attrs,
|
|
503
|
+
"data-disabled": dataAttr(isDisabled),
|
|
504
|
+
"data-focus": dataAttr(isFocused),
|
|
505
|
+
"data-orientation": state.context.orientation,
|
|
506
|
+
"data-invalid": dataAttr(isInvalid),
|
|
507
|
+
id: dom.getRootId(state.context),
|
|
508
|
+
dir: state.context.dir,
|
|
509
|
+
style: dom.getRootStyle(state.context)
|
|
510
|
+
}),
|
|
511
|
+
labelProps: normalize.label({
|
|
512
|
+
...parts.label.attrs,
|
|
513
|
+
"data-disabled": dataAttr(isDisabled),
|
|
514
|
+
"data-invalid": dataAttr(isInvalid),
|
|
515
|
+
"data-focus": dataAttr(isFocused),
|
|
516
|
+
id: dom.getLabelId(state.context),
|
|
517
|
+
htmlFor: dom.getHiddenInputId(state.context),
|
|
518
|
+
onClick(event) {
|
|
519
|
+
var _a2;
|
|
520
|
+
if (!isInteractive)
|
|
521
|
+
return;
|
|
522
|
+
event.preventDefault();
|
|
523
|
+
(_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
|
|
524
|
+
},
|
|
525
|
+
style: dom.getLabelStyle()
|
|
526
|
+
}),
|
|
527
|
+
thumbProps: normalize.element({
|
|
528
|
+
...parts.thumb.attrs,
|
|
529
|
+
id: dom.getThumbId(state.context),
|
|
530
|
+
"data-disabled": dataAttr(isDisabled),
|
|
531
|
+
"data-orientation": state.context.orientation,
|
|
532
|
+
"data-focus": dataAttr(isFocused),
|
|
533
|
+
draggable: false,
|
|
534
|
+
"aria-invalid": isInvalid || void 0,
|
|
535
|
+
"data-invalid": dataAttr(isInvalid),
|
|
536
|
+
"aria-disabled": isDisabled || void 0,
|
|
537
|
+
"aria-label": ariaLabel,
|
|
538
|
+
"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state.context),
|
|
539
|
+
"aria-orientation": state.context.orientation,
|
|
540
|
+
"aria-valuemax": state.context.max,
|
|
541
|
+
"aria-valuemin": state.context.min,
|
|
542
|
+
"aria-valuenow": state.context.value,
|
|
543
|
+
"aria-valuetext": ariaValueText,
|
|
544
|
+
role: "slider",
|
|
545
|
+
tabIndex: isDisabled ? void 0 : 0,
|
|
546
|
+
onBlur() {
|
|
547
|
+
if (!isInteractive)
|
|
548
|
+
return;
|
|
549
|
+
send("BLUR");
|
|
550
|
+
},
|
|
551
|
+
onFocus() {
|
|
552
|
+
if (!isInteractive)
|
|
553
|
+
return;
|
|
554
|
+
send("FOCUS");
|
|
555
|
+
},
|
|
556
|
+
onKeyDown(event) {
|
|
557
|
+
if (!isInteractive)
|
|
558
|
+
return;
|
|
559
|
+
const step = getEventStep(event) * state.context.step;
|
|
560
|
+
let prevent = true;
|
|
561
|
+
const keyMap = {
|
|
562
|
+
ArrowUp() {
|
|
563
|
+
send({ type: "ARROW_UP", step });
|
|
564
|
+
prevent = state.context.isVertical;
|
|
565
|
+
},
|
|
566
|
+
ArrowDown() {
|
|
567
|
+
send({ type: "ARROW_DOWN", step });
|
|
568
|
+
prevent = state.context.isVertical;
|
|
569
|
+
},
|
|
570
|
+
ArrowLeft() {
|
|
571
|
+
send({ type: "ARROW_LEFT", step });
|
|
572
|
+
prevent = state.context.isHorizontal;
|
|
573
|
+
},
|
|
574
|
+
ArrowRight() {
|
|
575
|
+
send({ type: "ARROW_RIGHT", step });
|
|
576
|
+
prevent = state.context.isHorizontal;
|
|
577
|
+
},
|
|
578
|
+
PageUp() {
|
|
579
|
+
send({ type: "PAGE_UP", step });
|
|
580
|
+
},
|
|
581
|
+
PageDown() {
|
|
582
|
+
send({ type: "PAGE_DOWN", step });
|
|
583
|
+
},
|
|
584
|
+
Home() {
|
|
585
|
+
send("HOME");
|
|
586
|
+
},
|
|
587
|
+
End() {
|
|
588
|
+
send("END");
|
|
589
|
+
}
|
|
590
|
+
};
|
|
591
|
+
const key = getEventKey(event, state.context);
|
|
592
|
+
const exec = keyMap[key];
|
|
593
|
+
if (!exec)
|
|
594
|
+
return;
|
|
595
|
+
exec(event);
|
|
596
|
+
if (prevent) {
|
|
597
|
+
event.preventDefault();
|
|
598
|
+
}
|
|
599
|
+
},
|
|
600
|
+
style: dom.getThumbStyle(state.context)
|
|
601
|
+
}),
|
|
602
|
+
hiddenInputProps: normalize.input({
|
|
603
|
+
...parts.hiddenInput.attrs,
|
|
604
|
+
type: "text",
|
|
605
|
+
defaultValue: state.context.value,
|
|
606
|
+
name: state.context.name,
|
|
607
|
+
form: state.context.form,
|
|
608
|
+
id: dom.getHiddenInputId(state.context),
|
|
609
|
+
hidden: true
|
|
610
|
+
}),
|
|
611
|
+
outputProps: normalize.output({
|
|
612
|
+
...parts.output.attrs,
|
|
613
|
+
"data-disabled": dataAttr(isDisabled),
|
|
614
|
+
"data-invalid": dataAttr(isInvalid),
|
|
615
|
+
id: dom.getOutputId(state.context),
|
|
616
|
+
htmlFor: dom.getHiddenInputId(state.context),
|
|
617
|
+
"aria-live": "off"
|
|
618
|
+
}),
|
|
619
|
+
trackProps: normalize.element({
|
|
620
|
+
...parts.track.attrs,
|
|
621
|
+
id: dom.getTrackId(state.context),
|
|
622
|
+
"data-disabled": dataAttr(isDisabled),
|
|
623
|
+
"data-focus": dataAttr(isFocused),
|
|
624
|
+
"data-invalid": dataAttr(isInvalid),
|
|
625
|
+
"data-orientation": state.context.orientation,
|
|
626
|
+
style: dom.getTrackStyle()
|
|
627
|
+
}),
|
|
628
|
+
rangeProps: normalize.element({
|
|
629
|
+
...parts.range.attrs,
|
|
630
|
+
id: dom.getRangeId(state.context),
|
|
631
|
+
"data-focus": dataAttr(isFocused),
|
|
632
|
+
"data-invalid": dataAttr(isInvalid),
|
|
633
|
+
"data-disabled": dataAttr(isDisabled),
|
|
634
|
+
"data-orientation": state.context.orientation,
|
|
635
|
+
style: dom.getRangeStyle(state.context)
|
|
636
|
+
}),
|
|
637
|
+
controlProps: normalize.element({
|
|
638
|
+
...parts.control.attrs,
|
|
639
|
+
id: dom.getControlId(state.context),
|
|
640
|
+
"data-disabled": dataAttr(isDisabled),
|
|
641
|
+
"data-invalid": dataAttr(isInvalid),
|
|
642
|
+
"data-orientation": state.context.orientation,
|
|
643
|
+
"data-focus": dataAttr(isFocused),
|
|
644
|
+
onPointerDown(event) {
|
|
645
|
+
if (!isInteractive)
|
|
646
|
+
return;
|
|
647
|
+
const evt = getNativeEvent(event);
|
|
648
|
+
if (!isLeftClick(evt) || isModifiedEvent(evt))
|
|
649
|
+
return;
|
|
650
|
+
const point = getEventPoint(evt);
|
|
651
|
+
send({ type: "POINTER_DOWN", point });
|
|
652
|
+
event.preventDefault();
|
|
653
|
+
event.stopPropagation();
|
|
654
|
+
},
|
|
655
|
+
style: dom.getControlStyle()
|
|
656
|
+
}),
|
|
657
|
+
markerGroupProps: normalize.element({
|
|
658
|
+
...parts.markerGroup.attrs,
|
|
659
|
+
role: "presentation",
|
|
660
|
+
"aria-hidden": true,
|
|
661
|
+
"data-orientation": state.context.orientation,
|
|
662
|
+
style: dom.getMarkerGroupStyle()
|
|
663
|
+
}),
|
|
664
|
+
getMarkerProps({ value }) {
|
|
665
|
+
const percent = valueToPercent(value, state.context);
|
|
666
|
+
const style = dom.getMarkerStyle(state.context, percent);
|
|
667
|
+
const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
|
|
668
|
+
return normalize.element({
|
|
669
|
+
...parts.marker.attrs,
|
|
670
|
+
role: "presentation",
|
|
671
|
+
"data-orientation": state.context.orientation,
|
|
672
|
+
id: dom.getMarkerId(state.context, value),
|
|
673
|
+
"data-value": value,
|
|
674
|
+
"data-disabled": dataAttr(isDisabled),
|
|
675
|
+
"data-state": markerState,
|
|
676
|
+
style
|
|
677
|
+
});
|
|
678
|
+
}
|
|
679
|
+
};
|
|
680
|
+
}
|
|
681
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
682
|
+
0 && (module.exports = {
|
|
683
|
+
connect
|
|
684
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {
|
|
2
|
+
connect
|
|
3
|
+
} from "./chunk-YCRSV2RE.mjs";
|
|
4
|
+
import "./chunk-3Y7IIPR5.mjs";
|
|
5
|
+
import "./chunk-SGCWELVB.mjs";
|
|
6
|
+
import "./chunk-MR2MUD77.mjs";
|
|
7
|
+
import "./chunk-MXJ3RGFD.mjs";
|
|
8
|
+
import "./chunk-FUTBDWTA.mjs";
|
|
9
|
+
import "./chunk-GBYBRQZL.mjs";
|
|
10
|
+
export {
|
|
11
|
+
connect
|
|
12
|
+
};
|