@zag-js/slider 0.1.1 → 0.1.4
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.js +86 -15
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +86 -15
- package/dist/index.mjs.map +3 -3
- package/dist/slider.dom.d.ts +1 -0
- package/dist/slider.dom.d.ts.map +1 -1
- package/dist/slider.machine.d.ts.map +1 -1
- package/package.json +7 -7
package/dist/index.mjs
CHANGED
|
@@ -285,6 +285,30 @@ function getEventStep(event) {
|
|
|
285
285
|
return isSkipKey ? 10 : 1;
|
|
286
286
|
}
|
|
287
287
|
}
|
|
288
|
+
function itemById(v, id) {
|
|
289
|
+
return v.find((node) => node.id === id);
|
|
290
|
+
}
|
|
291
|
+
function indexOfId(v, id) {
|
|
292
|
+
const item = itemById(v, id);
|
|
293
|
+
return item ? v.indexOf(item) : -1;
|
|
294
|
+
}
|
|
295
|
+
var getValueText = (item) => {
|
|
296
|
+
var _a, _b;
|
|
297
|
+
return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
|
|
298
|
+
};
|
|
299
|
+
var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
|
|
300
|
+
var wrap = (v, idx) => {
|
|
301
|
+
return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
|
|
302
|
+
};
|
|
303
|
+
function findByText(v, text, currentId) {
|
|
304
|
+
const index = currentId ? indexOfId(v, currentId) : -1;
|
|
305
|
+
let items = currentId ? wrap(v, index) : v;
|
|
306
|
+
const isSingleKey = text.length === 1;
|
|
307
|
+
if (isSingleKey) {
|
|
308
|
+
items = items.filter((item) => item.id !== currentId);
|
|
309
|
+
}
|
|
310
|
+
return items.find((item) => match(getValueText(item), text));
|
|
311
|
+
}
|
|
288
312
|
var state = "default";
|
|
289
313
|
var savedUserSelect = "";
|
|
290
314
|
var modifiedElementMap = /* @__PURE__ */ new WeakMap();
|
|
@@ -348,13 +372,37 @@ function trackPointerMove(opts) {
|
|
|
348
372
|
};
|
|
349
373
|
return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
|
|
350
374
|
}
|
|
375
|
+
function findByTypeahead(_items, options) {
|
|
376
|
+
const { state: state2, activeId, key, timeout = 350 } = options;
|
|
377
|
+
const search = state2.keysSoFar + key;
|
|
378
|
+
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
379
|
+
const query2 = isRepeated ? search[0] : search;
|
|
380
|
+
let items = _items.slice();
|
|
381
|
+
const next = findByText(items, query2, activeId);
|
|
382
|
+
function cleanup() {
|
|
383
|
+
clearTimeout(state2.timer);
|
|
384
|
+
state2.timer = -1;
|
|
385
|
+
}
|
|
386
|
+
function update(value) {
|
|
387
|
+
state2.keysSoFar = value;
|
|
388
|
+
cleanup();
|
|
389
|
+
if (value !== "") {
|
|
390
|
+
state2.timer = +setTimeout(() => {
|
|
391
|
+
update("");
|
|
392
|
+
cleanup();
|
|
393
|
+
}, timeout);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
update(search);
|
|
397
|
+
return next;
|
|
398
|
+
}
|
|
399
|
+
findByTypeahead.defaultOptions = {
|
|
400
|
+
keysSoFar: "",
|
|
401
|
+
timer: -1
|
|
402
|
+
};
|
|
351
403
|
|
|
352
404
|
// ../../utilities/number/dist/index.mjs
|
|
353
405
|
var __pow2 = Math.pow;
|
|
354
|
-
var nf = new Intl.NumberFormat("en-US", { style: "decimal" });
|
|
355
|
-
function formatter(n) {
|
|
356
|
-
return parseFloat(nf.format(n));
|
|
357
|
-
}
|
|
358
406
|
function round(v, t2) {
|
|
359
407
|
let num = valueOf(v);
|
|
360
408
|
const p = __pow2(10, t2 != null ? t2 : 10);
|
|
@@ -366,13 +414,18 @@ var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
|
|
|
366
414
|
function clamp(v, o) {
|
|
367
415
|
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
368
416
|
}
|
|
369
|
-
function countDecimals(
|
|
370
|
-
|
|
371
|
-
|
|
417
|
+
function countDecimals(value) {
|
|
418
|
+
if (!Number.isFinite(value))
|
|
419
|
+
return 0;
|
|
420
|
+
let e = 1, p = 0;
|
|
421
|
+
while (Math.round(value * e) / e !== value) {
|
|
422
|
+
e *= 10;
|
|
423
|
+
p += 1;
|
|
424
|
+
}
|
|
425
|
+
return p;
|
|
372
426
|
}
|
|
373
|
-
var increment = (v, s) =>
|
|
374
|
-
var decrement = (v, s) =>
|
|
375
|
-
var multiply = (v, s) => formatter(valueOf(v) * s);
|
|
427
|
+
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
428
|
+
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
376
429
|
function snapToStep(value, step) {
|
|
377
430
|
const num = valueOf(value);
|
|
378
431
|
const p = countDecimals(step);
|
|
@@ -385,6 +438,18 @@ function valueOf(v) {
|
|
|
385
438
|
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
386
439
|
return !Number.isNaN(num) ? num : 0;
|
|
387
440
|
}
|
|
441
|
+
function decimalOperation(a, op, b) {
|
|
442
|
+
let result = op === "+" ? a + b : a - b;
|
|
443
|
+
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
444
|
+
const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
|
|
445
|
+
a = Math.round(a * multiplier);
|
|
446
|
+
b = Math.round(b * multiplier);
|
|
447
|
+
result = op === "+" ? a + b : a - b;
|
|
448
|
+
result /= multiplier;
|
|
449
|
+
}
|
|
450
|
+
return result;
|
|
451
|
+
}
|
|
452
|
+
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
388
453
|
var transform = (a, b) => {
|
|
389
454
|
const i = { min: a[0], max: a[1] };
|
|
390
455
|
const o = { min: b[0], max: b[1] };
|
|
@@ -505,6 +570,10 @@ var dom = {
|
|
|
505
570
|
var _a;
|
|
506
571
|
return (_a = ctx.doc) != null ? _a : document;
|
|
507
572
|
},
|
|
573
|
+
getRootNode: (ctx) => {
|
|
574
|
+
var _a;
|
|
575
|
+
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
576
|
+
},
|
|
508
577
|
getRootId: (ctx) => {
|
|
509
578
|
var _a, _b;
|
|
510
579
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.uid}`;
|
|
@@ -535,9 +604,9 @@ var dom = {
|
|
|
535
604
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
|
|
536
605
|
},
|
|
537
606
|
getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
|
|
538
|
-
getThumbEl: (ctx) => dom.
|
|
539
|
-
getControlEl: (ctx) => dom.
|
|
540
|
-
getInputEl: (ctx) => dom.
|
|
607
|
+
getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
|
|
608
|
+
getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
|
|
609
|
+
getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
|
|
541
610
|
getControlStyle,
|
|
542
611
|
getThumbStyle,
|
|
543
612
|
getRangeStyle,
|
|
@@ -583,7 +652,7 @@ var normalizeProp = createNormalizer((v) => v);
|
|
|
583
652
|
|
|
584
653
|
// ../../utilities/core/dist/index.mjs
|
|
585
654
|
var isLeftClick2 = (v) => v.button === 0;
|
|
586
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey
|
|
655
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
587
656
|
|
|
588
657
|
// src/slider.connect.ts
|
|
589
658
|
function connect(state2, send, normalize = normalizeProp) {
|
|
@@ -673,7 +742,7 @@ function connect(state2, send, normalize = normalizeProp) {
|
|
|
673
742
|
onKeyDown(event) {
|
|
674
743
|
if (!isInteractive)
|
|
675
744
|
return;
|
|
676
|
-
const step =
|
|
745
|
+
const step = getEventStep(event) * state2.context.step;
|
|
677
746
|
let prevent = true;
|
|
678
747
|
const keyMap = {
|
|
679
748
|
ArrowUp() {
|
|
@@ -960,6 +1029,8 @@ function machine(ctx = {}) {
|
|
|
960
1029
|
setupDocument(ctx2, evt) {
|
|
961
1030
|
if (evt.doc)
|
|
962
1031
|
ctx2.doc = ref(evt.doc);
|
|
1032
|
+
if (evt.root)
|
|
1033
|
+
ctx2.rootNode = ref(evt.root);
|
|
963
1034
|
ctx2.uid = evt.id;
|
|
964
1035
|
},
|
|
965
1036
|
checkValue(ctx2) {
|