@zag-js/number-input 0.1.1 → 0.1.4
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 +192 -144
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +192 -144
- 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 = () => {
|
|
@@ -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 });
|
|
@@ -596,8 +650,8 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
596
650
|
const evt = getNativeEvent(event);
|
|
597
651
|
event.preventDefault();
|
|
598
652
|
const point = getEventPoint(evt);
|
|
599
|
-
point.x = point.x -
|
|
600
|
-
point.y = point.y -
|
|
653
|
+
point.x = point.x - roundToDevicePixel(7.5);
|
|
654
|
+
point.y = point.y - roundToDevicePixel(7.5);
|
|
601
655
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
602
656
|
},
|
|
603
657
|
style: {
|
|
@@ -609,15 +663,6 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
609
663
|
|
|
610
664
|
// src/number-input.machine.ts
|
|
611
665
|
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
666
|
var { not, and } = import_core.guards;
|
|
622
667
|
function machine(ctx = {}) {
|
|
623
668
|
return (0, import_core.createMachine)({
|
|
@@ -636,8 +681,6 @@ function machine(ctx = {}) {
|
|
|
636
681
|
step: 1,
|
|
637
682
|
min: Number.MIN_SAFE_INTEGER,
|
|
638
683
|
max: Number.MAX_SAFE_INTEGER,
|
|
639
|
-
precision: 0,
|
|
640
|
-
inputSelection: null,
|
|
641
684
|
scrubberCursorPoint: null,
|
|
642
685
|
invalid: false
|
|
643
686
|
}, ctx), {
|
|
@@ -667,20 +710,26 @@ function machine(ctx = {}) {
|
|
|
667
710
|
value: ["invokeOnChange"],
|
|
668
711
|
isOutOfRange: ["invokeOnInvalid"]
|
|
669
712
|
},
|
|
670
|
-
entry: ["syncInputValue"],
|
|
671
713
|
on: {
|
|
672
714
|
SET_VALUE: {
|
|
673
715
|
actions: ["setValue", "setHintToSet"]
|
|
674
716
|
},
|
|
675
|
-
|
|
676
|
-
|
|
717
|
+
CLEAR_VALUE: {
|
|
718
|
+
actions: ["clearValue"]
|
|
719
|
+
},
|
|
720
|
+
INCREMENT: {
|
|
721
|
+
actions: ["increment"]
|
|
722
|
+
},
|
|
723
|
+
DECREMENT: {
|
|
724
|
+
actions: ["decrement"]
|
|
725
|
+
}
|
|
677
726
|
},
|
|
678
727
|
states: {
|
|
679
728
|
unknown: {
|
|
680
729
|
on: {
|
|
681
730
|
SETUP: {
|
|
682
731
|
target: "idle",
|
|
683
|
-
actions: "setupDocument"
|
|
732
|
+
actions: ["setupDocument", "syncInputValue"]
|
|
684
733
|
}
|
|
685
734
|
}
|
|
686
735
|
},
|
|
@@ -722,7 +771,7 @@ function machine(ctx = {}) {
|
|
|
722
771
|
actions: "setToMax"
|
|
723
772
|
},
|
|
724
773
|
CHANGE: {
|
|
725
|
-
actions: ["setValue", "
|
|
774
|
+
actions: ["setValue", "setHint"]
|
|
726
775
|
},
|
|
727
776
|
BLUR: [
|
|
728
777
|
{
|
|
@@ -736,6 +785,7 @@ function machine(ctx = {}) {
|
|
|
736
785
|
actions: ["clampValue", "clearHint"]
|
|
737
786
|
},
|
|
738
787
|
{
|
|
788
|
+
target: "idle",
|
|
739
789
|
actions: ["roundValue"]
|
|
740
790
|
}
|
|
741
791
|
]
|
|
@@ -756,7 +806,7 @@ function machine(ctx = {}) {
|
|
|
756
806
|
on: {
|
|
757
807
|
PRESS_UP: {
|
|
758
808
|
target: "focused",
|
|
759
|
-
actions:
|
|
809
|
+
actions: "clearHint"
|
|
760
810
|
}
|
|
761
811
|
}
|
|
762
812
|
},
|
|
@@ -778,7 +828,7 @@ function machine(ctx = {}) {
|
|
|
778
828
|
on: {
|
|
779
829
|
PRESS_UP: {
|
|
780
830
|
target: "focused",
|
|
781
|
-
actions:
|
|
831
|
+
actions: "clearHint"
|
|
782
832
|
}
|
|
783
833
|
}
|
|
784
834
|
},
|
|
@@ -838,26 +888,23 @@ function machine(ctx = {}) {
|
|
|
838
888
|
send("PRESS_UP");
|
|
839
889
|
});
|
|
840
890
|
},
|
|
841
|
-
attachWheelListener(ctx2) {
|
|
842
|
-
const
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
891
|
+
attachWheelListener(ctx2, _evt, { send }) {
|
|
892
|
+
const input = dom.getInputEl(ctx2);
|
|
893
|
+
if (!input)
|
|
894
|
+
return;
|
|
895
|
+
function onWheel(event) {
|
|
896
|
+
const isInputFocused = dom.getDoc(ctx2).activeElement === input;
|
|
897
|
+
if (!ctx2.allowMouseWheel || !isInputFocused)
|
|
846
898
|
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);
|
|
899
|
+
event.preventDefault();
|
|
900
|
+
const dir = Math.sign(event.deltaY) * -1;
|
|
901
|
+
if (dir === 1) {
|
|
902
|
+
send("INCREMENT");
|
|
903
|
+
} else if (dir === -1) {
|
|
904
|
+
send("DECREMENT");
|
|
857
905
|
}
|
|
858
|
-
|
|
859
|
-
})
|
|
860
|
-
return () => cleanups.forEach((c) => c());
|
|
906
|
+
}
|
|
907
|
+
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
861
908
|
},
|
|
862
909
|
activatePointerLock(ctx2) {
|
|
863
910
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -872,7 +919,11 @@ function machine(ctx = {}) {
|
|
|
872
919
|
const value = dom.getMousementValue(ctx2, event);
|
|
873
920
|
if (!value.hint)
|
|
874
921
|
return;
|
|
875
|
-
send({
|
|
922
|
+
send({
|
|
923
|
+
type: "POINTER_MOVE_SCRUBBER",
|
|
924
|
+
hint: value.hint,
|
|
925
|
+
point: value.point
|
|
926
|
+
});
|
|
876
927
|
}
|
|
877
928
|
function onMouseup() {
|
|
878
929
|
send("POINTER_UP_SCRUBBER");
|
|
@@ -884,13 +935,15 @@ function machine(ctx = {}) {
|
|
|
884
935
|
setupDocument: (ctx2, evt) => {
|
|
885
936
|
if (evt.doc)
|
|
886
937
|
ctx2.doc = (0, import_core.ref)(evt.doc);
|
|
938
|
+
if (evt.root)
|
|
939
|
+
ctx2.rootNode = (0, import_core.ref)(evt.root);
|
|
887
940
|
ctx2.uid = evt.id;
|
|
888
941
|
},
|
|
889
942
|
focusInput(ctx2) {
|
|
890
943
|
if (!ctx2.focusInputOnChange)
|
|
891
944
|
return;
|
|
892
945
|
const input = dom.getInputEl(ctx2);
|
|
893
|
-
|
|
946
|
+
raf(() => input == null ? void 0 : input.focus());
|
|
894
947
|
},
|
|
895
948
|
increment(ctx2, evt) {
|
|
896
949
|
ctx2.value = utils.increment(ctx2, evt.step);
|
|
@@ -902,7 +955,9 @@ function machine(ctx = {}) {
|
|
|
902
955
|
ctx2.value = utils.clamp(ctx2);
|
|
903
956
|
},
|
|
904
957
|
roundValue(ctx2) {
|
|
905
|
-
ctx2.value
|
|
958
|
+
if (ctx2.value !== "") {
|
|
959
|
+
ctx2.value = utils.round(ctx2);
|
|
960
|
+
}
|
|
906
961
|
},
|
|
907
962
|
setValue(ctx2, evt) {
|
|
908
963
|
var _a, _b;
|
|
@@ -927,30 +982,23 @@ function machine(ctx = {}) {
|
|
|
927
982
|
setHintToSet(ctx2) {
|
|
928
983
|
ctx2.hint = "set";
|
|
929
984
|
},
|
|
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
985
|
invokeOnChange(ctx2) {
|
|
945
986
|
var _a;
|
|
946
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
987
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
988
|
+
value: ctx2.value,
|
|
989
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
990
|
+
});
|
|
947
991
|
},
|
|
948
992
|
invokeOnInvalid(ctx2) {
|
|
949
993
|
var _a;
|
|
950
994
|
if (!ctx2.isOutOfRange)
|
|
951
995
|
return;
|
|
952
996
|
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
|
|
953
|
-
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
997
|
+
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
998
|
+
reason,
|
|
999
|
+
value: ctx2.formattedValue,
|
|
1000
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
1001
|
+
});
|
|
954
1002
|
},
|
|
955
1003
|
syncInputValue(ctx2) {
|
|
956
1004
|
const input = dom.getInputEl(ctx2);
|
|
@@ -969,7 +1017,8 @@ function machine(ctx = {}) {
|
|
|
969
1017
|
const cursor = dom.getCursorEl(ctx2);
|
|
970
1018
|
if (!cursor || !ctx2.scrubberCursorPoint)
|
|
971
1019
|
return;
|
|
972
|
-
|
|
1020
|
+
const { x, y } = ctx2.scrubberCursorPoint;
|
|
1021
|
+
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
973
1022
|
},
|
|
974
1023
|
addCustomCursor(ctx2) {
|
|
975
1024
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -977,11 +1026,10 @@ function machine(ctx = {}) {
|
|
|
977
1026
|
dom.createVirtualCursor(ctx2);
|
|
978
1027
|
},
|
|
979
1028
|
removeCustomCursor(ctx2) {
|
|
1029
|
+
var _a;
|
|
980
1030
|
if (isSafari() || !supportsPointerEvent())
|
|
981
1031
|
return;
|
|
982
|
-
|
|
983
|
-
const el = doc.getElementById(dom.getCursorId(ctx2));
|
|
984
|
-
el == null ? void 0 : el.remove();
|
|
1032
|
+
(_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
|
|
985
1033
|
},
|
|
986
1034
|
disableTextSelection(ctx2) {
|
|
987
1035
|
const doc = dom.getDoc(ctx2);
|