@zag-js/number-input 0.0.0-dev-20230220134212 → 0.0.0-dev-20230222120620
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-7Q7LBLXZ.mjs → chunk-3O7PA63J.mjs} +12 -138
- package/dist/{chunk-6CS5P7OC.mjs → chunk-AXXDGYUW.mjs} +2 -8
- package/dist/{chunk-GQN3V2LU.mjs → chunk-QYY4CWRS.mjs} +4 -13
- package/dist/{chunk-4ASBTBA5.mjs → chunk-TZOPYT5L.mjs} +7 -43
- package/dist/index.js +65 -326
- package/dist/index.mjs +4 -5
- package/dist/number-input.connect.js +42 -175
- package/dist/number-input.connect.mjs +3 -4
- package/dist/number-input.dom.d.ts +9 -6
- package/dist/number-input.dom.js +9 -65
- package/dist/number-input.dom.mjs +1 -2
- package/dist/number-input.machine.js +40 -266
- package/dist/number-input.machine.mjs +3 -4
- package/dist/number-input.utils.js +9 -54
- package/dist/number-input.utils.mjs +1 -2
- package/package.json +9 -7
- package/dist/chunk-EPCXXTFL.mjs +0 -141
|
@@ -1,146 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
2
|
dom
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-QYY4CWRS.mjs";
|
|
4
4
|
import {
|
|
5
5
|
utils
|
|
6
|
-
} from "./chunk-
|
|
7
|
-
import {
|
|
8
|
-
getWindow,
|
|
9
|
-
hasProp,
|
|
10
|
-
isAtMax,
|
|
11
|
-
isAtMin,
|
|
12
|
-
isObject,
|
|
13
|
-
isSafari,
|
|
14
|
-
isWithinRange,
|
|
15
|
-
supportsPointerEvent,
|
|
16
|
-
valueOf
|
|
17
|
-
} from "./chunk-EPCXXTFL.mjs";
|
|
6
|
+
} from "./chunk-AXXDGYUW.mjs";
|
|
18
7
|
|
|
19
8
|
// src/number-input.machine.ts
|
|
20
9
|
import { choose, createMachine, guards } from "@zag-js/core";
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
var callAll = (...fns) => (...a) => {
|
|
28
|
-
fns.forEach(function(fn) {
|
|
29
|
-
fn?.(...a);
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// ../../utilities/core/src/object.ts
|
|
34
|
-
function compact(obj) {
|
|
35
|
-
if (obj === void 0)
|
|
36
|
-
return obj;
|
|
37
|
-
return Object.fromEntries(
|
|
38
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// ../../utilities/dom/src/listener.ts
|
|
43
|
-
var isRef = (v) => hasProp(v, "current");
|
|
44
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
45
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
46
|
-
node?.addEventListener(eventName, handler, options);
|
|
47
|
-
return () => {
|
|
48
|
-
node?.removeEventListener(eventName, handler, options);
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// ../../utilities/dom/src/mutation-observer.ts
|
|
53
|
-
function observeAttributes(node, attributes, fn) {
|
|
54
|
-
if (!node)
|
|
55
|
-
return;
|
|
56
|
-
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
57
|
-
const win = node.ownerDocument.defaultView || window;
|
|
58
|
-
const obs = new win.MutationObserver((changes) => {
|
|
59
|
-
for (const change of changes) {
|
|
60
|
-
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
61
|
-
fn(change);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
66
|
-
return () => obs.disconnect();
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// ../../utilities/dom/src/next-tick.ts
|
|
70
|
-
function raf(fn) {
|
|
71
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
72
|
-
return function cleanup() {
|
|
73
|
-
globalThis.cancelAnimationFrame(id);
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// ../../utilities/dom/src/pointerlock.ts
|
|
78
|
-
function addPointerlockChangeListener(doc, fn) {
|
|
79
|
-
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
80
|
-
}
|
|
81
|
-
function addPointerlockErrorListener(doc, fn) {
|
|
82
|
-
doc.addEventListener("pointerlockerror", fn, false);
|
|
83
|
-
return function cleanup() {
|
|
84
|
-
doc.removeEventListener("pointerlockerror", fn, false);
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
function requestPointerLock(doc, handlers = {}) {
|
|
88
|
-
const { onPointerLock, onPointerUnlock } = handlers;
|
|
89
|
-
const body = doc.body;
|
|
90
|
-
const supported = "pointerLockElement" in doc || "mozPointerLockElement" in doc;
|
|
91
|
-
const locked = !!doc.pointerLockElement;
|
|
92
|
-
function onPointerChange() {
|
|
93
|
-
if (locked)
|
|
94
|
-
onPointerLock?.();
|
|
95
|
-
else
|
|
96
|
-
onPointerUnlock?.();
|
|
97
|
-
}
|
|
98
|
-
function onPointerError(event) {
|
|
99
|
-
if (locked)
|
|
100
|
-
onPointerUnlock?.();
|
|
101
|
-
console.error("PointerLock error occured:", event);
|
|
102
|
-
exit();
|
|
103
|
-
}
|
|
104
|
-
function exit() {
|
|
105
|
-
doc.exitPointerLock();
|
|
106
|
-
}
|
|
107
|
-
if (!supported)
|
|
108
|
-
return;
|
|
109
|
-
try {
|
|
110
|
-
body.requestPointerLock();
|
|
111
|
-
} catch {
|
|
112
|
-
}
|
|
113
|
-
const cleanup = callAll(
|
|
114
|
-
addPointerlockChangeListener(doc, onPointerChange),
|
|
115
|
-
addPointerlockErrorListener(doc, onPointerError)
|
|
116
|
-
);
|
|
117
|
-
return function dispose() {
|
|
118
|
-
if (!supported)
|
|
119
|
-
return;
|
|
120
|
-
cleanup();
|
|
121
|
-
exit();
|
|
122
|
-
};
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// ../../utilities/form-utils/src/input-event.ts
|
|
126
|
-
function getDescriptor(el, options) {
|
|
127
|
-
const { type, property = "value" } = options;
|
|
128
|
-
const proto = getWindow(el)[type].prototype;
|
|
129
|
-
return Object.getOwnPropertyDescriptor(proto, property) ?? {};
|
|
130
|
-
}
|
|
131
|
-
function dispatchInputValueEvent(el, value) {
|
|
132
|
-
if (!el)
|
|
133
|
-
return;
|
|
134
|
-
const win = getWindow(el);
|
|
135
|
-
if (!(el instanceof win.HTMLInputElement))
|
|
136
|
-
return;
|
|
137
|
-
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
|
|
138
|
-
desc.set?.call(el, value);
|
|
139
|
-
const event = new win.Event("input", { bubbles: true });
|
|
140
|
-
el.dispatchEvent(event);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// src/number-input.machine.ts
|
|
10
|
+
import { addDomEvent, requestPointerLock } from "@zag-js/dom-event";
|
|
11
|
+
import { isSafari, raf } from "@zag-js/dom-query";
|
|
12
|
+
import { dispatchInputValueEvent } from "@zag-js/form-utils";
|
|
13
|
+
import { observeAttributes } from "@zag-js/mutation-observer";
|
|
14
|
+
import { isAtMax, isAtMin, isWithinRange, valueOf } from "@zag-js/number-utils";
|
|
15
|
+
import { callAll, compact } from "@zag-js/utils";
|
|
144
16
|
var { not, and } = guards;
|
|
145
17
|
function machine(userContext) {
|
|
146
18
|
const ctx = compact(userContext);
|
|
@@ -356,7 +228,9 @@ function machine(userContext) {
|
|
|
356
228
|
},
|
|
357
229
|
trackButtonDisabled(ctx2, _evt, { send }) {
|
|
358
230
|
const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
|
|
359
|
-
return observeAttributes(btn, "disabled", () =>
|
|
231
|
+
return observeAttributes(btn, ["disabled"], () => {
|
|
232
|
+
send("PRESS_UP");
|
|
233
|
+
});
|
|
360
234
|
},
|
|
361
235
|
attachWheelListener(ctx2, _evt, { send }) {
|
|
362
236
|
const input = dom.getInputEl(ctx2);
|
|
@@ -377,7 +251,7 @@ function machine(userContext) {
|
|
|
377
251
|
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
378
252
|
},
|
|
379
253
|
activatePointerLock(ctx2) {
|
|
380
|
-
if (isSafari()
|
|
254
|
+
if (isSafari())
|
|
381
255
|
return;
|
|
382
256
|
return requestPointerLock(dom.getDoc(ctx2));
|
|
383
257
|
},
|
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
clamp,
|
|
3
|
-
decrement,
|
|
4
|
-
formatDecimal,
|
|
5
|
-
increment,
|
|
6
|
-
isModifiedEvent
|
|
7
|
-
} from "./chunk-EPCXXTFL.mjs";
|
|
8
|
-
|
|
9
1
|
// src/number-input.utils.ts
|
|
2
|
+
import { isModifiedEvent } from "@zag-js/dom-event";
|
|
3
|
+
import { clamp, decrement, formatDecimal, increment } from "@zag-js/number-utils";
|
|
10
4
|
var utils = {
|
|
11
5
|
isValidNumericEvent: (ctx, event) => {
|
|
12
6
|
if (event.key == null)
|
|
@@ -1,16 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
defineDomHelpers,
|
|
3
|
-
isSafari,
|
|
4
|
-
roundToDevicePixel,
|
|
5
|
-
supportsPointerEvent,
|
|
6
|
-
wrap
|
|
7
|
-
} from "./chunk-EPCXXTFL.mjs";
|
|
8
|
-
|
|
9
|
-
// ../../utilities/dom/src/constants.ts
|
|
10
|
-
var MAX_Z_INDEX = 2147483647;
|
|
11
|
-
|
|
12
1
|
// src/number-input.dom.ts
|
|
13
|
-
|
|
2
|
+
import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
|
|
3
|
+
import { roundToDevicePixel, wrap } from "@zag-js/number-utils";
|
|
4
|
+
var dom = createScope({
|
|
14
5
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
15
6
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
16
7
|
getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
|
|
@@ -34,7 +25,7 @@ var dom = defineDomHelpers({
|
|
|
34
25
|
return btnEl;
|
|
35
26
|
},
|
|
36
27
|
setupVirtualCursor(ctx) {
|
|
37
|
-
if (isSafari()
|
|
28
|
+
if (isSafari())
|
|
38
29
|
return;
|
|
39
30
|
dom.createVirtualCursor(ctx);
|
|
40
31
|
return () => {
|
|
@@ -3,51 +3,15 @@ import {
|
|
|
3
3
|
} from "./chunk-XHRILSH3.mjs";
|
|
4
4
|
import {
|
|
5
5
|
dom
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-QYY4CWRS.mjs";
|
|
7
7
|
import {
|
|
8
8
|
utils
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import {
|
|
11
|
-
getNativeEvent,
|
|
12
|
-
isLeftClick,
|
|
13
|
-
isTouchEvent,
|
|
14
|
-
roundToDevicePixel
|
|
15
|
-
} from "./chunk-EPCXXTFL.mjs";
|
|
16
|
-
|
|
17
|
-
// ../../utilities/dom/src/attrs.ts
|
|
18
|
-
var dataAttr = (guard) => {
|
|
19
|
-
return guard ? "" : void 0;
|
|
20
|
-
};
|
|
21
|
-
var ariaAttr = (guard) => {
|
|
22
|
-
return guard ? "true" : void 0;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
// ../../utilities/dom/src/get-event-point.ts
|
|
26
|
-
var fallback = {
|
|
27
|
-
pageX: 0,
|
|
28
|
-
pageY: 0,
|
|
29
|
-
clientX: 0,
|
|
30
|
-
clientY: 0
|
|
31
|
-
};
|
|
32
|
-
function getEventPoint(event, type = "page") {
|
|
33
|
-
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
34
|
-
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// ../../utilities/dom/src/keyboard-event.ts
|
|
38
|
-
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
39
|
-
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
40
|
-
function getEventStep(event) {
|
|
41
|
-
if (event.ctrlKey || event.metaKey) {
|
|
42
|
-
return 0.1;
|
|
43
|
-
} else {
|
|
44
|
-
const isPageKey = PAGE_KEYS.has(event.key);
|
|
45
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
46
|
-
return isSkipKey ? 10 : 1;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
9
|
+
} from "./chunk-AXXDGYUW.mjs";
|
|
49
10
|
|
|
50
11
|
// src/number-input.connect.ts
|
|
12
|
+
import { getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
|
|
13
|
+
import { ariaAttr, dataAttr } from "@zag-js/dom-query";
|
|
14
|
+
import { roundToDevicePixel } from "@zag-js/number-utils";
|
|
51
15
|
function connect(state, send, normalize) {
|
|
52
16
|
const isFocused = state.hasTag("focus");
|
|
53
17
|
const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
|
|
@@ -115,7 +79,7 @@ function connect(state, send, normalize) {
|
|
|
115
79
|
defaultValue: state.context.formattedValue,
|
|
116
80
|
pattern: state.context.pattern,
|
|
117
81
|
inputMode: state.context.inputMode,
|
|
118
|
-
"aria-invalid": isInvalid
|
|
82
|
+
"aria-invalid": ariaAttr(isInvalid),
|
|
119
83
|
"data-invalid": dataAttr(isInvalid),
|
|
120
84
|
disabled: isDisabled,
|
|
121
85
|
"data-disabled": dataAttr(isDisabled),
|
|
@@ -226,7 +190,7 @@ function connect(state, send, normalize) {
|
|
|
226
190
|
return;
|
|
227
191
|
const evt = getNativeEvent(event);
|
|
228
192
|
event.preventDefault();
|
|
229
|
-
const point =
|
|
193
|
+
const point = { x: evt.clientX, y: evt.clientY };
|
|
230
194
|
point.x = point.x - roundToDevicePixel(7.5);
|
|
231
195
|
point.y = point.y - roundToDevicePixel(7.5);
|
|
232
196
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|