@zag-js/number-input 0.2.6 → 0.2.7
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-2SIS62IB.mjs +129 -0
- package/dist/chunk-7E3ZO263.mjs +540 -0
- package/dist/chunk-DDNK5RLW.mjs +169 -0
- package/dist/chunk-GWZPUXGU.mjs +53 -0
- package/dist/chunk-TSELS3UE.mjs +246 -0
- package/dist/chunk-XHRILSH3.mjs +17 -0
- package/dist/index.d.ts +7 -1092
- package/dist/index.js +41 -25
- package/dist/index.mjs +12 -1049
- package/dist/number-input.anatomy.d.ts +6 -0
- package/dist/number-input.anatomy.js +42 -0
- package/dist/number-input.anatomy.mjs +8 -0
- package/dist/number-input.connect.d.ts +28 -0
- package/dist/number-input.connect.js +560 -0
- package/dist/number-input.connect.mjs +10 -0
- package/dist/number-input.dom.d.ts +51 -0
- package/dist/number-input.dom.js +226 -0
- package/dist/number-input.dom.mjs +7 -0
- package/dist/number-input.machine.d.ts +7 -0
- package/dist/number-input.machine.js +847 -0
- package/dist/number-input.machine.mjs +9 -0
- package/dist/number-input.types.d.ts +217 -0
- package/dist/number-input.types.js +18 -0
- package/dist/number-input.types.mjs +0 -0
- package/dist/number-input.utils.d.ts +17 -0
- package/dist/number-input.utils.js +116 -0
- package/dist/number-input.utils.mjs +7 -0
- package/package.json +23 -13
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
+
|
|
3
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
|
|
4
|
+
declare const parts: Record<"root" | "label" | "input" | "control" | "incrementTrigger" | "decrementTrigger" | "scrubber", _zag_js_anatomy.AnatomyPart>;
|
|
5
|
+
|
|
6
|
+
export { anatomy, parts };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/number-input.anatomy.ts
|
|
21
|
+
var number_input_anatomy_exports = {};
|
|
22
|
+
__export(number_input_anatomy_exports, {
|
|
23
|
+
anatomy: () => anatomy,
|
|
24
|
+
parts: () => parts
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(number_input_anatomy_exports);
|
|
27
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
28
|
+
var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
29
|
+
"root",
|
|
30
|
+
"label",
|
|
31
|
+
"input",
|
|
32
|
+
"control",
|
|
33
|
+
"incrementTrigger",
|
|
34
|
+
"decrementTrigger",
|
|
35
|
+
"scrubber"
|
|
36
|
+
);
|
|
37
|
+
var parts = anatomy.build();
|
|
38
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
39
|
+
0 && (module.exports = {
|
|
40
|
+
anatomy,
|
|
41
|
+
parts
|
|
42
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import { State, Send } from './number-input.types.js';
|
|
3
|
+
import '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
6
|
+
isFocused: boolean;
|
|
7
|
+
isInvalid: boolean;
|
|
8
|
+
isValueEmpty: boolean;
|
|
9
|
+
value: string;
|
|
10
|
+
valueAsNumber: number;
|
|
11
|
+
setValue(value: string | number): void;
|
|
12
|
+
clearValue(): void;
|
|
13
|
+
increment(): void;
|
|
14
|
+
decrement(): void;
|
|
15
|
+
setToMax(): void;
|
|
16
|
+
setToMin(): void;
|
|
17
|
+
focus(): void;
|
|
18
|
+
blur(): void;
|
|
19
|
+
rootProps: T["element"];
|
|
20
|
+
labelProps: T["label"];
|
|
21
|
+
controlProps: T["element"];
|
|
22
|
+
inputProps: T["input"];
|
|
23
|
+
decrementTriggerProps: T["button"];
|
|
24
|
+
incrementTriggerProps: T["button"];
|
|
25
|
+
scrubberProps: T["element"];
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { connect };
|
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/number-input.connect.ts
|
|
21
|
+
var number_input_connect_exports = {};
|
|
22
|
+
__export(number_input_connect_exports, {
|
|
23
|
+
connect: () => connect
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(number_input_connect_exports);
|
|
26
|
+
|
|
27
|
+
// ../../utilities/dom/src/attrs.ts
|
|
28
|
+
var dataAttr = (guard) => {
|
|
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
|
+
var _a;
|
|
47
|
+
const agent = navigator.userAgentData;
|
|
48
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
49
|
+
}
|
|
50
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
51
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
52
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
53
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
54
|
+
|
|
55
|
+
// ../../utilities/dom/src/query.ts
|
|
56
|
+
function isDocument(el) {
|
|
57
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
58
|
+
}
|
|
59
|
+
function isWindow(value) {
|
|
60
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
61
|
+
}
|
|
62
|
+
function getDocument(el) {
|
|
63
|
+
var _a;
|
|
64
|
+
if (isWindow(el))
|
|
65
|
+
return el.document;
|
|
66
|
+
if (isDocument(el))
|
|
67
|
+
return el;
|
|
68
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
69
|
+
}
|
|
70
|
+
function defineDomHelpers(helpers) {
|
|
71
|
+
const dom2 = {
|
|
72
|
+
getRootNode: (ctx) => {
|
|
73
|
+
var _a, _b;
|
|
74
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
75
|
+
},
|
|
76
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
77
|
+
getWin: (ctx) => {
|
|
78
|
+
var _a;
|
|
79
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
80
|
+
},
|
|
81
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
82
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
83
|
+
createEmitter: (ctx, target) => {
|
|
84
|
+
const win = dom2.getWin(ctx);
|
|
85
|
+
return function emit(evt, detail, options) {
|
|
86
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
87
|
+
const eventName = `zag:${evt}`;
|
|
88
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
89
|
+
const event = new win.CustomEvent(eventName, init);
|
|
90
|
+
target.dispatchEvent(event);
|
|
91
|
+
};
|
|
92
|
+
},
|
|
93
|
+
createListener: (target) => {
|
|
94
|
+
return function listen(evt, handler) {
|
|
95
|
+
const eventName = `zag:${evt}`;
|
|
96
|
+
const listener = (e) => handler(e);
|
|
97
|
+
target.addEventListener(eventName, listener);
|
|
98
|
+
return () => target.removeEventListener(eventName, listener);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
return {
|
|
103
|
+
...dom2,
|
|
104
|
+
...helpers
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// ../../utilities/dom/src/event.ts
|
|
109
|
+
function getNativeEvent(e) {
|
|
110
|
+
var _a;
|
|
111
|
+
return (_a = e.nativeEvent) != null ? _a : e;
|
|
112
|
+
}
|
|
113
|
+
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
114
|
+
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
115
|
+
var isLeftClick = (v) => v.button === 0;
|
|
116
|
+
var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
|
|
117
|
+
|
|
118
|
+
// ../../utilities/dom/src/get-event-point.ts
|
|
119
|
+
var fallback = {
|
|
120
|
+
pageX: 0,
|
|
121
|
+
pageY: 0,
|
|
122
|
+
clientX: 0,
|
|
123
|
+
clientY: 0
|
|
124
|
+
};
|
|
125
|
+
function getEventPoint(event, type = "page") {
|
|
126
|
+
var _a, _b;
|
|
127
|
+
const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
|
|
128
|
+
return { x: point[`${type}X`], y: point[`${type}Y`] };
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// ../../utilities/dom/src/keyboard-event.ts
|
|
132
|
+
var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
|
|
133
|
+
var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
|
|
134
|
+
function getEventStep(event) {
|
|
135
|
+
if (event.ctrlKey || event.metaKey) {
|
|
136
|
+
return 0.1;
|
|
137
|
+
} else {
|
|
138
|
+
const isPageKey = PAGE_KEYS.has(event.key);
|
|
139
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
|
|
140
|
+
return isSkipKey ? 10 : 1;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// ../../utilities/number/src/number.ts
|
|
145
|
+
function wrap(num, max) {
|
|
146
|
+
return (num % max + max) % max;
|
|
147
|
+
}
|
|
148
|
+
function roundToDevicePixel(num) {
|
|
149
|
+
if (typeof window === "undefined")
|
|
150
|
+
return Math.round(num);
|
|
151
|
+
const dp = window.devicePixelRatio;
|
|
152
|
+
return Math.floor(num * dp + 0.5) / dp;
|
|
153
|
+
}
|
|
154
|
+
function clamp(v, o) {
|
|
155
|
+
return Math.min(Math.max(valueOf(v), o.min), o.max);
|
|
156
|
+
}
|
|
157
|
+
function countDecimals(value) {
|
|
158
|
+
if (!Number.isFinite(value))
|
|
159
|
+
return 0;
|
|
160
|
+
let e = 1, p = 0;
|
|
161
|
+
while (Math.round(value * e) / e !== value) {
|
|
162
|
+
e *= 10;
|
|
163
|
+
p += 1;
|
|
164
|
+
}
|
|
165
|
+
return p;
|
|
166
|
+
}
|
|
167
|
+
var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
|
|
168
|
+
var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
|
|
169
|
+
function valueOf(v) {
|
|
170
|
+
if (typeof v === "number")
|
|
171
|
+
return v;
|
|
172
|
+
const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
|
|
173
|
+
return !Number.isNaN(num) ? num : 0;
|
|
174
|
+
}
|
|
175
|
+
function formatDecimal(v, o) {
|
|
176
|
+
return new Intl.NumberFormat("en-US", {
|
|
177
|
+
useGrouping: false,
|
|
178
|
+
style: "decimal",
|
|
179
|
+
minimumFractionDigits: o.minFractionDigits,
|
|
180
|
+
maximumFractionDigits: o.maxFractionDigits
|
|
181
|
+
}).format(valueOf(v));
|
|
182
|
+
}
|
|
183
|
+
function decimalOperation(a, op, b) {
|
|
184
|
+
let result = op === "+" ? a + b : a - b;
|
|
185
|
+
if (a % 1 !== 0 || b % 1 !== 0) {
|
|
186
|
+
const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
|
|
187
|
+
a = Math.round(a * multiplier);
|
|
188
|
+
b = Math.round(b * multiplier);
|
|
189
|
+
result = op === "+" ? a + b : a - b;
|
|
190
|
+
result /= multiplier;
|
|
191
|
+
}
|
|
192
|
+
return result;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// src/number-input.anatomy.ts
|
|
196
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
197
|
+
var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
|
|
198
|
+
"root",
|
|
199
|
+
"label",
|
|
200
|
+
"input",
|
|
201
|
+
"control",
|
|
202
|
+
"incrementTrigger",
|
|
203
|
+
"decrementTrigger",
|
|
204
|
+
"scrubber"
|
|
205
|
+
);
|
|
206
|
+
var parts = anatomy.build();
|
|
207
|
+
|
|
208
|
+
// src/number-input.dom.ts
|
|
209
|
+
var dom = defineDomHelpers({
|
|
210
|
+
getRootId: (ctx) => {
|
|
211
|
+
var _a, _b;
|
|
212
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
|
|
213
|
+
},
|
|
214
|
+
getInputId: (ctx) => {
|
|
215
|
+
var _a, _b;
|
|
216
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
|
|
217
|
+
},
|
|
218
|
+
getIncrementTriggerId: (ctx) => {
|
|
219
|
+
var _a, _b;
|
|
220
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
|
|
221
|
+
},
|
|
222
|
+
getDecrementTriggerId: (ctx) => {
|
|
223
|
+
var _a, _b;
|
|
224
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
|
|
225
|
+
},
|
|
226
|
+
getScrubberId: (ctx) => {
|
|
227
|
+
var _a, _b;
|
|
228
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
|
|
229
|
+
},
|
|
230
|
+
getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
|
|
231
|
+
getLabelId: (ctx) => {
|
|
232
|
+
var _a, _b;
|
|
233
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
|
|
234
|
+
},
|
|
235
|
+
getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
|
|
236
|
+
getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
|
|
237
|
+
getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
|
|
238
|
+
getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
|
|
239
|
+
getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
|
|
240
|
+
getPressedTriggerEl: (ctx, hint = ctx.hint) => {
|
|
241
|
+
let btnEl = null;
|
|
242
|
+
if (hint === "increment") {
|
|
243
|
+
btnEl = dom.getIncrementTriggerEl(ctx);
|
|
244
|
+
}
|
|
245
|
+
if (hint === "decrement") {
|
|
246
|
+
btnEl = dom.getDecrementTriggerEl(ctx);
|
|
247
|
+
}
|
|
248
|
+
return btnEl;
|
|
249
|
+
},
|
|
250
|
+
setupVirtualCursor(ctx) {
|
|
251
|
+
if (isSafari() || !supportsPointerEvent())
|
|
252
|
+
return;
|
|
253
|
+
dom.createVirtualCursor(ctx);
|
|
254
|
+
return () => {
|
|
255
|
+
var _a;
|
|
256
|
+
(_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
|
|
257
|
+
};
|
|
258
|
+
},
|
|
259
|
+
preventTextSelection(ctx) {
|
|
260
|
+
const doc = dom.getDoc(ctx);
|
|
261
|
+
const html = doc.documentElement;
|
|
262
|
+
const body = doc.body;
|
|
263
|
+
body.style.pointerEvents = "none";
|
|
264
|
+
html.style.userSelect = "none";
|
|
265
|
+
html.style.cursor = "ew-resize";
|
|
266
|
+
return () => {
|
|
267
|
+
body.style.pointerEvents = "";
|
|
268
|
+
html.style.userSelect = "";
|
|
269
|
+
html.style.cursor = "";
|
|
270
|
+
if (!html.style.length) {
|
|
271
|
+
html.removeAttribute("style");
|
|
272
|
+
}
|
|
273
|
+
if (!body.style.length) {
|
|
274
|
+
body.removeAttribute("style");
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
},
|
|
278
|
+
getMousementValue(ctx, event) {
|
|
279
|
+
const x = roundToDevicePixel(event.movementX);
|
|
280
|
+
const y = roundToDevicePixel(event.movementY);
|
|
281
|
+
let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
|
|
282
|
+
if (ctx.isRtl && hint === "increment")
|
|
283
|
+
hint = "decrement";
|
|
284
|
+
if (ctx.isRtl && hint === "decrement")
|
|
285
|
+
hint = "increment";
|
|
286
|
+
const point = {
|
|
287
|
+
x: ctx.scrubberCursorPoint.x + x,
|
|
288
|
+
y: ctx.scrubberCursorPoint.y + y
|
|
289
|
+
};
|
|
290
|
+
const win = dom.getWin(ctx);
|
|
291
|
+
const width = win.innerWidth;
|
|
292
|
+
const half = roundToDevicePixel(7.5);
|
|
293
|
+
point.x = wrap(point.x + half, width) - half;
|
|
294
|
+
return { hint, point };
|
|
295
|
+
},
|
|
296
|
+
createVirtualCursor(ctx) {
|
|
297
|
+
const doc = dom.getDoc(ctx);
|
|
298
|
+
const el = doc.createElement("div");
|
|
299
|
+
el.className = "scrubber--cursor";
|
|
300
|
+
el.id = dom.getCursorId(ctx);
|
|
301
|
+
Object.assign(el.style, {
|
|
302
|
+
width: "15px",
|
|
303
|
+
height: "15px",
|
|
304
|
+
position: "fixed",
|
|
305
|
+
pointerEvents: "none",
|
|
306
|
+
left: "0px",
|
|
307
|
+
top: "0px",
|
|
308
|
+
zIndex: MAX_Z_INDEX,
|
|
309
|
+
transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
|
|
310
|
+
willChange: "transform"
|
|
311
|
+
});
|
|
312
|
+
el.innerHTML = `
|
|
313
|
+
<svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
|
|
314
|
+
<g transform="translate(2 3)">
|
|
315
|
+
<path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
|
|
316
|
+
<path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
|
|
317
|
+
</g>
|
|
318
|
+
</svg>`;
|
|
319
|
+
doc.body.appendChild(el);
|
|
320
|
+
}
|
|
321
|
+
});
|
|
322
|
+
|
|
323
|
+
// src/number-input.utils.ts
|
|
324
|
+
var utils = {
|
|
325
|
+
isValidNumericEvent: (ctx, event) => {
|
|
326
|
+
var _a, _b;
|
|
327
|
+
if (event.key == null)
|
|
328
|
+
return true;
|
|
329
|
+
const isModifier = isModifiedEvent(event);
|
|
330
|
+
const isSingleKey = event.key.length === 1;
|
|
331
|
+
if (isModifier || !isSingleKey)
|
|
332
|
+
return true;
|
|
333
|
+
return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
|
|
334
|
+
},
|
|
335
|
+
isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
|
|
336
|
+
sanitize: (ctx, value) => {
|
|
337
|
+
var _a;
|
|
338
|
+
return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
|
|
339
|
+
},
|
|
340
|
+
increment: (ctx, step) => {
|
|
341
|
+
const value = increment(ctx.value, step != null ? step : ctx.step);
|
|
342
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
343
|
+
},
|
|
344
|
+
decrement: (ctx, step) => {
|
|
345
|
+
const value = decrement(ctx.value, step != null ? step : ctx.step);
|
|
346
|
+
return formatDecimal(clamp(value, ctx), ctx);
|
|
347
|
+
},
|
|
348
|
+
clamp: (ctx) => {
|
|
349
|
+
return formatDecimal(clamp(ctx.value, ctx), ctx);
|
|
350
|
+
},
|
|
351
|
+
parse: (ctx, value) => {
|
|
352
|
+
var _a, _b;
|
|
353
|
+
return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
|
|
354
|
+
},
|
|
355
|
+
format: (ctx, value) => {
|
|
356
|
+
var _a, _b;
|
|
357
|
+
const _val = value.toString();
|
|
358
|
+
return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
|
|
359
|
+
},
|
|
360
|
+
round: (ctx) => {
|
|
361
|
+
return formatDecimal(ctx.value, ctx);
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
// src/number-input.connect.ts
|
|
366
|
+
function connect(state, send, normalize) {
|
|
367
|
+
const isFocused = state.hasTag("focus");
|
|
368
|
+
const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
|
|
369
|
+
const isDisabled = !!state.context.disabled;
|
|
370
|
+
const isValueEmpty = state.context.isValueEmpty;
|
|
371
|
+
const isIncrementDisabled = isDisabled || !state.context.canIncrement;
|
|
372
|
+
const isDecrementDisabled = isDisabled || !state.context.canDecrement;
|
|
373
|
+
const translations = state.context.translations;
|
|
374
|
+
return {
|
|
375
|
+
isFocused,
|
|
376
|
+
isInvalid,
|
|
377
|
+
isValueEmpty,
|
|
378
|
+
value: state.context.formattedValue,
|
|
379
|
+
valueAsNumber: state.context.valueAsNumber,
|
|
380
|
+
setValue(value) {
|
|
381
|
+
send({ type: "SET_VALUE", value: value.toString() });
|
|
382
|
+
},
|
|
383
|
+
clearValue() {
|
|
384
|
+
send("CLEAR_VALUE");
|
|
385
|
+
},
|
|
386
|
+
increment() {
|
|
387
|
+
send("INCREMENT");
|
|
388
|
+
},
|
|
389
|
+
decrement() {
|
|
390
|
+
send("DECREMENT");
|
|
391
|
+
},
|
|
392
|
+
setToMax() {
|
|
393
|
+
send({ type: "SET_VALUE", value: state.context.max });
|
|
394
|
+
},
|
|
395
|
+
setToMin() {
|
|
396
|
+
send({ type: "SET_VALUE", value: state.context.min });
|
|
397
|
+
},
|
|
398
|
+
focus() {
|
|
399
|
+
var _a;
|
|
400
|
+
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
|
|
401
|
+
},
|
|
402
|
+
blur() {
|
|
403
|
+
var _a;
|
|
404
|
+
(_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
|
|
405
|
+
},
|
|
406
|
+
rootProps: normalize.element({
|
|
407
|
+
id: dom.getRootId(state.context),
|
|
408
|
+
...parts.root.attrs,
|
|
409
|
+
"data-disabled": dataAttr(isDisabled)
|
|
410
|
+
}),
|
|
411
|
+
labelProps: normalize.label({
|
|
412
|
+
...parts.label.attrs,
|
|
413
|
+
"data-disabled": dataAttr(isDisabled),
|
|
414
|
+
"data-invalid": dataAttr(isInvalid),
|
|
415
|
+
id: dom.getLabelId(state.context),
|
|
416
|
+
htmlFor: dom.getInputId(state.context)
|
|
417
|
+
}),
|
|
418
|
+
controlProps: normalize.element({
|
|
419
|
+
...parts.control.attrs,
|
|
420
|
+
role: "group",
|
|
421
|
+
"aria-disabled": isDisabled,
|
|
422
|
+
"data-disabled": dataAttr(isDisabled),
|
|
423
|
+
"data-invalid": dataAttr(isInvalid),
|
|
424
|
+
"aria-invalid": ariaAttr(state.context.invalid)
|
|
425
|
+
}),
|
|
426
|
+
inputProps: normalize.input({
|
|
427
|
+
...parts.input.attrs,
|
|
428
|
+
name: state.context.name,
|
|
429
|
+
form: state.context.form,
|
|
430
|
+
id: dom.getInputId(state.context),
|
|
431
|
+
role: "spinbutton",
|
|
432
|
+
defaultValue: state.context.formattedValue,
|
|
433
|
+
pattern: state.context.pattern,
|
|
434
|
+
inputMode: state.context.inputMode,
|
|
435
|
+
"aria-invalid": isInvalid || void 0,
|
|
436
|
+
"data-invalid": dataAttr(isInvalid),
|
|
437
|
+
disabled: isDisabled,
|
|
438
|
+
"data-disabled": dataAttr(isDisabled),
|
|
439
|
+
readOnly: !!state.context.readOnly,
|
|
440
|
+
autoComplete: "off",
|
|
441
|
+
autoCorrect: "off",
|
|
442
|
+
spellCheck: "false",
|
|
443
|
+
type: "text",
|
|
444
|
+
"aria-roledescription": "numberfield",
|
|
445
|
+
"aria-valuemin": state.context.min,
|
|
446
|
+
"aria-valuemax": state.context.max,
|
|
447
|
+
"aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
|
|
448
|
+
"aria-valuetext": state.context.valueText,
|
|
449
|
+
onFocus() {
|
|
450
|
+
send("FOCUS");
|
|
451
|
+
},
|
|
452
|
+
onBlur() {
|
|
453
|
+
send("BLUR");
|
|
454
|
+
},
|
|
455
|
+
onChange(event) {
|
|
456
|
+
const evt = getNativeEvent(event);
|
|
457
|
+
if (evt.isComposing)
|
|
458
|
+
return;
|
|
459
|
+
send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
|
|
460
|
+
},
|
|
461
|
+
onKeyDown(event) {
|
|
462
|
+
const evt = getNativeEvent(event);
|
|
463
|
+
if (evt.isComposing)
|
|
464
|
+
return;
|
|
465
|
+
if (!utils.isValidNumericEvent(state.context, event)) {
|
|
466
|
+
event.preventDefault();
|
|
467
|
+
}
|
|
468
|
+
const step = getEventStep(event) * state.context.step;
|
|
469
|
+
const keyMap = {
|
|
470
|
+
ArrowUp() {
|
|
471
|
+
send({ type: "ARROW_UP", step });
|
|
472
|
+
},
|
|
473
|
+
ArrowDown() {
|
|
474
|
+
send({ type: "ARROW_DOWN", step });
|
|
475
|
+
},
|
|
476
|
+
Home() {
|
|
477
|
+
send("HOME");
|
|
478
|
+
},
|
|
479
|
+
End() {
|
|
480
|
+
send("END");
|
|
481
|
+
}
|
|
482
|
+
};
|
|
483
|
+
const exec = keyMap[event.key];
|
|
484
|
+
if (exec) {
|
|
485
|
+
exec(event);
|
|
486
|
+
event.preventDefault();
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
}),
|
|
490
|
+
decrementTriggerProps: normalize.button({
|
|
491
|
+
...parts.decrementTrigger.attrs,
|
|
492
|
+
id: dom.getDecrementTriggerId(state.context),
|
|
493
|
+
disabled: isDecrementDisabled,
|
|
494
|
+
"data-disabled": dataAttr(isDecrementDisabled),
|
|
495
|
+
"aria-label": translations.decrementLabel,
|
|
496
|
+
type: "button",
|
|
497
|
+
tabIndex: -1,
|
|
498
|
+
"aria-controls": dom.getInputId(state.context),
|
|
499
|
+
onPointerDown(event) {
|
|
500
|
+
if (isDecrementDisabled)
|
|
501
|
+
return;
|
|
502
|
+
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
|
|
503
|
+
event.preventDefault();
|
|
504
|
+
},
|
|
505
|
+
onPointerUp() {
|
|
506
|
+
send({ type: "PRESS_UP", hint: "decrement" });
|
|
507
|
+
},
|
|
508
|
+
onPointerLeave() {
|
|
509
|
+
if (isDecrementDisabled)
|
|
510
|
+
return;
|
|
511
|
+
send({ type: "PRESS_UP", hint: "decrement" });
|
|
512
|
+
}
|
|
513
|
+
}),
|
|
514
|
+
incrementTriggerProps: normalize.button({
|
|
515
|
+
...parts.incrementTrigger.attrs,
|
|
516
|
+
id: dom.getIncrementTriggerId(state.context),
|
|
517
|
+
disabled: isIncrementDisabled,
|
|
518
|
+
"data-disabled": dataAttr(isIncrementDisabled),
|
|
519
|
+
"aria-label": translations.incrementLabel,
|
|
520
|
+
type: "button",
|
|
521
|
+
tabIndex: -1,
|
|
522
|
+
"aria-controls": dom.getInputId(state.context),
|
|
523
|
+
onPointerDown(event) {
|
|
524
|
+
if (isIncrementDisabled)
|
|
525
|
+
return;
|
|
526
|
+
send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
|
|
527
|
+
event.preventDefault();
|
|
528
|
+
},
|
|
529
|
+
onPointerUp() {
|
|
530
|
+
send({ type: "PRESS_UP", hint: "increment" });
|
|
531
|
+
},
|
|
532
|
+
onPointerLeave() {
|
|
533
|
+
send({ type: "PRESS_UP", hint: "increment" });
|
|
534
|
+
}
|
|
535
|
+
}),
|
|
536
|
+
scrubberProps: normalize.element({
|
|
537
|
+
...parts.scrubber.attrs,
|
|
538
|
+
"data-disabled": dataAttr(isDisabled),
|
|
539
|
+
id: dom.getScrubberId(state.context),
|
|
540
|
+
role: "presentation",
|
|
541
|
+
onMouseDown(event) {
|
|
542
|
+
if (isDisabled)
|
|
543
|
+
return;
|
|
544
|
+
const evt = getNativeEvent(event);
|
|
545
|
+
event.preventDefault();
|
|
546
|
+
const point = getEventPoint(evt);
|
|
547
|
+
point.x = point.x - roundToDevicePixel(7.5);
|
|
548
|
+
point.y = point.y - roundToDevicePixel(7.5);
|
|
549
|
+
send({ type: "PRESS_DOWN_SCRUBBER", point });
|
|
550
|
+
},
|
|
551
|
+
style: {
|
|
552
|
+
cursor: isDisabled ? void 0 : "ew-resize"
|
|
553
|
+
}
|
|
554
|
+
})
|
|
555
|
+
};
|
|
556
|
+
}
|
|
557
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
558
|
+
0 && (module.exports = {
|
|
559
|
+
connect
|
|
560
|
+
});
|