@atscript/vue-form 0.1.58

package/dist/as-field-shell.vue-Ddnp8KxY.d.mts

@@ -0,0 +1,37 @@
+import { i as TAsComponentProps } from "./types-Czm-Gtud.mjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-field-shell.vue.d.ts
+type __VLS_Props = TAsComponentProps & {
+  fieldClass?: string; /** Suppress all default chrome (label/description/clear/placeholder) — for fields with inline headers (e.g. checkbox). */
+  chromeless?: boolean; /** Skip the empty-state placeholder; render the input slot directly (e.g. radio group, where unchecked = empty). */
+  hideEmptyPlaceholder?: boolean;
+};
+declare var __VLS_1: {
+    inputId: string;
+    descId: string;
+    optionalEnabled: boolean;
+  }, __VLS_20: {
+    inputId: string;
+    errorId: string;
+    descId: string;
+  }, __VLS_22: {
+    descId: string;
+  };
+type __VLS_Slots = {} & {
+  header?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_20) => any;
+} & {
+  'after-input'?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as t };

package/dist/as-field-shell.vue-Dmt05vGD.d.cts

@@ -0,0 +1,37 @@
+import { i as TAsComponentProps } from "./types-C4HRSxgV.cjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-field-shell.vue.d.ts
+type __VLS_Props = TAsComponentProps & {
+  fieldClass?: string; /** Suppress all default chrome (label/description/clear/placeholder) — for fields with inline headers (e.g. checkbox). */
+  chromeless?: boolean; /** Skip the empty-state placeholder; render the input slot directly (e.g. radio group, where unchecked = empty). */
+  hideEmptyPlaceholder?: boolean;
+};
+declare var __VLS_1: {
+    inputId: string;
+    descId: string;
+    optionalEnabled: boolean;
+  }, __VLS_20: {
+    inputId: string;
+    errorId: string;
+    descId: string;
+  }, __VLS_22: {
+    descId: string;
+  };
+type __VLS_Slots = {} & {
+  header?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_20) => any;
+} & {
+  'after-input'?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as t };

package/dist/as-field-wLYoaZnT.cjs

