@zag-js/number-input 0.1.13 → 0.1.14
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 +21 -7
- package/dist/index.js +408 -359
- package/dist/index.mjs +408 -359
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -93,21 +93,6 @@ var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
|
93
93
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
94
94
|
var isLeftClick = (v) => v.button === 0;
|
|
95
95
|
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
96
|
-
function observeAttributes(node, attributes, fn) {
|
|
97
|
-
if (!node)
|
|
98
|
-
return;
|
|
99
|
-
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
100
|
-
const win = node.ownerDocument.defaultView || window;
|
|
101
|
-
const obs = new win.MutationObserver((changes) => {
|
|
102
|
-
for (const change of changes) {
|
|
103
|
-
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
104
|
-
fn(change);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
109
|
-
return () => obs.disconnect();
|
|
110
|
-
}
|
|
111
96
|
var fallback = {
|
|
112
97
|
pageX: 0,
|
|
113
98
|
pageY: 0,
|
|
@@ -137,6 +122,21 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
137
122
|
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
138
123
|
};
|
|
139
124
|
}
|
|
125
|
+
function observeAttributes(node, attributes, fn) {
|
|
126
|
+
if (!node)
|
|
127
|
+
return;
|
|
128
|
+
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
129
|
+
const win = node.ownerDocument.defaultView || window;
|
|
130
|
+
const obs = new win.MutationObserver((changes) => {
|
|
131
|
+
for (const change of changes) {
|
|
132
|
+
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
133
|
+
fn(change);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
138
|
+
return () => obs.disconnect();
|
|
139
|
+
}
|
|
140
140
|
function raf(fn) {
|
|
141
141
|
const id = globalThis.requestAnimationFrame(fn);
|
|
142
142
|
return function cleanup() {
|
|
@@ -175,7 +175,10 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
175
175
|
if (!supported)
|
|
176
176
|
return;
|
|
177
177
|
body.requestPointerLock();
|
|
178
|
-
const cleanup = callAll(
|
|
178
|
+
const cleanup = callAll(
|
|
179
|
+
addPointerlockChangeListener(doc, onPointerChange),
|
|
180
|
+
addPointerlockErrorListener(doc, onPointerError)
|
|
181
|
+
);
|
|
179
182
|
return function dispose() {
|
|
180
183
|
if (!supported)
|
|
181
184
|
return;
|
|
@@ -280,6 +283,44 @@ var dom = defineDomHelpers({
|
|
|
280
283
|
getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
|
|
281
284
|
getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
|
|
282
285
|
getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
|
|
286
|
+
getActiveButton: (ctx, hint = ctx.hint) => {
|
|
287
|
+
let btnEl = null;
|
|
288
|
+
if (hint === "increment") {
|
|
289
|
+
btnEl = dom.getIncButtonEl(ctx);
|
|
290
|
+
}
|
|
291
|
+
if (hint === "decrement") {
|
|
292
|
+
btnEl = dom.getDecButtonEl(ctx);
|
|
293
|
+
}
|
|
294
|
+
return btnEl;
|
|
295
|
+
},
|
|
296
|
+
setupVirtualCursor(ctx) {
|
|
297
|
+
if (isSafari() || !supportsPointerEvent())
|
|
298
|
+
return;
|
|
299
|
+
dom.createVirtualCursor(ctx);
|
|
300
|
+
return () => {
|
|
301
|
+
var _a;
|
|
302
|
+
(_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
|
|
303
|
+
};
|
|
304
|
+
},
|
|
305
|
+
preventTextSelection(ctx) {
|
|
306
|
+
const doc = dom.getDoc(ctx);
|
|
307
|
+
const html = doc.documentElement;
|
|
308
|
+
const body = doc.body;
|
|
309
|
+
body.style.pointerEvents = "none";
|
|
310
|
+
html.style.userSelect = "none";
|
|
311
|
+
html.style.cursor = "ew-resize";
|
|
312
|
+
return () => {
|
|
313
|
+
body.style.pointerEvents = "";
|
|
314
|
+
html.style.userSelect = "";
|
|
315
|
+
html.style.cursor = "";
|
|
316
|
+
if (!html.style.length) {
|
|
317
|
+
html.removeAttribute("style");
|
|
318
|
+
}
|
|
319
|
+
if (!body.style.length) {
|
|
320
|
+
body.removeAttribute("style");
|
|
321
|
+
}
|
|
322
|
+
};
|
|
323
|
+
},
|
|
283
324
|
getMousementValue(ctx, event) {
|
|
284
325
|
const x = roundToDevicePixel(event.movementX);
|
|
285
326
|
const y = roundToDevicePixel(event.movementY);
|
|
@@ -403,6 +444,10 @@ function connect(state, send, normalize) {
|
|
|
403
444
|
var _a;
|
|
404
445
|
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
405
446
|
},
|
|
447
|
+
blur() {
|
|
448
|
+
var _a;
|
|
449
|
+
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
|
|
450
|
+
},
|
|
406
451
|
rootProps: normalize.element({
|
|
407
452
|
id: dom.getRootId(state.context),
|
|
408
453
|
"data-part": "root",
|
|
@@ -569,378 +614,382 @@ var callAll2 = (...fns) => (...a) => {
|
|
|
569
614
|
// src/number-input.machine.ts
|
|
570
615
|
var { not, and } = import_core.guards;
|
|
571
616
|
function machine(ctx) {
|
|
572
|
-
return (0, import_core.createMachine)(
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
598
|
-
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
599
|
-
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
600
|
-
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
601
|
-
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
602
|
-
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
603
|
-
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
604
|
-
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
605
|
-
valueText: (ctx2) => {
|
|
606
|
-
var _a, _b;
|
|
607
|
-
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
608
|
-
},
|
|
609
|
-
formattedValue: (ctx2) => {
|
|
610
|
-
var _a;
|
|
611
|
-
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
|
|
612
|
-
}
|
|
613
|
-
},
|
|
614
|
-
watch: {
|
|
615
|
-
value: ["invokeOnChange"],
|
|
616
|
-
isOutOfRange: ["invokeOnInvalid"]
|
|
617
|
-
},
|
|
618
|
-
on: {
|
|
619
|
-
SET_VALUE: {
|
|
620
|
-
actions: ["setValue", "setHintToSet"]
|
|
621
|
-
},
|
|
622
|
-
CLEAR_VALUE: {
|
|
623
|
-
actions: ["clearValue"]
|
|
624
|
-
},
|
|
625
|
-
INCREMENT: {
|
|
626
|
-
actions: ["increment"]
|
|
617
|
+
return (0, import_core.createMachine)(
|
|
618
|
+
{
|
|
619
|
+
id: "number-input",
|
|
620
|
+
initial: "unknown",
|
|
621
|
+
context: {
|
|
622
|
+
dir: "ltr",
|
|
623
|
+
focusInputOnChange: true,
|
|
624
|
+
clampValueOnBlur: true,
|
|
625
|
+
allowOverflow: false,
|
|
626
|
+
inputMode: "decimal",
|
|
627
|
+
pattern: "[0-9]*(.[0-9]+)?",
|
|
628
|
+
hint: null,
|
|
629
|
+
value: "",
|
|
630
|
+
step: 1,
|
|
631
|
+
min: Number.MIN_SAFE_INTEGER,
|
|
632
|
+
max: Number.MAX_SAFE_INTEGER,
|
|
633
|
+
scrubberCursorPoint: null,
|
|
634
|
+
invalid: false,
|
|
635
|
+
spinOnPress: true,
|
|
636
|
+
...ctx,
|
|
637
|
+
messages: {
|
|
638
|
+
incrementLabel: "increment value",
|
|
639
|
+
decrementLabel: "decrease value",
|
|
640
|
+
...ctx.messages
|
|
641
|
+
}
|
|
627
642
|
},
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
643
|
+
computed: {
|
|
644
|
+
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
645
|
+
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
646
|
+
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
647
|
+
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
648
|
+
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
649
|
+
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
650
|
+
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
651
|
+
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
652
|
+
valueText: (ctx2) => {
|
|
653
|
+
var _a, _b;
|
|
654
|
+
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
655
|
+
},
|
|
656
|
+
formattedValue: (ctx2) => {
|
|
657
|
+
var _a;
|
|
658
|
+
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
|
|
639
659
|
}
|
|
640
660
|
},
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
661
|
+
watch: {
|
|
662
|
+
value: ["invokeOnChange"],
|
|
663
|
+
isOutOfRange: ["invokeOnInvalid"],
|
|
664
|
+
scrubberCursorPoint: ["setVirtualCursorPosition"]
|
|
665
|
+
},
|
|
666
|
+
on: {
|
|
667
|
+
SET_VALUE: {
|
|
668
|
+
actions: ["setValue", "setHintToSet"]
|
|
669
|
+
},
|
|
670
|
+
CLEAR_VALUE: {
|
|
671
|
+
actions: ["clearValue"]
|
|
672
|
+
},
|
|
673
|
+
INCREMENT: {
|
|
674
|
+
actions: ["increment"]
|
|
675
|
+
},
|
|
676
|
+
DECREMENT: {
|
|
677
|
+
actions: ["decrement"]
|
|
652
678
|
}
|
|
653
679
|
},
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
on: {
|
|
659
|
-
PRESS_DOWN: {
|
|
660
|
-
target: "before:spin",
|
|
661
|
-
actions: ["focusInput", "setHint"]
|
|
662
|
-
},
|
|
663
|
-
PRESS_DOWN_SCRUBBER: {
|
|
664
|
-
target: "scrubbing",
|
|
665
|
-
actions: ["focusInput", "setHint", "setCursorPoint"]
|
|
666
|
-
},
|
|
667
|
-
ARROW_UP: {
|
|
668
|
-
actions: "increment"
|
|
669
|
-
},
|
|
670
|
-
ARROW_DOWN: {
|
|
671
|
-
actions: "decrement"
|
|
672
|
-
},
|
|
673
|
-
HOME: {
|
|
674
|
-
actions: "setToMin"
|
|
675
|
-
},
|
|
676
|
-
END: {
|
|
677
|
-
actions: "setToMax"
|
|
678
|
-
},
|
|
679
|
-
CHANGE: {
|
|
680
|
-
actions: ["setValue", "setHint"]
|
|
681
|
-
},
|
|
682
|
-
BLUR: [
|
|
683
|
-
{
|
|
684
|
-
guard: "isInvalidExponential",
|
|
680
|
+
states: {
|
|
681
|
+
unknown: {
|
|
682
|
+
on: {
|
|
683
|
+
SETUP: {
|
|
685
684
|
target: "idle",
|
|
686
|
-
actions:
|
|
685
|
+
actions: "syncInputValue"
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
},
|
|
689
|
+
idle: {
|
|
690
|
+
exit: "invokeOnFocus",
|
|
691
|
+
on: {
|
|
692
|
+
PRESS_DOWN: {
|
|
693
|
+
target: "before:spin",
|
|
694
|
+
actions: ["focusInput", "setHint"]
|
|
687
695
|
},
|
|
688
|
-
{
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
actions: ["clampValue", "clearHint"]
|
|
696
|
+
PRESS_DOWN_SCRUBBER: {
|
|
697
|
+
target: "scrubbing",
|
|
698
|
+
actions: ["focusInput", "setHint", "setCursorPoint"]
|
|
692
699
|
},
|
|
693
|
-
|
|
694
|
-
target: "idle",
|
|
695
|
-
actions: "roundValue"
|
|
696
|
-
}
|
|
697
|
-
]
|
|
698
|
-
}
|
|
699
|
-
},
|
|
700
|
-
"before:spin": {
|
|
701
|
-
tags: ["focus"],
|
|
702
|
-
activities: "trackButtonDisabled",
|
|
703
|
-
entry: (0, import_core.choose)([
|
|
704
|
-
{ guard: "isIncrementHint", actions: "increment" },
|
|
705
|
-
{ guard: "isDecrementHint", actions: "decrement" }
|
|
706
|
-
]),
|
|
707
|
-
after: {
|
|
708
|
-
CHANGE_DELAY: {
|
|
709
|
-
target: "spinning",
|
|
710
|
-
guard: "isInRange"
|
|
700
|
+
FOCUS: "focused"
|
|
711
701
|
}
|
|
712
702
|
},
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
703
|
+
focused: {
|
|
704
|
+
tags: "focus",
|
|
705
|
+
entry: "focusInput",
|
|
706
|
+
activities: "attachWheelListener",
|
|
707
|
+
on: {
|
|
708
|
+
PRESS_DOWN: {
|
|
709
|
+
target: "before:spin",
|
|
710
|
+
actions: ["focusInput", "setHint"]
|
|
711
|
+
},
|
|
712
|
+
PRESS_DOWN_SCRUBBER: {
|
|
713
|
+
target: "scrubbing",
|
|
714
|
+
actions: ["focusInput", "setHint", "setCursorPoint"]
|
|
715
|
+
},
|
|
716
|
+
ARROW_UP: {
|
|
717
|
+
actions: "increment"
|
|
718
|
+
},
|
|
719
|
+
ARROW_DOWN: {
|
|
720
|
+
actions: "decrement"
|
|
721
|
+
},
|
|
722
|
+
HOME: {
|
|
723
|
+
actions: "setToMin"
|
|
724
|
+
},
|
|
725
|
+
END: {
|
|
726
|
+
actions: "setToMax"
|
|
727
|
+
},
|
|
728
|
+
CHANGE: {
|
|
729
|
+
actions: ["setValue", "setHint"]
|
|
730
|
+
},
|
|
731
|
+
BLUR: [
|
|
732
|
+
{
|
|
733
|
+
guard: "isInvalidExponential",
|
|
734
|
+
target: "idle",
|
|
735
|
+
actions: ["clearValue", "clearHint", "invokeOnBlur"]
|
|
736
|
+
},
|
|
737
|
+
{
|
|
738
|
+
guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
|
|
739
|
+
target: "idle",
|
|
740
|
+
actions: ["clampValue", "clearHint", "invokeOnBlur"]
|
|
741
|
+
},
|
|
742
|
+
{
|
|
743
|
+
target: "idle",
|
|
744
|
+
actions: ["roundValue", "invokeOnBlur"]
|
|
745
|
+
}
|
|
746
|
+
]
|
|
717
747
|
}
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
748
|
+
},
|
|
749
|
+
"before:spin": {
|
|
750
|
+
tags: "focus",
|
|
751
|
+
activities: "trackButtonDisabled",
|
|
752
|
+
entry: (0, import_core.choose)([
|
|
753
|
+
{ guard: "isIncrementHint", actions: "increment" },
|
|
754
|
+
{ guard: "isDecrementHint", actions: "decrement" }
|
|
755
|
+
]),
|
|
756
|
+
after: {
|
|
757
|
+
CHANGE_DELAY: {
|
|
758
|
+
target: "spinning",
|
|
759
|
+
guard: and("isInRange", "spinOnPress")
|
|
760
|
+
}
|
|
728
761
|
},
|
|
729
|
-
{
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
],
|
|
735
|
-
on: {
|
|
736
|
-
PRESS_UP: {
|
|
737
|
-
target: "focused",
|
|
738
|
-
actions: "clearHint"
|
|
762
|
+
on: {
|
|
763
|
+
PRESS_UP: {
|
|
764
|
+
target: "focused",
|
|
765
|
+
actions: "clearHint"
|
|
766
|
+
}
|
|
739
767
|
}
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
exit: ["removeCustomCursor", "restoreTextSelection"],
|
|
746
|
-
activities: ["activatePointerLock", "trackMousemove"],
|
|
747
|
-
on: {
|
|
748
|
-
POINTER_UP_SCRUBBER: {
|
|
749
|
-
target: "focused",
|
|
750
|
-
actions: "clearCursorPoint"
|
|
751
|
-
},
|
|
752
|
-
POINTER_MOVE_SCRUBBER: [
|
|
768
|
+
},
|
|
769
|
+
spinning: {
|
|
770
|
+
tags: "focus",
|
|
771
|
+
activities: "trackButtonDisabled",
|
|
772
|
+
every: [
|
|
753
773
|
{
|
|
754
|
-
|
|
755
|
-
|
|
774
|
+
delay: "CHANGE_INTERVAL",
|
|
775
|
+
guard: and(not("isAtMin"), "isIncrementHint"),
|
|
776
|
+
actions: "increment"
|
|
756
777
|
},
|
|
757
778
|
{
|
|
758
|
-
|
|
759
|
-
|
|
779
|
+
delay: "CHANGE_INTERVAL",
|
|
780
|
+
guard: and(not("isAtMax"), "isDecrementHint"),
|
|
781
|
+
actions: "decrement"
|
|
782
|
+
}
|
|
783
|
+
],
|
|
784
|
+
on: {
|
|
785
|
+
PRESS_UP: {
|
|
786
|
+
target: "focused",
|
|
787
|
+
actions: "clearHint"
|
|
760
788
|
}
|
|
761
|
-
|
|
789
|
+
}
|
|
790
|
+
},
|
|
791
|
+
scrubbing: {
|
|
792
|
+
tags: "focus",
|
|
793
|
+
exit: "clearCursorPoint",
|
|
794
|
+
activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
|
|
795
|
+
on: {
|
|
796
|
+
POINTER_UP_SCRUBBER: "focused",
|
|
797
|
+
POINTER_MOVE_SCRUBBER: [
|
|
798
|
+
{
|
|
799
|
+
guard: "isIncrementHint",
|
|
800
|
+
actions: ["increment", "setCursorPoint"]
|
|
801
|
+
},
|
|
802
|
+
{
|
|
803
|
+
guard: "isDecrementHint",
|
|
804
|
+
actions: ["decrement", "setCursorPoint"]
|
|
805
|
+
}
|
|
806
|
+
]
|
|
807
|
+
}
|
|
762
808
|
}
|
|
763
809
|
}
|
|
764
|
-
}
|
|
765
|
-
}, {
|
|
766
|
-
delays: {
|
|
767
|
-
CHANGE_INTERVAL: 50,
|
|
768
|
-
CHANGE_DELAY: 300
|
|
769
|
-
},
|
|
770
|
-
guards: {
|
|
771
|
-
clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
|
|
772
|
-
isAtMin: (ctx2) => ctx2.isAtMin,
|
|
773
|
-
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
774
|
-
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
775
|
-
isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
|
|
776
|
-
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
777
|
-
isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
|
|
778
|
-
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
779
810
|
},
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
811
|
+
{
|
|
812
|
+
delays: {
|
|
813
|
+
CHANGE_INTERVAL: 50,
|
|
814
|
+
CHANGE_DELAY: 300
|
|
815
|
+
},
|
|
816
|
+
guards: {
|
|
817
|
+
clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
|
|
818
|
+
isAtMin: (ctx2) => ctx2.isAtMin,
|
|
819
|
+
spinOnPress: (ctx2) => !!ctx2.spinOnPress,
|
|
820
|
+
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
821
|
+
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
822
|
+
isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
|
|
823
|
+
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
824
|
+
isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
|
|
825
|
+
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
826
|
+
},
|
|
827
|
+
activities: {
|
|
828
|
+
setupVirtualCursor(ctx2) {
|
|
829
|
+
return dom.setupVirtualCursor(ctx2);
|
|
830
|
+
},
|
|
831
|
+
preventTextSelection(ctx2) {
|
|
832
|
+
return dom.preventTextSelection(ctx2);
|
|
833
|
+
},
|
|
834
|
+
trackButtonDisabled(ctx2, _evt, { send }) {
|
|
835
|
+
const btn = dom.getActiveButton(ctx2, ctx2.hint);
|
|
836
|
+
return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
|
|
837
|
+
},
|
|
838
|
+
attachWheelListener(ctx2, _evt, { send }) {
|
|
839
|
+
const input = dom.getInputEl(ctx2);
|
|
840
|
+
if (!input)
|
|
800
841
|
return;
|
|
801
|
-
event
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
842
|
+
function onWheel(event) {
|
|
843
|
+
const isInputFocused = dom.getDoc(ctx2).activeElement === input;
|
|
844
|
+
if (!ctx2.allowMouseWheel || !isInputFocused)
|
|
845
|
+
return;
|
|
846
|
+
event.preventDefault();
|
|
847
|
+
const dir = Math.sign(event.deltaY) * -1;
|
|
848
|
+
if (dir === 1) {
|
|
849
|
+
send("INCREMENT");
|
|
850
|
+
} else if (dir === -1) {
|
|
851
|
+
send("DECREMENT");
|
|
852
|
+
}
|
|
807
853
|
}
|
|
854
|
+
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
855
|
+
},
|
|
856
|
+
activatePointerLock(ctx2) {
|
|
857
|
+
if (isSafari() || !supportsPointerEvent())
|
|
858
|
+
return;
|
|
859
|
+
return requestPointerLock(dom.getDoc(ctx2));
|
|
860
|
+
},
|
|
861
|
+
trackMousemove(ctx2, _evt, { send }) {
|
|
862
|
+
const doc = dom.getDoc(ctx2);
|
|
863
|
+
function onMousemove(event) {
|
|
864
|
+
if (!ctx2.scrubberCursorPoint)
|
|
865
|
+
return;
|
|
866
|
+
const value = dom.getMousementValue(ctx2, event);
|
|
867
|
+
if (!value.hint)
|
|
868
|
+
return;
|
|
869
|
+
send({
|
|
870
|
+
type: "POINTER_MOVE_SCRUBBER",
|
|
871
|
+
hint: value.hint,
|
|
872
|
+
point: value.point
|
|
873
|
+
});
|
|
874
|
+
}
|
|
875
|
+
function onMouseup() {
|
|
876
|
+
send("POINTER_UP_SCRUBBER");
|
|
877
|
+
}
|
|
878
|
+
return callAll2(
|
|
879
|
+
addDomEvent(doc, "mousemove", onMousemove, false),
|
|
880
|
+
addDomEvent(doc, "mouseup", onMouseup, false)
|
|
881
|
+
);
|
|
808
882
|
}
|
|
809
|
-
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
810
883
|
},
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
return requestPointerLock(dom.getDoc(ctx2));
|
|
815
|
-
},
|
|
816
|
-
trackMousemove(ctx2, _evt, { send }) {
|
|
817
|
-
const doc = dom.getDoc(ctx2);
|
|
818
|
-
function onMousemove(event) {
|
|
819
|
-
if (!ctx2.scrubberCursorPoint)
|
|
884
|
+
actions: {
|
|
885
|
+
focusInput(ctx2) {
|
|
886
|
+
if (!ctx2.focusInputOnChange)
|
|
820
887
|
return;
|
|
821
|
-
const
|
|
822
|
-
|
|
888
|
+
const input = dom.getInputEl(ctx2);
|
|
889
|
+
raf(() => input == null ? void 0 : input.focus());
|
|
890
|
+
},
|
|
891
|
+
increment(ctx2, evt) {
|
|
892
|
+
ctx2.value = utils.increment(ctx2, evt.step);
|
|
893
|
+
},
|
|
894
|
+
decrement(ctx2, evt) {
|
|
895
|
+
ctx2.value = utils.decrement(ctx2, evt.step);
|
|
896
|
+
},
|
|
897
|
+
clampValue(ctx2) {
|
|
898
|
+
ctx2.value = utils.clamp(ctx2);
|
|
899
|
+
},
|
|
900
|
+
roundValue(ctx2) {
|
|
901
|
+
if (ctx2.value !== "") {
|
|
902
|
+
ctx2.value = utils.round(ctx2);
|
|
903
|
+
}
|
|
904
|
+
},
|
|
905
|
+
setValue(ctx2, evt) {
|
|
906
|
+
var _a;
|
|
907
|
+
const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
|
|
908
|
+
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
909
|
+
},
|
|
910
|
+
clearValue(ctx2) {
|
|
911
|
+
ctx2.value = "";
|
|
912
|
+
},
|
|
913
|
+
setToMax(ctx2) {
|
|
914
|
+
ctx2.value = ctx2.max.toString();
|
|
915
|
+
},
|
|
916
|
+
setToMin(ctx2) {
|
|
917
|
+
ctx2.value = ctx2.min.toString();
|
|
918
|
+
},
|
|
919
|
+
setHint(ctx2, evt) {
|
|
920
|
+
ctx2.hint = evt.hint;
|
|
921
|
+
},
|
|
922
|
+
clearHint(ctx2) {
|
|
923
|
+
ctx2.hint = null;
|
|
924
|
+
},
|
|
925
|
+
setHintToSet(ctx2) {
|
|
926
|
+
ctx2.hint = "set";
|
|
927
|
+
},
|
|
928
|
+
invokeOnChange(ctx2) {
|
|
929
|
+
var _a;
|
|
930
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
931
|
+
value: ctx2.value,
|
|
932
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
933
|
+
});
|
|
934
|
+
},
|
|
935
|
+
invokeOnFocus(ctx2, evt) {
|
|
936
|
+
var _a;
|
|
937
|
+
let srcElement = null;
|
|
938
|
+
if (evt.type === "PRESS_DOWN") {
|
|
939
|
+
srcElement = dom.getActiveButton(ctx2, evt.hint);
|
|
940
|
+
} else if (evt.type === "FOCUS") {
|
|
941
|
+
srcElement = dom.getInputEl(ctx2);
|
|
942
|
+
} else if (evt.type === "PRESS_DOWN_SCRUBBER") {
|
|
943
|
+
srcElement = dom.getScrubberEl(ctx2);
|
|
944
|
+
}
|
|
945
|
+
(_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
|
|
946
|
+
value: ctx2.value,
|
|
947
|
+
valueAsNumber: ctx2.valueAsNumber,
|
|
948
|
+
srcElement
|
|
949
|
+
});
|
|
950
|
+
},
|
|
951
|
+
invokeOnBlur(ctx2) {
|
|
952
|
+
var _a;
|
|
953
|
+
(_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
|
|
954
|
+
value: ctx2.value,
|
|
955
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
956
|
+
});
|
|
957
|
+
},
|
|
958
|
+
invokeOnInvalid(ctx2) {
|
|
959
|
+
var _a;
|
|
960
|
+
if (!ctx2.isOutOfRange)
|
|
823
961
|
return;
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
962
|
+
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
|
|
963
|
+
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
964
|
+
reason,
|
|
965
|
+
value: ctx2.formattedValue,
|
|
966
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
828
967
|
});
|
|
968
|
+
},
|
|
969
|
+
syncInputValue(ctx2) {
|
|
970
|
+
const input = dom.getInputEl(ctx2);
|
|
971
|
+
if (!input || input.value == ctx2.value)
|
|
972
|
+
return;
|
|
973
|
+
const value = utils.parse(ctx2, input.value);
|
|
974
|
+
ctx2.value = utils.sanitize(ctx2, value);
|
|
975
|
+
},
|
|
976
|
+
setCursorPoint(ctx2, evt) {
|
|
977
|
+
ctx2.scrubberCursorPoint = evt.point;
|
|
978
|
+
},
|
|
979
|
+
clearCursorPoint(ctx2) {
|
|
980
|
+
ctx2.scrubberCursorPoint = null;
|
|
981
|
+
},
|
|
982
|
+
setVirtualCursorPosition(ctx2) {
|
|
983
|
+
const cursor = dom.getCursorEl(ctx2);
|
|
984
|
+
if (!cursor || !ctx2.scrubberCursorPoint)
|
|
985
|
+
return;
|
|
986
|
+
const { x, y } = ctx2.scrubberCursorPoint;
|
|
987
|
+
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
829
988
|
}
|
|
830
|
-
function onMouseup() {
|
|
831
|
-
send("POINTER_UP_SCRUBBER");
|
|
832
|
-
}
|
|
833
|
-
return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
|
|
834
|
-
}
|
|
835
|
-
},
|
|
836
|
-
actions: {
|
|
837
|
-
focusInput(ctx2) {
|
|
838
|
-
if (!ctx2.focusInputOnChange)
|
|
839
|
-
return;
|
|
840
|
-
const input = dom.getInputEl(ctx2);
|
|
841
|
-
raf(() => input == null ? void 0 : input.focus());
|
|
842
|
-
},
|
|
843
|
-
increment(ctx2, evt) {
|
|
844
|
-
ctx2.value = utils.increment(ctx2, evt.step);
|
|
845
|
-
},
|
|
846
|
-
decrement(ctx2, evt) {
|
|
847
|
-
ctx2.value = utils.decrement(ctx2, evt.step);
|
|
848
|
-
},
|
|
849
|
-
clampValue(ctx2) {
|
|
850
|
-
ctx2.value = utils.clamp(ctx2);
|
|
851
|
-
},
|
|
852
|
-
roundValue(ctx2) {
|
|
853
|
-
if (ctx2.value !== "") {
|
|
854
|
-
ctx2.value = utils.round(ctx2);
|
|
855
|
-
}
|
|
856
|
-
},
|
|
857
|
-
setValue(ctx2, evt) {
|
|
858
|
-
var _a;
|
|
859
|
-
const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
|
|
860
|
-
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
861
|
-
},
|
|
862
|
-
clearValue(ctx2) {
|
|
863
|
-
ctx2.value = "";
|
|
864
|
-
},
|
|
865
|
-
setToMax(ctx2) {
|
|
866
|
-
ctx2.value = ctx2.max.toString();
|
|
867
989
|
},
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
setHint(ctx2, evt) {
|
|
872
|
-
ctx2.hint = evt.hint;
|
|
873
|
-
},
|
|
874
|
-
clearHint(ctx2) {
|
|
875
|
-
ctx2.hint = null;
|
|
876
|
-
},
|
|
877
|
-
setHintToSet(ctx2) {
|
|
878
|
-
ctx2.hint = "set";
|
|
879
|
-
},
|
|
880
|
-
invokeOnChange(ctx2) {
|
|
881
|
-
var _a;
|
|
882
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
883
|
-
value: ctx2.value,
|
|
884
|
-
valueAsNumber: ctx2.valueAsNumber
|
|
885
|
-
});
|
|
886
|
-
},
|
|
887
|
-
invokeOnInvalid(ctx2) {
|
|
888
|
-
var _a;
|
|
889
|
-
if (!ctx2.isOutOfRange)
|
|
890
|
-
return;
|
|
891
|
-
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
|
|
892
|
-
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
893
|
-
reason,
|
|
894
|
-
value: ctx2.formattedValue,
|
|
895
|
-
valueAsNumber: ctx2.valueAsNumber
|
|
896
|
-
});
|
|
897
|
-
},
|
|
898
|
-
syncInputValue(ctx2) {
|
|
899
|
-
const input = dom.getInputEl(ctx2);
|
|
900
|
-
if (!input || input.value == ctx2.value)
|
|
901
|
-
return;
|
|
902
|
-
const value = utils.parse(ctx2, input.value);
|
|
903
|
-
ctx2.value = utils.sanitize(ctx2, value);
|
|
904
|
-
},
|
|
905
|
-
setCursorPoint(ctx2, evt) {
|
|
906
|
-
ctx2.scrubberCursorPoint = evt.point;
|
|
907
|
-
},
|
|
908
|
-
clearCursorPoint(ctx2) {
|
|
909
|
-
ctx2.scrubberCursorPoint = null;
|
|
910
|
-
},
|
|
911
|
-
updateCursor(ctx2) {
|
|
912
|
-
const cursor = dom.getCursorEl(ctx2);
|
|
913
|
-
if (!cursor || !ctx2.scrubberCursorPoint)
|
|
914
|
-
return;
|
|
915
|
-
const { x, y } = ctx2.scrubberCursorPoint;
|
|
916
|
-
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
917
|
-
},
|
|
918
|
-
addCustomCursor(ctx2) {
|
|
919
|
-
if (isSafari() || !supportsPointerEvent())
|
|
920
|
-
return;
|
|
921
|
-
dom.createVirtualCursor(ctx2);
|
|
922
|
-
},
|
|
923
|
-
removeCustomCursor(ctx2) {
|
|
924
|
-
var _a;
|
|
925
|
-
if (isSafari() || !supportsPointerEvent())
|
|
926
|
-
return;
|
|
927
|
-
(_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
|
|
928
|
-
},
|
|
929
|
-
disableTextSelection(ctx2) {
|
|
930
|
-
const doc = dom.getDoc(ctx2);
|
|
931
|
-
doc.body.style.pointerEvents = "none";
|
|
932
|
-
doc.documentElement.style.userSelect = "none";
|
|
933
|
-
doc.documentElement.style.cursor = "ew-resize";
|
|
934
|
-
},
|
|
935
|
-
restoreTextSelection(ctx2) {
|
|
936
|
-
const doc = dom.getDoc(ctx2);
|
|
937
|
-
doc.body.style.pointerEvents = "";
|
|
938
|
-
doc.documentElement.style.userSelect = "";
|
|
939
|
-
doc.documentElement.style.cursor = "";
|
|
940
|
-
}
|
|
941
|
-
},
|
|
942
|
-
hookSync: true
|
|
943
|
-
});
|
|
990
|
+
hookSync: true
|
|
991
|
+
}
|
|
992
|
+
);
|
|
944
993
|
}
|
|
945
994
|
// Annotate the CommonJS export names for ESM import in node:
|
|
946
995
|
0 && (module.exports = {
|