@zag-js/number-input 0.1.10 → 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/dist/index.js +68 -63
- package/dist/index.mjs +68 -64
- package/dist/number-input.connect.d.ts +4 -3
- package/dist/number-input.dom.d.ts +1 -1
- package/dist/number-input.types.d.ts +10 -3
- package/dist/number-input.utils.d.ts +1 -2
- package/package.json +4 -5
package/dist/index.js
CHANGED
|
@@ -49,36 +49,43 @@ var dataAttr = (guard) => {
|
|
|
49
49
|
var ariaAttr = (guard) => {
|
|
50
50
|
return guard ? "true" : void 0;
|
|
51
51
|
};
|
|
52
|
-
var
|
|
52
|
+
var MAX_Z_INDEX = 2147483647;
|
|
53
53
|
var runIfFn = (v, ...a) => {
|
|
54
54
|
const res = typeof v === "function" ? v(...a) : v;
|
|
55
55
|
return res != null ? res : void 0;
|
|
56
56
|
};
|
|
57
|
-
var
|
|
57
|
+
var callAll = (...fns) => (...a) => {
|
|
58
|
+
fns.forEach(function(fn) {
|
|
59
|
+
fn == null ? void 0 : fn(...a);
|
|
60
|
+
});
|
|
58
61
|
};
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
function raf(fn) {
|
|
69
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
70
|
-
return function cleanup() {
|
|
71
|
-
globalThis.cancelAnimationFrame(id);
|
|
72
|
-
};
|
|
62
|
+
var isArray = (v) => Array.isArray(v);
|
|
63
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
64
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
65
|
+
var isDom = () => typeof window !== "undefined";
|
|
66
|
+
function getPlatform() {
|
|
67
|
+
var _a;
|
|
68
|
+
const agent = navigator.userAgentData;
|
|
69
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
73
70
|
}
|
|
74
|
-
var
|
|
71
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
72
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
73
|
+
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
74
|
+
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
75
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
76
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
77
|
+
var isIos = () => isApple() && !isMac();
|
|
75
78
|
function getNativeEvent(e) {
|
|
76
79
|
var _a;
|
|
77
80
|
return (_a = e.nativeEvent) != null ? _a : e;
|
|
78
81
|
}
|
|
82
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
83
|
+
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
84
|
+
var isLeftClick = (v) => v.button === 0;
|
|
85
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
79
86
|
function observeAttributes(node, attributes, fn) {
|
|
80
87
|
if (!node)
|
|
81
|
-
return
|
|
88
|
+
return;
|
|
82
89
|
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
83
90
|
const win = node.ownerDocument.defaultView || window;
|
|
84
91
|
const obs = new win.MutationObserver((changes) => {
|
|
@@ -91,6 +98,17 @@ function observeAttributes(node, attributes, fn) {
|
|
|
91
98
|
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
92
99
|
return () => obs.disconnect();
|
|
93
100
|
}
|
|
101
|
+
var fallback = {
|
|
102
|
+
pageX: 0,
|
|
103
|
+
pageY: 0,
|
|
104
|
+
clientX: 0,
|
|
105
|
+
clientY: 0
|
|
106
|
+
};
|
|
107
|
+
function getEventPoint(event, type = "page") {
|
|
108
|
+
var _a, _b;
|
|
109
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
110
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
111
|
+
}
|
|
94
112
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
95
113
|
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
96
114
|
function getEventStep(event) {
|
|
@@ -102,6 +120,20 @@ function getEventStep(event) {
|
|
|
102
120
|
return isSkipKey ? 10 : 1;
|
|
103
121
|
}
|
|
104
122
|
}
|
|
123
|
+
var isRef = (v) => hasProp(v, "current");
|
|
124
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
125
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
126
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
127
|
+
return () => {
|
|
128
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
function raf(fn) {
|
|
132
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
133
|
+
return function cleanup() {
|
|
134
|
+
globalThis.cancelAnimationFrame(id);
|
|
135
|
+
};
|
|
136
|
+
}
|
|
105
137
|
function addPointerlockChangeListener(doc, fn) {
|
|
106
138
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
107
139
|
}
|
|
@@ -134,7 +166,7 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
134
166
|
if (!supported)
|
|
135
167
|
return;
|
|
136
168
|
body.requestPointerLock();
|
|
137
|
-
const cleanup =
|
|
169
|
+
const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
|
|
138
170
|
return function dispose() {
|
|
139
171
|
if (!supported)
|
|
140
172
|
return;
|
|
@@ -208,46 +240,6 @@ function decimalOperation(a, op, b) {
|
|
|
208
240
|
}
|
|
209
241
|
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
210
242
|
|
|
211
|
-
// ../../utilities/rect/dist/index.mjs
|
|
212
|
-
var isArray = (v) => Array.isArray(v);
|
|
213
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
214
|
-
var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
215
|
-
var isTouchEvent = (v) => isObject(v) && hasProp2(v, "touches");
|
|
216
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
217
|
-
function getEventPoint(e, t = "page") {
|
|
218
|
-
const p = isTouchEvent(e) ? e.touches[0] || e.changedTouches[0] || fallback : e;
|
|
219
|
-
return { x: p[`${t}X`], y: p[`${t}Y`] };
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
// ../../types/dist/index.mjs
|
|
223
|
-
function createNormalizer(fn) {
|
|
224
|
-
return new Proxy({}, {
|
|
225
|
-
get() {
|
|
226
|
-
return fn;
|
|
227
|
-
}
|
|
228
|
-
});
|
|
229
|
-
}
|
|
230
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
231
|
-
|
|
232
|
-
// ../../utilities/core/dist/index.mjs
|
|
233
|
-
var isDom = () => typeof window !== "undefined";
|
|
234
|
-
function getPlatform() {
|
|
235
|
-
var _a;
|
|
236
|
-
const agent = navigator.userAgentData;
|
|
237
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
238
|
-
}
|
|
239
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
240
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
241
|
-
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
242
|
-
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
243
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
244
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
245
|
-
var isIos = () => isApple() && !isMac();
|
|
246
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
247
|
-
var isLeftClick = (v) => v.button === 0;
|
|
248
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
249
|
-
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
250
|
-
|
|
251
243
|
// src/number-input.dom.ts
|
|
252
244
|
var dom = {
|
|
253
245
|
getDoc: (ctx) => {
|
|
@@ -380,16 +372,18 @@ var utils = {
|
|
|
380
372
|
};
|
|
381
373
|
|
|
382
374
|
// src/number-input.connect.ts
|
|
383
|
-
function connect(state, send, normalize
|
|
375
|
+
function connect(state, send, normalize) {
|
|
384
376
|
const isFocused = state.hasTag("focus");
|
|
385
377
|
const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
|
|
386
378
|
const isDisabled = !!state.context.disabled;
|
|
379
|
+
const isValueEmpty = state.context.isValueEmpty;
|
|
387
380
|
const isIncrementDisabled = isDisabled || !state.context.canIncrement;
|
|
388
381
|
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
389
382
|
const messages = state.context.messages;
|
|
390
383
|
return {
|
|
391
384
|
isFocused,
|
|
392
385
|
isInvalid,
|
|
386
|
+
isValueEmpty,
|
|
393
387
|
value: state.context.formattedValue,
|
|
394
388
|
valueAsNumber: state.context.valueAsNumber,
|
|
395
389
|
setValue(value) {
|
|
@@ -569,6 +563,15 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
569
563
|
|
|
570
564
|
// src/number-input.machine.ts
|
|
571
565
|
var import_core = require("@zag-js/core");
|
|
566
|
+
|
|
567
|
+
// ../../utilities/core/dist/index.mjs
|
|
568
|
+
var callAll2 = (...fns) => (...a) => {
|
|
569
|
+
fns.forEach(function(fn) {
|
|
570
|
+
fn == null ? void 0 : fn(...a);
|
|
571
|
+
});
|
|
572
|
+
};
|
|
573
|
+
|
|
574
|
+
// src/number-input.machine.ts
|
|
572
575
|
var { not, and } = import_core.guards;
|
|
573
576
|
function machine(ctx = {}) {
|
|
574
577
|
return (0, import_core.createMachine)({
|
|
@@ -601,6 +604,7 @@ function machine(ctx = {}) {
|
|
|
601
604
|
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
602
605
|
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
603
606
|
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
607
|
+
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
604
608
|
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
605
609
|
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
606
610
|
valueText: (ctx2) => {
|
|
@@ -687,7 +691,7 @@ function machine(ctx = {}) {
|
|
|
687
691
|
actions: ["clearValue", "clearHint"]
|
|
688
692
|
},
|
|
689
693
|
{
|
|
690
|
-
guard: and("clampOnBlur", not("isInRange")),
|
|
694
|
+
guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
|
|
691
695
|
target: "idle",
|
|
692
696
|
actions: ["clampValue", "clearHint"]
|
|
693
697
|
},
|
|
@@ -777,6 +781,7 @@ function machine(ctx = {}) {
|
|
|
777
781
|
var _a;
|
|
778
782
|
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
|
|
779
783
|
},
|
|
784
|
+
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
780
785
|
isIncrementHint: (ctx2, evt) => {
|
|
781
786
|
var _a;
|
|
782
787
|
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
@@ -836,7 +841,7 @@ function machine(ctx = {}) {
|
|
|
836
841
|
function onMouseup() {
|
|
837
842
|
send("POINTER_UP_SCRUBBER");
|
|
838
843
|
}
|
|
839
|
-
return
|
|
844
|
+
return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
|
|
840
845
|
}
|
|
841
846
|
},
|
|
842
847
|
actions: {
|
|
@@ -870,7 +875,7 @@ function machine(ctx = {}) {
|
|
|
870
875
|
setValue(ctx2, evt) {
|
|
871
876
|
var _a, _b;
|
|
872
877
|
const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
|
|
873
|
-
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value));
|
|
878
|
+
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
874
879
|
},
|
|
875
880
|
clearValue(ctx2) {
|
|
876
881
|
ctx2.value = "";
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -26,36 +25,43 @@ var dataAttr = (guard) => {
|
|
|
26
25
|
var ariaAttr = (guard) => {
|
|
27
26
|
return guard ? "true" : void 0;
|
|
28
27
|
};
|
|
29
|
-
var
|
|
28
|
+
var MAX_Z_INDEX = 2147483647;
|
|
30
29
|
var runIfFn = (v, ...a) => {
|
|
31
30
|
const res = typeof v === "function" ? v(...a) : v;
|
|
32
31
|
return res != null ? res : void 0;
|
|
33
32
|
};
|
|
34
|
-
var
|
|
33
|
+
var callAll = (...fns) => (...a) => {
|
|
34
|
+
fns.forEach(function(fn) {
|
|
35
|
+
fn == null ? void 0 : fn(...a);
|
|
36
|
+
});
|
|
35
37
|
};
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
function raf(fn) {
|
|
46
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
47
|
-
return function cleanup() {
|
|
48
|
-
globalThis.cancelAnimationFrame(id);
|
|
49
|
-
};
|
|
38
|
+
var isArray = (v) => Array.isArray(v);
|
|
39
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
40
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
41
|
+
var isDom = () => typeof window !== "undefined";
|
|
42
|
+
function getPlatform() {
|
|
43
|
+
var _a;
|
|
44
|
+
const agent = navigator.userAgentData;
|
|
45
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
50
46
|
}
|
|
51
|
-
var
|
|
47
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
48
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
49
|
+
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
50
|
+
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
51
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
52
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
53
|
+
var isIos = () => isApple() && !isMac();
|
|
52
54
|
function getNativeEvent(e) {
|
|
53
55
|
var _a;
|
|
54
56
|
return (_a = e.nativeEvent) != null ? _a : e;
|
|
55
57
|
}
|
|
58
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
59
|
+
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
60
|
+
var isLeftClick = (v) => v.button === 0;
|
|
61
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
56
62
|
function observeAttributes(node, attributes, fn) {
|
|
57
63
|
if (!node)
|
|
58
|
-
return
|
|
64
|
+
return;
|
|
59
65
|
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
60
66
|
const win = node.ownerDocument.defaultView || window;
|
|
61
67
|
const obs = new win.MutationObserver((changes) => {
|
|
@@ -68,6 +74,17 @@ function observeAttributes(node, attributes, fn) {
|
|
|
68
74
|
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
69
75
|
return () => obs.disconnect();
|
|
70
76
|
}
|
|
77
|
+
var fallback = {
|
|
78
|
+
pageX: 0,
|
|
79
|
+
pageY: 0,
|
|
80
|
+
clientX: 0,
|
|
81
|
+
clientY: 0
|
|
82
|
+
};
|
|
83
|
+
function getEventPoint(event, type = "page") {
|
|
84
|
+
var _a, _b;
|
|
85
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
86
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
87
|
+
}
|
|
71
88
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
72
89
|
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
73
90
|
function getEventStep(event) {
|
|
@@ -79,6 +96,20 @@ function getEventStep(event) {
|
|
|
79
96
|
return isSkipKey ? 10 : 1;
|
|
80
97
|
}
|
|
81
98
|
}
|
|
99
|
+
var isRef = (v) => hasProp(v, "current");
|
|
100
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
101
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
102
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
103
|
+
return () => {
|
|
104
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function raf(fn) {
|
|
108
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
109
|
+
return function cleanup() {
|
|
110
|
+
globalThis.cancelAnimationFrame(id);
|
|
111
|
+
};
|
|
112
|
+
}
|
|
82
113
|
function addPointerlockChangeListener(doc, fn) {
|
|
83
114
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
84
115
|
}
|
|
@@ -111,7 +142,7 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
111
142
|
if (!supported)
|
|
112
143
|
return;
|
|
113
144
|
body.requestPointerLock();
|
|
114
|
-
const cleanup =
|
|
145
|
+
const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
|
|
115
146
|
return function dispose() {
|
|
116
147
|
if (!supported)
|
|
117
148
|
return;
|
|
@@ -185,46 +216,6 @@ function decimalOperation(a, op, b) {
|
|
|
185
216
|
}
|
|
186
217
|
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
187
218
|
|
|
188
|
-
// ../../utilities/rect/dist/index.mjs
|
|
189
|
-
var isArray = (v) => Array.isArray(v);
|
|
190
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
191
|
-
var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
192
|
-
var isTouchEvent = (v) => isObject(v) && hasProp2(v, "touches");
|
|
193
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
194
|
-
function getEventPoint(e, t = "page") {
|
|
195
|
-
const p = isTouchEvent(e) ? e.touches[0] || e.changedTouches[0] || fallback : e;
|
|
196
|
-
return { x: p[`${t}X`], y: p[`${t}Y`] };
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
// ../../types/dist/index.mjs
|
|
200
|
-
function createNormalizer(fn) {
|
|
201
|
-
return new Proxy({}, {
|
|
202
|
-
get() {
|
|
203
|
-
return fn;
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
208
|
-
|
|
209
|
-
// ../../utilities/core/dist/index.mjs
|
|
210
|
-
var isDom = () => typeof window !== "undefined";
|
|
211
|
-
function getPlatform() {
|
|
212
|
-
var _a;
|
|
213
|
-
const agent = navigator.userAgentData;
|
|
214
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
215
|
-
}
|
|
216
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
217
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
218
|
-
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
219
|
-
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
220
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
221
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
222
|
-
var isIos = () => isApple() && !isMac();
|
|
223
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
224
|
-
var isLeftClick = (v) => v.button === 0;
|
|
225
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
226
|
-
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
227
|
-
|
|
228
219
|
// src/number-input.dom.ts
|
|
229
220
|
var dom = {
|
|
230
221
|
getDoc: (ctx) => {
|
|
@@ -357,16 +348,18 @@ var utils = {
|
|
|
357
348
|
};
|
|
358
349
|
|
|
359
350
|
// src/number-input.connect.ts
|
|
360
|
-
function connect(state, send, normalize
|
|
351
|
+
function connect(state, send, normalize) {
|
|
361
352
|
const isFocused = state.hasTag("focus");
|
|
362
353
|
const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
|
|
363
354
|
const isDisabled = !!state.context.disabled;
|
|
355
|
+
const isValueEmpty = state.context.isValueEmpty;
|
|
364
356
|
const isIncrementDisabled = isDisabled || !state.context.canIncrement;
|
|
365
357
|
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
366
358
|
const messages = state.context.messages;
|
|
367
359
|
return {
|
|
368
360
|
isFocused,
|
|
369
361
|
isInvalid,
|
|
362
|
+
isValueEmpty,
|
|
370
363
|
value: state.context.formattedValue,
|
|
371
364
|
valueAsNumber: state.context.valueAsNumber,
|
|
372
365
|
setValue(value) {
|
|
@@ -546,6 +539,15 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
546
539
|
|
|
547
540
|
// src/number-input.machine.ts
|
|
548
541
|
import { choose, createMachine, guards, ref } from "@zag-js/core";
|
|
542
|
+
|
|
543
|
+
// ../../utilities/core/dist/index.mjs
|
|
544
|
+
var callAll2 = (...fns) => (...a) => {
|
|
545
|
+
fns.forEach(function(fn) {
|
|
546
|
+
fn == null ? void 0 : fn(...a);
|
|
547
|
+
});
|
|
548
|
+
};
|
|
549
|
+
|
|
550
|
+
// src/number-input.machine.ts
|
|
549
551
|
var { not, and } = guards;
|
|
550
552
|
function machine(ctx = {}) {
|
|
551
553
|
return createMachine({
|
|
@@ -578,6 +580,7 @@ function machine(ctx = {}) {
|
|
|
578
580
|
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
579
581
|
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
580
582
|
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
583
|
+
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
581
584
|
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
582
585
|
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
583
586
|
valueText: (ctx2) => {
|
|
@@ -664,7 +667,7 @@ function machine(ctx = {}) {
|
|
|
664
667
|
actions: ["clearValue", "clearHint"]
|
|
665
668
|
},
|
|
666
669
|
{
|
|
667
|
-
guard: and("clampOnBlur", not("isInRange")),
|
|
670
|
+
guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
|
|
668
671
|
target: "idle",
|
|
669
672
|
actions: ["clampValue", "clearHint"]
|
|
670
673
|
},
|
|
@@ -754,6 +757,7 @@ function machine(ctx = {}) {
|
|
|
754
757
|
var _a;
|
|
755
758
|
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
|
|
756
759
|
},
|
|
760
|
+
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
757
761
|
isIncrementHint: (ctx2, evt) => {
|
|
758
762
|
var _a;
|
|
759
763
|
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
@@ -813,7 +817,7 @@ function machine(ctx = {}) {
|
|
|
813
817
|
function onMouseup() {
|
|
814
818
|
send("POINTER_UP_SCRUBBER");
|
|
815
819
|
}
|
|
816
|
-
return
|
|
820
|
+
return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
|
|
817
821
|
}
|
|
818
822
|
},
|
|
819
823
|
actions: {
|
|
@@ -847,7 +851,7 @@ function machine(ctx = {}) {
|
|
|
847
851
|
setValue(ctx2, evt) {
|
|
848
852
|
var _a, _b;
|
|
849
853
|
const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
|
|
850
|
-
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value));
|
|
854
|
+
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
851
855
|
},
|
|
852
856
|
clearValue(ctx2) {
|
|
853
857
|
ctx2.value = "";
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Send, State } from "./number-input.types";
|
|
3
|
-
export declare function connect<T extends PropTypes
|
|
1
|
+
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
+
import type { Send, State } from "./number-input.types";
|
|
3
|
+
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
4
|
isFocused: boolean;
|
|
5
5
|
isInvalid: boolean;
|
|
6
|
+
isValueEmpty: boolean;
|
|
6
7
|
value: string;
|
|
7
8
|
valueAsNumber: number;
|
|
8
9
|
setValue(value: string | number): void;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import { FormatDecimalOptions } from "@zag-js/number-utils";
|
|
3
|
-
import type { Point } from "@zag-js/rect-utils";
|
|
2
|
+
import type { FormatDecimalOptions } from "@zag-js/number-utils";
|
|
4
3
|
import type { Context, DirectionProperty } from "@zag-js/types";
|
|
5
4
|
declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
|
|
6
5
|
declare type ElementIds = Partial<{
|
|
@@ -150,6 +149,11 @@ declare type ComputedContext = Readonly<{
|
|
|
150
149
|
* Whether the value is out of the min/max range
|
|
151
150
|
*/
|
|
152
151
|
isOutOfRange: boolean;
|
|
152
|
+
/**
|
|
153
|
+
* @computed
|
|
154
|
+
* Whether the value is empty
|
|
155
|
+
*/
|
|
156
|
+
isValueEmpty: boolean;
|
|
153
157
|
/**
|
|
154
158
|
* @computed
|
|
155
159
|
* Whether the increment button is enabled
|
|
@@ -186,7 +190,10 @@ declare type PrivateContext = Context<{
|
|
|
186
190
|
* @internal
|
|
187
191
|
* The scrubber cursor position
|
|
188
192
|
*/
|
|
189
|
-
scrubberCursorPoint:
|
|
193
|
+
scrubberCursorPoint: {
|
|
194
|
+
x: number;
|
|
195
|
+
y: number;
|
|
196
|
+
} | null;
|
|
190
197
|
}>;
|
|
191
198
|
export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
192
199
|
export declare type MachineState = {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type { KeyboardEvent } from "react";
|
|
2
1
|
import type { MachineContext as Ctx } from "./number-input.types";
|
|
3
2
|
export declare const utils: {
|
|
4
|
-
isValidNumericEvent: (ctx: Ctx, event: KeyboardEvent) => boolean;
|
|
3
|
+
isValidNumericEvent: (ctx: Ctx, event: JSX.KeyboardEvent) => boolean;
|
|
5
4
|
isFloatingPoint: (v: string) => boolean;
|
|
6
5
|
sanitize: (ctx: Ctx, value: string) => string;
|
|
7
6
|
increment: (ctx: Ctx, step?: number) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/number-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Core logic for the number-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,11 +29,10 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/dom-utils": "0.1.
|
|
32
|
+
"@zag-js/core": "0.1.7",
|
|
33
|
+
"@zag-js/dom-utils": "0.1.6",
|
|
34
34
|
"@zag-js/number-utils": "0.1.2",
|
|
35
|
-
"@zag-js/
|
|
36
|
-
"@zag-js/types": "0.2.0",
|
|
35
|
+
"@zag-js/types": "0.2.1",
|
|
37
36
|
"@zag-js/utils": "0.1.2"
|
|
38
37
|
},
|
|
39
38
|
"scripts": {
|