@zag-js/number-input 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/index.d.ts +225 -3
- package/dist/index.js +53 -92
- package/dist/index.mjs +48 -95
- package/package.json +13 -12
- package/dist/number-input.connect.d.ts +0 -23
- package/dist/number-input.dom.d.ts +0 -39
- package/dist/number-input.machine.d.ts +0 -2
- package/dist/number-input.types.d.ts +0 -212
- package/dist/number-input.utils.d.ts +0 -13
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,225 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
3
|
+
import { StateMachine } from '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
|
|
6
|
+
declare type ElementIds = Partial<{
|
|
7
|
+
root: string;
|
|
8
|
+
label: string;
|
|
9
|
+
input: string;
|
|
10
|
+
incBtn: string;
|
|
11
|
+
decBtn: string;
|
|
12
|
+
scrubber: string;
|
|
13
|
+
}>;
|
|
14
|
+
declare type IntlMessages = {
|
|
15
|
+
/**
|
|
16
|
+
* Function that returns the human-readable value.
|
|
17
|
+
* It is used to set the `aria-valuetext` property of the input
|
|
18
|
+
*/
|
|
19
|
+
valueText?: (value: string) => string;
|
|
20
|
+
/**
|
|
21
|
+
* The label foe the increment button
|
|
22
|
+
*/
|
|
23
|
+
incrementLabel: string;
|
|
24
|
+
/**
|
|
25
|
+
* The label for the decrement button
|
|
26
|
+
*/
|
|
27
|
+
decrementLabel: string;
|
|
28
|
+
};
|
|
29
|
+
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
30
|
+
/**
|
|
31
|
+
* The ids of the elements in the number input. Useful for composition.
|
|
32
|
+
*/
|
|
33
|
+
ids?: ElementIds;
|
|
34
|
+
/**
|
|
35
|
+
* The name attribute of the number input. Useful for form submission.
|
|
36
|
+
*/
|
|
37
|
+
name?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the number input is disabled.
|
|
40
|
+
*/
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the number input is readonly
|
|
44
|
+
*/
|
|
45
|
+
readonly?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the number input value is invalid.
|
|
48
|
+
*/
|
|
49
|
+
invalid?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* The pattern used to check the <input> element's value against
|
|
52
|
+
*
|
|
53
|
+
* @default
|
|
54
|
+
* "[0-9]*(.[0-9]+)?"
|
|
55
|
+
*/
|
|
56
|
+
pattern: string;
|
|
57
|
+
/**
|
|
58
|
+
* The value of the input
|
|
59
|
+
*/
|
|
60
|
+
value: string;
|
|
61
|
+
/**
|
|
62
|
+
* The minimum value of the number input
|
|
63
|
+
*/
|
|
64
|
+
min: number;
|
|
65
|
+
/**
|
|
66
|
+
* The maximum value of the number input
|
|
67
|
+
*/
|
|
68
|
+
max: number;
|
|
69
|
+
/**
|
|
70
|
+
* The amount to increment or decrement the value by
|
|
71
|
+
*/
|
|
72
|
+
step: number;
|
|
73
|
+
/**
|
|
74
|
+
* Whether to allow mouse wheel to change the value
|
|
75
|
+
*/
|
|
76
|
+
allowMouseWheel?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Whether to allow the value overflow the min/max range
|
|
79
|
+
* @default true
|
|
80
|
+
*/
|
|
81
|
+
allowOverflow: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Whether the pressed key should be allowed in the input.
|
|
84
|
+
* The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
|
|
85
|
+
*/
|
|
86
|
+
validateCharacter?: (char: string) => boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Whether to clamp the value when the input loses focus (blur)
|
|
89
|
+
* @default true
|
|
90
|
+
*/
|
|
91
|
+
clampValueOnBlur: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Whether to focus input when the value changes
|
|
94
|
+
* @default true
|
|
95
|
+
*/
|
|
96
|
+
focusInputOnChange: boolean;
|
|
97
|
+
/**
|
|
98
|
+
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
99
|
+
*/
|
|
100
|
+
messages: IntlMessages;
|
|
101
|
+
/**
|
|
102
|
+
* If using a custom display format, this converts the custom format to a format `parseFloat` understands.
|
|
103
|
+
*/
|
|
104
|
+
parse?: (value: string) => string;
|
|
105
|
+
/**
|
|
106
|
+
* If using a custom display format, this converts the default format to the custom format.
|
|
107
|
+
*/
|
|
108
|
+
format?: (value: string) => string | number;
|
|
109
|
+
/**
|
|
110
|
+
* Hints at the type of data that might be entered by the user. It also determines
|
|
111
|
+
* the type of keyboard shown to the user on mobile devices
|
|
112
|
+
* @default "decimal"
|
|
113
|
+
*/
|
|
114
|
+
inputMode: "text" | "tel" | "numeric" | "decimal";
|
|
115
|
+
/**
|
|
116
|
+
* Function invoked when the value changes
|
|
117
|
+
*/
|
|
118
|
+
onChange?: (details: {
|
|
119
|
+
value: string;
|
|
120
|
+
valueAsNumber: number;
|
|
121
|
+
}) => void;
|
|
122
|
+
/**
|
|
123
|
+
* Function invoked when the value overflows or underflows the min/max range
|
|
124
|
+
*/
|
|
125
|
+
onInvalid?: (details: {
|
|
126
|
+
reason: ValidityState;
|
|
127
|
+
value: string;
|
|
128
|
+
valueAsNumber: number;
|
|
129
|
+
}) => void;
|
|
130
|
+
/**
|
|
131
|
+
* The minimum number of fraction digits to use. Possible values are from 0 to 20
|
|
132
|
+
*/
|
|
133
|
+
minFractionDigits?: number;
|
|
134
|
+
/**
|
|
135
|
+
* The maximum number of fraction digits to use. Possible values are from 0 to 20;
|
|
136
|
+
*/
|
|
137
|
+
maxFractionDigits?: number;
|
|
138
|
+
};
|
|
139
|
+
declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
140
|
+
declare type ComputedContext = Readonly<{
|
|
141
|
+
/**
|
|
142
|
+
* @computed
|
|
143
|
+
* The value of the input as a number
|
|
144
|
+
*/
|
|
145
|
+
valueAsNumber: number;
|
|
146
|
+
/**
|
|
147
|
+
* @computed
|
|
148
|
+
* Whether the value is at the min
|
|
149
|
+
*/
|
|
150
|
+
isAtMin: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* @computed
|
|
153
|
+
* Whether the value is at the max
|
|
154
|
+
*/
|
|
155
|
+
isAtMax: boolean;
|
|
156
|
+
/**
|
|
157
|
+
* @computed
|
|
158
|
+
* Whether the value is out of the min/max range
|
|
159
|
+
*/
|
|
160
|
+
isOutOfRange: boolean;
|
|
161
|
+
/**
|
|
162
|
+
* @computed
|
|
163
|
+
* Whether the value is empty
|
|
164
|
+
*/
|
|
165
|
+
isValueEmpty: boolean;
|
|
166
|
+
/**
|
|
167
|
+
* @computed
|
|
168
|
+
* Whether the increment button is enabled
|
|
169
|
+
*/
|
|
170
|
+
canIncrement: boolean;
|
|
171
|
+
/**
|
|
172
|
+
* @computed
|
|
173
|
+
* Whether the decrement button is enabled
|
|
174
|
+
*/
|
|
175
|
+
canDecrement: boolean;
|
|
176
|
+
/**
|
|
177
|
+
* @computed
|
|
178
|
+
* The `aria-valuetext` attribute of the input
|
|
179
|
+
*/
|
|
180
|
+
valueText: string | undefined;
|
|
181
|
+
/**
|
|
182
|
+
* @computed
|
|
183
|
+
* The formatted value of the input
|
|
184
|
+
*/
|
|
185
|
+
formattedValue: string;
|
|
186
|
+
/**
|
|
187
|
+
* @computed
|
|
188
|
+
* Whether the writing direction is RTL
|
|
189
|
+
*/
|
|
190
|
+
isRtl: boolean;
|
|
191
|
+
}>;
|
|
192
|
+
declare type PrivateContext = Context<{}>;
|
|
193
|
+
declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
194
|
+
declare type MachineState = {
|
|
195
|
+
value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
|
|
196
|
+
tags: "focus";
|
|
197
|
+
};
|
|
198
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
199
|
+
declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
200
|
+
|
|
201
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
202
|
+
isFocused: boolean;
|
|
203
|
+
isInvalid: boolean;
|
|
204
|
+
isValueEmpty: boolean;
|
|
205
|
+
value: string;
|
|
206
|
+
valueAsNumber: number;
|
|
207
|
+
setValue(value: string | number): void;
|
|
208
|
+
clearValue(): void;
|
|
209
|
+
increment(): void;
|
|
210
|
+
decrement(): void;
|
|
211
|
+
setToMax(): void;
|
|
212
|
+
setToMin(): void;
|
|
213
|
+
focus(): void;
|
|
214
|
+
rootProps: T["element"];
|
|
215
|
+
labelProps: T["label"];
|
|
216
|
+
groupProps: T["element"];
|
|
217
|
+
inputProps: T["input"];
|
|
218
|
+
decrementButtonProps: T["button"];
|
|
219
|
+
incrementButtonProps: T["button"];
|
|
220
|
+
scrubberProps: T["element"];
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
224
|
+
|
|
225
|
+
export { UserDefinedContext as Context, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
6
|
var __export = (target, all) => {
|
|
24
7
|
for (var name in all)
|
|
25
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -43,22 +26,6 @@ __export(src_exports, {
|
|
|
43
26
|
module.exports = __toCommonJS(src_exports);
|
|
44
27
|
|
|
45
28
|
// ../../utilities/dom/dist/index.mjs
|
|
46
|
-
var __defProp2 = Object.defineProperty;
|
|
47
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
48
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
49
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
50
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
51
|
-
var __spreadValues2 = (a, b) => {
|
|
52
|
-
for (var prop in b || (b = {}))
|
|
53
|
-
if (__hasOwnProp2.call(b, prop))
|
|
54
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
55
|
-
if (__getOwnPropSymbols2)
|
|
56
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
57
|
-
if (__propIsEnum2.call(b, prop))
|
|
58
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
59
|
-
}
|
|
60
|
-
return a;
|
|
61
|
-
};
|
|
62
29
|
var dataAttr = (guard) => {
|
|
63
30
|
return guard ? "" : void 0;
|
|
64
31
|
};
|
|
@@ -68,7 +35,7 @@ var ariaAttr = (guard) => {
|
|
|
68
35
|
var MAX_Z_INDEX = 2147483647;
|
|
69
36
|
var runIfFn = (v, ...a) => {
|
|
70
37
|
const res = typeof v === "function" ? v(...a) : v;
|
|
71
|
-
return res
|
|
38
|
+
return res ?? void 0;
|
|
72
39
|
};
|
|
73
40
|
var callAll = (...fns) => (...a) => {
|
|
74
41
|
fns.forEach(function(fn) {
|
|
@@ -80,9 +47,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
80
47
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
81
48
|
var isDom = () => typeof window !== "undefined";
|
|
82
49
|
function getPlatform() {
|
|
83
|
-
var _a;
|
|
84
50
|
const agent = navigator.userAgentData;
|
|
85
|
-
return (
|
|
51
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
86
52
|
}
|
|
87
53
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
88
54
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -98,32 +64,30 @@ function isWindow(value) {
|
|
|
98
64
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
99
65
|
}
|
|
100
66
|
function getDocument(el) {
|
|
101
|
-
var _a;
|
|
102
67
|
if (isWindow(el))
|
|
103
68
|
return el.document;
|
|
104
69
|
if (isDocument(el))
|
|
105
70
|
return el;
|
|
106
|
-
return (
|
|
71
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
107
72
|
}
|
|
108
73
|
function defineDomHelpers(helpers) {
|
|
109
74
|
const dom2 = {
|
|
110
75
|
getRootNode: (ctx) => {
|
|
111
|
-
var _a, _b;
|
|
112
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
113
|
-
},
|
|
114
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
115
|
-
getWin: (ctx) => {
|
|
116
76
|
var _a;
|
|
117
|
-
return (_a =
|
|
77
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
118
78
|
},
|
|
79
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
80
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
119
81
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
120
82
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
121
83
|
};
|
|
122
|
-
return
|
|
84
|
+
return {
|
|
85
|
+
...dom2,
|
|
86
|
+
...helpers
|
|
87
|
+
};
|
|
123
88
|
}
|
|
124
89
|
function getNativeEvent(e) {
|
|
125
|
-
|
|
126
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
90
|
+
return e.nativeEvent ?? e;
|
|
127
91
|
}
|
|
128
92
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
129
93
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
@@ -151,8 +115,7 @@ var fallback = {
|
|
|
151
115
|
clientY: 0
|
|
152
116
|
};
|
|
153
117
|
function getEventPoint(event, type = "page") {
|
|
154
|
-
|
|
155
|
-
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
118
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
156
119
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
157
120
|
}
|
|
158
121
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
@@ -222,7 +185,6 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
222
185
|
}
|
|
223
186
|
|
|
224
187
|
// ../../utilities/number/dist/index.mjs
|
|
225
|
-
var __pow = Math.pow;
|
|
226
188
|
function wrap(num, max) {
|
|
227
189
|
return (num % max + max) % max;
|
|
228
190
|
}
|
|
@@ -276,7 +238,7 @@ function isWithinRange(v, o) {
|
|
|
276
238
|
function decimalOperation(a, op, b) {
|
|
277
239
|
let result = op === "+" ? a + b : a - b;
|
|
278
240
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
279
|
-
const multiplier =
|
|
241
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
280
242
|
a = Math.round(a * multiplier);
|
|
281
243
|
b = Math.round(b * multiplier);
|
|
282
244
|
result = op === "+" ? a + b : a - b;
|
|
@@ -289,29 +251,29 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
|
|
|
289
251
|
// src/number-input.dom.ts
|
|
290
252
|
var dom = defineDomHelpers({
|
|
291
253
|
getRootId: (ctx) => {
|
|
292
|
-
var _a
|
|
293
|
-
return (
|
|
254
|
+
var _a;
|
|
255
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `number-input:${ctx.id}`;
|
|
294
256
|
},
|
|
295
257
|
getInputId: (ctx) => {
|
|
296
|
-
var _a
|
|
297
|
-
return (
|
|
258
|
+
var _a;
|
|
259
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.input) ?? `number-input:${ctx.id}:input`;
|
|
298
260
|
},
|
|
299
261
|
getIncButtonId: (ctx) => {
|
|
300
|
-
var _a
|
|
301
|
-
return (
|
|
262
|
+
var _a;
|
|
263
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.incBtn) ?? `number-input:${ctx.id}:inc-btn`;
|
|
302
264
|
},
|
|
303
265
|
getDecButtonId: (ctx) => {
|
|
304
|
-
var _a
|
|
305
|
-
return (
|
|
266
|
+
var _a;
|
|
267
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.decBtn) ?? `number-input:${ctx.id}:dec-btn`;
|
|
306
268
|
},
|
|
307
269
|
getScrubberId: (ctx) => {
|
|
308
|
-
var _a
|
|
309
|
-
return (
|
|
270
|
+
var _a;
|
|
271
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
|
|
310
272
|
},
|
|
311
273
|
getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
|
|
312
274
|
getLabelId: (ctx) => {
|
|
313
|
-
var _a
|
|
314
|
-
return (
|
|
275
|
+
var _a;
|
|
276
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
|
|
315
277
|
},
|
|
316
278
|
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
317
279
|
getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
|
|
@@ -366,39 +328,38 @@ var dom = defineDomHelpers({
|
|
|
366
328
|
// src/number-input.utils.ts
|
|
367
329
|
var utils = {
|
|
368
330
|
isValidNumericEvent: (ctx, event) => {
|
|
369
|
-
var _a
|
|
331
|
+
var _a;
|
|
370
332
|
if (event.key == null)
|
|
371
333
|
return true;
|
|
372
334
|
const isModifier = isModifiedEvent(event);
|
|
373
335
|
const isSingleKey = event.key.length === 1;
|
|
374
336
|
if (isModifier || !isSingleKey)
|
|
375
337
|
return true;
|
|
376
|
-
return (
|
|
338
|
+
return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) ?? utils.isFloatingPoint(event.key);
|
|
377
339
|
},
|
|
378
340
|
isFloatingPoint: (v) => /^[Ee0-9+\-.]$/.test(v),
|
|
379
341
|
sanitize: (ctx, value) => {
|
|
380
|
-
|
|
381
|
-
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
342
|
+
return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
|
|
382
343
|
},
|
|
383
344
|
increment: (ctx, step) => {
|
|
384
|
-
const value = increment(ctx.value, step
|
|
345
|
+
const value = increment(ctx.value, step ?? ctx.step);
|
|
385
346
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
386
347
|
},
|
|
387
348
|
decrement: (ctx, step) => {
|
|
388
|
-
const value = decrement(ctx.value, step
|
|
349
|
+
const value = decrement(ctx.value, step ?? ctx.step);
|
|
389
350
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
390
351
|
},
|
|
391
352
|
clamp: (ctx) => {
|
|
392
353
|
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
393
354
|
},
|
|
394
355
|
parse: (ctx, value) => {
|
|
395
|
-
var _a
|
|
396
|
-
return (
|
|
356
|
+
var _a;
|
|
357
|
+
return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) ?? value;
|
|
397
358
|
},
|
|
398
359
|
format: (ctx, value) => {
|
|
399
|
-
var _a
|
|
360
|
+
var _a;
|
|
400
361
|
const _val = value.toString();
|
|
401
|
-
return (
|
|
362
|
+
return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) ?? _val;
|
|
402
363
|
},
|
|
403
364
|
round: (ctx) => {
|
|
404
365
|
return formatDecimal(ctx.value, ctx);
|
|
@@ -611,7 +572,7 @@ function machine(ctx) {
|
|
|
611
572
|
return (0, import_core.createMachine)({
|
|
612
573
|
id: "number-input",
|
|
613
574
|
initial: "unknown",
|
|
614
|
-
context:
|
|
575
|
+
context: {
|
|
615
576
|
dir: "ltr",
|
|
616
577
|
focusInputOnChange: true,
|
|
617
578
|
clampValueOnBlur: true,
|
|
@@ -624,13 +585,14 @@ function machine(ctx) {
|
|
|
624
585
|
min: Number.MIN_SAFE_INTEGER,
|
|
625
586
|
max: Number.MAX_SAFE_INTEGER,
|
|
626
587
|
scrubberCursorPoint: null,
|
|
627
|
-
invalid: false
|
|
628
|
-
|
|
629
|
-
messages:
|
|
588
|
+
invalid: false,
|
|
589
|
+
...ctx,
|
|
590
|
+
messages: {
|
|
630
591
|
incrementLabel: "increment value",
|
|
631
|
-
decrementLabel: "decrease value"
|
|
632
|
-
|
|
633
|
-
|
|
592
|
+
decrementLabel: "decrease value",
|
|
593
|
+
...ctx.messages
|
|
594
|
+
}
|
|
595
|
+
},
|
|
634
596
|
computed: {
|
|
635
597
|
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
636
598
|
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
@@ -645,8 +607,8 @@ function machine(ctx) {
|
|
|
645
607
|
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
646
608
|
},
|
|
647
609
|
formattedValue: (ctx2) => {
|
|
648
|
-
var _a
|
|
649
|
-
return (
|
|
610
|
+
var _a;
|
|
611
|
+
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
|
|
650
612
|
}
|
|
651
613
|
},
|
|
652
614
|
watch: {
|
|
@@ -810,15 +772,9 @@ function machine(ctx) {
|
|
|
810
772
|
isAtMin: (ctx2) => ctx2.isAtMin,
|
|
811
773
|
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
812
774
|
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
813
|
-
isDecrementHint: (ctx2, evt) =>
|
|
814
|
-
var _a;
|
|
815
|
-
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
|
|
816
|
-
},
|
|
775
|
+
isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
|
|
817
776
|
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
818
|
-
isIncrementHint: (ctx2, evt) =>
|
|
819
|
-
var _a;
|
|
820
|
-
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
821
|
-
},
|
|
777
|
+
isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
|
|
822
778
|
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
823
779
|
},
|
|
824
780
|
activities: {
|
|
@@ -899,8 +855,8 @@ function machine(ctx) {
|
|
|
899
855
|
}
|
|
900
856
|
},
|
|
901
857
|
setValue(ctx2, evt) {
|
|
902
|
-
var _a
|
|
903
|
-
const value = (
|
|
858
|
+
var _a;
|
|
859
|
+
const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
|
|
904
860
|
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
905
861
|
},
|
|
906
862
|
clearValue(ctx2) {
|
|
@@ -986,3 +942,8 @@ function machine(ctx) {
|
|
|
986
942
|
hookSync: true
|
|
987
943
|
});
|
|
988
944
|
}
|
|
945
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
946
|
+
0 && (module.exports = {
|
|
947
|
+
connect,
|
|
948
|
+
machine
|
|
949
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,40 +1,4 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
1
|
// ../../utilities/dom/dist/index.mjs
|
|
22
|
-
var __defProp2 = Object.defineProperty;
|
|
23
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
24
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
25
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
26
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
27
|
-
var __spreadValues2 = (a, b) => {
|
|
28
|
-
for (var prop in b || (b = {}))
|
|
29
|
-
if (__hasOwnProp2.call(b, prop))
|
|
30
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
31
|
-
if (__getOwnPropSymbols2)
|
|
32
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
33
|
-
if (__propIsEnum2.call(b, prop))
|
|
34
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
35
|
-
}
|
|
36
|
-
return a;
|
|
37
|
-
};
|
|
38
2
|
var dataAttr = (guard) => {
|
|
39
3
|
return guard ? "" : void 0;
|
|
40
4
|
};
|
|
@@ -44,7 +8,7 @@ var ariaAttr = (guard) => {
|
|
|
44
8
|
var MAX_Z_INDEX = 2147483647;
|
|
45
9
|
var runIfFn = (v, ...a) => {
|
|
46
10
|
const res = typeof v === "function" ? v(...a) : v;
|
|
47
|
-
return res
|
|
11
|
+
return res ?? void 0;
|
|
48
12
|
};
|
|
49
13
|
var callAll = (...fns) => (...a) => {
|
|
50
14
|
fns.forEach(function(fn) {
|
|
@@ -56,9 +20,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
|
56
20
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
57
21
|
var isDom = () => typeof window !== "undefined";
|
|
58
22
|
function getPlatform() {
|
|
59
|
-
var _a;
|
|
60
23
|
const agent = navigator.userAgentData;
|
|
61
|
-
return (
|
|
24
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
62
25
|
}
|
|
63
26
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
64
27
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -74,32 +37,30 @@ function isWindow(value) {
|
|
|
74
37
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
75
38
|
}
|
|
76
39
|
function getDocument(el) {
|
|
77
|
-
var _a;
|
|
78
40
|
if (isWindow(el))
|
|
79
41
|
return el.document;
|
|
80
42
|
if (isDocument(el))
|
|
81
43
|
return el;
|
|
82
|
-
return (
|
|
44
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
83
45
|
}
|
|
84
46
|
function defineDomHelpers(helpers) {
|
|
85
47
|
const dom2 = {
|
|
86
48
|
getRootNode: (ctx) => {
|
|
87
|
-
var _a, _b;
|
|
88
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
89
|
-
},
|
|
90
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
91
|
-
getWin: (ctx) => {
|
|
92
49
|
var _a;
|
|
93
|
-
return (_a =
|
|
50
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
94
51
|
},
|
|
52
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
53
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
95
54
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
96
55
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
97
56
|
};
|
|
98
|
-
return
|
|
57
|
+
return {
|
|
58
|
+
...dom2,
|
|
59
|
+
...helpers
|
|
60
|
+
};
|
|
99
61
|
}
|
|
100
62
|
function getNativeEvent(e) {
|
|
101
|
-
|
|
102
|
-
return (_a = e.nativeEvent) != null ? _a : e;
|
|
63
|
+
return e.nativeEvent ?? e;
|
|
103
64
|
}
|
|
104
65
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
105
66
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
@@ -127,8 +88,7 @@ var fallback = {
|
|
|
127
88
|
clientY: 0
|
|
128
89
|
};
|
|
129
90
|
function getEventPoint(event, type = "page") {
|
|
130
|
-
|
|
131
|
-
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
91
|
+
const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
|
|
132
92
|
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
133
93
|
}
|
|
134
94
|
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
@@ -198,7 +158,6 @@ function requestPointerLock(doc, handlers = {}) {
|
|
|
198
158
|
}
|
|
199
159
|
|
|
200
160
|
// ../../utilities/number/dist/index.mjs
|
|
201
|
-
var __pow = Math.pow;
|
|
202
161
|
function wrap(num, max) {
|
|
203
162
|
return (num % max + max) % max;
|
|
204
163
|
}
|
|
@@ -252,7 +211,7 @@ function isWithinRange(v, o) {
|
|
|
252
211
|
function decimalOperation(a, op, b) {
|
|
253
212
|
let result = op === "+" ? a + b : a - b;
|
|
254
213
|
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
255
|
-
const multiplier =
|
|
214
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
256
215
|
a = Math.round(a * multiplier);
|
|
257
216
|
b = Math.round(b * multiplier);
|
|
258
217
|
result = op === "+" ? a + b : a - b;
|
|
@@ -265,29 +224,29 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
|
|
|
265
224
|
// src/number-input.dom.ts
|
|
266
225
|
var dom = defineDomHelpers({
|
|
267
226
|
getRootId: (ctx) => {
|
|
268
|
-
var _a
|
|
269
|
-
return (
|
|
227
|
+
var _a;
|
|
228
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `number-input:${ctx.id}`;
|
|
270
229
|
},
|
|
271
230
|
getInputId: (ctx) => {
|
|
272
|
-
var _a
|
|
273
|
-
return (
|
|
231
|
+
var _a;
|
|
232
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.input) ?? `number-input:${ctx.id}:input`;
|
|
274
233
|
},
|
|
275
234
|
getIncButtonId: (ctx) => {
|
|
276
|
-
var _a
|
|
277
|
-
return (
|
|
235
|
+
var _a;
|
|
236
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.incBtn) ?? `number-input:${ctx.id}:inc-btn`;
|
|
278
237
|
},
|
|
279
238
|
getDecButtonId: (ctx) => {
|
|
280
|
-
var _a
|
|
281
|
-
return (
|
|
239
|
+
var _a;
|
|
240
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.decBtn) ?? `number-input:${ctx.id}:dec-btn`;
|
|
282
241
|
},
|
|
283
242
|
getScrubberId: (ctx) => {
|
|
284
|
-
var _a
|
|
285
|
-
return (
|
|
243
|
+
var _a;
|
|
244
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
|
|
286
245
|
},
|
|
287
246
|
getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
|
|
288
247
|
getLabelId: (ctx) => {
|
|
289
|
-
var _a
|
|
290
|
-
return (
|
|
248
|
+
var _a;
|
|
249
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
|
|
291
250
|
},
|
|
292
251
|
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
293
252
|
getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
|
|
@@ -342,39 +301,38 @@ var dom = defineDomHelpers({
|
|
|
342
301
|
// src/number-input.utils.ts
|
|
343
302
|
var utils = {
|
|
344
303
|
isValidNumericEvent: (ctx, event) => {
|
|
345
|
-
var _a
|
|
304
|
+
var _a;
|
|
346
305
|
if (event.key == null)
|
|
347
306
|
return true;
|
|
348
307
|
const isModifier = isModifiedEvent(event);
|
|
349
308
|
const isSingleKey = event.key.length === 1;
|
|
350
309
|
if (isModifier || !isSingleKey)
|
|
351
310
|
return true;
|
|
352
|
-
return (
|
|
311
|
+
return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) ?? utils.isFloatingPoint(event.key);
|
|
353
312
|
},
|
|
354
313
|
isFloatingPoint: (v) => /^[Ee0-9+\-.]$/.test(v),
|
|
355
314
|
sanitize: (ctx, value) => {
|
|
356
|
-
|
|
357
|
-
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
315
|
+
return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
|
|
358
316
|
},
|
|
359
317
|
increment: (ctx, step) => {
|
|
360
|
-
const value = increment(ctx.value, step
|
|
318
|
+
const value = increment(ctx.value, step ?? ctx.step);
|
|
361
319
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
362
320
|
},
|
|
363
321
|
decrement: (ctx, step) => {
|
|
364
|
-
const value = decrement(ctx.value, step
|
|
322
|
+
const value = decrement(ctx.value, step ?? ctx.step);
|
|
365
323
|
return formatDecimal(clamp(value, ctx), ctx);
|
|
366
324
|
},
|
|
367
325
|
clamp: (ctx) => {
|
|
368
326
|
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
369
327
|
},
|
|
370
328
|
parse: (ctx, value) => {
|
|
371
|
-
var _a
|
|
372
|
-
return (
|
|
329
|
+
var _a;
|
|
330
|
+
return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) ?? value;
|
|
373
331
|
},
|
|
374
332
|
format: (ctx, value) => {
|
|
375
|
-
var _a
|
|
333
|
+
var _a;
|
|
376
334
|
const _val = value.toString();
|
|
377
|
-
return (
|
|
335
|
+
return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) ?? _val;
|
|
378
336
|
},
|
|
379
337
|
round: (ctx) => {
|
|
380
338
|
return formatDecimal(ctx.value, ctx);
|
|
@@ -587,7 +545,7 @@ function machine(ctx) {
|
|
|
587
545
|
return createMachine({
|
|
588
546
|
id: "number-input",
|
|
589
547
|
initial: "unknown",
|
|
590
|
-
context:
|
|
548
|
+
context: {
|
|
591
549
|
dir: "ltr",
|
|
592
550
|
focusInputOnChange: true,
|
|
593
551
|
clampValueOnBlur: true,
|
|
@@ -600,13 +558,14 @@ function machine(ctx) {
|
|
|
600
558
|
min: Number.MIN_SAFE_INTEGER,
|
|
601
559
|
max: Number.MAX_SAFE_INTEGER,
|
|
602
560
|
scrubberCursorPoint: null,
|
|
603
|
-
invalid: false
|
|
604
|
-
|
|
605
|
-
messages:
|
|
561
|
+
invalid: false,
|
|
562
|
+
...ctx,
|
|
563
|
+
messages: {
|
|
606
564
|
incrementLabel: "increment value",
|
|
607
|
-
decrementLabel: "decrease value"
|
|
608
|
-
|
|
609
|
-
|
|
565
|
+
decrementLabel: "decrease value",
|
|
566
|
+
...ctx.messages
|
|
567
|
+
}
|
|
568
|
+
},
|
|
610
569
|
computed: {
|
|
611
570
|
isRtl: (ctx2) => ctx2.dir === "rtl",
|
|
612
571
|
valueAsNumber: (ctx2) => valueOf(ctx2.value),
|
|
@@ -621,8 +580,8 @@ function machine(ctx) {
|
|
|
621
580
|
return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
|
|
622
581
|
},
|
|
623
582
|
formattedValue: (ctx2) => {
|
|
624
|
-
var _a
|
|
625
|
-
return (
|
|
583
|
+
var _a;
|
|
584
|
+
return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
|
|
626
585
|
}
|
|
627
586
|
},
|
|
628
587
|
watch: {
|
|
@@ -786,15 +745,9 @@ function machine(ctx) {
|
|
|
786
745
|
isAtMin: (ctx2) => ctx2.isAtMin,
|
|
787
746
|
isAtMax: (ctx2) => ctx2.isAtMax,
|
|
788
747
|
isInRange: (ctx2) => !ctx2.isOutOfRange,
|
|
789
|
-
isDecrementHint: (ctx2, evt) =>
|
|
790
|
-
var _a;
|
|
791
|
-
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
|
|
792
|
-
},
|
|
748
|
+
isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
|
|
793
749
|
isEmptyValue: (ctx2) => ctx2.isValueEmpty,
|
|
794
|
-
isIncrementHint: (ctx2, evt) =>
|
|
795
|
-
var _a;
|
|
796
|
-
return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
|
|
797
|
-
},
|
|
750
|
+
isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
|
|
798
751
|
isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
|
|
799
752
|
},
|
|
800
753
|
activities: {
|
|
@@ -875,8 +828,8 @@ function machine(ctx) {
|
|
|
875
828
|
}
|
|
876
829
|
},
|
|
877
830
|
setValue(ctx2, evt) {
|
|
878
|
-
var _a
|
|
879
|
-
const value = (
|
|
831
|
+
var _a;
|
|
832
|
+
const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
|
|
880
833
|
ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
|
|
881
834
|
},
|
|
882
835
|
clearValue(ctx2) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/number-input",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "Core logic for the number-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,21 +29,22 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/types": "0.2.
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/types": "0.2.3"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zag-js/dom-utils": "0.1.
|
|
37
|
-
"@zag-js/number-utils": "0.1.
|
|
38
|
-
"@zag-js/utils": "0.1.
|
|
36
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
37
|
+
"@zag-js/number-utils": "0.1.3",
|
|
38
|
+
"@zag-js/utils": "0.1.3"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build
|
|
42
|
-
"start": "
|
|
43
|
-
"build": "
|
|
41
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
42
|
+
"start": "pnpm build --watch",
|
|
43
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
44
44
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
45
45
|
"lint": "eslint src --ext .ts,.tsx",
|
|
46
|
-
"test
|
|
47
|
-
"test
|
|
46
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
+
"test-watch": "pnpm test --watch -u",
|
|
48
|
+
"typecheck": "tsc --noEmit"
|
|
48
49
|
}
|
|
49
|
-
}
|
|
50
|
+
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State } from "./number-input.types";
|
|
3
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
|
-
isFocused: boolean;
|
|
5
|
-
isInvalid: boolean;
|
|
6
|
-
isValueEmpty: boolean;
|
|
7
|
-
value: string;
|
|
8
|
-
valueAsNumber: number;
|
|
9
|
-
setValue(value: string | number): void;
|
|
10
|
-
clearValue(): void;
|
|
11
|
-
increment(): void;
|
|
12
|
-
decrement(): void;
|
|
13
|
-
setToMax(): void;
|
|
14
|
-
setToMin(): void;
|
|
15
|
-
focus(): void;
|
|
16
|
-
rootProps: T["element"];
|
|
17
|
-
labelProps: T["label"];
|
|
18
|
-
groupProps: T["element"];
|
|
19
|
-
inputProps: T["input"];
|
|
20
|
-
decrementButtonProps: T["button"];
|
|
21
|
-
incrementButtonProps: T["button"];
|
|
22
|
-
scrubberProps: T["element"];
|
|
23
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx } from "./number-input.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
5
|
-
}) => Document | ShadowRoot;
|
|
6
|
-
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
8
|
-
}) => Document;
|
|
9
|
-
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
11
|
-
}) => Window & typeof globalThis;
|
|
12
|
-
getActiveElement: (ctx: {
|
|
13
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
14
|
-
}) => HTMLElement;
|
|
15
|
-
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
-
getRootNode?: () => Node | Document | ShadowRoot;
|
|
17
|
-
}, id: string) => T_1;
|
|
18
|
-
} & {
|
|
19
|
-
getRootId: (ctx: Ctx) => string;
|
|
20
|
-
getInputId: (ctx: Ctx) => string;
|
|
21
|
-
getIncButtonId: (ctx: Ctx) => string;
|
|
22
|
-
getDecButtonId: (ctx: Ctx) => string;
|
|
23
|
-
getScrubberId: (ctx: Ctx) => string;
|
|
24
|
-
getCursorId: (ctx: Ctx) => string;
|
|
25
|
-
getLabelId: (ctx: Ctx) => string;
|
|
26
|
-
getInputEl: (ctx: Ctx) => HTMLElement;
|
|
27
|
-
getIncButtonEl: (ctx: Ctx) => HTMLButtonElement;
|
|
28
|
-
getDecButtonEl: (ctx: Ctx) => HTMLButtonElement;
|
|
29
|
-
getScrubberEl: (ctx: Ctx) => HTMLElement;
|
|
30
|
-
getCursorEl: (ctx: Ctx) => HTMLElement;
|
|
31
|
-
getMousementValue(ctx: Ctx, event: MouseEvent): {
|
|
32
|
-
hint: string;
|
|
33
|
-
point: {
|
|
34
|
-
x: number;
|
|
35
|
-
y: number;
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
createVirtualCursor(ctx: Ctx): void;
|
|
39
|
-
};
|
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
|
|
3
|
-
declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
|
|
4
|
-
declare type ElementIds = Partial<{
|
|
5
|
-
root: string;
|
|
6
|
-
label: string;
|
|
7
|
-
input: string;
|
|
8
|
-
incBtn: string;
|
|
9
|
-
decBtn: string;
|
|
10
|
-
scrubber: string;
|
|
11
|
-
}>;
|
|
12
|
-
declare type IntlMessages = {
|
|
13
|
-
/**
|
|
14
|
-
* Function that returns the human-readable value.
|
|
15
|
-
* It is used to set the `aria-valuetext` property of the input
|
|
16
|
-
*/
|
|
17
|
-
valueText?: (value: string) => string;
|
|
18
|
-
/**
|
|
19
|
-
* The label foe the increment button
|
|
20
|
-
*/
|
|
21
|
-
incrementLabel: string;
|
|
22
|
-
/**
|
|
23
|
-
* The label for the decrement button
|
|
24
|
-
*/
|
|
25
|
-
decrementLabel: string;
|
|
26
|
-
};
|
|
27
|
-
declare type PublicContext = DirectionProperty & CommonProperties & {
|
|
28
|
-
/**
|
|
29
|
-
* The ids of the elements in the number input. Useful for composition.
|
|
30
|
-
*/
|
|
31
|
-
ids?: ElementIds;
|
|
32
|
-
/**
|
|
33
|
-
* The name attribute of the number input. Useful for form submission.
|
|
34
|
-
*/
|
|
35
|
-
name?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Whether the number input is disabled.
|
|
38
|
-
*/
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Whether the number input is readonly
|
|
42
|
-
*/
|
|
43
|
-
readonly?: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* Whether the number input value is invalid.
|
|
46
|
-
*/
|
|
47
|
-
invalid?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* The pattern used to check the <input> element's value against
|
|
50
|
-
*
|
|
51
|
-
* @default
|
|
52
|
-
* "[0-9]*(.[0-9]+)?"
|
|
53
|
-
*/
|
|
54
|
-
pattern: string;
|
|
55
|
-
/**
|
|
56
|
-
* The value of the input
|
|
57
|
-
*/
|
|
58
|
-
value: string;
|
|
59
|
-
/**
|
|
60
|
-
* The minimum value of the number input
|
|
61
|
-
*/
|
|
62
|
-
min: number;
|
|
63
|
-
/**
|
|
64
|
-
* The maximum value of the number input
|
|
65
|
-
*/
|
|
66
|
-
max: number;
|
|
67
|
-
/**
|
|
68
|
-
* The amount to increment or decrement the value by
|
|
69
|
-
*/
|
|
70
|
-
step: number;
|
|
71
|
-
/**
|
|
72
|
-
* Whether to allow mouse wheel to change the value
|
|
73
|
-
*/
|
|
74
|
-
allowMouseWheel?: boolean;
|
|
75
|
-
/**
|
|
76
|
-
* Whether to allow the value overflow the min/max range
|
|
77
|
-
* @default true
|
|
78
|
-
*/
|
|
79
|
-
allowOverflow: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* Whether the pressed key should be allowed in the input.
|
|
82
|
-
* The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
|
|
83
|
-
*/
|
|
84
|
-
validateCharacter?: (char: string) => boolean;
|
|
85
|
-
/**
|
|
86
|
-
* Whether to clamp the value when the input loses focus (blur)
|
|
87
|
-
* @default true
|
|
88
|
-
*/
|
|
89
|
-
clampValueOnBlur: boolean;
|
|
90
|
-
/**
|
|
91
|
-
* Whether to focus input when the value changes
|
|
92
|
-
* @default true
|
|
93
|
-
*/
|
|
94
|
-
focusInputOnChange: boolean;
|
|
95
|
-
/**
|
|
96
|
-
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
97
|
-
*/
|
|
98
|
-
messages: IntlMessages;
|
|
99
|
-
/**
|
|
100
|
-
* If using a custom display format, this converts the custom format to a format `parseFloat` understands.
|
|
101
|
-
*/
|
|
102
|
-
parse?: (value: string) => string;
|
|
103
|
-
/**
|
|
104
|
-
* If using a custom display format, this converts the default format to the custom format.
|
|
105
|
-
*/
|
|
106
|
-
format?: (value: string) => string | number;
|
|
107
|
-
/**
|
|
108
|
-
* Hints at the type of data that might be entered by the user. It also determines
|
|
109
|
-
* the type of keyboard shown to the user on mobile devices
|
|
110
|
-
* @default "decimal"
|
|
111
|
-
*/
|
|
112
|
-
inputMode: "text" | "tel" | "numeric" | "decimal";
|
|
113
|
-
/**
|
|
114
|
-
* Function invoked when the value changes
|
|
115
|
-
*/
|
|
116
|
-
onChange?: (details: {
|
|
117
|
-
value: string;
|
|
118
|
-
valueAsNumber: number;
|
|
119
|
-
}) => void;
|
|
120
|
-
/**
|
|
121
|
-
* Function invoked when the value overflows or underflows the min/max range
|
|
122
|
-
*/
|
|
123
|
-
onInvalid?: (details: {
|
|
124
|
-
reason: ValidityState;
|
|
125
|
-
value: string;
|
|
126
|
-
valueAsNumber: number;
|
|
127
|
-
}) => void;
|
|
128
|
-
/**
|
|
129
|
-
* The minimum number of fraction digits to use. Possible values are from 0 to 20
|
|
130
|
-
*/
|
|
131
|
-
minFractionDigits?: number;
|
|
132
|
-
/**
|
|
133
|
-
* The maximum number of fraction digits to use. Possible values are from 0 to 20;
|
|
134
|
-
*/
|
|
135
|
-
maxFractionDigits?: number;
|
|
136
|
-
};
|
|
137
|
-
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
138
|
-
declare type ComputedContext = Readonly<{
|
|
139
|
-
/**
|
|
140
|
-
* @computed
|
|
141
|
-
* The value of the input as a number
|
|
142
|
-
*/
|
|
143
|
-
valueAsNumber: number;
|
|
144
|
-
/**
|
|
145
|
-
* @computed
|
|
146
|
-
* Whether the value is at the min
|
|
147
|
-
*/
|
|
148
|
-
isAtMin: boolean;
|
|
149
|
-
/**
|
|
150
|
-
* @computed
|
|
151
|
-
* Whether the value is at the max
|
|
152
|
-
*/
|
|
153
|
-
isAtMax: boolean;
|
|
154
|
-
/**
|
|
155
|
-
* @computed
|
|
156
|
-
* Whether the value is out of the min/max range
|
|
157
|
-
*/
|
|
158
|
-
isOutOfRange: boolean;
|
|
159
|
-
/**
|
|
160
|
-
* @computed
|
|
161
|
-
* Whether the value is empty
|
|
162
|
-
*/
|
|
163
|
-
isValueEmpty: boolean;
|
|
164
|
-
/**
|
|
165
|
-
* @computed
|
|
166
|
-
* Whether the increment button is enabled
|
|
167
|
-
*/
|
|
168
|
-
canIncrement: boolean;
|
|
169
|
-
/**
|
|
170
|
-
* @computed
|
|
171
|
-
* Whether the decrement button is enabled
|
|
172
|
-
*/
|
|
173
|
-
canDecrement: boolean;
|
|
174
|
-
/**
|
|
175
|
-
* @computed
|
|
176
|
-
* The `aria-valuetext` attribute of the input
|
|
177
|
-
*/
|
|
178
|
-
valueText: string | undefined;
|
|
179
|
-
/**
|
|
180
|
-
* @computed
|
|
181
|
-
* The formatted value of the input
|
|
182
|
-
*/
|
|
183
|
-
formattedValue: string;
|
|
184
|
-
/**
|
|
185
|
-
* @computed
|
|
186
|
-
* Whether the writing direction is RTL
|
|
187
|
-
*/
|
|
188
|
-
isRtl: boolean;
|
|
189
|
-
}>;
|
|
190
|
-
declare type PrivateContext = Context<{
|
|
191
|
-
/**
|
|
192
|
-
* @internal
|
|
193
|
-
* The hint that determines if we're incrementing or decrementing
|
|
194
|
-
*/
|
|
195
|
-
hint: "increment" | "decrement" | "set" | null;
|
|
196
|
-
/**
|
|
197
|
-
* @internal
|
|
198
|
-
* The scrubber cursor position
|
|
199
|
-
*/
|
|
200
|
-
scrubberCursorPoint: {
|
|
201
|
-
x: number;
|
|
202
|
-
y: number;
|
|
203
|
-
} | null;
|
|
204
|
-
}>;
|
|
205
|
-
export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
|
|
206
|
-
export declare type MachineState = {
|
|
207
|
-
value: "unknown" | "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
|
|
208
|
-
tags: "focus";
|
|
209
|
-
};
|
|
210
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
211
|
-
export declare type Send = S.Send<S.AnyEventObject>;
|
|
212
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "@zag-js/types";
|
|
2
|
-
import type { MachineContext as Ctx } from "./number-input.types";
|
|
3
|
-
export declare const utils: {
|
|
4
|
-
isValidNumericEvent: (ctx: Ctx, event: JSX.KeyboardEvent) => boolean;
|
|
5
|
-
isFloatingPoint: (v: string) => boolean;
|
|
6
|
-
sanitize: (ctx: Ctx, value: string) => string;
|
|
7
|
-
increment: (ctx: Ctx, step?: number) => string;
|
|
8
|
-
decrement: (ctx: Ctx, step?: number) => string;
|
|
9
|
-
clamp: (ctx: Ctx) => string;
|
|
10
|
-
parse: (ctx: Ctx, value: string) => string;
|
|
11
|
-
format: (ctx: Ctx, value: string | number) => string | number;
|
|
12
|
-
round: (ctx: Ctx) => string;
|
|
13
|
-
};
|