@astryx-vue/core 0.2.6 → 0.4.0

package/dist/NumberInput-AZ9x3oja.js

@@ -1,473 +0,0 @@
-import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$4 } from "./FieldInfoTip-Ds-sW_jY.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as useNumberField } from "./useNumberField-4-dIGVed.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$5 } from "./Field-D5gUEGw4.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useTemplateRef, withCtx, withModifiers } from "vue";
-import "../styles/number-input.css";
-//#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 = ["aria-label"];
-const _hoisted_5 = {
-	key: 5,
-	class: "astryx-number-input-buttons"
-};
-const _hoisted_6 = ["disabled", "aria-label"];
-const _hoisted_7 = ["disabled", "aria-label"];
-const _hoisted_8 = ["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" }
-	},
-	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 incrementLabel = computed(() => messages.value.numberInput.increment(props.label));
-		const decrementLabel = computed(() => messages.value.numberInput.decrement(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 ? String(props.modelValue) : formattedText.value;
-		});
-		const NUMBER_PATTERN = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i;
-		/** 读一段文字里的数字。读不出数字返回 null。 */
-		function parseInputText(text) {
-			const trimmed = text.trim();
-			if (trimmed === "" || !NUMBER_PATTERN.test(trimmed)) return null;
-			const parsed = Number(trimmed);
-			return Number.isFinite(parsed) ? parsed : null;
-		}
-		/** 草稿文本是否有问题：解析不出数字，或者跑出范围 */
-		const isDraftValid = computed(() => {
-			if (draft.value === null || draft.value.trim() === "") return true;
-			const parsed = parseInputText(draft.value);
-			if (parsed == null) return false;
-			if (props.min != null && parsed < props.min) return false;
-			if (props.max != null && parsed > props.max) return false;
-			return !isIntegerOnly.value || Number.isInteger(parsed);
-		});
-		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$5 : 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 controlledAttrs = /* @__PURE__ */ new Set([
-			"class",
-			"style",
-			"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"
-		]);
-		function inputAttrs() {
-			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !controlledAttrs.has(key)));
-		}
-		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 stepBy(direction) {
-			if (isDisabled.value || isReadOnly.value) return;
-			if (numberField.step(direction)) draft.value = null;
-		}
-		function focusInput() {
-			inputElement.value?.focus({ preventScroll: true });
-		}
-		function onInput(event) {
-			const target = event.target;
-			if (isDisabled.value || isReadOnly.value) {
-				target.value = displayValue.value;
-				return;
-			}
-			const text = target.value;
-			draft.value = text;
-			if (text.trim() === "") {
-				numberField.setValue(null);
-				return;
-			}
-			const parsed = parseInputText(text);
-			if (parsed == null) return;
-			numberField.setValue(parsed);
-		}
-		function onFocus(event) {
-			draft.value = null;
-			isFocused.value = true;
-			disabledTooltip.onTooltipPointerEnter();
-			emit("focus", event);
-		}
-		function onBlur(event) {
-			draft.value = null;
-			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") {
-				draft.value = null;
-				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), normalizeProps(guardReactiveProps(fieldBindings.value)), createSlots({
-					default: withCtx((field) => [createElementVNode("div", {
-						ref_key: "container",
-						ref: container,
-						class: normalizeClass(["astryx-number-input", [`size-${props.size}`, unref(attrs).class]]),
-						style: normalizeStyle(unref(attrs).style),
-						"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),
-						hasClear.value && props.modelValue != null && !isDisabled.value && !isReadOnly.value ? (openBlock(), createElementBlock("button", {
-							key: 2,
-							type: "button",
-							class: "astryx-number-input-clear",
-							"aria-label": props.label ? `Clear ${props.label}` : "Clear",
-							onClick: clearValue
-						}, [createVNode(_sfc_main$3, { type: "clear" })], 8, _hoisted_4)) : createCommentVNode("v-if", true),
-						statusValue.value?.message && props.statusVariant === "tooltip" ? (openBlock(), createBlock(_sfc_main$4, {
-							key: 3,
-							text: statusValue.value.message,
-							type: statusValue.value.type
-						}, null, 8, ["text", "type"])) : statusValue.value ? (openBlock(), createBlock(_sfc_main$3, {
-							key: 4,
-							type: statusValue.value.type
-						}, null, 8, ["type"])) : createCommentVNode("v-if", true),
-						props.hasNumberSteppers ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("button", {
-							type: "button",
-							class: "astryx-number-input-button increment",
-							disabled: isDisabled.value || isReadOnly.value || !unref(numberField).canIncrement.value,
-							"aria-label": incrementLabel.value,
-							tabindex: "-1",
-							onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
-							onClick: _cache[1] || (_cache[1] = ($event) => stepFromButton(1))
-						}, [..._cache[6] || (_cache[6] = [createElementVNode("svg", {
-							class: "astryx-number-input-chevron",
-							viewBox: "0 0 12 8",
-							width: "12",
-							height: "8",
-							"aria-hidden": "true",
-							fill: "none"
-						}, [createElementVNode("path", {
-							d: "M1.5 1.75 6 6.25 10.5 1.75",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						})], -1)])], 40, _hoisted_6), createElementVNode("button", {
-							type: "button",
-							class: "astryx-number-input-button decrement",
-							disabled: isDisabled.value || isReadOnly.value || !unref(numberField).canDecrement.value,
-							"aria-label": decrementLabel.value,
-							tabindex: "-1",
-							onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
-							onClick: _cache[3] || (_cache[3] = ($event) => stepFromButton(-1))
-						}, [..._cache[7] || (_cache[7] = [createElementVNode("svg", {
-							class: "astryx-number-input-chevron",
-							viewBox: "0 0 12 8",
-							width: "12",
-							height: "8",
-							"aria-hidden": "true",
-							fill: "none"
-						}, [createElementVNode("path", {
-							d: "M1.5 1.75 6 6.25 10.5 1.75",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						})], -1)])], 40, _hoisted_7)])) : 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_8)) : createCommentVNode("v-if", true)
-					], 46, _hoisted_1)]),
-					_: 2
-				}, [_ctx.$slots.labelIcon ? {
-					name: "labelIcon",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "labelIcon")]),
-					key: "0"
-				} : void 0]), 1040)),
-				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 { _sfc_main as t };