@@ -0,0 +1,498 @@
+const require_use_form_context = require("./use-form-context-Dwr8Ai1v.cjs");
+const require_use_as_locale = require("./use-as-locale-C4z5stwD.cjs");
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+let _atscript_ui_fns = require("@atscript/ui-fns");
+//#region src/composables/use-as-field.ts
+function useAsField(opts) {
+	const formState = (0, vue.inject)(require_use_form_context.FORM_STATE_KEY);
+	const formData = (0, vue.inject)(require_use_form_context.FORM_DATA_KEY);
+	const formContext = (0, vue.inject)(require_use_form_context.FORM_CONTEXT_KEY);
+	const id = Symbol("form-field");
+	const submitError = (0, vue.ref)();
+	const externalError = (0, vue.ref)();
+	const touched = (0, vue.ref)(false);
+	const blur = (0, vue.ref)(false);
+	const model = (0, vue.computed)({
+		get: opts.getValue,
+		set: opts.setValue
+	});
+	(0, vue.watch)(model, () => {
+		submitError.value = void 0;
+		externalError.value = void 0;
+		touched.value = true;
+		formState?.freshFields.delete(id);
+	}, {});
+	const isValidationActive = (0, vue.computed)(() => {
+		if (!formState?.firstValidation) return false;
+		if (formState.freshFields.has(id)) return false;
+		switch (formState.firstValidation) {
+			case "on-change": return formState.firstSubmitHappened || touched.value;
+			case "touched-on-blur": return formState.firstSubmitHappened || blur.value && touched.value;
+			case "on-blur": return formState.firstSubmitHappened || blur.value;
+			case "on-submit": return formState.firstSubmitHappened;
+			default: return false;
+		}
+	});
+	function validate() {
+		if (opts.rules?.length) for (const rule of opts.rules) {
+			const result = rule(model.value, formData?.value, formContext?.value);
+			if (result !== true) return result || "Wrong value";
+		}
+	}
+	const error = (0, vue.computed)(() => {
+		if (externalError.value) return externalError.value;
+		if (submitError.value) return submitError.value;
+		if (isValidationActive.value) return validate();
+	});
+	function onBlur() {
+		blur.value = true;
+		formState?.freshFields.delete(id);
+	}
+	if (formState) formState.register(id, {
+		path: opts.path,
+		callbacks: {
+			validate: () => {
+				submitError.value = validate();
+				return submitError.value || true;
+			},
+			clearErrors: () => {
+				touched.value = false;
+				blur.value = false;
+				submitError.value = void 0;
+				externalError.value = void 0;
+			},
+			reset: () => {
+				model.value = opts.resetValue ?? "";
+			},
+			setExternalError: (msg) => {
+				externalError.value = msg;
+			}
+		}
+	});
+	(0, vue.onUnmounted)(() => {
+		formState?.unregister(id);
+	});
+	return {
+		model,
+		error,
+		onBlur
+	};
+}
+//#endregion
+//#region src/composables/use-as-data.ts
+const EMPTY_PATH = (0, vue.computed)(() => "");
+const EMPTY_DATA = (0, vue.computed)(() => void 0);
+/**
+* Reactive read-only access to form data at any point in the
+* `<AsForm>` tree. Outside a form, all readers return `undefined`.
+*
+* Call sites get a `ComputedRef` so they can compose it directly with
+* other reactive primitives without an extra `computed()` wrapper.
+*/
+function useAsData() {
+	const wrapped = (0, vue.inject)(require_use_form_context.ROOT_DATA_KEY, EMPTY_DATA);
+	const pathPrefix = (0, vue.inject)(require_use_form_context.PATH_PREFIX_KEY, EMPTY_PATH);
+	const rootData = (0, vue.computed)(() => {
+		return wrapped.value?.value;
+	});
+	function getValueAt(path) {
+		return (0, vue.computed)(() => {
+			const w = wrapped.value;
+			if (!w) return void 0;
+			return (0, _atscript_ui.getByPath)(w, path);
+		});
+	}
+	function siblingValue(name) {
+		return (0, vue.computed)(() => {
+			const w = wrapped.value;
+			if (!w) return void 0;
+			const prefix = pathPrefix.value;
+			return (0, _atscript_ui.getByPath)(w, prefix ? `${prefix}.${name}` : name);
+		});
+	}
+	return {
+		rootData,
+		getValueAt,
+		siblingValue
+	};
+}
+//#endregion
+//#region src/components/as-field.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { key: 1 };
+const emptyScope = {
+	v: void 0,
+	data: {},
+	context: {},
+	entry: void 0
+};
+//#endregion
+//#region src/components/as-field.vue
+var as_field_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-field",
+	props: {
+		field: {
+			type: Object,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const types = (0, vue.inject)(require_use_form_context.TYPES_KEY);
+		const components = (0, vue.inject)(require_use_form_context.COMPONENTS_KEY);
+		const errors = (0, vue.inject)(require_use_form_context.ERRORS_KEY);
+		const hideRootTitle = (0, vue.inject)(require_use_form_context.HIDE_ROOT_TITLE_KEY, false);
+		const handleAction = (0, vue.inject)(require_use_form_context.ACTION_HANDLER_KEY, () => {});
+		const handleChange = (0, vue.inject)(require_use_form_context.CHANGE_HANDLER_KEY, () => {});
+		const dismissExternalAt = (0, vue.inject)(require_use_form_context.DISMISS_EXTERNAL_AT_KEY, () => {});
+		const { rootFormData, formContext, joinPath, buildPath, getByPath, setByPath, buildScope } = require_use_form_context.useFormContext("AsField");
+		const absolutePath = joinPath(() => props.field.path);
+		const isStructured = (0, _atscript_ui.isObjectField)(props.field) || (0, _atscript_ui.isArrayField)(props.field) || (0, _atscript_ui.isTupleField)(props.field);
+		const isUnion = (0, _atscript_ui.isUnionField)(props.field);
+		const parentLevel = (0, vue.inject)(require_use_form_context.LEVEL_KEY, (0, vue.computed)(() => -1));
+		const myLevel = isStructured || isUnion ? parentLevel.value + 1 : -1;
+		if (isStructured || isUnion) {
+			(0, vue.provide)(require_use_form_context.PATH_PREFIX_KEY, (0, vue.computed)(() => absolutePath.value));
+			(0, vue.provide)(require_use_form_context.LEVEL_KEY, (0, vue.computed)(() => myLevel));
+		}
+		const unwrap = (v) => (0, vue.isRef)(v) ? v.value : v;
+		function maybeComputed(isDynamic, dynamicFn, staticVal) {
+			return isDynamic ? (0, vue.computed)(dynamicFn) : staticVal;
+		}
+		function buildFieldClasses(classValue, isDisabled, isRequired, isOptional) {
+			return {
+				...typeof classValue === "string" ? { [classValue]: true } : classValue,
+				disabled: isDisabled,
+				required: isRequired && !isOptional
+			};
+		}
+		const prop = props.field.prop;
+		const autocomplete = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_AUTOCOMPLETE);
+		const maxLength = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.EXPECT_MAX_LENGTH)?.length;
+		const componentName = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_COMPONENT);
+		const prefixIcon = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_PREFIX_ICON);
+		const suffixIcon = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_SUFFIX_ICON);
+		const valueHelp = (0, _atscript_ui.extractValueHelp)(prop);
+		const currencyLiteral = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.DB_AMOUNT_CURRENCY);
+		const currencyRefField = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.DB_AMOUNT_CURRENCY_REF);
+		const unitLiteral = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.DB_UNIT);
+		const unitRefField = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.DB_UNIT_REF);
+		const prefixLiteral = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_PREFIX);
+		const prefixRefField = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_PREFIX_REF);
+		const suffixLiteral = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_SUFFIX);
+		const suffixRefField = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_SUFFIX_REF);
+		const precisionScale = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.DB_COLUMN_PRECISION)?.scale;
+		const hasAdornment = currencyLiteral !== void 0 || currencyRefField !== void 0 || unitLiteral !== void 0 || unitRefField !== void 0 || prefixLiteral !== void 0 || prefixRefField !== void 0 || prefixIcon !== void 0 || suffixLiteral !== void 0 || suffixRefField !== void 0 || suffixIcon !== void 0;
+		let resolvedCurrencyCode;
+		let resolvedUnitCode;
+		let resolvedPrefix;
+		let resolvedSuffix;
+		let resolvedScale;
+		if (hasAdornment) {
+			const _data = useAsData();
+			const { locale: _locale } = require_use_as_locale.useAsLocale();
+			if (currencyLiteral !== void 0) resolvedCurrencyCode = currencyLiteral;
+			else if (currencyRefField !== void 0) {
+				const ref = _data.siblingValue(currencyRefField);
+				resolvedCurrencyCode = (0, vue.computed)(() => {
+					const v = ref.value;
+					return typeof v === "string" && v.length > 0 ? v : void 0;
+				});
+			}
+			if (unitLiteral !== void 0) resolvedUnitCode = unitLiteral;
+			else if (unitRefField !== void 0) {
+				const ref = _data.siblingValue(unitRefField);
+				resolvedUnitCode = (0, vue.computed)(() => {
+					const v = ref.value;
+					return typeof v === "string" && v.length > 0 ? v : void 0;
+				});
+			}
+			const readCode = (v) => (0, vue.isRef)(v) ? v.value : v;
+			const prefixRefValue = prefixRefField ? _data.siblingValue(prefixRefField) : void 0;
+			resolvedPrefix = (0, vue.computed)(() => {
+				if (prefixLiteral !== void 0 && prefixLiteral.length > 0) return prefixLiteral;
+				if (prefixRefValue) {
+					const v = prefixRefValue.value;
+					if (typeof v === "string" && v.length > 0) return v;
+				}
+				const code = readCode(resolvedCurrencyCode);
+				if (code) return (0, _atscript_ui.getCurrencyDisplayParts)(code, _locale.value).symbol;
+			});
+			const suffixRefValue = suffixRefField ? _data.siblingValue(suffixRefField) : void 0;
+			resolvedSuffix = (0, vue.computed)(() => {
+				if (suffixLiteral !== void 0 && suffixLiteral.length > 0) return suffixLiteral;
+				if (suffixRefValue) {
+					const v = suffixRefValue.value;
+					if (typeof v === "string" && v.length > 0) return v;
+				}
+				return readCode(resolvedUnitCode);
+			});
+			resolvedScale = (0, vue.computed)(() => {
+				const code = readCode(resolvedCurrencyCode);
+				const currDecimals = code ? (0, _atscript_ui.getCurrencyDecimals)(code, _locale.value) : void 0;
+				if (currDecimals !== void 0 && typeof precisionScale === "number") return Math.min(currDecimals, precisionScale);
+				if (currDecimals !== void 0) return currDecimals;
+				if (typeof precisionScale === "number") return precisionScale;
+			});
+		}
+		let singularLabel;
+		if ((0, _atscript_ui.isArrayField)(props.field)) {
+			const fromArray = (0, _atscript_ui.resolveSingularLabel)(prop);
+			singularLabel = fromArray !== "item" ? fromArray : (0, _atscript_ui.resolveSingularLabel)(props.field.itemField.prop);
+		}
+		const inputId = `as-field-${(0, vue.useId)()}`;
+		const errorId = `${inputId}-err`;
+		const descId = `${inputId}-desc`;
+		const formActionMeta = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_ACTION);
+		const wfActionWithData = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.WF_ACTION_WITH_DATA);
+		const formAction = formActionMeta ? {
+			id: formActionMeta.id,
+			label: formActionMeta.label ?? (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name
+		} : wfActionWithData ? {
+			id: wfActionWithData,
+			label: (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name
+		} : void 0;
+		const gridClasses = (0, _atscript_ui.buildGridClasses)((0, _atscript_ui.resolveGridSpec)((0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_GRID_COL_SPAN), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_GRID_ROW_SPAN)));
+		const formValidate = (0, _atscript_ui.createFieldValidator)(prop, isStructured || isUnion ? { rootOnly: true } : void 0);
+		function getModel() {
+			return getByPath(absolutePath.value);
+		}
+		function setModel(value) {
+			setByPath(absolutePath.value, value);
+		}
+		function toggleOptional(enabled) {
+			if (enabled) {
+				const resolver = (0, _atscript_ui.createFormValueResolver)(rootFormData().value, formContext.value);
+				setModel((0, _atscript_ui.createFormData)(props.field.prop, resolver).value);
+			} else setModel(void 0);
+			handleChange("update", absolutePath.value, getModel());
+		}
+		const resolvedComponent = (0, vue.computed)(() => {
+			if (componentName) return components?.value?.[componentName];
+			const map = types?.value;
+			if (!map) return void 0;
+			return (props.field.customType ? map[props.field.customType] : void 0) ?? map[props.field.type];
+		});
+		let disabled;
+		let hidden;
+		let optional;
+		let readonly;
+		let required;
+		let label;
+		let description;
+		let hint;
+		let placeholder;
+		let title;
+		let styles;
+		let options;
+		let attrs;
+		let classesBase;
+		let phantomValue;
+		let hasCustomValidators;
+		const hasMetaRequired = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_REQUIRED) !== void 0;
+		if (props.field.allStatic) {
+			hasCustomValidators = false;
+			disabled = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_DISABLED) !== void 0;
+			hidden = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_HIDDEN) !== void 0;
+			optional = props.field.prop.optional ?? false;
+			readonly = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_READONLY) !== void 0;
+			required = props.field.phantom ? void 0 : hasMetaRequired;
+			label = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name;
+			description = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_DESCRIPTION);
+			hint = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_HINT);
+			placeholder = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_PLACEHOLDER);
+			styles = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_STYLES);
+			options = (0, _atscript_ui.resolveOptions)(prop, emptyScope);
+			attrs = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_ATTR) !== void 0 ? (0, _atscript_ui.resolveAttrs)(prop, emptyScope) : void 0;
+			title = isStructured || isUnion ? (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name : void 0;
+			classesBase = buildFieldClasses((0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_CLASSES), disabled, hasMetaRequired, optional);
+			phantomValue = props.field.phantom ? (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_DEFAULT) : void 0;
+		} else {
+			const hasFn = /* @__PURE__ */ new Set();
+			for (const key of prop.metadata.keys()) {
+				const k = key;
+				if (k.startsWith(_atscript_ui.UI_FORM_FN_PREFIX)) hasFn.add(k.slice(_atscript_ui.UI_FORM_FN_PREFIX.length));
+			}
+			hasCustomValidators = (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_VALIDATE) !== void 0;
+			const needsBaseScope = hasFn.has("disabled") || hasFn.has("hidden") || hasFn.has("readonly");
+			const needsFullScope = hasFn.has("label") || hasFn.has("description") || hasFn.has("hint") || hasFn.has("placeholder") || hasFn.has("classes") || hasFn.has("styles") || hasFn.has("options") || hasFn.has("value") || hasFn.has("attr") || hasFn.has("title") || hasCustomValidators;
+			const bs = needsBaseScope || needsFullScope ? (0, vue.computed)(() => buildScope(getModel())) : void 0;
+			const boolOpts = { staticAsBoolean: true };
+			disabled = maybeComputed(hasFn.has("disabled"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_DISABLED, _atscript_ui.UI_FORM_DISABLED, bs.value, boolOpts) ?? false, (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_DISABLED) !== void 0);
+			hidden = maybeComputed(hasFn.has("hidden"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_HIDDEN, _atscript_ui.UI_FORM_HIDDEN, bs.value, boolOpts) ?? false, (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_HIDDEN) !== void 0);
+			optional = props.field.prop.optional ?? false;
+			readonly = maybeComputed(hasFn.has("readonly"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_READONLY, _atscript_ui.META_READONLY, bs.value, boolOpts) ?? false, (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_READONLY) !== void 0);
+			required = props.field.phantom ? void 0 : hasMetaRequired;
+			const fs = needsFullScope ? (0, vue.computed)(() => (0, _atscript_ui_fns.buildFieldEntry)(prop, bs.value, props.field.path, {
+				type: props.field.type,
+				component: componentName,
+				name: props.field.name,
+				optional: unwrap(optional),
+				disabled: unwrap(disabled),
+				hidden: unwrap(hidden),
+				readonly: unwrap(readonly)
+			})) : void 0;
+			label = maybeComputed(hasFn.has("label"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_LABEL, _atscript_ui.META_LABEL, fs.value) ?? props.field.name, (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name);
+			description = maybeComputed(hasFn.has("description"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_DESCRIPTION, _atscript_ui.META_DESCRIPTION, fs.value), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_DESCRIPTION));
+			hint = maybeComputed(hasFn.has("hint"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_HINT, _atscript_ui.UI_FORM_HINT, fs.value), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_HINT));
+			placeholder = maybeComputed(hasFn.has("placeholder"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_PLACEHOLDER, _atscript_ui.UI_FORM_PLACEHOLDER, fs.value), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_PLACEHOLDER));
+			styles = maybeComputed(hasFn.has("styles"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_STYLES, _atscript_ui.UI_FORM_STYLES, fs.value), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_STYLES));
+			options = maybeComputed(hasFn.has("options"), () => (0, _atscript_ui.resolveOptions)(prop, fs.value), (0, _atscript_ui.resolveOptions)(prop, emptyScope));
+			attrs = hasFn.has("attr") ? (0, vue.computed)(() => (0, _atscript_ui.resolveAttrs)(prop, fs.value)) : (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_ATTR) !== void 0 ? (0, _atscript_ui.resolveAttrs)(prop, emptyScope) : void 0;
+			title = isStructured || isUnion ? maybeComputed(hasFn.has("title"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_TITLE, _atscript_ui.META_LABEL, fs.value) ?? props.field.name, (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_LABEL) ?? props.field.name) : void 0;
+			const hasFnClasses = hasFn.has("classes");
+			classesBase = hasFnClasses || typeof disabled !== "boolean" ? (0, vue.computed)(() => buildFieldClasses(hasFnClasses ? (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_CLASSES, void 0, fs.value) : (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_CLASSES), unwrap(disabled), hasMetaRequired, optional)) : buildFieldClasses((0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.UI_FORM_CLASSES), disabled, hasMetaRequired, optional);
+			phantomValue = props.field.phantom ? maybeComputed(hasFn.has("value"), () => (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_VALUE, _atscript_ui.META_DEFAULT, fs.value), (0, _atscript_ui.getFieldMeta)(prop, _atscript_ui.META_DEFAULT)) : void 0;
+			if (hasFn.has("value") && !props.field.phantom) (0, vue.watch)((0, vue.computed)(() => {
+				if (unwrap(readonly)) return (0, _atscript_ui.resolveFieldProp)(prop, _atscript_ui.UI_FORM_FN_VALUE, _atscript_ui.META_DEFAULT, fs.value);
+			}), (newVal) => {
+				if (newVal !== void 0) setByPath(absolutePath.value, newVal);
+			}, { immediate: true });
+		}
+		function formRule(v) {
+			return formValidate(v, hasCustomValidators ? {
+				data: rootFormData(),
+				context: formContext.value
+			} : void 0);
+		}
+		const { model, error: formError, onBlur: _onBlur } = useAsField({
+			getValue: getModel,
+			setValue: setModel,
+			rules: [formRule],
+			path: () => absolutePath.value,
+			...props.field.prop.optional ? { resetValue: void 0 } : (0, _atscript_ui.isArrayField)(props.field) || (0, _atscript_ui.isTupleField)(props.field) ? { resetValue: [] } : (0, _atscript_ui.isObjectField)(props.field) ? { resetValue: {} } : {}
+		});
+		let lastEmittedValue = model.value;
+		const onBlur = isStructured || isUnion ? _onBlur : () => {
+			_onBlur();
+			const current = model.value;
+			if (current !== lastEmittedValue) {
+				lastEmittedValue = current;
+				handleChange("update", absolutePath.value, current);
+			}
+		};
+		if (!isStructured && !isUnion) (0, vue.watch)(model, (value, prev) => {
+			if (value === prev) return;
+			const path = absolutePath.value;
+			if (path) dismissExternalAt(path);
+		});
+		const mergedError = (0, vue.computed)(() => {
+			const path = buildPath(props.field.path);
+			return (path ? errors?.value?.[path] : void 0) ?? props.error ?? formError.value;
+		});
+		const invariantProps = {
+			onBlur,
+			model: {
+				get value() {
+					return model.value;
+				},
+				set value(v) {
+					model.value = v;
+				}
+			},
+			type: props.field.type,
+			formAction,
+			name: props.field.name,
+			field: props.field,
+			maxLength,
+			autocomplete,
+			prefixIcon,
+			suffixIcon,
+			level: isStructured || isUnion ? myLevel : void 0,
+			path: absolutePath.value,
+			valueHelp,
+			singularLabel,
+			precisionScale,
+			hasAdornment,
+			inputId,
+			errorId,
+			descId
+		};
+		const displayProps = (0, vue.computed)(() => {
+			const titleValue = myLevel === 0 && hideRootTitle ? void 0 : unwrap(title);
+			return {
+				value: unwrap(phantomValue),
+				label: unwrap(label),
+				description: unwrap(description),
+				hint: unwrap(hint),
+				placeholder: unwrap(placeholder),
+				style: unwrap(styles),
+				optional: unwrap(optional),
+				onToggleOptional: unwrap(optional) ? toggleOptional : void 0,
+				required: required !== void 0 ? unwrap(required) : void 0,
+				disabled: unwrap(disabled),
+				hidden: unwrap(hidden),
+				readonly: unwrap(readonly),
+				options: unwrap(options),
+				title: titleValue,
+				onRemove: props.onRemove,
+				canRemove: props.canRemove,
+				removeLabel: props.removeLabel,
+				arrayIndex: props.arrayIndex,
+				currencyCode: unwrap(resolvedCurrencyCode),
+				unitCode: unwrap(resolvedUnitCode),
+				prefix: unwrap(resolvedPrefix),
+				suffix: unwrap(resolvedSuffix),
+				scale: unwrap(resolvedScale),
+				...unwrap(attrs)
+			};
+		});
+		const componentProps = (0, vue.computed)(() => {
+			const dp = displayProps.value;
+			const err = mergedError.value;
+			const ariaDescribedBy = err || dp.hint ? errorId : dp.description ? descId : void 0;
+			return {
+				...invariantProps,
+				...dp,
+				error: err,
+				ariaDescribedBy,
+				class: [{
+					...unwrap(classesBase),
+					error: !!err
+				}, gridClasses]
+			};
+		});
+		return (_ctx, _cache) => {
+			return resolvedComponent.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(resolvedComponent.value), (0, vue.mergeProps)({ key: 0 }, componentProps.value, { onAction: (0, vue.unref)(handleAction) }), null, 16, ["onAction"])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, " [" + (0, vue.toDisplayString)(unwrap((0, vue.unref)(label))) + "] No component for type \"" + (0, vue.toDisplayString)(__props.field.customType ?? __props.field.type) + "\"" + (0, vue.toDisplayString)((0, vue.unref)(componentName) ? ` (component "${(0, vue.unref)(componentName)}" not supplied)` : ""), 1));
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_field_default", {
+	enumerable: true,
+	get: function() {
+		return as_field_default;
+	}
+});
+Object.defineProperty(exports, "useAsData", {
+	enumerable: true,
+	get: function() {
+		return useAsData;
+	}
+});
+Object.defineProperty(exports, "useAsField", {
+	enumerable: true,
+	get: function() {
+		return useAsField;
+	}
+});

