@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.mjs
CHANGED
|
@@ -22,17 +22,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
22
22
|
var dataAttr = (guard) => {
|
|
23
23
|
return guard ? "" : void 0;
|
|
24
24
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
raf2(() => raf2(fn));
|
|
25
|
+
var ariaAttr = (guard) => {
|
|
26
|
+
return guard ? "true" : void 0;
|
|
27
|
+
};
|
|
28
|
+
function raf(fn) {
|
|
29
|
+
const id = globalThis.requestAnimationFrame(fn);
|
|
32
30
|
return function cleanup() {
|
|
33
|
-
|
|
34
|
-
fn2();
|
|
35
|
-
});
|
|
31
|
+
globalThis.cancelAnimationFrame(id);
|
|
36
32
|
};
|
|
37
33
|
}
|
|
38
34
|
var noop = () => {
|
|
@@ -138,6 +134,30 @@ function observeAttributes(node, attributes, fn) {
|
|
|
138
134
|
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
139
135
|
return () => obs.disconnect();
|
|
140
136
|
}
|
|
137
|
+
function itemById(v, id) {
|
|
138
|
+
return v.find((node) => node.id === id);
|
|
139
|
+
}
|
|
140
|
+
function indexOfId(v, id) {
|
|
141
|
+
const item = itemById(v, id);
|
|
142
|
+
return item ? v.indexOf(item) : -1;
|
|
143
|
+
}
|
|
144
|
+
var getValueText = (item) => {
|
|
145
|
+
var _a, _b;
|
|
146
|
+
return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
|
|
147
|
+
};
|
|
148
|
+
var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
|
|
149
|
+
var wrap = (v, idx) => {
|
|
150
|
+
return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
|
|
151
|
+
};
|
|
152
|
+
function findByText(v, text, currentId) {
|
|
153
|
+
const index = currentId ? indexOfId(v, currentId) : -1;
|
|
154
|
+
let items = currentId ? wrap(v, index) : v;
|
|
155
|
+
const isSingleKey = text.length === 1;
|
|
156
|
+
if (isSingleKey) {
|
|
157
|
+
items = items.filter((item) => item.id !== currentId);
|
|
158
|
+
}
|
|
159
|
+
return items.find((item) => match(getValueText(item), text));
|
|
160
|
+
}
|
|
141
161
|
function addPointerlockChangeListener(doc, fn) {
|
|
142
162
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
143
163
|
}
|
|
@@ -178,42 +198,41 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
178
198
|
exit();
|
|
179
199
|
};
|
|
180
200
|
}
|
|
201
|
+
function findByTypeahead(_items, options) {
|
|
202
|
+
const { state: state2, activeId, key, timeout = 350 } = options;
|
|
203
|
+
const search = state2.keysSoFar + key;
|
|
204
|
+
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
205
|
+
const query2 = isRepeated ? search[0] : search;
|
|
206
|
+
let items = _items.slice();
|
|
207
|
+
const next = findByText(items, query2, activeId);
|
|
208
|
+
function cleanup() {
|
|
209
|
+
clearTimeout(state2.timer);
|
|
210
|
+
state2.timer = -1;
|
|
211
|
+
}
|
|
212
|
+
function update(value) {
|
|
213
|
+
state2.keysSoFar = value;
|
|
214
|
+
cleanup();
|
|
215
|
+
if (value !== "") {
|
|
216
|
+
state2.timer = +setTimeout(() => {
|
|
217
|
+
update("");
|
|
218
|
+
cleanup();
|
|
219
|
+
}, timeout);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
update(search);
|
|
223
|
+
return next;
|
|
224
|
+
}
|
|
225
|
+
findByTypeahead.defaultOptions = {
|
|
226
|
+
keysSoFar: "",
|
|
227
|
+
timer: -1
|
|
228
|
+
};
|
|
181
229
|
|
|
182
230
|
// ../../utilities/number/dist/index.mjs
|
|
183
|
-
var __defProp2 = Object.defineProperty;
|
|
184
|
-
var __defProps2 = Object.defineProperties;
|
|
185
|
-
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
|
|
186
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
187
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
188
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
189
231
|
var __pow = Math.pow;
|
|
190
|
-
|
|
191
|
-
var __spreadValues2 = (a, b) => {
|
|
192
|
-
for (var prop in b || (b = {}))
|
|
193
|
-
if (__hasOwnProp2.call(b, prop))
|
|
194
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
195
|
-
if (__getOwnPropSymbols2)
|
|
196
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
197
|
-
if (__propIsEnum2.call(b, prop))
|
|
198
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
199
|
-
}
|
|
200
|
-
return a;
|
|
201
|
-
};
|
|
202
|
-
var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
|
|
203
|
-
var nf = new Intl.NumberFormat("en-US", { style: "decimal" });
|
|
204
|
-
function formatter(n) {
|
|
205
|
-
return parseFloat(nf.format(n));
|
|
206
|
-
}
|
|
207
|
-
function wrap(num, max) {
|
|
232
|
+
function wrap2(num, max) {
|
|
208
233
|
return (num % max + max) % max;
|
|
209
234
|
}
|
|
210
|
-
function
|
|
211
|
-
let num = valueOf(v);
|
|
212
|
-
const p = __pow(10, t2 != null ? t2 : 10);
|
|
213
|
-
num = Math.round(num * p) / p;
|
|
214
|
-
return t2 ? num.toFixed(t2) : v.toString();
|
|
215
|
-
}
|
|
216
|
-
function roundToPx(num) {
|
|
235
|
+
function roundToDevicePixel(num) {
|
|
217
236
|
if (typeof window === "undefined")
|
|
218
237
|
return Math.round(num);
|
|
219
238
|
const dp = window.devicePixelRatio;
|
|
@@ -222,28 +241,31 @@ function roundToPx(num) {
|
|
|
222
241
|
function clamp(v, o) {
|
|
223
242
|
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
224
243
|
}
|
|
225
|
-
function countDecimals(
|
|
226
|
-
|
|
227
|
-
|
|
244
|
+
function countDecimals(value) {
|
|
245
|
+
if (!Number.isFinite(value))
|
|
246
|
+
return 0;
|
|
247
|
+
let e = 1, p = 0;
|
|
248
|
+
while (Math.round(value * e) / e !== value) {
|
|
249
|
+
e *= 10;
|
|
250
|
+
p += 1;
|
|
251
|
+
}
|
|
252
|
+
return p;
|
|
228
253
|
}
|
|
229
|
-
var increment = (v, s) =>
|
|
230
|
-
var decrement = (v, s) =>
|
|
231
|
-
var multiply = (v, s) => formatter(valueOf(v) * s);
|
|
254
|
+
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
255
|
+
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
232
256
|
function valueOf(v) {
|
|
233
257
|
if (typeof v === "number")
|
|
234
258
|
return v;
|
|
235
259
|
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
236
260
|
return !Number.isNaN(num) ? num : 0;
|
|
237
261
|
}
|
|
238
|
-
function
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
function roundToPrecision(v, o) {
|
|
246
|
-
return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
|
|
262
|
+
function formatDecimal(v, o) {
|
|
263
|
+
return new Intl.NumberFormat("en-US", {
|
|
264
|
+
useGrouping: false,
|
|
265
|
+
style: "decimal",
|
|
266
|
+
minimumFractionDigits: o.minFractionDigits,
|
|
267
|
+
maximumFractionDigits: o.maxFractionDigits
|
|
268
|
+
}).format(valueOf(v));
|
|
247
269
|
}
|
|
248
270
|
function isAtMax(v, o) {
|
|
249
271
|
const val = valueOf(v);
|
|
@@ -257,6 +279,18 @@ function isWithinRange(v, o) {
|
|
|
257
279
|
const val = valueOf(v);
|
|
258
280
|
return val >= o.min && val <= o.max;
|
|
259
281
|
}
|
|
282
|
+
function decimalOperation(a, op, b) {
|
|
283
|
+
let result = op === "+" ? a + b : a - b;
|
|
284
|
+
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
285
|
+
const multiplier = __pow(10, Math.max(countDecimals(a), countDecimals(b)));
|
|
286
|
+
a = Math.round(a * multiplier);
|
|
287
|
+
b = Math.round(b * multiplier);
|
|
288
|
+
result = op === "+" ? a + b : a - b;
|
|
289
|
+
result /= multiplier;
|
|
290
|
+
}
|
|
291
|
+
return result;
|
|
292
|
+
}
|
|
293
|
+
var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
|
|
260
294
|
|
|
261
295
|
// ../../utilities/rect/dist/index.mjs
|
|
262
296
|
var isArray = (v) => Array.isArray(v);
|
|
@@ -274,6 +308,19 @@ function createNormalizer(fn) {
|
|
|
274
308
|
}
|
|
275
309
|
var normalizeProp = createNormalizer((v) => v);
|
|
276
310
|
|
|
311
|
+
// ../../utilities/core/dist/index.mjs
|
|
312
|
+
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
313
|
+
var platform = (v) => isDom() && v.test(navigator.platform);
|
|
314
|
+
var ua = (v) => isDom() && v.test(navigator.userAgent);
|
|
315
|
+
var isDom = () => !!(typeof window !== "undefined");
|
|
316
|
+
var isMac = () => platform(/^Mac/);
|
|
317
|
+
var isIPhone = () => platform(/^iPhone/);
|
|
318
|
+
var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
|
|
319
|
+
var isIos = () => isIPhone() || isIPad();
|
|
320
|
+
var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
|
|
321
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
322
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
323
|
+
|
|
277
324
|
// src/number-input.dom.ts
|
|
278
325
|
var dom = {
|
|
279
326
|
getDoc: (ctx) => {
|
|
@@ -284,6 +331,10 @@ var dom = {
|
|
|
284
331
|
var _a;
|
|
285
332
|
return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
|
|
286
333
|
},
|
|
334
|
+
getRootNode: (ctx) => {
|
|
335
|
+
var _a;
|
|
336
|
+
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
337
|
+
},
|
|
287
338
|
getRootId: (ctx) => {
|
|
288
339
|
var _a, _b;
|
|
289
340
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
|
|
@@ -309,14 +360,14 @@ var dom = {
|
|
|
309
360
|
var _a, _b;
|
|
310
361
|
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
|
|
311
362
|
},
|
|
312
|
-
getInputEl: (ctx) => dom.
|
|
313
|
-
getIncButtonEl: (ctx) => dom.
|
|
314
|
-
getDecButtonEl: (ctx) => dom.
|
|
315
|
-
getScrubberEl: (ctx) => dom.
|
|
363
|
+
getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
|
|
364
|
+
getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
|
|
365
|
+
getDecButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDecButtonId(ctx)),
|
|
366
|
+
getScrubberEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getScrubberId(ctx)),
|
|
316
367
|
getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
|
|
317
368
|
getMousementValue(ctx, event) {
|
|
318
|
-
const x =
|
|
319
|
-
const y =
|
|
369
|
+
const x = roundToDevicePixel(event.movementX);
|
|
370
|
+
const y = roundToDevicePixel(event.movementY);
|
|
320
371
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
321
372
|
if (ctx.isRtl && hint === "increment")
|
|
322
373
|
hint = "decrement";
|
|
@@ -328,8 +379,8 @@ var dom = {
|
|
|
328
379
|
};
|
|
329
380
|
const win = dom.getWin(ctx);
|
|
330
381
|
const width = win.innerWidth;
|
|
331
|
-
const half =
|
|
332
|
-
point.x =
|
|
382
|
+
const half = roundToDevicePixel(7.5);
|
|
383
|
+
point.x = wrap2(point.x + half, width) - half;
|
|
333
384
|
return { hint, point };
|
|
334
385
|
},
|
|
335
386
|
createVirtualCursor(ctx) {
|
|
@@ -365,9 +416,9 @@ var utils = {
|
|
|
365
416
|
var _a, _b;
|
|
366
417
|
if (event.key == null)
|
|
367
418
|
return true;
|
|
368
|
-
const
|
|
369
|
-
const
|
|
370
|
-
if (
|
|
419
|
+
const isModifier = isModifiedEvent(event);
|
|
420
|
+
const isSingleKey = event.key.length === 1;
|
|
421
|
+
if (isModifier || !isSingleKey)
|
|
371
422
|
return true;
|
|
372
423
|
return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
|
|
373
424
|
},
|
|
@@ -377,18 +428,15 @@ var utils = {
|
|
|
377
428
|
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
378
429
|
},
|
|
379
430
|
increment: (ctx, step) => {
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
return roundToPrecision(value, ctx);
|
|
431
|
+
const value = increment(ctx.value, step != null ? step : ctx.step);
|
|
432
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
383
433
|
},
|
|
384
434
|
decrement: (ctx, step) => {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
return roundToPrecision(value, ctx);
|
|
435
|
+
const value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
436
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
388
437
|
},
|
|
389
438
|
clamp: (ctx) => {
|
|
390
|
-
|
|
391
|
-
return roundToPrecision(value, ctx);
|
|
439
|
+
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
392
440
|
},
|
|
393
441
|
parse: (ctx, value) => {
|
|
394
442
|
var _a, _b;
|
|
@@ -400,7 +448,7 @@ var utils = {
|
|
|
400
448
|
return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
|
|
401
449
|
},
|
|
402
450
|
round: (ctx) => {
|
|
403
|
-
return
|
|
451
|
+
return formatDecimal(ctx.value, ctx);
|
|
404
452
|
}
|
|
405
453
|
};
|
|
406
454
|
|
|
@@ -421,7 +469,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
421
469
|
send({ type: "SET_VALUE", value: value.toString() });
|
|
422
470
|
},
|
|
423
471
|
clearValue() {
|
|
424
|
-
send(
|
|
472
|
+
send("CLEAR_VALUE");
|
|
425
473
|
},
|
|
426
474
|
increment() {
|
|
427
475
|
send("INCREMENT");
|
|
@@ -436,10 +484,8 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
436
484
|
send({ type: "SET_VALUE", value: state.context.min });
|
|
437
485
|
},
|
|
438
486
|
focus() {
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
442
|
-
});
|
|
487
|
+
var _a;
|
|
488
|
+
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
443
489
|
},
|
|
444
490
|
rootProps: normalize.element({
|
|
445
491
|
id: dom.getRootId(state.context),
|
|
@@ -453,6 +499,14 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
453
499
|
id: dom.getLabelId(state.context),
|
|
454
500
|
htmlFor: dom.getInputId(state.context)
|
|
455
501
|
}),
|
|
502
|
+
groupProps: normalize.element({
|
|
503
|
+
"data-part": "group",
|
|
504
|
+
role: "group",
|
|
505
|
+
"aria-disabled": isDisabled,
|
|
506
|
+
"data-disabled": dataAttr(isDisabled),
|
|
507
|
+
"data-invalid": dataAttr(isInvalid),
|
|
508
|
+
"aria-invalid": ariaAttr(state.context.invalid)
|
|
509
|
+
}),
|
|
456
510
|
inputProps: normalize.input({
|
|
457
511
|
"data-part": "input",
|
|
458
512
|
name: state.context.name,
|
|
@@ -470,7 +524,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
470
524
|
autoCorrect: "off",
|
|
471
525
|
spellCheck: "false",
|
|
472
526
|
type: "text",
|
|
473
|
-
"aria-roledescription": "number field",
|
|
527
|
+
"aria-roledescription": !isIos() ? "number field" : void 0,
|
|
474
528
|
"aria-valuemin": state.context.min,
|
|
475
529
|
"aria-valuemax": state.context.max,
|
|
476
530
|
"aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
|
|
@@ -494,7 +548,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
494
548
|
if (!utils.isValidNumericEvent(state.context, event)) {
|
|
495
549
|
event.preventDefault();
|
|
496
550
|
}
|
|
497
|
-
const step =
|
|
551
|
+
const step = getEventStep(event) * state.context.step;
|
|
498
552
|
const keyMap = {
|
|
499
553
|
ArrowUp() {
|
|
500
554
|
send({ type: "ARROW_UP", step });
|
|
@@ -573,8 +627,8 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
573
627
|
const evt = getNativeEvent(event);
|
|
574
628
|
event.preventDefault();
|
|
575
629
|
const point = getEventPoint(evt);
|
|
576
|
-
point.x = point.x -
|
|
577
|
-
point.y = point.y -
|
|
630
|
+
point.x = point.x - roundToDevicePixel(7.5);
|
|
631
|
+
point.y = point.y - roundToDevicePixel(7.5);
|
|
578
632
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
579
633
|
},
|
|
580
634
|
style: {
|
|
@@ -586,15 +640,6 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
586
640
|
|
|
587
641
|
// src/number-input.machine.ts
|
|
588
642
|
import { choose, createMachine, guards, ref } from "@zag-js/core";
|
|
589
|
-
|
|
590
|
-
// ../../utilities/core/dist/index.mjs
|
|
591
|
-
var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
592
|
-
var ua = (v) => isDom() && v.test(navigator.userAgent);
|
|
593
|
-
var isDom = () => !!(typeof window !== "undefined");
|
|
594
|
-
var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
|
|
595
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
596
|
-
|
|
597
|
-
// src/number-input.machine.ts
|
|
598
643
|
var { not, and } = guards;
|
|
599
644
|
function machine(ctx = {}) {
|
|
600
645
|
return createMachine({
|
|
@@ -613,8 +658,6 @@ function machine(ctx = {}) {
|
|
|
613
658
|
step: 1,
|
|
614
659
|
min: Number.MIN_SAFE_INTEGER,
|
|
615
660
|
max: Number.MAX_SAFE_INTEGER,
|
|
616
|
-
precision: 0,
|
|
617
|
-
inputSelection: null,
|
|
618
661
|
scrubberCursorPoint: null,
|
|
619
662
|
invalid: false
|
|
620
663
|
}, ctx), {
|
|
@@ -644,20 +687,26 @@ function machine(ctx = {}) {
|
|
|
644
687
|
value: ["invokeOnChange"],
|
|
645
688
|
isOutOfRange: ["invokeOnInvalid"]
|
|
646
689
|
},
|
|
647
|
-
entry: ["syncInputValue"],
|
|
648
690
|
on: {
|
|
649
691
|
SET_VALUE: {
|
|
650
692
|
actions: ["setValue", "setHintToSet"]
|
|
651
693
|
},
|
|
652
|
-
|
|
653
|
-
|
|
694
|
+
CLEAR_VALUE: {
|
|
695
|
+
actions: ["clearValue"]
|
|
696
|
+
},
|
|
697
|
+
INCREMENT: {
|
|
698
|
+
actions: ["increment"]
|
|
699
|
+
},
|
|
700
|
+
DECREMENT: {
|
|
701
|
+
actions: ["decrement"]
|
|
702
|
+
}
|
|
654
703
|
},
|
|
655
704
|
states: {
|
|
656
705
|
unknown: {
|
|
657
706
|
on: {
|
|
658
707
|
SETUP: {
|
|
659
708
|
target: "idle",
|
|
660
|
-
actions: "setupDocument"
|
|
709
|
+
actions: ["setupDocument", "syncInputValue"]
|
|
661
710
|
}
|
|
662
711
|
}
|
|
663
712
|
},
|
|
@@ -699,7 +748,7 @@ function machine(ctx = {}) {
|
|
|
699
748
|
actions: "setToMax"
|
|
700
749
|
},
|
|
701
750
|
CHANGE: {
|
|
702
|
-
actions: ["setValue", "
|
|
751
|
+
actions: ["setValue", "setHint"]
|
|
703
752
|
},
|
|
704
753
|
BLUR: [
|
|
705
754
|
{
|
|
@@ -713,6 +762,7 @@ function machine(ctx = {}) {
|
|
|
713
762
|
actions: ["clampValue", "clearHint"]
|
|
714
763
|
},
|
|
715
764
|
{
|
|
765
|
+
target: "idle",
|
|
716
766
|
actions: ["roundValue"]
|
|
717
767
|
}
|
|
718
768
|
]
|
|
@@ -733,7 +783,7 @@ function machine(ctx = {}) {
|
|
|
733
783
|
on: {
|
|
734
784
|
PRESS_UP: {
|
|
735
785
|
target: "focused",
|
|
736
|
-
actions:
|
|
786
|
+
actions: "clearHint"
|
|
737
787
|
}
|
|
738
788
|
}
|
|
739
789
|
},
|
|
@@ -755,7 +805,7 @@ function machine(ctx = {}) {
|
|
|
755
805
|
on: {
|
|
756
806
|
PRESS_UP: {
|
|
757
807
|
target: "focused",
|
|
758
|
-
actions:
|
|
808
|
+
actions: "clearHint"
|
|
759
809
|
}
|
|
760
810
|
}
|
|
761
811
|
},
|
|
@@ -815,26 +865,23 @@ function machine(ctx = {}) {
|
|
|
815
865
|
send("PRESS_UP");
|
|
816
866
|
});
|
|
817
867
|
},
|
|
818
|
-
attachWheelListener(ctx2) {
|
|
819
|
-
const
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
868
|
+
attachWheelListener(ctx2, _evt, { send }) {
|
|
869
|
+
const input = dom.getInputEl(ctx2);
|
|
870
|
+
if (!input)
|
|
871
|
+
return;
|
|
872
|
+
function onWheel(event) {
|
|
873
|
+
const isInputFocused = dom.getDoc(ctx2).activeElement === input;
|
|
874
|
+
if (!ctx2.allowMouseWheel || !isInputFocused)
|
|
823
875
|
return;
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
if (dir === 1)
|
|
831
|
-
ctx2.value = utils.increment(ctx2);
|
|
832
|
-
else if (dir === -1)
|
|
833
|
-
ctx2.value = utils.decrement(ctx2);
|
|
876
|
+
event.preventDefault();
|
|
877
|
+
const dir = Math.sign(event.deltaY) * -1;
|
|
878
|
+
if (dir === 1) {
|
|
879
|
+
send("INCREMENT");
|
|
880
|
+
} else if (dir === -1) {
|
|
881
|
+
send("DECREMENT");
|
|
834
882
|
}
|
|
835
|
-
|
|
836
|
-
})
|
|
837
|
-
return () => cleanups.forEach((c) => c());
|
|
883
|
+
}
|
|
884
|
+
return addDomEvent(input, "wheel", onWheel, { passive: false });
|
|
838
885
|
},
|
|
839
886
|
activatePointerLock(ctx2) {
|
|
840
887
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -849,7 +896,11 @@ function machine(ctx = {}) {
|
|
|
849
896
|
const value = dom.getMousementValue(ctx2, event);
|
|
850
897
|
if (!value.hint)
|
|
851
898
|
return;
|
|
852
|
-
send({
|
|
899
|
+
send({
|
|
900
|
+
type: "POINTER_MOVE_SCRUBBER",
|
|
901
|
+
hint: value.hint,
|
|
902
|
+
point: value.point
|
|
903
|
+
});
|
|
853
904
|
}
|
|
854
905
|
function onMouseup() {
|
|
855
906
|
send("POINTER_UP_SCRUBBER");
|
|
@@ -861,13 +912,15 @@ function machine(ctx = {}) {
|
|
|
861
912
|
setupDocument: (ctx2, evt) => {
|
|
862
913
|
if (evt.doc)
|
|
863
914
|
ctx2.doc = ref(evt.doc);
|
|
915
|
+
if (evt.root)
|
|
916
|
+
ctx2.rootNode = ref(evt.root);
|
|
864
917
|
ctx2.uid = evt.id;
|
|
865
918
|
},
|
|
866
919
|
focusInput(ctx2) {
|
|
867
920
|
if (!ctx2.focusInputOnChange)
|
|
868
921
|
return;
|
|
869
922
|
const input = dom.getInputEl(ctx2);
|
|
870
|
-
|
|
923
|
+
raf(() => input == null ? void 0 : input.focus());
|
|
871
924
|
},
|
|
872
925
|
increment(ctx2, evt) {
|
|
873
926
|
ctx2.value = utils.increment(ctx2, evt.step);
|
|
@@ -879,7 +932,9 @@ function machine(ctx = {}) {
|
|
|
879
932
|
ctx2.value = utils.clamp(ctx2);
|
|
880
933
|
},
|
|
881
934
|
roundValue(ctx2) {
|
|
882
|
-
ctx2.value
|
|
935
|
+
if (ctx2.value !== "") {
|
|
936
|
+
ctx2.value = utils.round(ctx2);
|
|
937
|
+
}
|
|
883
938
|
},
|
|
884
939
|
setValue(ctx2, evt) {
|
|
885
940
|
var _a, _b;
|
|
@@ -904,30 +959,23 @@ function machine(ctx = {}) {
|
|
|
904
959
|
setHintToSet(ctx2) {
|
|
905
960
|
ctx2.hint = "set";
|
|
906
961
|
},
|
|
907
|
-
setSelectionRange(ctx2, evt) {
|
|
908
|
-
ctx2.inputSelection = {
|
|
909
|
-
start: evt.target.selectionStart,
|
|
910
|
-
end: evt.target.selectionEnd
|
|
911
|
-
};
|
|
912
|
-
},
|
|
913
|
-
restoreSelection(ctx2) {
|
|
914
|
-
var _a, _b, _c;
|
|
915
|
-
const input = dom.getInputEl(ctx2);
|
|
916
|
-
if (!input || !ctx2.inputSelection)
|
|
917
|
-
return;
|
|
918
|
-
input.selectionStart = (_b = ctx2.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
|
|
919
|
-
input.selectionEnd = (_c = ctx2.inputSelection.end) != null ? _c : input.selectionStart;
|
|
920
|
-
},
|
|
921
962
|
invokeOnChange(ctx2) {
|
|
922
963
|
var _a;
|
|
923
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
964
|
+
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
|
|
965
|
+
value: ctx2.value,
|
|
966
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
967
|
+
});
|
|
924
968
|
},
|
|
925
969
|
invokeOnInvalid(ctx2) {
|
|
926
970
|
var _a;
|
|
927
971
|
if (!ctx2.isOutOfRange)
|
|
928
972
|
return;
|
|
929
973
|
const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
|
|
930
|
-
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
974
|
+
(_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
|
|
975
|
+
reason,
|
|
976
|
+
value: ctx2.formattedValue,
|
|
977
|
+
valueAsNumber: ctx2.valueAsNumber
|
|
978
|
+
});
|
|
931
979
|
},
|
|
932
980
|
syncInputValue(ctx2) {
|
|
933
981
|
const input = dom.getInputEl(ctx2);
|
|
@@ -946,7 +994,8 @@ function machine(ctx = {}) {
|
|
|
946
994
|
const cursor = dom.getCursorEl(ctx2);
|
|
947
995
|
if (!cursor || !ctx2.scrubberCursorPoint)
|
|
948
996
|
return;
|
|
949
|
-
|
|
997
|
+
const { x, y } = ctx2.scrubberCursorPoint;
|
|
998
|
+
cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
|
|
950
999
|
},
|
|
951
1000
|
addCustomCursor(ctx2) {
|
|
952
1001
|
if (isSafari() || !supportsPointerEvent())
|
|
@@ -954,11 +1003,10 @@ function machine(ctx = {}) {
|
|
|
954
1003
|
dom.createVirtualCursor(ctx2);
|
|
955
1004
|
},
|
|
956
1005
|
removeCustomCursor(ctx2) {
|
|
1006
|
+
var _a;
|
|
957
1007
|
if (isSafari() || !supportsPointerEvent())
|
|
958
1008
|
return;
|
|
959
|
-
|
|
960
|
-
const el = doc.getElementById(dom.getCursorId(ctx2));
|
|
961
|
-
el == null ? void 0 : el.remove();
|
|
1009
|
+
(_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
|
|
962
1010
|
},
|
|
963
1011
|
disableTextSelection(ctx2) {
|
|
964
1012
|
const doc = dom.getDoc(ctx2);
|