@atscript/vue-form 0.1.58

package/dist/as-decimal-BJIGgPXU.cjs

@@ -0,0 +1,711 @@
+const require_use_as_locale = require("./use-as-locale-C4z5stwD.cjs");
+const require_as_field_shell = require("./as-field-shell-B2iTn-iM.cjs");
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+//#region src/composables/_shape.ts
+/**
+* Match the input shape on commit: `null`/`undefined` model → write the
+* canonical string (first-ever commit); pre-existing string → string;
+* pre-existing number → number (caller opted into float; the precision
+* loss is on them).
+*
+* Shared by `useAsDecimal` and `useAsNumber`. Not exported from the
+* package barrel — internal helper, no public surface.
+*/
+function preserveShape(original, normalized) {
+	if (original === null || original === void 0) return normalized;
+	if (typeof original === "string") return normalized;
+	return Number(normalized);
+}
+//#endregion
+//#region src/composables/use-as-decimal.ts
+/**
+* Reactive composable for decimal-typed inputs (the `AsDecimal` SFC and
+* customer swaps built against `TAsComponentProps`).
+*
+* Currency-agnostic: the SFC owns prefix/suffix render concerns and
+* resolves the effective scale via the `scale` prop set by AsField. This
+* composable just operates on the model with the scale given to it.
+*
+* Storage shape is preserved on commit — string `modelValue` commits a
+* string padded to `storageScale`; number `modelValue` commits a number.
+* A change to the effective `scale` getter that shrinks it below the
+* model's actual precision triggers a re-round + re-commit (the same
+* "currency-change" behaviour as before).
+*/
+function useAsDecimal(opts) {
+	const localeCtx = require_use_as_locale.useAsLocale();
+	const locale = (0, vue.computed)(() => {
+		const explicit = opts.locale?.();
+		if (explicit) return explicit;
+		return localeCtx.locale.value;
+	});
+	const scale = (0, vue.computed)(() => {
+		const s = opts.scale?.();
+		if (s !== void 0) return s;
+		const storage = opts.storageScale?.();
+		if (storage !== void 0) return storage;
+		return 2;
+	});
+	const storageScale = (0, vue.computed)(() => {
+		const storage = opts.storageScale?.();
+		if (storage !== void 0) return storage;
+		const s = opts.scale?.();
+		if (s !== void 0) return s;
+		return 2;
+	});
+	const decimalSeparator = (0, vue.computed)(() => (0, _atscript_ui.getDecimalSeparator)(locale.value));
+	const thousandsSeparator = (0, vue.computed)(() => (0, _atscript_ui.getThousandsSeparator)(locale.value));
+	const rawValue = (0, vue.computed)(() => {
+		const v = opts.modelValue();
+		if (v === null || v === void 0) return "";
+		const s = typeof v === "number" ? Number.isFinite(v) ? String(v) : "" : v;
+		if (s === "") return "";
+		return (0, _atscript_ui.enforceScale)(s, scale.value);
+	});
+	const displayValue = (0, vue.computed)(() => {
+		if (rawValue.value === "") return "";
+		return (0, _atscript_ui.formatDecimalForDisplay)({
+			value: rawValue.value,
+			scale: scale.value,
+			locale: locale.value
+		});
+	});
+	const parts = (0, vue.computed)(() => {
+		const raw = rawValue.value;
+		if (raw === "") return {
+			sign: "",
+			integer: "",
+			decimal: ""
+		};
+		const split = (0, _atscript_ui.splitDecimalString)(raw);
+		return {
+			sign: split.sign,
+			integer: (0, _atscript_ui.groupInteger)(split.integer, locale.value),
+			decimal: split.decimal
+		};
+	});
+	function commit(canonical) {
+		const padded = (0, _atscript_ui.enforceScale)(canonical, storageScale.value);
+		const shaped = preserveShape(opts.modelValue(), padded);
+		opts.onCommit(shaped);
+	}
+	function setFromInput(raw) {
+		if (raw.trim() === "") {
+			opts.onCommit(null);
+			return;
+		}
+		const parsed = (0, _atscript_ui.parseDecimalInput)(raw, locale.value);
+		if (parsed === null) return;
+		commit((0, _atscript_ui.enforceScale)(parsed, scale.value));
+	}
+	function setFromParts(sign, integer, decimal) {
+		if (integer === "" && decimal === "") {
+			opts.onCommit(null);
+			return;
+		}
+		const intDigits = integer.replace(/\D/g, "");
+		const decDigits = decimal.replace(/\D/g, "");
+		commit((0, _atscript_ui.enforceScale)((0, _atscript_ui.joinDecimalString)({
+			sign,
+			integer: intDigits === "" ? "0" : intDigits,
+			decimal: decDigits
+		}), scale.value));
+	}
+	(0, vue.watch)(scale, (newScale, oldScale) => {
+		if (oldScale === void 0) return;
+		if (newScale >= oldScale) return;
+		const v = opts.modelValue();
+		if (v === null || v === void 0) return;
+		const s = typeof v === "number" ? Number.isFinite(v) ? String(v) : "" : v;
+		if (s === "") return;
+		if ((0, _atscript_ui.splitDecimalString)(s).decimal.length <= newScale) return;
+		const shaped = preserveShape(v, (0, _atscript_ui.enforceScale)((0, _atscript_ui.enforceScale)(s, newScale), storageScale.value));
+		opts.onCommit(shaped);
+	}, { flush: "sync" });
+	return {
+		scale,
+		storageScale,
+		decimalSeparator,
+		thousandsSeparator,
+		displayValue,
+		rawValue,
+		parts,
+		setFromInput,
+		setFromParts
+	};
+}
+//#endregion
+//#region src/composables/use-as-dual-input.ts
+function digitsOnly(s) {
+	return s.replace(/\D/g, "");
+}
+function useAsDualInput(opts) {
+	const integerInput = (0, vue.ref)(null);
+	const decimalInput = (0, vue.ref)(null);
+	const focusActive = (0, vue.ref)(false);
+	const decimalDirty = (0, vue.ref)(false);
+	const decimalEdit = (0, vue.ref)(null);
+	const integerDisplay = (0, vue.computed)(() => {
+		const parts = opts.parts();
+		if (focusActive.value) {
+			const raw = opts.rawValue();
+			if (raw === "") return "";
+			const p = (0, _atscript_ui.splitDecimalString)(raw);
+			return `${p.sign}${p.integer}`;
+		}
+		return parts.sign + parts.integer;
+	});
+	const decimalDisplay = (0, vue.computed)(() => {
+		if (decimalEdit.value !== null) return decimalEdit.value;
+		if (opts.rawValue() === "") return "";
+		const parts = opts.parts();
+		const d = parts.decimal;
+		if (!/^0*$/.test(d)) return d;
+		const isZeroShaped = /^-?0*$/.test(parts.integer);
+		if (focusActive.value && !decimalDirty.value) return "";
+		if (isZeroShaped && !decimalDirty.value) return "";
+		return d;
+	});
+	function onIntegerFocus(e) {
+		focusActive.value = true;
+		decimalEdit.value = null;
+		if (e?.relatedTarget !== decimalInput.value) selectAllOnFocus(e?.target);
+	}
+	function onDecimalFocus(e) {
+		focusActive.value = true;
+		const parts = opts.parts();
+		const d = parts.decimal;
+		const i = parts.integer;
+		const isZeroShaped = i === "" || /^-?0*$/.test(i);
+		if (/^0*$/.test(d) && (isZeroShaped || !decimalDirty.value)) decimalEdit.value = "";
+		else decimalEdit.value = d;
+		if (e?.relatedTarget !== integerInput.value) selectAllOnFocus(e?.target);
+	}
+	/**
+	* UX polish: numeric inputs always select-all on focus so the next
+	* keystroke replaces the existing value. Without this, typing `5` into
+	* "1" produces "15" / "51" depending on where the caret lands —
+	* confusing for a numeric field where most edits replace rather than
+	* append. Synchronous: selecting the pre-render value is fine because
+	* (a) Vue's :value re-binding preserves the selection range, and
+	* (b) the user only sees one frame either way.
+	*/
+	function selectAllOnFocus(target) {
+		const el = target;
+		if (!el || typeof el.select !== "function") return;
+		el.select();
+	}
+	function onBlurAll(e) {
+		const next = e.relatedTarget;
+		if (next === integerInput.value || next === decimalInput.value) return;
+		focusActive.value = false;
+		decimalDirty.value = false;
+		decimalEdit.value = null;
+		opts.onBlur?.();
+	}
+	function commitIntegerHalf(rawInteger) {
+		let sign = "";
+		let body = rawInteger;
+		if (body.startsWith("-")) {
+			sign = "-";
+			body = body.slice(1);
+		}
+		const intDigits = digitsOnly(body);
+		const curDec = opts.parts().decimal;
+		opts.setFromParts(sign, intDigits, curDec);
+	}
+	function commitDecimalHalf(rawDecimal) {
+		const decDigits = digitsOnly(rawDecimal).slice(0, opts.scale());
+		const p = (0, _atscript_ui.splitDecimalString)(opts.rawValue());
+		opts.setFromParts(p.sign, p.integer, decDigits);
+	}
+	async function focusDecimal(at) {
+		await (0, vue.nextTick)();
+		const el = decimalInput.value;
+		if (!el) return;
+		el.focus();
+		if (typeof at === "number") {
+			const pos = Math.max(0, Math.min(at, el.value.length));
+			try {
+				el.setSelectionRange(pos, pos);
+			} catch {}
+		} else try {
+			el.select();
+		} catch {}
+	}
+	async function focusInteger(atEnd) {
+		await (0, vue.nextTick)();
+		const el = integerInput.value;
+		if (!el) return;
+		el.focus();
+		if (atEnd) {
+			const pos = el.value.length;
+			try {
+				el.setSelectionRange(pos, pos);
+			} catch {}
+		}
+	}
+	function onIntegerKeydown(e) {
+		const el = e.target;
+		const sc = opts.scale();
+		if (e.key === "ArrowRight" && el.selectionStart === el.value.length && sc > 0) {
+			e.preventDefault();
+			focusDecimal(0);
+			return;
+		}
+		if ((e.key === "." || e.key === ",") && sc > 0) {
+			e.preventDefault();
+			focusDecimal();
+			return;
+		}
+		if (e.key === "-") {
+			e.preventDefault();
+			const p = (0, _atscript_ui.splitDecimalString)(opts.rawValue());
+			const newSign = p.sign === "-" ? "" : "-";
+			opts.setFromParts(newSign, p.integer, p.decimal);
+			return;
+		}
+	}
+	function onDecimalKeydown(e) {
+		const el = e.target;
+		if (e.key === "ArrowLeft" && el.selectionStart === 0) {
+			e.preventDefault();
+			focusInteger(true);
+			return;
+		}
+		if (e.key === "Backspace" && el.selectionStart === 0 && el.selectionEnd === 0) {
+			e.preventDefault();
+			focusInteger(true);
+			return;
+		}
+		if (/^[0-9]$/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault();
+			const start = el.selectionStart ?? 0;
+			const end = el.selectionEnd ?? 0;
+			const current = el.value;
+			const cap = opts.scale();
+			if (start === end && start >= cap) return;
+			let next;
+			let newCursor;
+			if (start !== end) {
+				next = current.slice(0, start) + e.key + current.slice(end);
+				newCursor = start + 1;
+			} else if (start < current.length) {
+				next = current.slice(0, start) + e.key + current.slice(start + 1);
+				newCursor = start + 1;
+			} else {
+				next = current + e.key;
+				newCursor = next.length;
+			}
+			if (next.length > cap) next = next.slice(0, cap);
+			decimalDirty.value = true;
+			decimalEdit.value = next;
+			commitDecimalHalf(next);
+			(0, vue.nextTick)().then(() => {
+				try {
+					el.setSelectionRange(newCursor, newCursor);
+				} catch {}
+			});
+			return;
+		}
+		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault();
+			return;
+		}
+	}
+	function onIntegerInput(e) {
+		const el = e.target;
+		let raw = el.value;
+		let sign = "";
+		if (raw.startsWith("-")) {
+			sign = "-";
+			raw = raw.slice(1);
+		}
+		const cleaned = `${sign}${digitsOnly(raw)}`;
+		if (cleaned !== el.value) el.value = cleaned;
+		commitIntegerHalf(cleaned);
+	}
+	function onDecimalInput(e) {
+		const el = e.target;
+		decimalDirty.value = true;
+		const cleaned = digitsOnly(el.value).slice(0, opts.scale());
+		if (cleaned !== el.value) el.value = cleaned;
+		decimalEdit.value = cleaned;
+		commitDecimalHalf(cleaned);
+	}
+	function onIntegerPaste(e) {
+		const text = e.clipboardData?.getData("text") ?? "";
+		if (!text) return;
+		const sep = opts.decimalSeparator();
+		if (text.includes(sep) || sep !== "." && text.includes(".") || sep !== "," && text.includes(",")) {
+			e.preventDefault();
+			opts.setFromInput(text);
+			focusDecimal(opts.scale());
+			return;
+		}
+	}
+	function onDecimalPaste(e) {
+		const text = e.clipboardData?.getData("text") ?? "";
+		if (!text) return;
+		e.preventDefault();
+		decimalDirty.value = true;
+		const cleaned = digitsOnly(text).slice(0, opts.scale());
+		const el = e.target;
+		el.value = cleaned;
+		decimalEdit.value = cleaned;
+		commitDecimalHalf(cleaned);
+	}
+	return {
+		integerInput,
+		decimalInput,
+		integerDisplay,
+		decimalDisplay,
+		focusActive,
+		onIntegerFocus,
+		onDecimalFocus,
+		onBlurAll,
+		onIntegerInput,
+		onIntegerKeydown,
+		onIntegerPaste,
+		onDecimalInput,
+		onDecimalKeydown,
+		onDecimalPaste
+	};
+}
+//#endregion
+//#region src/components/defaults/as-decimal.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["title"];
+const _hoisted_2 = {
+	key: 1,
+	class: "as-prefix",
+	"aria-hidden": "true"
+};
+const _hoisted_3 = [
+	"id",
+	"value",
+	"placeholder",
+	"name",
+	"disabled",
+	"readonly",
+	"aria-required",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-label"
+];
+const _hoisted_4 = {
+	class: "as-decimal-sep",
+	"aria-hidden": "true"
+};
+const _hoisted_5 = [
+	"value",
+	"maxlength",
+	"size",
+	"disabled",
+	"readonly",
+	"aria-label"
+];
+const _hoisted_6 = {
+	key: 3,
+	class: "as-suffix",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/components/defaults/as-decimal.vue
+var as_decimal_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-decimal",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { scale, decimalSeparator, rawValue, parts, setFromInput, setFromParts } = useAsDecimal({
+			modelValue: () => props.model.value,
+			scale: () => props.scale,
+			storageScale: () => props.precisionScale,
+			onCommit: (v) => {
+				props.model.value = v;
+			}
+		});
+		const { integerInput, decimalInput, integerDisplay, decimalDisplay, onIntegerFocus, onDecimalFocus, onBlurAll, onIntegerInput, onIntegerKeydown, onIntegerPaste, onDecimalInput, onDecimalKeydown, onDecimalPaste } = useAsDualInput({
+			scale: () => scale.value,
+			decimalSeparator: () => decimalSeparator.value,
+			parts: () => parts.value,
+			rawValue: () => rawValue.value,
+			setFromParts,
+			setFromInput,
+			onBlur: () => props.onBlur()
+		});
+		const isNegative = (0, vue.computed)(() => parts.value.sign === "-");
+		const shellTitle = (0, vue.computed)(() => props.currencyCode ?? props.unitCode ?? void 0);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_as_field_shell.as_field_shell_default, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(_ctx.$props)), {
+				default: (0, vue.withCtx)(({ inputId }) => [(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)(["as-decimal", {
+						"as-decimal-negative": isNegative.value,
+						error: !!__props.error,
+						required: __props.required
+					}]),
+					title: shellTitle.value
+				}, [
+					__props.prefixIcon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 0,
+						class: (0, vue.normalizeClass)(["as-prefix-icon", __props.prefixIcon]),
+						"aria-hidden": "true"
+					}, null, 2)) : (0, vue.createCommentVNode)("v-if", true),
+					__props.prefix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(__props.prefix), 1)) : (0, vue.createCommentVNode)("v-if", true),
+					(0, vue.createElementVNode)("input", {
+						id: inputId,
+						ref_key: "integerInput",
+						ref: integerInput,
+						class: "as-decimal-integer",
+						type: "text",
+						inputmode: "decimal",
+						autocomplete: "off",
+						value: (0, vue.unref)(integerDisplay),
+						onInput: _cache[0] || (_cache[0] = (...args) => (0, vue.unref)(onIntegerInput) && (0, vue.unref)(onIntegerInput)(...args)),
+						onKeydown: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(onIntegerKeydown) && (0, vue.unref)(onIntegerKeydown)(...args)),
+						onPaste: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(onIntegerPaste) && (0, vue.unref)(onIntegerPaste)(...args)),
+						onFocus: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(onIntegerFocus) && (0, vue.unref)(onIntegerFocus)(...args)),
+						onBlur: _cache[4] || (_cache[4] = (...args) => (0, vue.unref)(onBlurAll) && (0, vue.unref)(onBlurAll)(...args)),
+						placeholder: __props.placeholder,
+						name: __props.name,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-required": __props.required || void 0,
+						"aria-invalid": !!__props.error || void 0,
+						"aria-describedby": __props.ariaDescribedBy,
+						"aria-label": !__props.label ? __props.name : void 0
+					}, null, 40, _hoisted_3),
+					(0, vue.unref)(scale) > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createElementVNode)("span", _hoisted_4, (0, vue.toDisplayString)((0, vue.unref)(decimalSeparator)), 1), (0, vue.createElementVNode)("input", {
+						ref_key: "decimalInput",
+						ref: decimalInput,
+						class: "as-decimal-decimal",
+						type: "text",
+						inputmode: "numeric",
+						autocomplete: "off",
+						value: (0, vue.unref)(decimalDisplay),
+						maxlength: (0, vue.unref)(scale),
+						size: (0, vue.unref)(scale),
+						onInput: _cache[5] || (_cache[5] = (...args) => (0, vue.unref)(onDecimalInput) && (0, vue.unref)(onDecimalInput)(...args)),
+						onKeydown: _cache[6] || (_cache[6] = (...args) => (0, vue.unref)(onDecimalKeydown) && (0, vue.unref)(onDecimalKeydown)(...args)),
+						onPaste: _cache[7] || (_cache[7] = (...args) => (0, vue.unref)(onDecimalPaste) && (0, vue.unref)(onDecimalPaste)(...args)),
+						onFocus: _cache[8] || (_cache[8] = (...args) => (0, vue.unref)(onDecimalFocus) && (0, vue.unref)(onDecimalFocus)(...args)),
+						onBlur: _cache[9] || (_cache[9] = (...args) => (0, vue.unref)(onBlurAll) && (0, vue.unref)(onBlurAll)(...args)),
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-label": `decimals of ${__props.label ?? __props.name ?? ""}`
+					}, null, 40, _hoisted_5)], 64)) : (0, vue.createCommentVNode)("v-if", true),
+					__props.suffix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6, (0, vue.toDisplayString)(__props.suffix), 1)) : (0, vue.createCommentVNode)("v-if", true),
+					__props.suffixIcon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+						key: 4,
+						class: (0, vue.normalizeClass)(["as-suffix-icon", __props.suffixIcon]),
+						"aria-hidden": "true"
+					}, null, 2)) : (0, vue.createCommentVNode)("v-if", true)
+				], 10, _hoisted_1)]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_decimal_default", {
+	enumerable: true,
+	get: function() {
+		return as_decimal_default;
+	}
+});
+Object.defineProperty(exports, "useAsDecimal", {
+	enumerable: true,
+	get: function() {
+		return useAsDecimal;
+	}
+});
+Object.defineProperty(exports, "useAsDualInput", {
+	enumerable: true,
+	get: function() {
+		return useAsDualInput;
+	}
+});