package/dist/as-field.cjs

@@ -0,0 +1,4 @@
+require("./use-form-context-Dwr8Ai1v.cjs");
+const require_as_field = require("./as-field-wLYoaZnT.cjs");
+require("./use-as-locale-C4z5stwD.cjs");
+module.exports = require_as_field.as_field_default;

package/dist/as-field.d.cts

@@ -0,0 +1,25 @@
+import * as vue from "vue";
+import { FormFieldDef } from "@atscript/ui";
+
+//#region src/components/as-field.vue.d.ts
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: <TFormData = any, TFormContext = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & __VLS_PrettifyLocal<{
+    field: FormFieldDef;
+    error?: string;
+    onRemove?: () => void;
+    canRemove?: boolean;
+    removeLabel?: string;
+    arrayIndex?: number;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: {};
+}>) => vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+export = _default;

package/dist/as-field.d.mts

@@ -0,0 +1,26 @@
+import * as vue from "vue";
+import { FormFieldDef } from "@atscript/ui";
+
+//#region src/components/as-field.vue.d.ts
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: <TFormData = any, TFormContext = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & __VLS_PrettifyLocal<{
+    field: FormFieldDef;
+    error?: string;
+    onRemove?: () => void;
+    canRemove?: boolean;
+    removeLabel?: string;
+    arrayIndex?: number;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: {};
+}>) => vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default as default };

package/dist/as-field.mjs

@@ -0,0 +1,4 @@
+import "./use-form-context-bAj7UoSe.mjs";
+import { t as as_field_default } from "./as-field-CXVjrEPQ.mjs";
+import "./use-as-locale-BrFdAgnU.mjs";
+export { as_field_default as default };