@zag-js/number-input 0.2.11 → 0.2.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/dist/{chunk-4A67X5BX.mjs → chunk-3O7PA63J.mjs} +13 -138
- package/dist/{chunk-6CS5P7OC.mjs → chunk-AXXDGYUW.mjs} +2 -8
- package/dist/{chunk-4ASBTBA5.mjs → chunk-DYFCS7PF.mjs} +46 -43
- package/dist/{chunk-GQN3V2LU.mjs → chunk-QYY4CWRS.mjs} +4 -13
- package/dist/index.js +105 -326
- package/dist/index.mjs +4 -5
- package/dist/number-input.connect.d.ts +39 -0
- package/dist/number-input.connect.js +81 -175
- package/dist/number-input.connect.mjs +3 -4
- package/dist/number-input.dom.d.ts +9 -6
- package/dist/number-input.dom.js +9 -65
- package/dist/number-input.dom.mjs +1 -2
- package/dist/number-input.machine.js +41 -266
- package/dist/number-input.machine.mjs +3 -4
- package/dist/number-input.utils.js +9 -54
- package/dist/number-input.utils.mjs +1 -2
- package/package.json +10 -8
- package/dist/chunk-EPCXXTFL.mjs +0 -141
|
@@ -3,18 +3,57 @@ import { State, Send } from './number-input.types.js';
|
|
|
3
3
|
import '@zag-js/core';
|
|
4
4
|
|
|
5
5
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
6
|
+
/**
|
|
7
|
+
* Whether the input is focused.
|
|
8
|
+
*/
|
|
6
9
|
isFocused: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Whether the input is invalid.
|
|
12
|
+
*/
|
|
7
13
|
isInvalid: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Whether the input value is empty.
|
|
16
|
+
*/
|
|
8
17
|
isValueEmpty: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* The formatted value of the input.
|
|
20
|
+
*/
|
|
9
21
|
value: string;
|
|
22
|
+
/**
|
|
23
|
+
* The value of the input as a number.
|
|
24
|
+
*/
|
|
10
25
|
valueAsNumber: number;
|
|
26
|
+
/**
|
|
27
|
+
* Function to set the value of the input.
|
|
28
|
+
*/
|
|
11
29
|
setValue(value: string | number): void;
|
|
30
|
+
/**
|
|
31
|
+
* Function to clear the value of the input.
|
|
32
|
+
*/
|
|
12
33
|
clearValue(): void;
|
|
34
|
+
/**
|
|
35
|
+
* Function to increment the value of the input by the step.
|
|
36
|
+
*/
|
|
13
37
|
increment(): void;
|
|
38
|
+
/**
|
|
39
|
+
* Function to decrement the value of the input by the step.
|
|
40
|
+
*/
|
|
14
41
|
decrement(): void;
|
|
42
|
+
/**
|
|
43
|
+
* Function to set the value of the input to the max.
|
|
44
|
+
*/
|
|
15
45
|
setToMax(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Function to set the value of the input to the min.
|
|
48
|
+
*/
|
|
16
49
|
setToMin(): void;
|
|
50
|
+
/**
|
|
51
|
+
* Function to focus the input.
|
|
52
|
+
*/
|
|
17
53
|
focus(): void;
|
|
54
|
+
/**
|
|
55
|
+
* Function to blur the input.
|
|
56
|
+
*/
|
|
18
57
|
blur(): void;
|
|
19
58
|
rootProps: T["element"];
|
|
20
59
|
labelProps: T["label"];
|
|
@@ -23,146 +23,9 @@ __export(number_input_connect_exports, {
|
|
|
23
23
|
connect: () => connect
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(number_input_connect_exports);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
return guard ? "" : void 0;
|
|
30
|
-
};
|
|
31
|
-
var ariaAttr = (guard) => {
|
|
32
|
-
return guard ? "true" : void 0;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
// ../../utilities/dom/src/constants.ts
|
|
36
|
-
var MAX_Z_INDEX = 2147483647;
|
|
37
|
-
|
|
38
|
-
// ../../utilities/core/src/guard.ts
|
|
39
|
-
var isArray = (v) => Array.isArray(v);
|
|
40
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
41
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
42
|
-
|
|
43
|
-
// ../../utilities/dom/src/platform.ts
|
|
44
|
-
var isDom = () => typeof window !== "undefined";
|
|
45
|
-
function getPlatform() {
|
|
46
|
-
const agent = navigator.userAgentData;
|
|
47
|
-
return agent?.platform ?? navigator.platform;
|
|
48
|
-
}
|
|
49
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
50
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
51
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
52
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
53
|
-
|
|
54
|
-
// ../../utilities/dom/src/query.ts
|
|
55
|
-
function isDocument(el) {
|
|
56
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
57
|
-
}
|
|
58
|
-
function isWindow(value) {
|
|
59
|
-
return value?.toString() === "[object Window]";
|
|
60
|
-
}
|
|
61
|
-
function getDocument(el) {
|
|
62
|
-
if (isWindow(el))
|
|
63
|
-
return el.document;
|
|
64
|
-
if (isDocument(el))
|
|
65
|
-
return el;
|
|
66
|
-
return el?.ownerDocument ?? document;
|
|
67
|
-
}
|
|
68
|
-
function defineDomHelpers(helpers) {
|
|
69
|
-
const dom2 = {
|
|
70
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
71
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
72
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
73
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
74
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
75
|
-
};
|
|
76
|
-
return {
|
|
77
|
-
...dom2,
|
|
78
|
-
...helpers
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// ../../utilities/dom/src/event.ts
|
|
83
|
-
function getNativeEvent(e) {
|
|
84
|
-
return e.nativeEvent ?? e;
|
|
85
|
-
}
|
|
86
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
87
|
-
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
88
|
-
var isLeftClick = (v) => v.button === 0;
|
|
89
|
-
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
90
|
-
|
|
91
|
-
// ../../utilities/dom/src/get-event-point.ts
|
|
92
|
-
var fallback = {
|
|
93
|
-
pageX: 0,
|
|
94
|
-
pageY: 0,
|
|
95
|
-
clientX: 0,
|
|
96
|
-
clientY: 0
|
|
97
|
-
};
|
|
98
|
-
function getEventPoint(event, type = "page") {
|
|
99
|
-
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
100
|
-
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// ../../utilities/dom/src/keyboard-event.ts
|
|
104
|
-
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
105
|
-
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
106
|
-
function getEventStep(event) {
|
|
107
|
-
if (event.ctrlKey || event.metaKey) {
|
|
108
|
-
return 0.1;
|
|
109
|
-
} else {
|
|
110
|
-
const isPageKey = PAGE_KEYS.has(event.key);
|
|
111
|
-
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
112
|
-
return isSkipKey ? 10 : 1;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// ../../utilities/number/src/number.ts
|
|
117
|
-
function wrap(num, max) {
|
|
118
|
-
return (num % max + max) % max;
|
|
119
|
-
}
|
|
120
|
-
function roundToDevicePixel(num) {
|
|
121
|
-
if (typeof window === "undefined")
|
|
122
|
-
return Math.round(num);
|
|
123
|
-
const dp = window.devicePixelRatio;
|
|
124
|
-
return Math.floor(num * dp + 0.5) / dp;
|
|
125
|
-
}
|
|
126
|
-
function clamp(v, o) {
|
|
127
|
-
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
128
|
-
}
|
|
129
|
-
function countDecimals(value) {
|
|
130
|
-
if (!Number.isFinite(value))
|
|
131
|
-
return 0;
|
|
132
|
-
let e = 1, p = 0;
|
|
133
|
-
while (Math.round(value * e) / e !== value) {
|
|
134
|
-
e *= 10;
|
|
135
|
-
p += 1;
|
|
136
|
-
}
|
|
137
|
-
return p;
|
|
138
|
-
}
|
|
139
|
-
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
140
|
-
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
141
|
-
function valueOf(v) {
|
|
142
|
-
if (typeof v === "number")
|
|
143
|
-
return v;
|
|
144
|
-
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
145
|
-
return !Number.isNaN(num) ? num : 0;
|
|
146
|
-
}
|
|
147
|
-
function formatDecimal(v, o) {
|
|
148
|
-
return new Intl.NumberFormat("en-US", {
|
|
149
|
-
useGrouping: false,
|
|
150
|
-
style: "decimal",
|
|
151
|
-
minimumFractionDigits: o.minFractionDigits,
|
|
152
|
-
maximumFractionDigits: o.maxFractionDigits
|
|
153
|
-
}).format(valueOf(v));
|
|
154
|
-
}
|
|
155
|
-
function decimalOperation(a, op, b) {
|
|
156
|
-
let result = op === "+" ? a + b : a - b;
|
|
157
|
-
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
158
|
-
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
159
|
-
a = Math.round(a * multiplier);
|
|
160
|
-
b = Math.round(b * multiplier);
|
|
161
|
-
result = op === "+" ? a + b : a - b;
|
|
162
|
-
result /= multiplier;
|
|
163
|
-
}
|
|
164
|
-
return result;
|
|
165
|
-
}
|
|
26
|
+
var import_dom_event2 = require("@zag-js/dom-event");
|
|
27
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
28
|
+
var import_number_utils3 = require("@zag-js/number-utils");
|
|
166
29
|
|
|
167
30
|
// src/number-input.anatomy.ts
|
|
168
31
|
var import_anatomy = require("@zag-js/anatomy");
|
|
@@ -178,7 +41,9 @@ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
|
178
41
|
var parts = anatomy.build();
|
|
179
42
|
|
|
180
43
|
// src/number-input.dom.ts
|
|
181
|
-
var
|
|
44
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
45
|
+
var import_number_utils = require("@zag-js/number-utils");
|
|
46
|
+
var dom = (0, import_dom_query.createScope)({
|
|
182
47
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
183
48
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
184
49
|
getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
|
|
@@ -202,7 +67,7 @@ var dom = defineDomHelpers({
|
|
|
202
67
|
return btnEl;
|
|
203
68
|
},
|
|
204
69
|
setupVirtualCursor(ctx) {
|
|
205
|
-
if (isSafari
|
|
70
|
+
if ((0, import_dom_query.isSafari)())
|
|
206
71
|
return;
|
|
207
72
|
dom.createVirtualCursor(ctx);
|
|
208
73
|
return () => {
|
|
@@ -229,8 +94,8 @@ var dom = defineDomHelpers({
|
|
|
229
94
|
};
|
|
230
95
|
},
|
|
231
96
|
getMousementValue(ctx, event) {
|
|
232
|
-
const x = roundToDevicePixel(event.movementX);
|
|
233
|
-
const y = roundToDevicePixel(event.movementY);
|
|
97
|
+
const x = (0, import_number_utils.roundToDevicePixel)(event.movementX);
|
|
98
|
+
const y = (0, import_number_utils.roundToDevicePixel)(event.movementY);
|
|
234
99
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
235
100
|
if (ctx.isRtl && hint === "increment")
|
|
236
101
|
hint = "decrement";
|
|
@@ -242,8 +107,8 @@ var dom = defineDomHelpers({
|
|
|
242
107
|
};
|
|
243
108
|
const win = dom.getWin(ctx);
|
|
244
109
|
const width = win.innerWidth;
|
|
245
|
-
const half = roundToDevicePixel(7.5);
|
|
246
|
-
point.x = wrap(point.x + half, width) - half;
|
|
110
|
+
const half = (0, import_number_utils.roundToDevicePixel)(7.5);
|
|
111
|
+
point.x = (0, import_number_utils.wrap)(point.x + half, width) - half;
|
|
247
112
|
return { hint, point };
|
|
248
113
|
},
|
|
249
114
|
createVirtualCursor(ctx) {
|
|
@@ -258,7 +123,7 @@ var dom = defineDomHelpers({
|
|
|
258
123
|
pointerEvents: "none",
|
|
259
124
|
left: "0px",
|
|
260
125
|
top: "0px",
|
|
261
|
-
zIndex: MAX_Z_INDEX,
|
|
126
|
+
zIndex: import_dom_query.MAX_Z_INDEX,
|
|
262
127
|
transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
|
|
263
128
|
willChange: "transform"
|
|
264
129
|
});
|
|
@@ -274,11 +139,13 @@ var dom = defineDomHelpers({
|
|
|
274
139
|
});
|
|
275
140
|
|
|
276
141
|
// src/number-input.utils.ts
|
|
142
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
143
|
+
var import_number_utils2 = require("@zag-js/number-utils");
|
|
277
144
|
var utils = {
|
|
278
145
|
isValidNumericEvent: (ctx, event) => {
|
|
279
146
|
if (event.key == null)
|
|
280
147
|
return true;
|
|
281
|
-
const isModifier = isModifiedEvent(event);
|
|
148
|
+
const isModifier = (0, import_dom_event.isModifiedEvent)(event);
|
|
282
149
|
const isSingleKey = event.key.length === 1;
|
|
283
150
|
if (isModifier || !isSingleKey)
|
|
284
151
|
return true;
|
|
@@ -289,15 +156,15 @@ var utils = {
|
|
|
289
156
|
return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
|
|
290
157
|
},
|
|
291
158
|
increment: (ctx, step) => {
|
|
292
|
-
const value = increment(ctx.value, step ?? ctx.step);
|
|
293
|
-
return formatDecimal(clamp(value, ctx), ctx);
|
|
159
|
+
const value = (0, import_number_utils2.increment)(ctx.value, step ?? ctx.step);
|
|
160
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
|
|
294
161
|
},
|
|
295
162
|
decrement: (ctx, step) => {
|
|
296
|
-
const value = decrement(ctx.value, step ?? ctx.step);
|
|
297
|
-
return formatDecimal(clamp(value, ctx), ctx);
|
|
163
|
+
const value = (0, import_number_utils2.decrement)(ctx.value, step ?? ctx.step);
|
|
164
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
|
|
298
165
|
},
|
|
299
166
|
clamp: (ctx) => {
|
|
300
|
-
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
167
|
+
return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(ctx.value, ctx), ctx);
|
|
301
168
|
},
|
|
302
169
|
parse: (ctx, value) => {
|
|
303
170
|
return ctx.parse?.(value) ?? value;
|
|
@@ -307,7 +174,7 @@ var utils = {
|
|
|
307
174
|
return ctx.format?.(_val) ?? _val;
|
|
308
175
|
},
|
|
309
176
|
round: (ctx) => {
|
|
310
|
-
return formatDecimal(ctx.value, ctx);
|
|
177
|
+
return (0, import_number_utils2.formatDecimal)(ctx.value, ctx);
|
|
311
178
|
}
|
|
312
179
|
};
|
|
313
180
|
|
|
@@ -321,44 +188,83 @@ function connect(state, send, normalize) {
|
|
|
321
188
|
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
322
189
|
const translations = state.context.translations;
|
|
323
190
|
return {
|
|
191
|
+
/**
|
|
192
|
+
* Whether the input is focused.
|
|
193
|
+
*/
|
|
324
194
|
isFocused,
|
|
195
|
+
/**
|
|
196
|
+
* Whether the input is invalid.
|
|
197
|
+
*/
|
|
325
198
|
isInvalid,
|
|
199
|
+
/**
|
|
200
|
+
* Whether the input value is empty.
|
|
201
|
+
*/
|
|
326
202
|
isValueEmpty,
|
|
203
|
+
/**
|
|
204
|
+
* The formatted value of the input.
|
|
205
|
+
*/
|
|
327
206
|
value: state.context.formattedValue,
|
|
207
|
+
/**
|
|
208
|
+
* The value of the input as a number.
|
|
209
|
+
*/
|
|
328
210
|
valueAsNumber: state.context.valueAsNumber,
|
|
211
|
+
/**
|
|
212
|
+
* Function to set the value of the input.
|
|
213
|
+
*/
|
|
329
214
|
setValue(value) {
|
|
330
215
|
send({ type: "SET_VALUE", value: value.toString() });
|
|
331
216
|
},
|
|
217
|
+
/**
|
|
218
|
+
* Function to clear the value of the input.
|
|
219
|
+
*/
|
|
332
220
|
clearValue() {
|
|
333
221
|
send("CLEAR_VALUE");
|
|
334
222
|
},
|
|
223
|
+
/**
|
|
224
|
+
* Function to increment the value of the input by the step.
|
|
225
|
+
*/
|
|
335
226
|
increment() {
|
|
336
227
|
send("INCREMENT");
|
|
337
228
|
},
|
|
229
|
+
/**
|
|
230
|
+
* Function to decrement the value of the input by the step.
|
|
231
|
+
*/
|
|
338
232
|
decrement() {
|
|
339
233
|
send("DECREMENT");
|
|
340
234
|
},
|
|
235
|
+
/**
|
|
236
|
+
* Function to set the value of the input to the max.
|
|
237
|
+
*/
|
|
341
238
|
setToMax() {
|
|
342
239
|
send({ type: "SET_VALUE", value: state.context.max });
|
|
343
240
|
},
|
|
241
|
+
/**
|
|
242
|
+
* Function to set the value of the input to the min.
|
|
243
|
+
*/
|
|
344
244
|
setToMin() {
|
|
345
245
|
send({ type: "SET_VALUE", value: state.context.min });
|
|
346
246
|
},
|
|
247
|
+
/**
|
|
248
|
+
* Function to focus the input.
|
|
249
|
+
*/
|
|
347
250
|
focus() {
|
|
348
251
|
dom.getInputEl(state.context)?.focus();
|
|
349
252
|
},
|
|
253
|
+
/**
|
|
254
|
+
* Function to blur the input.
|
|
255
|
+
*/
|
|
350
256
|
blur() {
|
|
351
257
|
dom.getInputEl(state.context)?.blur();
|
|
352
258
|
},
|
|
353
259
|
rootProps: normalize.element({
|
|
354
260
|
id: dom.getRootId(state.context),
|
|
355
261
|
...parts.root.attrs,
|
|
356
|
-
"data-disabled": dataAttr(isDisabled)
|
|
262
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled)
|
|
357
263
|
}),
|
|
358
264
|
labelProps: normalize.label({
|
|
359
265
|
...parts.label.attrs,
|
|
360
|
-
"data-disabled": dataAttr(isDisabled),
|
|
361
|
-
"data-invalid": dataAttr(isInvalid),
|
|
266
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
267
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
362
268
|
id: dom.getLabelId(state.context),
|
|
363
269
|
htmlFor: dom.getInputId(state.context)
|
|
364
270
|
}),
|
|
@@ -366,9 +272,9 @@ function connect(state, send, normalize) {
|
|
|
366
272
|
...parts.control.attrs,
|
|
367
273
|
role: "group",
|
|
368
274
|
"aria-disabled": isDisabled,
|
|
369
|
-
"data-disabled": dataAttr(isDisabled),
|
|
370
|
-
"data-invalid": dataAttr(isInvalid),
|
|
371
|
-
"aria-invalid": ariaAttr(state.context.invalid)
|
|
275
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
276
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
277
|
+
"aria-invalid": (0, import_dom_query2.ariaAttr)(state.context.invalid)
|
|
372
278
|
}),
|
|
373
279
|
inputProps: normalize.input({
|
|
374
280
|
...parts.input.attrs,
|
|
@@ -379,10 +285,10 @@ function connect(state, send, normalize) {
|
|
|
379
285
|
defaultValue: state.context.formattedValue,
|
|
380
286
|
pattern: state.context.pattern,
|
|
381
287
|
inputMode: state.context.inputMode,
|
|
382
|
-
"aria-invalid":
|
|
383
|
-
"data-invalid": dataAttr(isInvalid),
|
|
288
|
+
"aria-invalid": (0, import_dom_query2.ariaAttr)(isInvalid),
|
|
289
|
+
"data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
|
|
384
290
|
disabled: isDisabled,
|
|
385
|
-
"data-disabled": dataAttr(isDisabled),
|
|
291
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
386
292
|
readOnly: !!state.context.readOnly,
|
|
387
293
|
autoComplete: "off",
|
|
388
294
|
autoCorrect: "off",
|
|
@@ -400,19 +306,19 @@ function connect(state, send, normalize) {
|
|
|
400
306
|
send("BLUR");
|
|
401
307
|
},
|
|
402
308
|
onChange(event) {
|
|
403
|
-
const evt = getNativeEvent(event);
|
|
309
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
404
310
|
if (evt.isComposing)
|
|
405
311
|
return;
|
|
406
312
|
send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
|
|
407
313
|
},
|
|
408
314
|
onKeyDown(event) {
|
|
409
|
-
const evt = getNativeEvent(event);
|
|
315
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
410
316
|
if (evt.isComposing)
|
|
411
317
|
return;
|
|
412
318
|
if (!utils.isValidNumericEvent(state.context, event)) {
|
|
413
319
|
event.preventDefault();
|
|
414
320
|
}
|
|
415
|
-
const step = getEventStep(event) * state.context.step;
|
|
321
|
+
const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
|
|
416
322
|
const keyMap = {
|
|
417
323
|
ArrowUp() {
|
|
418
324
|
send({ type: "ARROW_UP", step });
|
|
@@ -438,7 +344,7 @@ function connect(state, send, normalize) {
|
|
|
438
344
|
...parts.decrementTrigger.attrs,
|
|
439
345
|
id: dom.getDecrementTriggerId(state.context),
|
|
440
346
|
disabled: isDecrementDisabled,
|
|
441
|
-
"data-disabled": dataAttr(isDecrementDisabled),
|
|
347
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDecrementDisabled),
|
|
442
348
|
"aria-label": translations.decrementLabel,
|
|
443
349
|
type: "button",
|
|
444
350
|
tabIndex: -1,
|
|
@@ -446,7 +352,7 @@ function connect(state, send, normalize) {
|
|
|
446
352
|
onPointerDown(event) {
|
|
447
353
|
if (isDecrementDisabled)
|
|
448
354
|
return;
|
|
449
|
-
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
|
|
355
|
+
send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
|
|
450
356
|
event.preventDefault();
|
|
451
357
|
},
|
|
452
358
|
onPointerUp() {
|
|
@@ -462,7 +368,7 @@ function connect(state, send, normalize) {
|
|
|
462
368
|
...parts.incrementTrigger.attrs,
|
|
463
369
|
id: dom.getIncrementTriggerId(state.context),
|
|
464
370
|
disabled: isIncrementDisabled,
|
|
465
|
-
"data-disabled": dataAttr(isIncrementDisabled),
|
|
371
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isIncrementDisabled),
|
|
466
372
|
"aria-label": translations.incrementLabel,
|
|
467
373
|
type: "button",
|
|
468
374
|
tabIndex: -1,
|
|
@@ -470,7 +376,7 @@ function connect(state, send, normalize) {
|
|
|
470
376
|
onPointerDown(event) {
|
|
471
377
|
if (isIncrementDisabled)
|
|
472
378
|
return;
|
|
473
|
-
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
|
|
379
|
+
send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
|
|
474
380
|
event.preventDefault();
|
|
475
381
|
},
|
|
476
382
|
onPointerUp() {
|
|
@@ -482,17 +388,17 @@ function connect(state, send, normalize) {
|
|
|
482
388
|
}),
|
|
483
389
|
scrubberProps: normalize.element({
|
|
484
390
|
...parts.scrubber.attrs,
|
|
485
|
-
"data-disabled": dataAttr(isDisabled),
|
|
391
|
+
"data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
|
|
486
392
|
id: dom.getScrubberId(state.context),
|
|
487
393
|
role: "presentation",
|
|
488
394
|
onMouseDown(event) {
|
|
489
395
|
if (isDisabled)
|
|
490
396
|
return;
|
|
491
|
-
const evt = getNativeEvent(event);
|
|
397
|
+
const evt = (0, import_dom_event2.getNativeEvent)(event);
|
|
492
398
|
event.preventDefault();
|
|
493
|
-
const point =
|
|
494
|
-
point.x = point.x - roundToDevicePixel(7.5);
|
|
495
|
-
point.y = point.y - roundToDevicePixel(7.5);
|
|
399
|
+
const point = { x: evt.clientX, y: evt.clientY };
|
|
400
|
+
point.x = point.x - (0, import_number_utils3.roundToDevicePixel)(7.5);
|
|
401
|
+
point.y = point.y - (0, import_number_utils3.roundToDevicePixel)(7.5);
|
|
496
402
|
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
497
403
|
},
|
|
498
404
|
style: {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-DYFCS7PF.mjs";
|
|
4
4
|
import "./chunk-XHRILSH3.mjs";
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import "./chunk-EPCXXTFL.mjs";
|
|
5
|
+
import "./chunk-QYY4CWRS.mjs";
|
|
6
|
+
import "./chunk-AXXDGYUW.mjs";
|
|
8
7
|
export {
|
|
9
8
|
connect
|
|
10
9
|
};
|
|
@@ -4,20 +4,23 @@ import '@zag-js/types';
|
|
|
4
4
|
|
|
5
5
|
declare const dom: {
|
|
6
6
|
getRootNode: (ctx: {
|
|
7
|
-
getRootNode?: (() =>
|
|
7
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
8
8
|
}) => Document | ShadowRoot;
|
|
9
9
|
getDoc: (ctx: {
|
|
10
|
-
getRootNode?: (() =>
|
|
10
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
11
11
|
}) => Document;
|
|
12
12
|
getWin: (ctx: {
|
|
13
|
-
getRootNode?: (() =>
|
|
13
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
14
14
|
}) => Window & typeof globalThis;
|
|
15
15
|
getActiveElement: (ctx: {
|
|
16
|
-
getRootNode?: (() =>
|
|
16
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
17
17
|
}) => HTMLElement | null;
|
|
18
|
-
getById: <T = HTMLElement>(ctx: {
|
|
19
|
-
getRootNode?: (() =>
|
|
18
|
+
getById: <T extends HTMLElement = HTMLElement>(ctx: {
|
|
19
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
20
20
|
}, id: string) => T | null;
|
|
21
|
+
queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
|
|
22
|
+
getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
|
|
23
|
+
}, id: string) => T_1;
|
|
21
24
|
} & {
|
|
22
25
|
getRootId: (ctx: MachineContext) => string;
|
|
23
26
|
getInputId: (ctx: MachineContext) => string;
|
package/dist/number-input.dom.js
CHANGED
|
@@ -23,65 +23,9 @@ __export(number_input_dom_exports, {
|
|
|
23
23
|
dom: () => dom
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(number_input_dom_exports);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
// ../../utilities/dom/src/platform.ts
|
|
31
|
-
var isDom = () => typeof window !== "undefined";
|
|
32
|
-
function getPlatform() {
|
|
33
|
-
const agent = navigator.userAgentData;
|
|
34
|
-
return agent?.platform ?? navigator.platform;
|
|
35
|
-
}
|
|
36
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
37
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
38
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
39
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
40
|
-
|
|
41
|
-
// ../../utilities/dom/src/query.ts
|
|
42
|
-
function isDocument(el) {
|
|
43
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
44
|
-
}
|
|
45
|
-
function isWindow(value) {
|
|
46
|
-
return value?.toString() === "[object Window]";
|
|
47
|
-
}
|
|
48
|
-
function getDocument(el) {
|
|
49
|
-
if (isWindow(el))
|
|
50
|
-
return el.document;
|
|
51
|
-
if (isDocument(el))
|
|
52
|
-
return el;
|
|
53
|
-
return el?.ownerDocument ?? document;
|
|
54
|
-
}
|
|
55
|
-
function defineDomHelpers(helpers) {
|
|
56
|
-
const dom2 = {
|
|
57
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
58
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
59
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
60
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
61
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
62
|
-
};
|
|
63
|
-
return {
|
|
64
|
-
...dom2,
|
|
65
|
-
...helpers
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// ../../utilities/dom/src/event.ts
|
|
70
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
71
|
-
|
|
72
|
-
// ../../utilities/number/src/number.ts
|
|
73
|
-
function wrap(num, max) {
|
|
74
|
-
return (num % max + max) % max;
|
|
75
|
-
}
|
|
76
|
-
function roundToDevicePixel(num) {
|
|
77
|
-
if (typeof window === "undefined")
|
|
78
|
-
return Math.round(num);
|
|
79
|
-
const dp = window.devicePixelRatio;
|
|
80
|
-
return Math.floor(num * dp + 0.5) / dp;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// src/number-input.dom.ts
|
|
84
|
-
var dom = defineDomHelpers({
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
+
var import_number_utils = require("@zag-js/number-utils");
|
|
28
|
+
var dom = (0, import_dom_query.createScope)({
|
|
85
29
|
getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
|
|
86
30
|
getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
|
|
87
31
|
getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
|
|
@@ -105,7 +49,7 @@ var dom = defineDomHelpers({
|
|
|
105
49
|
return btnEl;
|
|
106
50
|
},
|
|
107
51
|
setupVirtualCursor(ctx) {
|
|
108
|
-
if (isSafari
|
|
52
|
+
if ((0, import_dom_query.isSafari)())
|
|
109
53
|
return;
|
|
110
54
|
dom.createVirtualCursor(ctx);
|
|
111
55
|
return () => {
|
|
@@ -132,8 +76,8 @@ var dom = defineDomHelpers({
|
|
|
132
76
|
};
|
|
133
77
|
},
|
|
134
78
|
getMousementValue(ctx, event) {
|
|
135
|
-
const x = roundToDevicePixel(event.movementX);
|
|
136
|
-
const y = roundToDevicePixel(event.movementY);
|
|
79
|
+
const x = (0, import_number_utils.roundToDevicePixel)(event.movementX);
|
|
80
|
+
const y = (0, import_number_utils.roundToDevicePixel)(event.movementY);
|
|
137
81
|
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
138
82
|
if (ctx.isRtl && hint === "increment")
|
|
139
83
|
hint = "decrement";
|
|
@@ -145,8 +89,8 @@ var dom = defineDomHelpers({
|
|
|
145
89
|
};
|
|
146
90
|
const win = dom.getWin(ctx);
|
|
147
91
|
const width = win.innerWidth;
|
|
148
|
-
const half = roundToDevicePixel(7.5);
|
|
149
|
-
point.x = wrap(point.x + half, width) - half;
|
|
92
|
+
const half = (0, import_number_utils.roundToDevicePixel)(7.5);
|
|
93
|
+
point.x = (0, import_number_utils.wrap)(point.x + half, width) - half;
|
|
150
94
|
return { hint, point };
|
|
151
95
|
},
|
|
152
96
|
createVirtualCursor(ctx) {
|
|
@@ -161,7 +105,7 @@ var dom = defineDomHelpers({
|
|
|
161
105
|
pointerEvents: "none",
|
|
162
106
|
left: "0px",
|
|
163
107
|
top: "0px",
|
|
164
|
-
zIndex: MAX_Z_INDEX,
|
|
108
|
+
zIndex: import_dom_query.MAX_Z_INDEX,
|
|
165
109
|
transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
|
|
166
110
|
willChange: "transform"
|
|
167
111
|
});
|