@zag-js/number-input 0.1.10 → 0.1.13
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/LICENSE +21 -0
- package/dist/index.d.ts +225 -3
- package/dist/index.js +145 -153
- package/dist/index.mjs +141 -158
- package/package.json +15 -13
- package/dist/number-input.connect.d.ts +0 -22
- package/dist/number-input.dom.d.ts +0 -26
- package/dist/number-input.machine.d.ts +0 -2
- package/dist/number-input.types.d.ts +0 -198
- package/dist/number-input.utils.d.ts +0 -13
package/dist/index.mjs
CHANGED
|
@@ -1,24 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
|
|
22
1
|
// ../../utilities/dom/dist/index.mjs
|
|
23
2
|
var dataAttr = (guard) => {
|
|
24
3
|
return guard ? "" : void 0;
|
|
@@ -26,36 +5,70 @@ var dataAttr = (guard) => {
|
|
|
26
5
|
var ariaAttr = (guard) => {
|
|
27
6
|
return guard ? "true" : void 0;
|
|
28
7
|
};
|
|
29
|
-
var
|
|
8
|
+
var MAX_Z_INDEX = 2147483647;
|
|
30
9
|
var runIfFn = (v, ...a) => {
|
|
31
10
|
const res = typeof v === "function" ? v(...a) : v;
|
|
32
|
-
return res
|
|
11
|
+
return res ?? void 0;
|
|
33
12
|
};
|
|
34
|
-
var
|
|
13
|
+
var callAll = (...fns) => (...a) => {
|
|
14
|
+
fns.forEach(function(fn) {
|
|
15
|
+
fn == null ? void 0 : fn(...a);
|
|
16
|
+
});
|
|
35
17
|
};
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
};
|
|
18
|
+
var isArray = (v) => Array.isArray(v);
|
|
19
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
20
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
21
|
+
var isDom = () => typeof window !== "undefined";
|
|
22
|
+
function getPlatform() {
|
|
23
|
+
const agent = navigator.userAgentData;
|
|
24
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
44
25
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
26
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
27
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
28
|
+
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
29
|
+
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
30
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
31
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
32
|
+
var isIos = () => isApple() && !isMac();
|
|
33
|
+
function isDocument(el) {
|
|
34
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
35
|
+
}
|
|
36
|
+
function isWindow(value) {
|
|
37
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
38
|
+
}
|
|
39
|
+
function getDocument(el) {
|
|
40
|
+
if (isWindow(el))
|
|
41
|
+
return el.document;
|
|
42
|
+
if (isDocument(el))
|
|
43
|
+
return el;
|
|
44
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
45
|
+
}
|
|
46
|
+
function defineDomHelpers(helpers) {
|
|
47
|
+
const dom2 = {
|
|
48
|
+
getRootNode: (ctx) => {
|
|
49
|
+
var _a;
|
|
50
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
51
|
+
},
|
|
52
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
53
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
54
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
55
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
56
|
+
};
|
|
57
|
+
return {
|
|
58
|
+
...dom2,
|
|
59
|
+
...helpers
|
|
49
60
|
};
|
|
50
61
|
}
|
|
51
|
-
var MAX_Z_INDEX = 2147483647;
|
|
52
62
|
function getNativeEvent(e) {
|
|
53
|
-
|
|
54
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
63
|
+
return e.nativeEvent ?? e;
|
|
55
64
|
}
|
|
65
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
66
|
+
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
67
|
+
var isLeftClick = (v) => v.button === 0;
|
|
68
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
56
69
|
function observeAttributes(node, attributes, fn) {
|
|
57
70
|
if (!node)
|
|
58
|
-
return
|
|
71
|
+
return;
|
|
59
72
|
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
60
73
|
const win = node.ownerDocument.defaultView || window;
|
|
61
74
|
const obs = new win.MutationObserver((changes) => {
|
|
@@ -68,6 +81,16 @@ function observeAttributes(node, attributes, fn) {
|
|
|
68
81
|
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
69
82
|
return () => obs.disconnect();
|
|
70
83
|
}
|
|
84
|
+
var fallback = {
|
|
85
|
+
pageX: 0,
|
|
86
|
+
pageY: 0,
|
|
87
|
+
clientX: 0,
|
|
88
|
+
clientY: 0
|
|
89
|
+
};
|
|
90
|
+
function getEventPoint(event, type = "page") {
|
|
91
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
92
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
93
|
+
}
|
|
71
94
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
72
95
|
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
73
96
|
function getEventStep(event) {
|
|
@@ -79,6 +102,20 @@ function getEventStep(event) {
|
|
|
79
102
|
return isSkipKey ? 10 : 1;
|
|
80
103
|
}
|
|
81
104
|
}
|
|
105
|
+
var isRef = (v) => hasProp(v, "current");
|
|
106
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
107
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
108
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
109
|
+
return () => {
|
|
110
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
function raf(fn) {
|
|
114
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
115
|
+
return function cleanup() {
|
|
116
|
+
globalThis.cancelAnimationFrame(id);
|
|
117
|
+
};
|
|
118
|
+
}
|
|
82
119
|
function addPointerlockChangeListener(doc, fn) {
|
|
83
120
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
84
121
|
}
|
|
@@ -111,7 +148,7 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
111
148
|
if (!supported)
|
|
112
149
|
return;
|
|
113
150
|
body.requestPointerLock();
|
|
114
|
-
const cleanup =
|
|
151
|
+
const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
|
|
115
152
|
return function dispose() {
|
|
116
153
|
if (!supported)
|
|
117
154
|
return;
|
|
@@ -121,7 +158,6 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
121
158
|
}
|
|
122
159
|
|
|
123
160
|
// ../../utilities/number/dist/index.mjs
|
|
124
|
-
var __pow = Math.pow;
|
|
125
161
|
function wrap(num, max) {
|
|
126
162
|
return (num % max + max) % max;
|
|
127
163
|
}
|
|
@@ -175,7 +211,7 @@ function isWithinRange(v, o) {
|
|
|
175
211
|
function decimalOperation(a, op, b) {
|
|
176
212
|
let result = op === "+" ? a + b : a - b;
|
|
177
213
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
178
|
-
const multiplier =
|
|
214
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
179
215
|
a = Math.round(a * multiplier);
|
|
180
216
|
b = Math.round(b * multiplier);
|
|
181
217
|
result = op === "+" ? a + b : a - b;
|
|
@@ -185,89 +221,37 @@ function decimalOperation(a, op, b) {
|
|
|
185
221
|
}
|
|
186
222
|
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
187
223
|
|
|
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
224
|
// src/number-input.dom.ts
|
|
229
|
-
var dom = {
|
|
230
|
-
getDoc: (ctx) => {
|
|
231
|
-
var _a;
|
|
232
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
233
|
-
},
|
|
234
|
-
getWin: (ctx) => {
|
|
235
|
-
var _a;
|
|
236
|
-
return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
|
|
237
|
-
},
|
|
238
|
-
getRootNode: (ctx) => {
|
|
239
|
-
var _a;
|
|
240
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
241
|
-
},
|
|
225
|
+
var dom = defineDomHelpers({
|
|
242
226
|
getRootId: (ctx) => {
|
|
243
|
-
var _a
|
|
244
|
-
return (
|
|
227
|
+
var _a;
|
|
228
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `number-input:${ctx.id}`;
|
|
245
229
|
},
|
|
246
230
|
getInputId: (ctx) => {
|
|
247
|
-
var _a
|
|
248
|
-
return (
|
|
231
|
+
var _a;
|
|
232
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.input) ?? `number-input:${ctx.id}:input`;
|
|
249
233
|
},
|
|
250
234
|
getIncButtonId: (ctx) => {
|
|
251
|
-
var _a
|
|
252
|
-
return (
|
|
235
|
+
var _a;
|
|
236
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.incBtn) ?? `number-input:${ctx.id}:inc-btn`;
|
|
253
237
|
},
|
|
254
238
|
getDecButtonId: (ctx) => {
|
|
255
|
-
var _a
|
|
256
|
-
return (
|
|
239
|
+
var _a;
|
|
240
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.decBtn) ?? `number-input:${ctx.id}:dec-btn`;
|
|
257
241
|
},
|
|
258
242
|
getScrubberId: (ctx) => {
|
|
259
|
-
var _a
|
|
260
|
-
return (
|
|
243
|
+
var _a;
|
|
244
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
|
|
261
245
|
},
|
|
262
|
-
getCursorId: (ctx) => `number-input:${ctx.
|
|
246
|
+
getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
|
|
263
247
|
getLabelId: (ctx) => {
|
|
264
|
-
var _a
|
|
265
|
-
return (
|
|
248
|
+
var _a;
|
|
249
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
|
|
266
250
|
},
|
|
267
|
-
getInputEl: (ctx) => dom.
|
|
268
|
-
getIncButtonEl: (ctx) => dom.
|
|
269
|
-
getDecButtonEl: (ctx) => dom.
|
|
270
|
-
getScrubberEl: (ctx) => dom.
|
|
251
|
+
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
252
|
+
getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
|
|
253
|
+
getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
|
|
254
|
+
getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
|
|
271
255
|
getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
|
|
272
256
|
getMousementValue(ctx, event) {
|
|
273
257
|
const x = roundToDevicePixel(event.movementX);
|
|
@@ -312,44 +296,43 @@ var dom = {
|
|
|
312
296
|
</svg>`;
|
|
313
297
|
doc.body.appendChild(el);
|
|
314
298
|
}
|
|
315
|
-
};
|
|
299
|
+
});
|
|
316
300
|
|
|
317
301
|
// src/number-input.utils.ts
|
|
318
302
|
var utils = {
|
|
319
303
|
isValidNumericEvent: (ctx, event) => {
|
|
320
|
-
var _a
|
|
304
|
+
var _a;
|
|
321
305
|
if (event.key == null)
|
|
322
306
|
return true;
|
|
323
307
|
const isModifier = isModifiedEvent(event);
|
|
324
308
|
const isSingleKey = event.key.length === 1;
|
|
325
309
|
if (isModifier || !isSingleKey)
|
|
326
310
|
return true;
|
|
327
|
-
return (
|
|
311
|
+
return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) ?? utils.isFloatingPoint(event.key);
|
|
328
312
|
},
|
|
329
313
|
isFloatingPoint: (v) => /^[Ee0-9+\-.]$/.test(v),
|
|
330
314
|
sanitize: (ctx, value) => {
|
|
331
|
-
|
|
332
|
-
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
315
|
+
return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
|
|
333
316
|
},
|
|
334
317
|
increment: (ctx, step) => {
|
|
335
|
-
const value = increment(ctx.value, step
|
|
318
|
+
const value = increment(ctx.value, step ?? ctx.step);
|
|
336
319
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
337
320
|
},
|
|
338
321
|
decrement: (ctx, step) => {
|
|
339
|
-
const value = decrement(ctx.value, step
|
|
322
|
+
const value = decrement(ctx.value, step ?? ctx.step);
|
|
340
323
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
341
324
|
},
|
|
342
325
|
clamp: (ctx) => {
|
|
343
326
|
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
344
327
|
},
|
|
345
328
|
parse: (ctx, value) => {
|
|
346
|
-
var _a
|
|
347
|
-
return (
|
|
329
|
+
var _a;
|
|
330
|
+
return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) ?? value;
|
|
348
331
|
},
|
|
349
332
|
format: (ctx, value) => {
|
|
350
|
-
var _a
|
|
333
|
+
var _a;
|
|
351
334
|
const _val = value.toString();
|
|
352
|
-
return (
|
|
335
|
+
return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) ?? _val;
|
|
353
336
|
},
|
|
354
337
|
round: (ctx) => {
|
|
355
338
|
return formatDecimal(ctx.value, ctx);
|
|
@@ -357,16 +340,18 @@ var utils = {
|
|
|
357
340
|
};
|
|
358
341
|
|
|
359
342
|
// src/number-input.connect.ts
|
|
360
|
-
function connect(state, send, normalize
|
|
343
|
+
function connect(state, send, normalize) {
|
|
361
344
|
const isFocused = state.hasTag("focus");
|
|
362
345
|
const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
|
|
363
346
|
const isDisabled = !!state.context.disabled;
|
|
347
|
+
const isValueEmpty = state.context.isValueEmpty;
|
|
364
348
|
const isIncrementDisabled = isDisabled || !state.context.canIncrement;
|
|
365
349
|
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
366
350
|
const messages = state.context.messages;
|
|
367
351
|
return {
|
|
368
352
|
isFocused,
|
|
369
353
|
isInvalid,
|
|
354
|
+
isValueEmpty,
|
|
370
355
|
value: state.context.formattedValue,
|
|
371
356
|
valueAsNumber: state.context.valueAsNumber,
|
|
372
357
|
setValue(value) {
|
|
@@ -545,14 +530,22 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
545
530
|
}
|
|
546
531
|
|
|
547
532
|
// src/number-input.machine.ts
|
|
548
|
-
import { choose, createMachine, guards
|
|
533
|
+
import { choose, createMachine, guards } from "@zag-js/core";
|
|
534
|
+
|
|
535
|
+
// ../../utilities/core/dist/index.mjs
|
|
536
|
+
var callAll2 = (...fns) => (...a) => {
|
|
537
|
+
fns.forEach(function(fn) {
|
|
538
|
+
fn == null ? void 0 : fn(...a);
|
|
539
|
+
});
|
|
540
|
+
};
|
|
541
|
+
|
|
542
|
+
// src/number-input.machine.ts
|
|
549
543
|
var { not, and } = guards;
|
|
550
|
-
function machine(ctx
|
|
544
|
+
function machine(ctx) {
|
|
551
545
|
return createMachine({
|
|
552
546
|
id: "number-input",
|
|
553
547
|
initial: "unknown",
|
|
554
|
-
context:
|
|
555
|
-
uid: "",
|
|
548
|
+
context: {
|
|
556
549
|
dir: "ltr",
|
|
557
550
|
focusInputOnChange: true,
|
|
558
551
|
clampValueOnBlur: true,
|
|
@@ -565,19 +558,21 @@ function machine(ctx = {}) {
|
|
|
565
558
|
min: Number.MIN_SAFE_INTEGER,
|
|
566
559
|
max: Number.MAX_SAFE_INTEGER,
|
|
567
560
|
scrubberCursorPoint: null,
|
|
568
|
-
invalid: false
|
|
569
|
-
|
|
570
|
-
messages:
|
|
561
|
+
invalid: false,
|
|
562
|
+
...ctx,
|
|
563
|
+
messages: {
|
|
571
564
|
incrementLabel: "increment value",
|
|
572
|
-
decrementLabel: "decrease value"
|
|
573
|
-
|
|
574
|
-
|
|
565
|
+
decrementLabel: "decrease value",
|
|
566
|
+
...ctx.messages
|
|
567
|
+
}
|
|
568
|
+
},
|
|
575
569
|
computed: {
|
|
576
570
|
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
577
571
|
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
578
572
|
isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
|
|
579
573
|
isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
|
|
580
574
|
isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
|
|
575
|
+
isValueEmpty: (ctx2) => ctx2.value === "",
|
|
581
576
|
canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
|
|
582
577
|
canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
|
|
583
578
|
valueText: (ctx2) => {
|
|
@@ -585,8 +580,8 @@ function machine(ctx = {}) {
|
|
|
585
580
|
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
586
581
|
},
|
|
587
582
|
formattedValue: (ctx2) => {
|
|
588
|
-
var _a
|
|
589
|
-
return (
|
|
583
|
+
var _a;
|
|
584
|
+
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
|
|
590
585
|
}
|
|
591
586
|
},
|
|
592
587
|
watch: {
|
|
@@ -612,7 +607,7 @@ function machine(ctx = {}) {
|
|
|
612
607
|
on: {
|
|
613
608
|
SETUP: {
|
|
614
609
|
target: "idle",
|
|
615
|
-
actions:
|
|
610
|
+
actions: "syncInputValue"
|
|
616
611
|
}
|
|
617
612
|
}
|
|
618
613
|
},
|
|
@@ -664,7 +659,7 @@ function machine(ctx = {}) {
|
|
|
664
659
|
actions: ["clearValue", "clearHint"]
|
|
665
660
|
},
|
|
666
661
|
{
|
|
667
|
-
guard: and("clampOnBlur", not("isInRange")),
|
|
662
|
+
guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
|
|
668
663
|
target: "idle",
|
|
669
664
|
actions: ["clampValue", "clearHint"]
|
|
670
665
|
},
|
|
@@ -750,14 +745,9 @@ function machine(ctx = {}) {
|
|
|
750
745
|
isAtMin: (ctx2) => ctx2.isAtMin,
|
|
751
746
|
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
752
747
|
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
753
|
-
isDecrementHint: (ctx2, evt) =>
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
},
|
|
757
|
-
isIncrementHint: (ctx2, evt) => {
|
|
758
|
-
var _a;
|
|
759
|
-
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
760
|
-
},
|
|
748
|
+
isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
|
|
749
|
+
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
750
|
+
isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
|
|
761
751
|
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
762
752
|
},
|
|
763
753
|
activities: {
|
|
@@ -813,17 +803,10 @@ function machine(ctx = {}) {
|
|
|
813
803
|
function onMouseup() {
|
|
814
804
|
send("POINTER_UP_SCRUBBER");
|
|
815
805
|
}
|
|
816
|
-
return
|
|
806
|
+
return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
|
|
817
807
|
}
|
|
818
808
|
},
|
|
819
809
|
actions: {
|
|
820
|
-
setupDocument: (ctx2, evt) => {
|
|
821
|
-
if (evt.doc)
|
|
822
|
-
ctx2.doc = ref(evt.doc);
|
|
823
|
-
if (evt.root)
|
|
824
|
-
ctx2.rootNode = ref(evt.root);
|
|
825
|
-
ctx2.uid = evt.id;
|
|
826
|
-
},
|
|
827
810
|
focusInput(ctx2) {
|
|
828
811
|
if (!ctx2.focusInputOnChange)
|
|
829
812
|
return;
|
|
@@ -845,9 +828,9 @@ function machine(ctx = {}) {
|
|
|
845
828
|
}
|
|
846
829
|
},
|
|
847
830
|
setValue(ctx2, evt) {
|
|
848
|
-
var _a
|
|
849
|
-
const value = (
|
|
850
|
-
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value));
|
|
831
|
+
var _a;
|
|
832
|
+
const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
|
|
833
|
+
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
851
834
|
},
|
|
852
835
|
clearValue(ctx2) {
|
|
853
836
|
ctx2.value = "";
|
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.13",
|
|
4
4
|
"description": "Core logic for the number-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,20 +29,22 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"@zag-js/
|
|
37
|
-
"@zag-js/utils": "0.1.
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
37
|
+
"@zag-js/number-utils": "0.1.3",
|
|
38
|
+
"@zag-js/utils": "0.1.3"
|
|
38
39
|
},
|
|
39
40
|
"scripts": {
|
|
40
|
-
"build
|
|
41
|
-
"start": "
|
|
42
|
-
"build": "
|
|
41
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
42
|
+
"start": "pnpm build --watch",
|
|
43
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
43
44
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
44
45
|
"lint": "eslint src --ext .ts,.tsx",
|
|
45
|
-
"test
|
|
46
|
-
"test
|
|
46
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
+
"test-watch": "pnpm test --watch -u",
|
|
48
|
+
"typecheck": "tsc --noEmit"
|
|
47
49
|
}
|
|
48
|
-
}
|
|
50
|
+
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { PropTypes, ReactPropTypes } from "@zag-js/types";
|
|
2
|
-
import { Send, State } from "./number-input.types";
|
|
3
|
-
export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
|
|
4
|
-
isFocused: boolean;
|
|
5
|
-
isInvalid: boolean;
|
|
6
|
-
value: string;
|
|
7
|
-
valueAsNumber: number;
|
|
8
|
-
setValue(value: string | number): void;
|
|
9
|
-
clearValue(): void;
|
|
10
|
-
increment(): void;
|
|
11
|
-
decrement(): void;
|
|
12
|
-
setToMax(): void;
|
|
13
|
-
setToMin(): void;
|
|
14
|
-
focus(): void;
|
|
15
|
-
rootProps: T["element"];
|
|
16
|
-
labelProps: T["label"];
|
|
17
|
-
groupProps: T["element"];
|
|
18
|
-
inputProps: T["input"];
|
|
19
|
-
decrementButtonProps: T["button"];
|
|
20
|
-
incrementButtonProps: T["button"];
|
|
21
|
-
scrubberProps: T["element"];
|
|
22
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { MachineContext as Ctx } from "./number-input.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getDoc: (ctx: Ctx) => Document;
|
|
4
|
-
getWin: (ctx: Ctx) => Window & typeof globalThis;
|
|
5
|
-
getRootNode: (ctx: Ctx) => Document | ShadowRoot;
|
|
6
|
-
getRootId: (ctx: Ctx) => string;
|
|
7
|
-
getInputId: (ctx: Ctx) => string;
|
|
8
|
-
getIncButtonId: (ctx: Ctx) => string;
|
|
9
|
-
getDecButtonId: (ctx: Ctx) => string;
|
|
10
|
-
getScrubberId: (ctx: Ctx) => string;
|
|
11
|
-
getCursorId: (ctx: Ctx) => string;
|
|
12
|
-
getLabelId: (ctx: Ctx) => string;
|
|
13
|
-
getInputEl: (ctx: Ctx) => HTMLInputElement;
|
|
14
|
-
getIncButtonEl: (ctx: Ctx) => HTMLButtonElement;
|
|
15
|
-
getDecButtonEl: (ctx: Ctx) => HTMLButtonElement;
|
|
16
|
-
getScrubberEl: (ctx: Ctx) => HTMLElement;
|
|
17
|
-
getCursorEl: (ctx: Ctx) => HTMLElement;
|
|
18
|
-
getMousementValue(ctx: Ctx, event: MouseEvent): {
|
|
19
|
-
hint: string;
|
|
20
|
-
point: {
|
|
21
|
-
x: number;
|
|
22
|
-
y: number;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
createVirtualCursor(ctx: Ctx): void;
|
|
26
|
-
};
|