@atscript/vue-form 0.1.58

package/dist/as-decimal-DtXjFPhe.mjs

@@ -0,0 +1,694 @@
+import { n as useAsLocale } from "./use-as-locale-BrFdAgnU.mjs";
+import { t as as_field_shell_default } from "./as-field-shell-Pdy3sAvr.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { enforceScale, formatDecimalForDisplay, getDecimalSeparator, getThousandsSeparator, groupInteger, joinDecimalString, parseDecimalInput, splitDecimalString } from "@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 = useAsLocale();
+	const locale = computed(() => {
+		const explicit = opts.locale?.();
+		if (explicit) return explicit;
+		return localeCtx.locale.value;
+	});
+	const scale = 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 = 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 = computed(() => getDecimalSeparator(locale.value));
+	const thousandsSeparator = computed(() => getThousandsSeparator(locale.value));
+	const rawValue = 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 enforceScale(s, scale.value);
+	});
+	const displayValue = computed(() => {
+		if (rawValue.value === "") return "";
+		return formatDecimalForDisplay({
+			value: rawValue.value,
+			scale: scale.value,
+			locale: locale.value
+		});
+	});
+	const parts = computed(() => {
+		const raw = rawValue.value;
+		if (raw === "") return {
+			sign: "",
+			integer: "",
+			decimal: ""
+		};
+		const split = splitDecimalString(raw);
+		return {
+			sign: split.sign,
+			integer: groupInteger(split.integer, locale.value),
+			decimal: split.decimal
+		};
+	});
+	function commit(canonical) {
+		const padded = 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 = parseDecimalInput(raw, locale.value);
+		if (parsed === null) return;
+		commit(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(enforceScale(joinDecimalString({
+			sign,
+			integer: intDigits === "" ? "0" : intDigits,
+			decimal: decDigits
+		}), scale.value));
+	}
+	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 (splitDecimalString(s).decimal.length <= newScale) return;
+		const shaped = preserveShape(v, enforceScale(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 = ref(null);
+	const decimalInput = ref(null);
+	const focusActive = ref(false);
+	const decimalDirty = ref(false);
+	const decimalEdit = ref(null);
+	const integerDisplay = computed(() => {
+		const parts = opts.parts();
+		if (focusActive.value) {
+			const raw = opts.rawValue();
+			if (raw === "") return "";
+			const p = splitDecimalString(raw);
+			return `${p.sign}${p.integer}`;
+		}
+		return parts.sign + parts.integer;
+	});
+	const decimalDisplay = 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 = splitDecimalString(opts.rawValue());
+		opts.setFromParts(p.sign, p.integer, decDigits);
+	}
+	async function focusDecimal(at) {
+		await 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 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 = 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);
+			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__ */ 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 = computed(() => parts.value.sign === "-");
+		const shellTitle = computed(() => props.currencyCode ?? props.unitCode ?? void 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(as_field_shell_default, normalizeProps(guardReactiveProps(_ctx.$props)), {
+				default: withCtx(({ inputId }) => [createElementVNode("div", {
+					class: normalizeClass(["as-decimal", {
+						"as-decimal-negative": isNegative.value,
+						error: !!__props.error,
+						required: __props.required
+					}]),
+					title: shellTitle.value
+				}, [
+					__props.prefixIcon ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(["as-prefix-icon", __props.prefixIcon]),
+						"aria-hidden": "true"
+					}, null, 2)) : createCommentVNode("v-if", true),
+					__props.prefix ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.prefix), 1)) : createCommentVNode("v-if", true),
+					createElementVNode("input", {
+						id: inputId,
+						ref_key: "integerInput",
+						ref: integerInput,
+						class: "as-decimal-integer",
+						type: "text",
+						inputmode: "decimal",
+						autocomplete: "off",
+						value: unref(integerDisplay),
+						onInput: _cache[0] || (_cache[0] = (...args) => unref(onIntegerInput) && unref(onIntegerInput)(...args)),
+						onKeydown: _cache[1] || (_cache[1] = (...args) => unref(onIntegerKeydown) && unref(onIntegerKeydown)(...args)),
+						onPaste: _cache[2] || (_cache[2] = (...args) => unref(onIntegerPaste) && unref(onIntegerPaste)(...args)),
+						onFocus: _cache[3] || (_cache[3] = (...args) => unref(onIntegerFocus) && unref(onIntegerFocus)(...args)),
+						onBlur: _cache[4] || (_cache[4] = (...args) => unref(onBlurAll) && 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),
+					unref(scale) > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("span", _hoisted_4, toDisplayString(unref(decimalSeparator)), 1), createElementVNode("input", {
+						ref_key: "decimalInput",
+						ref: decimalInput,
+						class: "as-decimal-decimal",
+						type: "text",
+						inputmode: "numeric",
+						autocomplete: "off",
+						value: unref(decimalDisplay),
+						maxlength: unref(scale),
+						size: unref(scale),
+						onInput: _cache[5] || (_cache[5] = (...args) => unref(onDecimalInput) && unref(onDecimalInput)(...args)),
+						onKeydown: _cache[6] || (_cache[6] = (...args) => unref(onDecimalKeydown) && unref(onDecimalKeydown)(...args)),
+						onPaste: _cache[7] || (_cache[7] = (...args) => unref(onDecimalPaste) && unref(onDecimalPaste)(...args)),
+						onFocus: _cache[8] || (_cache[8] = (...args) => unref(onDecimalFocus) && unref(onDecimalFocus)(...args)),
+						onBlur: _cache[9] || (_cache[9] = (...args) => unref(onBlurAll) && unref(onBlurAll)(...args)),
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-label": `decimals of ${__props.label ?? __props.name ?? ""}`
+					}, null, 40, _hoisted_5)], 64)) : createCommentVNode("v-if", true),
+					__props.suffix ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.suffix), 1)) : createCommentVNode("v-if", true),
+					__props.suffixIcon ? (openBlock(), createElementBlock("span", {
+						key: 4,
+						class: normalizeClass(["as-suffix-icon", __props.suffixIcon]),
+						"aria-hidden": "true"
+					}, null, 2)) : createCommentVNode("v-if", true)
+				], 10, _hoisted_1)]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { useAsDualInput as n, useAsDecimal as r, as_decimal_default as t };

package/dist/as-decimal.cjs

@@ -0,0 +1,7 @@
+require("./use-form-context-Dwr8Ai1v.cjs");
+require("./use-as-locale-C4z5stwD.cjs");
+require("./use-as-dropdown-C-Qy7Vt0.cjs");
+require("./as-field-shell-B2iTn-iM.cjs");
+require("./as-variant-picker-DObQZHmm.cjs");
+const require_as_decimal = require("./as-decimal-BJIGgPXU.cjs");
+module.exports = require_as_decimal.as_decimal_default;

package/dist/as-decimal.d.cts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-decimal.vue-B1pEKdjM.cjs";
+export = _default;

package/dist/as-decimal.d.mts

@@ -0,0 +1,2 @@
+import { t as _default } from "./as-decimal.vue-CSCtYRRa.mjs";
+export { _default as default };

package/dist/as-decimal.mjs

@@ -0,0 +1,7 @@
+import "./use-form-context-bAj7UoSe.mjs";
+import "./use-as-locale-BrFdAgnU.mjs";
+import "./use-as-dropdown-BMnEm6jF.mjs";
+import "./as-field-shell-Pdy3sAvr.mjs";
+import "./as-variant-picker-BVs0AvjK.mjs";
+import { t as as_decimal_default } from "./as-decimal-DtXjFPhe.mjs";
+export { as_decimal_default as default };