@zag-js/number-input 0.1.2 → 0.1.5
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 +195 -145
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +195 -145
- package/dist/index.mjs.map +3 -3
- package/dist/number-input.connect.d.ts +1 -0
- package/dist/number-input.connect.d.ts.map +1 -1
- package/dist/number-input.dom.d.ts +1 -0
- package/dist/number-input.dom.d.ts.map +1 -1
- package/dist/number-input.machine.d.ts.map +1 -1
- package/dist/number-input.types.d.ts +5 -13
- package/dist/number-input.types.d.ts.map +1 -1
- package/dist/number-input.utils.d.ts +1 -1
- package/dist/number-input.utils.d.ts.map +1 -1
- package/package.json +7 -7
package/dist/index.js
CHANGED
|
@@ -45,17 +45,13 @@ module.exports = __toCommonJS(src_exports);
|
|
|
45
45
|
var dataAttr = (guard) => {
|
|
46
46
|
return guard ? "" : void 0;
|
|
47
47
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
raf2(() => raf2(fn));
|
|
48
|
+
var ariaAttr = (guard) => {
|
|
49
|
+
return guard ? "true" : void 0;
|
|
50
|
+
};
|
|
51
|
+
function raf(fn) {
|
|
52
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
55
53
|
return function cleanup() {
|
|
56
|
-
|
|
57
|
-
fn2();
|
|
58
|
-
});
|
|
54
|
+
globalThis.cancelAnimationFrame(id);
|
|
59
55
|
};
|
|
60
56
|
}
|
|
61
57
|
var noop = () => {
|
|
@@ -130,11 +126,11 @@ function addDomEvent(target, event, listener, options) {
|
|
|
130
126
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
131
127
|
return globalEventBus(node, event, listener, options);
|
|
132
128
|
}
|
|
129
|
+
var MAX_Z_INDEX = 2147483647;
|
|
133
130
|
function getNativeEvent(event) {
|
|
134
131
|
var _a;
|
|
135
132
|
return (_a = event.nativeEvent) != null ? _a : event;
|
|
136
133
|
}
|
|
137
|
-
var MAX_Z_INDEX = 2147483647;
|
|
138
134
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
139
135
|
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
140
136
|
function getEventStep(event) {
|
|
@@ -161,6 +157,30 @@ function observeAttributes(node, attributes, fn) {
|
|
|
161
157
|
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
162
158
|
return () => obs.disconnect();
|
|
163
159
|
}
|
|
160
|
+
function itemById(v, id) {
|
|
161
|
+
return v.find((node) => node.id === id);
|
|
162
|
+
}
|
|
163
|
+
function indexOfId(v, id) {
|
|
164
|
+
const item = itemById(v, id);
|
|
165
|
+
return item ? v.indexOf(item) : -1;
|
|
166
|
+
}
|
|
167
|
+
var getValueText = (item) => {
|
|
168
|
+
var _a, _b;
|
|
169
|
+
return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
|
|
170
|
+
};
|
|
171
|
+
var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
|
|
172
|
+
var wrap = (v, idx) => {
|
|
173
|
+
return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
|
|
174
|
+
};
|
|
175
|
+
function findByText(v, text, currentId) {
|
|
176
|
+
const index = currentId ? indexOfId(v, currentId) : -1;
|
|
177
|
+
let items = currentId ? wrap(v, index) : v;
|
|
178
|
+
const isSingleKey = text.length === 1;
|
|
179
|
+
if (isSingleKey) {
|
|
180
|
+
items = items.filter((item) => item.id !== currentId);
|
|
181
|
+
}
|
|
182
|
+
return items.find((item) => match(getValueText(item), text));
|
|
183
|
+
}
|
|
164
184
|
function addPointerlockChangeListener(doc, fn) {
|
|
165
185
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
166
186
|
}
|
|
@@ -201,42 +221,41 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
201
221
|
exit();
|
|
202
222
|
};
|
|
203
223
|
}
|
|
224
|
+
function findByTypeahead(_items, options) {
|
|
225
|
+
const { state: state2, activeId, key, timeout = 350 } = options;
|
|
226
|
+
const search = state2.keysSoFar + key;
|
|
227
|
+
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
228
|
+
const query2 = isRepeated ? search[0] : search;
|
|
229
|
+
let items = _items.slice();
|
|
230
|
+
const next = findByText(items, query2, activeId);
|
|
231
|
+
function cleanup() {
|
|
232
|
+
clearTimeout(state2.timer);
|
|
233
|
+
state2.timer = -1;
|
|
234
|
+
}
|
|
235
|
+
function update(value) {
|
|
236
|
+
state2.keysSoFar = value;
|
|
237
|
+
cleanup();
|
|
238
|
+
if (value !== "") {
|
|
239
|
+
state2.timer = +setTimeout(() => {
|
|
240
|
+
update("");
|
|
241
|
+
cleanup();
|
|
242
|
+
}, timeout);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
update(search);
|
|
246
|
+
return next;
|
|
247
|
+
}
|
|
248
|
+
findByTypeahead.defaultOptions = {
|
|
249
|
+
keysSoFar: "",
|
|
250
|
+
timer: -1
|
|
251
|
+
};
|
|
204
252
|
|
|
205
253
|
// ../../utilities/number/dist/index.mjs
|
|
206
|
-
var __defProp2 = Object.defineProperty;
|
|
207
|
-
var __defProps2 = Object.defineProperties;
|
|
208
|
-
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
|
|
209
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
210
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
211
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
212
254
|
var __pow = Math.pow;
|
|
213
|
-
|
|
214
|
-
var __spreadValues2 = (a, b) => {
|
|
215
|
-
for (var prop in b || (b = {}))
|
|
216
|
-
if (__hasOwnProp2.call(b, prop))
|
|
217
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
218
|
-
if (__getOwnPropSymbols2)
|
|
219
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
220
|
-
if (__propIsEnum2.call(b, prop))
|
|
221
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
222
|
-
}
|
|
223
|
-
return a;
|
|
224
|
-
};
|
|
225
|
-
var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
|
|
226
|
-
var nf = new Intl.NumberFormat("en-US", { style: "decimal" });
|
|
227
|
-
function formatter(n) {
|
|
228
|
-
return parseFloat(nf.format(n));
|
|
229
|
-
}
|
|
230
|
-
function wrap(num, max) {
|
|
255
|
+
function wrap2(num, max) {
|
|
231
256
|
return (num % max + max) % max;
|
|
232
257
|
}
|
|
233
|
-
function
|
|
234
|
-
let num = valueOf(v);
|
|
235
|
-
const p = __pow(10, t2 != null ? t2 : 10);
|
|
236
|
-
num = Math.round(num * p) / p;
|
|
237
|
-
return t2 ? num.toFixed(t2) : v.toString();
|
|
238
|
-
}
|
|
239
|
-
function roundToPx(num) {
|
|
258
|
+
function roundToDevicePixel(num) {
|
|
240
259
|
if (typeof window === "undefined")
|
|
241
260
|
return Math.round(num);
|
|
242
261
|
const dp = window.devicePixelRatio;
|
|
@@ -245,28 +264,31 @@ function roundToPx(num) {
|
|
|
245
264
|
function clamp(v, o) {
|
|
246
265
|
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
247
266
|
}
|
|
248
|
-
function countDecimals(
|
|
249
|
-
|
|
250
|
-
|
|
267
|
+
function countDecimals(value) {
|
|
268
|
+
if (!Number.isFinite(value))
|
|
269
|
+
return 0;
|
|
270
|
+
let e = 1, p = 0;
|
|
271
|
+
while (Math.round(value * e) / e !== value) {
|
|
272
|
+
e *= 10;
|
|
273
|
+
p += 1;
|
|
274
|
+
}
|
|
275
|
+
return p;
|
|
251
276
|
}
|
|
252
|
-
var increment = (v, s) =>
|
|
253
|
-
var decrement = (v, s) =>
|
|
254
|
-
var multiply = (v, s) => formatter(valueOf(v) * s);
|
|
277
|
+
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
278
|
+
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
255
279
|
function valueOf(v) {
|
|
256
280
|
if (typeof v === "number")
|
|
257
281
|
return v;
|
|
258
282
|
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
259
283
|
return !Number.isNaN(num) ? num : 0;
|
|
260
284
|
}
|
|
261
|
-
function
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
}
|
|
268
|
-
function roundToPrecision(v, o) {
|
|
269
|
-
return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
|
|
285
|
+
function formatDecimal(v, o) {
|
|
286
|
+
return new Intl.NumberFormat("en-US", {
|
|
287
|
+
useGrouping: false,
|
|
288
|
+
style: "decimal",
|
|
289
|
+
minimumFractionDigits: o.minFractionDigits,
|
|
290
|
+
maximumFractionDigits: o.maxFractionDigits
|
|
291
|
+
}).format(valueOf(v));
|
|
270
292
|
}
|
|
271
293
|
function isAtMax(v, o) {
|
|
272
294
|
const val = valueOf(v);
|
|
@@ -280,6 +302,18 @@ function isWithinRange(v, o) {
|
|
|
280
302
|
const val = valueOf(v);
|
|
281
303
|
return val >= o.min && val <= o.max;
|
|
282
304
|
}
|
|
305
|
+
function decimalOperation(a, op, b) {
|
|
306
|
+
let result = op === "+" ? a + b : a - b;
|
|
307
|
+
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
308
|
+
const multiplier = __pow(10, Math.max(countDecimals(a), countDecimals(b)));
|
|
309
|
+
a = Math.round(a * multiplier);
|
|
310
|
+
b = Math.round(b * multiplier);
|
|
311
|
+
result = op === "+" ? a + b : a - b;
|
|
312
|
+
result /= multiplier;
|
|
313
|
+
}
|
|
314
|
+
return result;
|
|
315
|
+
}
|
|
316
|
+
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
283
317
|
|
|
284
318
|
// ../../utilities/rect/dist/index.mjs
|
|
285
319
|
var isArray = (v) => Array.isArray(v);
|
|
@@ -297,6 +331,19 @@ function createNormalizer(fn) {
|
|
|
297
331
|
}
|
|
298
332
|
var normalizeProp = createNormalizer((v) => v);
|
|
299
333
|
|
|
334
|
+
// ../../utilities/core/dist/index.mjs
|
|
335
|
+
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
336
|
+
var platform = (v) => isDom() && v.test(navigator.platform);
|
|
337
|
+
var ua = (v) => isDom() && v.test(navigator.userAgent);
|
|
338
|
+
var isDom = () => !!(typeof window !== "undefined");
|
|
339
|
+
var isMac = () => platform(/^Mac/);
|
|
340
|
+
var isIPhone = () => platform(/^iPhone/);
|
|
341
|
+
var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
|
|
342
|
+
var isIos = () => isIPhone() || isIPad();
|
|
343
|
+
var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
|
|
344
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
345
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
346
|
+
|
|
300
347
|
// src/number-input.dom.ts
|
|
301
348
|
var dom = {
|
|
302
349
|
getDoc: (ctx) => {
|
|
@@ -307,6 +354,10 @@ var dom = {
|
|
|
307
354
|
var _a;
|
|
308
355
|
return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
|
|
309
356
|
},
|
|
357
|
+
getRootNode: (ctx) => {
|
|
358
|
+
var _a;
|
|
359
|
+
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
360
|
+
},
|
|
310
361
|
getRootId: (ctx) => {
|
|
311
362
|
var _a, _b;
|
|
312
363
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
|
|
@@ -332,14 +383,14 @@ var dom = {
|
|
|
332
383
|
var _a, _b;
|
|
333
384
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
|
|
334
385
|
},
|
|
335
|
-
getInputEl: (ctx) => dom.
|
|
336
|
-
getIncButtonEl: (ctx) => dom.
|
|
337
|
-
getDecButtonEl: (ctx) => dom.
|
|
338
|
-
getScrubberEl: (ctx) => dom.
|
|
386
|
+
getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
|
|
387
|
+
getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
|
|
388
|
+
getDecButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDecButtonId(ctx)),
|
|
389
|
+
getScrubberEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getScrubberId(ctx)),
|
|
339
390
|
getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
|
|
340
391
|
getMousementValue(ctx, event) {
|
|
341
|
-
const x =
|
|
342
|
-
const y =
|
|
392
|
+
const x = roundToDevicePixel(event.movementX);
|
|
393
|
+
const y = roundToDevicePixel(event.movementY);
|
|
343
394
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
344
395
|
if (ctx.isRtl && hint === "increment")
|
|
345
396
|
hint = "decrement";
|
|
@@ -351,8 +402,8 @@ var dom = {
|
|
|
351
402
|
};
|
|
352
403
|
const win = dom.getWin(ctx);
|
|
353
404
|
const width = win.innerWidth;
|
|
354
|
-
const half =
|
|
355
|
-
point.x =
|
|
405
|
+
const half = roundToDevicePixel(7.5);
|
|
406
|
+
point.x = wrap2(point.x + half, width) - half;
|
|
356
407
|
return { hint, point };
|
|
357
408
|
},
|
|
358
409
|
createVirtualCursor(ctx) {
|
|
@@ -388,9 +439,9 @@ var utils = {
|
|
|
388
439
|
var _a, _b;
|
|
389
440
|
if (event.key == null)
|
|
390
441
|
return true;
|
|
391
|
-
const
|
|
392
|
-
const
|
|
393
|
-
if (
|
|
442
|
+
const isModifier = isModifiedEvent(event);
|
|
443
|
+
const isSingleKey = event.key.length === 1;
|
|
444
|
+
if (isModifier || !isSingleKey)
|
|
394
445
|
return true;
|
|
395
446
|
return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
|
|
396
447
|
},
|
|
@@ -400,18 +451,15 @@ var utils = {
|
|
|
400
451
|
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
401
452
|
},
|
|
402
453
|
increment: (ctx, step) => {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
return roundToPrecision(value, ctx);
|
|
454
|
+
const value = increment(ctx.value, step != null ? step : ctx.step);
|
|
455
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
406
456
|
},
|
|
407
457
|
decrement: (ctx, step) => {
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
return roundToPrecision(value, ctx);
|
|
458
|
+
const value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
459
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
411
460
|
},
|
|
412
461
|
clamp: (ctx) => {
|
|
413
|
-
|
|
414
|
-
return roundToPrecision(value, ctx);
|
|
462
|
+
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
415
463
|
},
|
|
416
464
|
parse: (ctx, value) => {
|
|
417
465
|
var _a, _b;
|
|
@@ -423,7 +471,7 @@ var utils = {
|
|
|
423
471
|
return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
|
|
424
472
|
},
|
|
425
473
|
round: (ctx) => {
|
|
426
|
-
return
|
|
474
|
+
return formatDecimal(ctx.value, ctx);
|
|
427
475
|
}
|
|
428
476
|
};
|
|
429
477
|
|
|
@@ -444,7 +492,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
444
492
|
send({ type: "SET_VALUE", value: value.toString() });
|
|
445
493
|
},
|
|
446
494
|
clearValue() {
|
|
447
|
-
send(
|
|
495
|
+
send("CLEAR_VALUE");
|
|
448
496
|
},
|
|
449
497
|
increment() {
|
|
450
498
|
send("INCREMENT");
|
|
@@ -459,10 +507,8 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
459
507
|
send({ type: "SET_VALUE", value: state.context.min });
|
|
460
508
|
},
|
|
461
509
|
focus() {
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
465
|
-
});
|
|
510
|
+
var _a;
|
|
511
|
+
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
466
512
|
},
|
|
467
513
|
rootProps: normalize.element({
|
|
468
514
|
id: dom.getRootId(state.context),
|
|
@@ -476,6 +522,14 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
476
522
|
id: dom.getLabelId(state.context),
|
|
477
523
|
htmlFor: dom.getInputId(state.context)
|
|
478
524
|
}),
|
|
525
|
+
groupProps: normalize.element({
|
|
526
|
+
"data-part": "group",
|
|
527
|
+
role: "group",
|
|
528
|
+
"aria-disabled": isDisabled,
|
|
529
|
+
"data-disabled": dataAttr(isDisabled),
|
|
530
|
+
"data-invalid": dataAttr(isInvalid),
|
|
531
|
+
"aria-invalid": ariaAttr(state.context.invalid)
|
|
532
|
+
}),
|
|
479
533
|
inputProps: normalize.input({
|
|
480
534
|
"data-part": "input",
|
|
481
535
|
name: state.context.name,
|
|
@@ -493,7 +547,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
493
547
|
autoCorrect: "off",
|
|
494
548
|
spellCheck: "false",
|
|
495
549
|
type: "text",
|
|
496
|
-
"aria-roledescription": "number field",
|
|
550
|
+
"aria-roledescription": !isIos() ? "number field" : void 0,
|
|
497
551
|
"aria-valuemin": state.context.min,
|
|
498
552
|
"aria-valuemax": state.context.max,
|
|
499
553
|
"aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
|
|
@@ -517,7 +571,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
517
571
|
if (!utils.isValidNumericEvent(state.context, event)) {
|
|
518
572
|
event.preventDefault();
|
|
519
573
|
}
|
|
520
|
-
const step =
|
|
574
|
+
const step = getEventStep(event) * state.context.step;
|
|
521
575
|
const keyMap = {
|
|
522
576
|
ArrowUp() {
|
|
523
577
|
send({ type: "ARROW_UP", step });
|
|
@@ -541,6 +595,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
541
595
|
}),
|
|
542
596
|
decrementButtonProps: normalize.button({
|
|
543
597
|
"data-part": "spin-button",
|
|
598
|
+
"data-type": "decrement",
|
|
544
599
|
id: dom.getDecButtonId(state.context),
|
|
545
600
|
disabled: isDecrementDisabled,
|
|
546
601
|
"data-disabled": dataAttr(isDecrementDisabled),
|
|
@@ -565,6 +620,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
565
620
|
}),
|
|
566
621
|
incrementButtonProps: normalize.button({
|
|
567
622
|
"data-part": "spin-button",
|
|
623
|
+
"data-type": "increment",
|
|
568
624
|
id: dom.getIncButtonId(state.context),
|
|
569
625
|
disabled: isIncrementDisabled,
|
|
570
626
|
"data-disabled": dataAttr(isIncrementDisabled),
|
|
@@ -596,8 +652,8 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
596
652
|
const evt = getNativeEvent(event);
|
|
597
653
|
event.preventDefault();
|
|
598
654
|
const point = getEventPoint(evt);
|
|
599
|
-
point.x = point.x -
|
|
600
|
-
point.y = point.y -
|
|
655
|
+
point.x = point.x - roundToDevicePixel(7.5);
|
|
656
|
+
point.y = point.y - roundToDevicePixel(7.5);
|
|
601
657
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
602
658
|
},
|
|
603
659
|
style: {
|
|
@@ -609,15 +665,6 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
609
665
|
|
|
610
666
|
// src/number-input.machine.ts
|
|
611
667
|
var import_core = require("@zag-js/core");
|
|
612
|
-
|
|
613
|
-
// ../../utilities/core/dist/index.mjs
|
|
614
|
-
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
615
|
-
var ua = (v) => isDom() && v.test(navigator.userAgent);
|
|
616
|
-
var isDom = () => !!(typeof window !== "undefined");
|
|
617
|
-
var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
|
|
618
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
619
|
-
|
|
620
|
-
// src/number-input.machine.ts
|
|
621
668
|
var { not, and } = import_core.guards;
|
|
622
669
|
function machine(ctx = {}) {
|
|
623
670
|
return (0, import_core.createMachine)({
|
|
@@ -636,8 +683,6 @@ function machine(ctx = {}) {
|
|
|
636
683
|
step: 1,
|
|
637
684
|
min: Number.MIN_SAFE_INTEGER,
|
|
638
685
|
max: Number.MAX_SAFE_INTEGER,
|
|
639
|
-
precision: 0,
|
|
640
|
-
inputSelection: null,
|
|
641
686
|
scrubberCursorPoint: null,
|
|
642
687
|
invalid: false
|
|
643
688
|
}, ctx), {
|
|
@@ -667,20 +712,26 @@ function machine(ctx = {}) {
|
|
|
667
712
|
value: ["invokeOnChange"],
|
|
668
713
|
isOutOfRange: ["invokeOnInvalid"]
|
|
669
714
|
},
|
|
670
|
-
entry: ["syncInputValue"],
|
|
671
715
|
on: {
|
|
672
716
|
SET_VALUE: {
|
|
673
717
|
actions: ["setValue", "setHintToSet"]
|
|
674
718
|
},
|
|
675
|
-
|
|
676
|
-
|
|
719
|
+
CLEAR_VALUE: {
|
|
720
|
+
actions: ["clearValue"]
|
|
721
|
+
},
|
|
722
|
+
INCREMENT: {
|
|
723
|
+
actions: ["increment"]
|
|
724
|
+
},
|
|
725
|
+
DECREMENT: {
|
|
726
|
+
actions: ["decrement"]
|
|
727
|
+
}
|
|
677
728
|
},
|
|
678
729
|
states: {
|
|
679
730
|
unknown: {
|
|
680
731
|
on: {
|
|
681
732
|
SETUP: {
|
|
682
733
|
target: "idle",
|
|
683
|
-
actions: "setupDocument"
|
|
734
|
+
actions: ["setupDocument", "syncInputValue"]
|
|
684
735
|
}
|
|
685
736
|
}
|
|
686
737
|
},
|
|
@@ -722,7 +773,7 @@ function machine(ctx = {}) {
|
|
|
722
773
|
actions: "setToMax"
|
|
723
774
|
},
|
|
724
775
|
CHANGE: {
|
|
725
|
-
actions: ["setValue", "
|
|
776
|
+
actions: ["setValue", "setHint"]
|
|
726
777
|
},
|
|
727
778
|
BLUR: [
|
|
728
779
|
{
|
|
@@ -736,6 +787,7 @@ function machine(ctx = {}) {
|
|
|
736
787
|
actions: ["clampValue", "clearHint"]
|
|
737
788
|
},
|
|
738
789
|
{
|
|
790
|
+
target: "idle",
|
|
739
791
|
actions: ["roundValue"]
|
|
740
792
|
}
|
|
741
793
|
]
|
|
@@ -756,7 +808,7 @@ function machine(ctx = {}) {
|
|
|
756
808
|
on: {
|
|
757
809
|
PRESS_UP: {
|
|
758
810
|
target: "focused",
|
|
759
|
-
actions:
|
|
811
|
+
actions: "clearHint"
|
|
760
812
|
}
|
|
761
813
|
}
|
|
762
814
|
},
|
|
@@ -778,7 +830,7 @@ function machine(ctx = {}) {
|
|
|
778
830
|
on: {
|
|
779
831
|
PRESS_UP: {
|
|
780
832
|
target: "focused",
|
|
781
|
-
actions:
|
|
833
|
+
actions: "clearHint"
|
|
782
834
|
}
|
|
783
835
|
}
|
|
784
836
|
},
|
|
@@ -838,26 +890,23 @@ function machine(ctx = {}) {
|
|
|
838
890
|
send("PRESS_UP");
|
|
839
891
|
});
|
|
840
892
|
},
|
|
841
|
-
attachWheelListener(ctx2) {
|
|
842
|
-
const
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
893
|
+
attachWheelListener(ctx2, _evt, { send }) {
|
|
894
|
+
const input = dom.getInputEl(ctx2);
|
|
895
|
+
if (!input)
|
|
896
|
+
return;
|
|
897
|
+
function onWheel(event) {
|
|
898
|
+
const isInputFocused = dom.getDoc(ctx2).activeElement === input;
|
|
899
|
+
if (!ctx2.allowMouseWheel || !isInputFocused)
|
|
846
900
|
return;
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
if (dir === 1)
|
|
854
|
-
ctx2.value = utils.increment(ctx2);
|
|
855
|
-
else if (dir === -1)
|
|
856
|
-
ctx2.value = utils.decrement(ctx2);
|
|
901
|
+
event.preventDefault();
|
|
902
|
+
const dir = Math.sign(event.deltaY) * -1;
|
|
903
|
+
if (dir === 1) {
|
|
904
|
+
send("INCREMENT");
|
|
905
|
+
} else if (dir === -1) {
|
|
906
|
+
send("DECREMENT");
|
|
857
907
|
}
|
|
858
|
-
|
|
859
|
-
})
|
|
860
|
-
return () => cleanups.forEach((c) => c());
|
|
908
|
+
}
|
|
909
|
+
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
861
910
|
},
|
|
862
911
|
activatePointerLock(ctx2) {
|
|
863
912
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -872,7 +921,11 @@ function machine(ctx = {}) {
|
|
|
872
921
|
const value = dom.getMousementValue(ctx2, event);
|
|
873
922
|
if (!value.hint)
|
|
874
923
|
return;
|
|
875
|
-
send({
|
|
924
|
+
send({
|
|
925
|
+
type: "POINTER_MOVE_SCRUBBER",
|
|
926
|
+
hint: value.hint,
|
|
927
|
+
point: value.point
|
|
928
|
+
});
|
|
876
929
|
}
|
|
877
930
|
function onMouseup() {
|
|
878
931
|
send("POINTER_UP_SCRUBBER");
|
|
@@ -884,13 +937,15 @@ function machine(ctx = {}) {
|
|
|
884
937
|
setupDocument: (ctx2, evt) => {
|
|
885
938
|
if (evt.doc)
|
|
886
939
|
ctx2.doc = (0, import_core.ref)(evt.doc);
|
|
940
|
+
if (evt.root)
|
|
941
|
+
ctx2.rootNode = (0, import_core.ref)(evt.root);
|
|
887
942
|
ctx2.uid = evt.id;
|
|
888
943
|
},
|
|
889
944
|
focusInput(ctx2) {
|
|
890
945
|
if (!ctx2.focusInputOnChange)
|
|
891
946
|
return;
|
|
892
947
|
const input = dom.getInputEl(ctx2);
|
|
893
|
-
|
|
948
|
+
raf(() => input == null ? void 0 : input.focus());
|
|
894
949
|
},
|
|
895
950
|
increment(ctx2, evt) {
|
|
896
951
|
ctx2.value = utils.increment(ctx2, evt.step);
|
|
@@ -902,7 +957,9 @@ function machine(ctx = {}) {
|
|
|
902
957
|
ctx2.value = utils.clamp(ctx2);
|
|
903
958
|
},
|
|
904
959
|
roundValue(ctx2) {
|
|
905
|
-
ctx2.value
|
|
960
|
+
if (ctx2.value !== "") {
|
|
961
|
+
ctx2.value = utils.round(ctx2);
|
|
962
|
+
}
|
|
906
963
|
},
|
|
907
964
|
setValue(ctx2, evt) {
|
|
908
965
|
var _a, _b;
|
|
@@ -927,30 +984,23 @@ function machine(ctx = {}) {
|
|
|
927
984
|
setHintToSet(ctx2) {
|
|
928
985
|
ctx2.hint = "set";
|
|
929
986
|
},
|
|
930
|
-
setSelectionRange(ctx2, evt) {
|
|
931
|
-
ctx2.inputSelection = {
|
|
932
|
-
start: evt.target.selectionStart,
|
|
933
|
-
end: evt.target.selectionEnd
|
|
934
|
-
};
|
|
935
|
-
},
|
|
936
|
-
restoreSelection(ctx2) {
|
|
937
|
-
var _a, _b, _c;
|
|
938
|
-
const input = dom.getInputEl(ctx2);
|
|
939
|
-
if (!input || !ctx2.inputSelection)
|
|
940
|
-
return;
|
|
941
|
-
input.selectionStart = (_b = ctx2.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
|
|
942
|
-
input.selectionEnd = (_c = ctx2.inputSelection.end) != null ? _c : input.selectionStart;
|
|
943
|
-
},
|
|
944
987
|
invokeOnChange(ctx2) {
|
|
945
988
|
var _a;
|
|
946
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
989
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
990
|
+
value: ctx2.value,
|
|
991
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
992
|
+
});
|
|
947
993
|
},
|
|
948
994
|
invokeOnInvalid(ctx2) {
|
|
949
995
|
var _a;
|
|
950
996
|
if (!ctx2.isOutOfRange)
|
|
951
997
|
return;
|
|
952
998
|
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
|
|
953
|
-
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
999
|
+
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
1000
|
+
reason,
|
|
1001
|
+
value: ctx2.formattedValue,
|
|
1002
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
1003
|
+
});
|
|
954
1004
|
},
|
|
955
1005
|
syncInputValue(ctx2) {
|
|
956
1006
|
const input = dom.getInputEl(ctx2);
|
|
@@ -969,7 +1019,8 @@ function machine(ctx = {}) {
|
|
|
969
1019
|
const cursor = dom.getCursorEl(ctx2);
|
|
970
1020
|
if (!cursor || !ctx2.scrubberCursorPoint)
|
|
971
1021
|
return;
|
|
972
|
-
|
|
1022
|
+
const { x, y } = ctx2.scrubberCursorPoint;
|
|
1023
|
+
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
973
1024
|
},
|
|
974
1025
|
addCustomCursor(ctx2) {
|
|
975
1026
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -977,11 +1028,10 @@ function machine(ctx = {}) {
|
|
|
977
1028
|
dom.createVirtualCursor(ctx2);
|
|
978
1029
|
},
|
|
979
1030
|
removeCustomCursor(ctx2) {
|
|
1031
|
+
var _a;
|
|
980
1032
|
if (isSafari() || !supportsPointerEvent())
|
|
981
1033
|
return;
|
|
982
|
-
|
|
983
|
-
const el = doc.getElementById(dom.getCursorId(ctx2));
|
|
984
|
-
el == null ? void 0 : el.remove();
|
|
1034
|
+
(_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
|
|
985
1035
|
},
|
|
986
1036
|
disableTextSelection(ctx2) {
|
|
987
1037
|
const doc = dom.getDoc(ctx2);
|