@astryx-vue/core 0.3.0 → 0.4.1

package/dist/NumberInput-3u3NZWnv.js

@@ -0,0 +1,727 @@
+import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { n as useDevWarning } from "./useDevWarning-DznOpOHT.js";
+import { t as _sfc_main$3 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$4 } from "./FieldIcon-BFSHZEs_.js";
+import { t as _sfc_main$5 } from "./FieldInfoTip-BbgLt4ug.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { n as useNumberField, t as computeSteppedValue } from "./useNumberField-Dk1BE3-K.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$6 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$7 } from "./InputClearButton-CfSIqc-V.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useTemplateRef, withCtx, withModifiers } from "vue";
+import "../styles/number-input.css";
+//#region src/NumberInput/numberParser.ts
+const symbolsByLocale = /* @__PURE__ */ new Map();
+function getLocaleNumberSymbols(locale) {
+	const key = locale ?? "";
+	let symbols = symbolsByLocale.get(key);
+	if (symbols === void 0) {
+		let format;
+		try {
+			format = new Intl.NumberFormat(locale);
+		} catch {
+			format = new Intl.NumberFormat("en");
+		}
+		const parts = format.formatToParts(12345.6);
+		const groupSizes = format.formatToParts(11111111111).filter((part) => part.type === "integer").map((part) => part.value.length);
+		const hasGrouping = groupSizes.length > 1;
+		const primary = groupSizes[groupSizes.length - 1];
+		const secondary = groupSizes[groupSizes.length - 2];
+		symbols = {
+			group: (parts.find((part) => part.type === "group")?.value ?? ",").normalize("NFKC"),
+			decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+			primaryGroupSize: hasGrouping && primary != null ? primary : 3,
+			secondaryGroupSize: hasGrouping && secondary != null ? secondary : 3
+		};
+		symbolsByLocale.set(key, symbols);
+	}
+	return symbols;
+}
+const DECIMAL_DIGIT = /\p{Nd}/u;
+const CURRENCY = /\p{Sc}/u;
+const INVISIBLES = /[\u200B-\u200D\u200E\u200F\u061C\u2066-\u2069\uFEFF]/g;
+const MINUS_SIGNS = "−‒–-";
+const NUMBER_BODY = new RegExp(`^[0-9,.' ’٫٬]+$`);
+/** 没有分组、最多一个句点，也就是 `Number()` 能直接读的样子。 */
+const MACHINE_NUMBER = /^(?:\d+(?:\.\d*)?|\.\d+)$/;
+/** 十进制数字的数值。每种数字从 0 起连续排，往回找到 0 即可。 */
+function digitValue(char) {
+	const codePoint = char.codePointAt(0);
+	if (codePoint == null) return null;
+	for (let zero = codePoint; codePoint - zero < 10; zero--) if (!DECIMAL_DIGIT.test(String.fromCodePoint(zero - 1))) return codePoint - zero;
+	return null;
+}
+function toAsciiDigits(text) {
+	let out = "";
+	for (const char of text) {
+		if (!DECIMAL_DIGIT.test(char)) {
+			out += char;
+			continue;
+		}
+		const value = digitValue(char);
+		if (value == null) return null;
+		out += String(value);
+	}
+	return out;
+}
+/**
+* 按一种读法把数字和分隔符收成机器数字。不成组就返回 null。
+* `minGroups` 是至少要看到几个分组符，才相信它是分组而不是小数点。
+*/
+function readUnder(core, group, decimal, primaryGroupSize, secondaryGroupSize, minGroups) {
+	let intText = core;
+	let fracText = null;
+	if (decimal !== "" && core.includes(decimal)) {
+		const at = core.indexOf(decimal);
+		if (core.includes(decimal, at + decimal.length)) return null;
+		intText = core.slice(0, at);
+		fracText = core.slice(at + decimal.length);
+		if (!/^\d*$/.test(fracText)) return null;
+	}
+	let digits;
+	if (group !== "" && intText.includes(group)) {
+		const chunks = intText.split(group);
+		if (chunks.length - 1 < minGroups || !chunks.every((chunk) => /^\d+$/.test(chunk))) return null;
+		const first = chunks[0] ?? "";
+		if ((chunks[chunks.length - 1] ?? "").length !== primaryGroupSize || first.length > secondaryGroupSize) return null;
+		for (let index = 1; index < chunks.length - 1; index++) if ((chunks[index] ?? "").length !== secondaryGroupSize) return null;
+		digits = chunks.join("");
+	} else {
+		if (!/^\d*$/.test(intText)) return null;
+		digits = intText;
+	}
+	if (digits === "" && (fracText == null || fracText === "")) return null;
+	return fracText == null ? digits : `${digits}.${fracText}`;
+}
+/** 没有语言拿来当小数点的分隔符。出现一次、组宽正确，就可以当分组。 */
+function isGroupOnlySeparator(separator) {
+	return /^[\s'\u2019]$/.test(separator);
+}
+function toPlainNumber(core, locale) {
+	if (!NUMBER_BODY.test(core)) return null;
+	const { group, decimal, primaryGroupSize, secondaryGroupSize } = getLocaleNumberSymbols(locale);
+	const inLocale = readUnder(core, group, decimal, primaryGroupSize, secondaryGroupSize, 1);
+	if (inLocale != null) return inLocale;
+	if (MACHINE_NUMBER.test(core)) return core;
+	const separators = [...new Set(core.replace(/\d/g, ""))];
+	if (separators.length === 0 || separators.length > 2) return null;
+	for (const candidate of separators) {
+		const occurrences = core.split(candidate).length - 1;
+		const minGroups = isGroupOnlySeparator(candidate) ? 1 : 2;
+		if (occurrences < minGroups) continue;
+		const other = separators.find((item) => item !== candidate) ?? "";
+		if (other !== "" && core.split(other).length - 1 !== 1) continue;
+		const read = readUnder(core, candidate, other, 3, 3, minGroups);
+		if (read != null) return read;
+	}
+	return null;
+}
+function stripCurrency(text) {
+	let out = text.trim();
+	if (CURRENCY.test(out.charAt(0))) out = out.slice(1).trim();
+	if (CURRENCY.test(out.charAt(out.length - 1))) out = out.slice(0, -1).trim();
+	return out;
+}
+/**
+* 按 `locale` 的写法读一个数字：分组、小数点、数字字形、可选的货币符号，以及表格贴出来的样子。
+* 读不出就返回 null。`123-456-789` 不是数字。
+*/
+function parseLocaleNumber(text, locale) {
+	const normalized = toAsciiDigits(text.normalize("NFKC").replace(INVISIBLES, ""));
+	if (normalized == null) return null;
+	let rest = normalized.trim();
+	let sign = 1;
+	const accounting = /^\((.*)\)$/s.exec(rest);
+	if (accounting) {
+		sign = -1;
+		rest = (accounting[1] ?? "").trim();
+	}
+	rest = stripCurrency(rest);
+	let hasWrittenSign = false;
+	const leadingSign = new RegExp(`^([+${MINUS_SIGNS}])\\s*`).exec(rest);
+	if (leadingSign) {
+		hasWrittenSign = true;
+		sign = leadingSign[1] === "+" ? sign : -sign;
+		rest = rest.slice(leadingSign[0].length);
+	} else {
+		const trailingSign = new RegExp(`\\s*([+${MINUS_SIGNS}])$`).exec(rest);
+		if (trailingSign) {
+			hasWrittenSign = true;
+			sign = trailingSign[1] === "+" ? sign : -sign;
+			rest = rest.slice(0, rest.length - trailingSign[0].length);
+		}
+	}
+	if (accounting && hasWrittenSign) return null;
+	rest = stripCurrency(rest);
+	let exponent = 0;
+	const exponentMatch = /\s*e\s*([+-]?\d+)$/i.exec(rest);
+	if (exponentMatch) {
+		exponent = Number(exponentMatch[1]);
+		rest = rest.slice(0, rest.length - exponentMatch[0].length);
+	}
+	const core = rest.trim();
+	if (core === "") return null;
+	const plain = toPlainNumber(core, locale);
+	if (plain == null) return null;
+	const magnitude = Number(plain);
+	if (!Number.isFinite(magnitude)) return null;
+	const scaled = exponent === 0 ? magnitude : Number((magnitude * 10 ** exponent).toPrecision(15));
+	if (!Number.isFinite(scaled)) return null;
+	const result = sign * scaled;
+	return Object.is(result, -0) ? 0 : result;
+}
+/** 聚焦时显示的文字：机器数字，只把小数点换成当前语言的。 */
+function formatEditableNumber(value, locale) {
+	const { decimal } = getLocaleNumberSymbols(locale);
+	const raw = String(value);
+	return decimal === "." ? raw : raw.replace(".", decimal);
+}
+//#endregion
+//#region src/NumberInput/numberInputCommit.ts
+function parseNumericInput(input, options) {
+	const trimmed = input.trim();
+	if (trimmed === "") return null;
+	const value = parseLocaleNumber(trimmed, options.locale);
+	if (value == null || !Number.isFinite(value)) return null;
+	if (options.isIntegerOnly && !Number.isInteger(value)) return null;
+	return value;
+}
+/** 草稿在范围内才算有效。超出范围返回 null，输入过程中用来标成无效。 */
+function parseNumberInput(input, options) {
+	const value = parseNumericInput(input, options);
+	if (value === null) return null;
+	if (options.min != null && value < options.min) return null;
+	if (options.max != null && value > options.max) return null;
+	return value;
+}
+/**
+* 整段草稿只在离开或按 Enter 时做一次决定。
+* 空草稿：有清除按钮就清空，否则回到原值。
+* 读不出来就回到原值，不把前面几个数字先交上去。
+* 超出范围收到最近的边界。
+*/
+function resolveNumberInputCommit(input, options) {
+	if (input.trim() === "") return options.hasClear ? { type: "clear" } : { type: "revert" };
+	const value = parseNumericInput(input, options);
+	if (value === null) return { type: "revert" };
+	const min = options.min == null ? null : options.isIntegerOnly ? Math.ceil(options.min) : options.min;
+	const max = options.max == null ? null : options.isIntegerOnly ? Math.floor(options.max) : options.max;
+	if (min != null && max != null && min > max) return { type: "revert" };
+	const committedValue = min != null && value < min ? min : max != null && value > max ? max : value;
+	return {
+		type: "commit",
+		value: committedValue,
+		didClamp: committedValue !== value
+	};
+}
+//#endregion
+//#region src/NumberInput/NumberInput.vue
+const _hoisted_1 = [
+	"data-status",
+	"data-disabled",
+	"data-readonly"
+];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-number-input-icon",
+	"aria-hidden": "true"
+};
+const _hoisted_3 = [
+	"id",
+	"inputmode",
+	"value",
+	"name",
+	"placeholder",
+	"autocomplete",
+	"disabled",
+	"readonly",
+	"aria-disabled",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-required",
+	"aria-invalid",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-autofocus",
+	"aria-label"
+];
+const _hoisted_4 = {
+	key: 5,
+	class: "astryx-number-input-buttons"
+};
+const _hoisted_5 = ["disabled", "aria-label"];
+const _hoisted_6 = ["disabled", "aria-label"];
+const _hoisted_7 = ["name", "value"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxNumberInput",
+	inheritAttrs: false,
+	__name: "NumberInput",
+	props: {
+		modelValue: { default: null },
+		id: {},
+		placeholder: { default: "" },
+		min: {},
+		max: {},
+		step: { default: 1 },
+		isDisabled: { type: Boolean },
+		disabled: { type: Boolean },
+		disabledMessage: {},
+		disabledReason: {},
+		isReadOnly: { type: Boolean },
+		size: { default: "md" },
+		label: {},
+		description: {},
+		isLabelHidden: { type: Boolean },
+		isOptional: { type: Boolean },
+		isRequired: { type: Boolean },
+		labelTooltip: {},
+		labelIcon: {},
+		startIcon: {},
+		units: {},
+		hasClear: { type: Boolean },
+		clearable: { type: Boolean },
+		hasNumberSteppers: { type: Boolean },
+		hasAutoFocus: { type: Boolean },
+		isIntegerOnly: { type: Boolean },
+		isWheelEnabled: {
+			type: Boolean,
+			default: true
+		},
+		formatValue: {},
+		autoComplete: {},
+		width: {},
+		htmlName: {},
+		name: {},
+		status: {},
+		statusVariant: { default: "attached" },
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur",
+		"enter",
+		"keydown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const PassThrough = defineComponent({
+			name: "NumberInputPassThrough",
+			setup(_, { slots }) {
+				return () => slots.default?.({});
+			}
+		});
+		const attrs = useAttrs();
+		const inputElement = useTemplateRef("input");
+		const container = useTemplateRef("container");
+		const generatedId = `astryx-number-input-${useId()}`;
+		const unitsId = `${generatedId}-units`;
+		const disabledDescriptionId = `${generatedId}-disabled`;
+		const disabledTooltipId = `${generatedId}-tooltip`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const incrementLabel = computed(() => messages.value.numberInput.increment(props.label));
+		const decrementLabel = computed(() => messages.value.numberInput.decrement(props.label));
+		const resolvedClearLabel = computed(() => messages.value.numberInput.clear(props.label));
+		const ariaRequired = useAriaRequired(props);
+		const isDisabled = computed(() => Boolean(props.isDisabled || props.disabled));
+		const isReadOnly = computed(() => Boolean(props.isReadOnly));
+		const isIntegerOnly = computed(() => Boolean(props.isIntegerOnly));
+		const hasClear = computed(() => Boolean(props.hasClear || props.clearable));
+		const resolvedName = computed(() => props.htmlName ?? props.name);
+		const disabledMessage = computed(() => props.disabledMessage ?? props.disabledReason);
+		const showsDisabledMessage = computed(() => isDisabled.value && !!disabledMessage.value?.trim());
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const icon = computed(() => props.startIcon ? toRaw(props.startIcon) : void 0);
+		const labelIcon = computed(() => props.labelIcon ? toRaw(props.labelIcon) : void 0);
+		/** 正在编辑的原始文本；null 表示没有未提交的输入，按聚焦状态决定显示什么 */
+		const draft = shallowRef(null);
+		const isFocused = shallowRef(false);
+		const formattedText = computed(() => {
+			if (props.modelValue == null) return "";
+			return props.formatValue?.(props.modelValue) ?? String(props.modelValue);
+		});
+		const displayValue = computed(() => {
+			if (draft.value !== null) return draft.value;
+			if (props.modelValue == null) return "";
+			return isFocused.value ? formatEditableNumber(props.modelValue, locale.value) : formattedText.value;
+		});
+		function draftOptions() {
+			return {
+				min: props.min,
+				max: props.max,
+				isIntegerOnly: isIntegerOnly.value,
+				locale: locale.value
+			};
+		}
+		/** 草稿文本是否有问题：解析不出数字，或者跑出范围。空草稿不算无效。 */
+		const isDraftValid = computed(() => {
+			if (draft.value === null || draft.value.trim() === "") return true;
+			return parseNumberInput(draft.value, draftOptions()) !== null;
+		});
+		/** 步进从草稿的读数走。读不出来就用已经提交的值。 */
+		const valueForStepping = computed(() => {
+			if (draft.value === null) return props.modelValue ?? null;
+			if (draft.value.trim() === "") return null;
+			return parseNumberInput(draft.value, draftOptions()) ?? props.modelValue ?? null;
+		});
+		const modelValueRef = computed({
+			get: () => props.modelValue ?? null,
+			set: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		const numberField = useNumberField({
+			value: modelValueRef,
+			min: () => props.min,
+			max: () => props.max,
+			step: () => props.step,
+			disabled: isDisabled,
+			readOnly: isReadOnly,
+			integerOnly: isIntegerOnly,
+			onChange: (value) => {
+				modelValueRef.value = value;
+			}
+		});
+		function resolvedStatus(status) {
+			if (status == null || status === "default") return void 0;
+			if (typeof status === "string") return { type: status };
+			return status;
+		}
+		const statusValue = computed(() => resolvedStatus(props.status));
+		const statusType = computed(() => statusValue.value?.type);
+		const showsField = computed(() => {
+			if (props.isLabelHidden && !props.description && !statusValue.value?.message) return false;
+			return Boolean(props.label || props.description || statusValue.value?.message);
+		});
+		const shell = computed(() => showsField.value ? _sfc_main$6 : PassThrough);
+		const fieldBindings = computed(() => showsField.value ? {
+			label: props.label ?? "",
+			inputId: inputId.value,
+			description: props.description,
+			isLabelHidden: props.isLabelHidden || !props.label,
+			isDisabled: isDisabled.value,
+			isOptional: props.isOptional,
+			isRequired: props.isRequired,
+			labelIcon: labelIcon.value,
+			labelTooltip: props.labelTooltip,
+			status: statusValue.value,
+			statusVariant: props.statusVariant,
+			width: props.width
+		} : {});
+		const parts = useFieldPartStyling({
+			component: "NumberInput",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"value",
+				"type",
+				"disabled",
+				"readonly",
+				"autofocus",
+				"role",
+				"inputmode",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-invalid",
+				"aria-disabled",
+				"aria-valuenow",
+				"aria-valuemin",
+				"aria-valuemax",
+				"aria-valuetext",
+				"name"
+			]
+		});
+		useDevWarning("NumberInput", "`containerClass`/`containerStyle` have no effect here because no Field box renders.", () => !showsField.value && (props.containerClass != null && props.containerClass !== false || props.containerStyle != null && props.containerStyle !== false));
+		function inputAttrs() {
+			return parts.forwardedAttrs();
+		}
+		function describedBy(fieldIds) {
+			return [
+				attrs["aria-describedby"],
+				fieldIds,
+				props.units ? unitsId : void 0,
+				showsDisabledMessage.value ? disabledDescriptionId : void 0
+			].filter(Boolean).join(" ") || void 0;
+		}
+		function labelledBy(fieldLabelId) {
+			return [fieldLabelId, attrs["aria-labelledby"]].filter(Boolean).join(" ") || void 0;
+		}
+		function nextStep(direction) {
+			return computeSteppedValue({
+				currentValue: valueForStepping.value,
+				direction,
+				min: props.min ?? null,
+				max: props.max ?? null,
+				step: props.step,
+				integerOnly: isIntegerOnly.value
+			});
+		}
+		const canIncrement = computed(() => nextStep(1) !== valueForStepping.value);
+		const canDecrement = computed(() => nextStep(-1) !== valueForStepping.value);
+		function stepBy(direction) {
+			if (isDisabled.value || isReadOnly.value) return;
+			const next = nextStep(direction);
+			if (next == null) return;
+			draft.value = null;
+			if (next !== (props.modelValue ?? null)) numberField.setValue(next);
+		}
+		function focusInput() {
+			inputElement.value?.focus({ preventScroll: true });
+		}
+		function onInput(event) {
+			const target = event.target;
+			if (isDisabled.value || isReadOnly.value) {
+				target.value = displayValue.value;
+				return;
+			}
+			draft.value = target.value;
+		}
+		function commitDraft(trigger) {
+			if (draft.value === null) return;
+			const decision = resolveNumberInputCommit(draft.value, {
+				...draftOptions(),
+				hasClear: hasClear.value
+			});
+			if (trigger === "blur" || decision.type === "commit" && decision.didClamp) draft.value = null;
+			if (decision.type === "clear") {
+				if (hasClear.value && props.modelValue != null) numberField.setValue(null);
+			} else if (decision.type === "commit" && decision.value !== props.modelValue) numberField.setValue(decision.value);
+		}
+		function onFocus(event) {
+			draft.value = null;
+			isFocused.value = true;
+			disabledTooltip.onTooltipPointerEnter();
+			emit("focus", event);
+		}
+		function onBlur(event) {
+			commitDraft("blur");
+			isFocused.value = false;
+			disabledTooltip.onBlur();
+			emit("blur", event);
+		}
+		function onKeyDown(event) {
+			if (event.isComposing || event.keyCode === 229) return;
+			if (!(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+				emit("keydown", event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				stepBy(event.key === "ArrowUp" ? 1 : -1);
+				return;
+			}
+			if (event.key === "Enter") {
+				commitDraft("enter");
+				emit("enter", event);
+			}
+			emit("keydown", event);
+		}
+		function onWheel(event) {
+			if (!props.isWheelEnabled || isDisabled.value || isReadOnly.value) return;
+			if (document.activeElement !== inputElement.value) return;
+			if (event.deltaY === 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+			event.preventDefault();
+			event.stopPropagation();
+			stepBy(event.deltaY < 0 ? 1 : -1);
+		}
+		async function clearValue() {
+			if (isDisabled.value || isReadOnly.value) return;
+			draft.value = null;
+			numberField.setValue(null);
+			await nextTick();
+			focusInput();
+		}
+		function focusFromContainer(event) {
+			if (isDisabled.value) return;
+			const target = event.target;
+			if (target instanceof Element && target.closest("input,button,a,select,textarea,[role=\"button\"]")) return;
+			if (inputElement.value?.ownerDocument.getSelection()?.toString()) return;
+			focusInput();
+		}
+		function stepFromButton(direction) {
+			focusInput();
+			stepBy(direction);
+		}
+		onMounted(() => {
+			if (props.hasAutoFocus) focusInput();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				(openBlock(), createBlock(resolveDynamicComponent(shell.value), mergeProps(fieldBindings.value, {
+					class: showsField.value ? unref(parts).containerClass.value : void 0,
+					style: showsField.value ? unref(parts).containerStyle.value : void 0
+				}), createSlots({
+					default: withCtx((field) => [createElementVNode("div", {
+						ref_key: "container",
+						ref: container,
+						class: normalizeClass(["astryx-number-input", [`size-${props.size}`, unref(parts).controlClass()]]),
+						style: normalizeStyle(unref(parts).controlStyle()),
+						"data-status": statusType.value,
+						"data-disabled": isDisabled.value || void 0,
+						"data-readonly": isReadOnly.value || void 0,
+						onPointerup: focusFromContainer,
+						onPointerenter: _cache[4] || (_cache[4] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[5] || (_cache[5] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [
+						_ctx.$slots.icon || icon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true),
+						createElementVNode("input", mergeProps({
+							id: inputId.value,
+							ref: "input"
+						}, inputAttrs(), {
+							type: "text",
+							class: "astryx-number-input-field",
+							inputmode: isIntegerOnly.value ? "numeric" : "decimal",
+							role: "spinbutton",
+							value: displayValue.value,
+							name: resolvedName.value && !isDisabled.value && !props.formatValue ? resolvedName.value : void 0,
+							placeholder: props.placeholder,
+							autocomplete: props.autoComplete ?? inputAttrs().autocomplete,
+							disabled: isDisabled.value && !showsDisabledMessage.value,
+							readonly: isReadOnly.value || showsDisabledMessage.value,
+							"aria-disabled": showsDisabledMessage.value || void 0,
+							"aria-valuemin": props.min ?? void 0,
+							"aria-valuemax": props.max ?? void 0,
+							"aria-valuenow": props.modelValue ?? void 0,
+							"aria-valuetext": props.modelValue == null || !props.formatValue ? void 0 : formattedText.value,
+							"aria-required": unref(ariaRequired),
+							"aria-invalid": statusType.value === "error" || !isDraftValid.value ? "true" : void 0,
+							"aria-labelledby": labelledBy(field?.labelId),
+							"aria-describedby": describedBy(field?.describedBy),
+							"data-autofocus": props.hasAutoFocus || void 0,
+							"aria-label": showsField.value ? void 0 : props.label,
+							onInput,
+							onKeydown: onKeyDown,
+							onFocus,
+							onBlur,
+							onWheel
+						}), null, 16, _hoisted_3),
+						props.units ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							id: unitsId,
+							class: "astryx-number-input-units"
+						}, toDisplayString(props.units), 1)) : createCommentVNode("v-if", true),
+						createVNode(_sfc_main$1, {
+							as: "div",
+							role: "alert",
+							"aria-live": "assertive"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(isDraftValid.value ? "" : unref(messages).numberInput.invalidNumber), 1)]),
+							_: 1
+						}),
+						hasClear.value && props.modelValue != null && !isDisabled.value && !isReadOnly.value ? (openBlock(), createBlock(_sfc_main$7, {
+							key: 2,
+							class: "astryx-number-input-clear",
+							label: resolvedClearLabel.value,
+							onClick: clearValue
+						}, null, 8, ["label"])) : createCommentVNode("v-if", true),
+						statusValue.value?.message && props.statusVariant === "tooltip" ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 3,
+							text: statusValue.value.message,
+							type: statusValue.value.type
+						}, null, 8, ["text", "type"])) : statusValue.value ? (openBlock(), createBlock(_sfc_main$4, {
+							key: 4,
+							type: statusValue.value.type
+						}, null, 8, ["type"])) : createCommentVNode("v-if", true),
+						props.hasNumberSteppers ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("button", {
+							type: "button",
+							class: "astryx-number-input-button increment",
+							disabled: isDisabled.value || isReadOnly.value || !canIncrement.value,
+							"aria-label": incrementLabel.value,
+							tabindex: "-1",
+							onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+							onClick: _cache[1] || (_cache[1] = ($event) => stepFromButton(1))
+						}, [createVNode(_sfc_main$3, {
+							class: "astryx-number-input-chevron",
+							icon: "numberInput:stepperDown",
+							size: "xsm"
+						})], 40, _hoisted_5), createElementVNode("button", {
+							type: "button",
+							class: "astryx-number-input-button decrement",
+							disabled: isDisabled.value || isReadOnly.value || !canDecrement.value,
+							"aria-label": decrementLabel.value,
+							tabindex: "-1",
+							onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+							onClick: _cache[3] || (_cache[3] = ($event) => stepFromButton(-1))
+						}, [createVNode(_sfc_main$3, {
+							class: "astryx-number-input-chevron",
+							icon: "numberInput:stepperDown",
+							size: "xsm"
+						})], 40, _hoisted_6)])) : createCommentVNode("v-if", true),
+						resolvedName.value && !isDisabled.value && props.formatValue ? (openBlock(), createElementBlock("input", {
+							key: 6,
+							type: "hidden",
+							name: resolvedName.value,
+							value: props.modelValue ?? ""
+						}, null, 8, _hoisted_7)) : createCommentVNode("v-if", true)
+					], 46, _hoisted_1)]),
+					_: 2
+				}, [_ctx.$slots.labelIcon ? {
+					name: "labelIcon",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "labelIcon")]),
+					key: "0"
+				} : void 0]), 1040, ["class", "style"])),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					id: disabledDescriptionId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					id: disabledTooltipId,
+					anchor: container.value,
+					open: unref(disabledTooltip).isOpen.value,
+					text: disabledMessage.value ?? "",
+					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+				}, null, 8, [
+					"anchor",
+					"open",
+					"text",
+					"onPointerEnter",
+					"onPointerLeave"
+				])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { resolveNumberInputCommit as n, _sfc_main as t };