@atscript/vue-form 0.1.58

package/dist/as-decimal.vue-B1pEKdjM.d.cts

@@ -0,0 +1,25 @@
+import { i as TAsComponentProps } from "./types-C4HRSxgV.cjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-decimal.vue.d.ts
+/**
+ * Default decimal renderer — the "bank UX": one bordered shell with an
+ * optional prefix pill, an integer input, a decimal separator pill, a
+ * decimal input, and an optional suffix pill. Keyboard arrows bridge
+ * between the two halves so typing a long decimal feels like a single
+ * field.
+ *
+ * Currency-agnostic — when `prefix` is set by AsField (either from
+ * `@ui.form.prefix`, `@ui.form.prefix.ref`, or the currency narrow
+ * symbol), it renders as the leading pill. When `suffix` is set
+ * (`@ui.form.suffix`, `@ui.form.suffix.ref`, or `@db.unit*`), it
+ * renders as the trailing pill.
+ *
+ * All value math goes through `useAsDecimal`; all keyboard glue goes
+ * through `useAsDualInput`. The SFC owns only render decisions.
+ */
+type __VLS_Props = TAsComponentProps<string | number | null | undefined>;
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };

package/dist/as-decimal.vue-CSCtYRRa.d.mts

@@ -0,0 +1,25 @@
+import { i as TAsComponentProps } from "./types-Czm-Gtud.mjs";
+import * as vue from "vue";
+
+//#region src/components/defaults/as-decimal.vue.d.ts
+/**
+ * Default decimal renderer — the "bank UX": one bordered shell with an
+ * optional prefix pill, an integer input, a decimal separator pill, a
+ * decimal input, and an optional suffix pill. Keyboard arrows bridge
+ * between the two halves so typing a long decimal feels like a single
+ * field.
+ *
+ * Currency-agnostic — when `prefix` is set by AsField (either from
+ * `@ui.form.prefix`, `@ui.form.prefix.ref`, or the currency narrow
+ * symbol), it renders as the leading pill. When `suffix` is set
+ * (`@ui.form.suffix`, `@ui.form.suffix.ref`, or `@db.unit*`), it
+ * renders as the trailing pill.
+ *
+ * All value math goes through `useAsDecimal`; all keyboard glue goes
+ * through `useAsDualInput`. The SFC owns only render decisions.
+ */
+type __VLS_Props = TAsComponentProps<string | number | null | undefined>;
+declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as t };

package/dist/as-field-CXVjrEPQ.mjs

@@ -0,0 +1,481 @@
+import { a as CHANGE_HANDLER_KEY, c as ERRORS_KEY, d as FORM_STATE_KEY, f as HIDE_ROOT_TITLE_KEY, g as TYPES_KEY, h as ROOT_DATA_KEY, i as ACTION_HANDLER_KEY, l as FORM_CONTEXT_KEY, m as PATH_PREFIX_KEY, o as COMPONENTS_KEY, p as LEVEL_KEY, r as useFormContext, s as DISMISS_EXTERNAL_AT_KEY, u as FORM_DATA_KEY } from "./use-form-context-bAj7UoSe.mjs";
+import { n as useAsLocale } from "./use-as-locale-BrFdAgnU.mjs";
+import { computed, createBlock, createElementBlock, defineComponent, inject, isRef, mergeProps, onUnmounted, openBlock, provide, ref, resolveDynamicComponent, toDisplayString, unref, useId, watch } from "vue";
+import { DB_AMOUNT_CURRENCY, DB_AMOUNT_CURRENCY_REF, DB_COLUMN_PRECISION, DB_UNIT, DB_UNIT_REF, EXPECT_MAX_LENGTH, META_DEFAULT, META_DESCRIPTION, META_LABEL, META_READONLY, META_REQUIRED, UI_FORM_ACTION, UI_FORM_ATTR, UI_FORM_AUTOCOMPLETE, UI_FORM_CLASSES, UI_FORM_COMPONENT, UI_FORM_DISABLED, UI_FORM_FN_CLASSES, UI_FORM_FN_DESCRIPTION, UI_FORM_FN_DISABLED, UI_FORM_FN_HIDDEN, UI_FORM_FN_HINT, UI_FORM_FN_LABEL, UI_FORM_FN_PLACEHOLDER, UI_FORM_FN_PREFIX, UI_FORM_FN_READONLY, UI_FORM_FN_STYLES, UI_FORM_FN_TITLE, UI_FORM_FN_VALUE, UI_FORM_GRID_COL_SPAN, UI_FORM_GRID_ROW_SPAN, UI_FORM_HIDDEN, UI_FORM_HINT, UI_FORM_PLACEHOLDER, UI_FORM_PREFIX, UI_FORM_PREFIX_ICON, UI_FORM_PREFIX_REF, UI_FORM_STYLES, UI_FORM_SUFFIX, UI_FORM_SUFFIX_ICON, UI_FORM_SUFFIX_REF, UI_FORM_VALIDATE, WF_ACTION_WITH_DATA, buildGridClasses, createFieldValidator, createFormData, createFormValueResolver, extractValueHelp, getByPath, getCurrencyDecimals, getCurrencyDisplayParts, getFieldMeta, isArrayField, isObjectField, isTupleField, isUnionField, resolveAttrs, resolveFieldProp, resolveGridSpec, resolveOptions, resolveSingularLabel } from "@atscript/ui";
+import { buildFieldEntry } from "@atscript/ui-fns";
+//#region src/composables/use-as-field.ts
+function useAsField(opts) {
+	const formState = inject(FORM_STATE_KEY);
+	const formData = inject(FORM_DATA_KEY);
+	const formContext = inject(FORM_CONTEXT_KEY);
+	const id = Symbol("form-field");
+	const submitError = ref();
+	const externalError = ref();
+	const touched = ref(false);
+	const blur = ref(false);
+	const model = computed({
+		get: opts.getValue,
+		set: opts.setValue
+	});
+	watch(model, () => {
+		submitError.value = void 0;
+		externalError.value = void 0;
+		touched.value = true;
+		formState?.freshFields.delete(id);
+	}, {});
+	const isValidationActive = 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 = 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;
+			}
+		}
+	});
+	onUnmounted(() => {
+		formState?.unregister(id);
+	});
+	return {
+		model,
+		error,
+		onBlur
+	};
+}
+//#endregion
+//#region src/composables/use-as-data.ts
+const EMPTY_PATH = computed(() => "");
+const EMPTY_DATA = 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 = inject(ROOT_DATA_KEY, EMPTY_DATA);
+	const pathPrefix = inject(PATH_PREFIX_KEY, EMPTY_PATH);
+	const rootData = computed(() => {
+		return wrapped.value?.value;
+	});
+	function getValueAt(path) {
+		return computed(() => {
+			const w = wrapped.value;
+			if (!w) return void 0;
+			return getByPath(w, path);
+		});
+	}
+	function siblingValue(name) {
+		return computed(() => {
+			const w = wrapped.value;
+			if (!w) return void 0;
+			const prefix = pathPrefix.value;
+			return 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__ */ 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 = inject(TYPES_KEY);
+		const components = inject(COMPONENTS_KEY);
+		const errors = inject(ERRORS_KEY);
+		const hideRootTitle = inject(HIDE_ROOT_TITLE_KEY, false);
+		const handleAction = inject(ACTION_HANDLER_KEY, () => {});
+		const handleChange = inject(CHANGE_HANDLER_KEY, () => {});
+		const dismissExternalAt = inject(DISMISS_EXTERNAL_AT_KEY, () => {});
+		const { rootFormData, formContext, joinPath, buildPath, getByPath, setByPath, buildScope } = useFormContext("AsField");
+		const absolutePath = joinPath(() => props.field.path);
+		const isStructured = isObjectField(props.field) || isArrayField(props.field) || isTupleField(props.field);
+		const isUnion = isUnionField(props.field);
+		const parentLevel = inject(LEVEL_KEY, computed(() => -1));
+		const myLevel = isStructured || isUnion ? parentLevel.value + 1 : -1;
+		if (isStructured || isUnion) {
+			provide(PATH_PREFIX_KEY, computed(() => absolutePath.value));
+			provide(LEVEL_KEY, computed(() => myLevel));
+		}
+		const unwrap = (v) => isRef(v) ? v.value : v;
+		function maybeComputed(isDynamic, dynamicFn, staticVal) {
+			return isDynamic ? 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 = getFieldMeta(prop, UI_FORM_AUTOCOMPLETE);
+		const maxLength = getFieldMeta(prop, EXPECT_MAX_LENGTH)?.length;
+		const componentName = getFieldMeta(prop, UI_FORM_COMPONENT);
+		const prefixIcon = getFieldMeta(prop, UI_FORM_PREFIX_ICON);
+		const suffixIcon = getFieldMeta(prop, UI_FORM_SUFFIX_ICON);
+		const valueHelp = extractValueHelp(prop);
+		const currencyLiteral = getFieldMeta(prop, DB_AMOUNT_CURRENCY);
+		const currencyRefField = getFieldMeta(prop, DB_AMOUNT_CURRENCY_REF);
+		const unitLiteral = getFieldMeta(prop, DB_UNIT);
+		const unitRefField = getFieldMeta(prop, DB_UNIT_REF);
+		const prefixLiteral = getFieldMeta(prop, UI_FORM_PREFIX);
+		const prefixRefField = getFieldMeta(prop, UI_FORM_PREFIX_REF);
+		const suffixLiteral = getFieldMeta(prop, UI_FORM_SUFFIX);
+		const suffixRefField = getFieldMeta(prop, UI_FORM_SUFFIX_REF);
+		const precisionScale = getFieldMeta(prop, 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 } = useAsLocale();
+			if (currencyLiteral !== void 0) resolvedCurrencyCode = currencyLiteral;
+			else if (currencyRefField !== void 0) {
+				const ref = _data.siblingValue(currencyRefField);
+				resolvedCurrencyCode = 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 = computed(() => {
+					const v = ref.value;
+					return typeof v === "string" && v.length > 0 ? v : void 0;
+				});
+			}
+			const readCode = (v) => isRef(v) ? v.value : v;
+			const prefixRefValue = prefixRefField ? _data.siblingValue(prefixRefField) : void 0;
+			resolvedPrefix = 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 getCurrencyDisplayParts(code, _locale.value).symbol;
+			});
+			const suffixRefValue = suffixRefField ? _data.siblingValue(suffixRefField) : void 0;
+			resolvedSuffix = 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 = computed(() => {
+				const code = readCode(resolvedCurrencyCode);
+				const currDecimals = code ? 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 (isArrayField(props.field)) {
+			const fromArray = resolveSingularLabel(prop);
+			singularLabel = fromArray !== "item" ? fromArray : resolveSingularLabel(props.field.itemField.prop);
+		}
+		const inputId = `as-field-${useId()}`;
+		const errorId = `${inputId}-err`;
+		const descId = `${inputId}-desc`;
+		const formActionMeta = getFieldMeta(prop, UI_FORM_ACTION);
+		const wfActionWithData = getFieldMeta(prop, WF_ACTION_WITH_DATA);
+		const formAction = formActionMeta ? {
+			id: formActionMeta.id,
+			label: formActionMeta.label ?? getFieldMeta(prop, META_LABEL) ?? props.field.name
+		} : wfActionWithData ? {
+			id: wfActionWithData,
+			label: getFieldMeta(prop, META_LABEL) ?? props.field.name
+		} : void 0;
+		const gridClasses = buildGridClasses(resolveGridSpec(getFieldMeta(prop, UI_FORM_GRID_COL_SPAN), getFieldMeta(prop, UI_FORM_GRID_ROW_SPAN)));
+		const formValidate = 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 = createFormValueResolver(rootFormData().value, formContext.value);
+				setModel(createFormData(props.field.prop, resolver).value);
+			} else setModel(void 0);
+			handleChange("update", absolutePath.value, getModel());
+		}
+		const resolvedComponent = 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 = getFieldMeta(prop, META_REQUIRED) !== void 0;
+		if (props.field.allStatic) {
+			hasCustomValidators = false;
+			disabled = getFieldMeta(prop, UI_FORM_DISABLED) !== void 0;
+			hidden = getFieldMeta(prop, UI_FORM_HIDDEN) !== void 0;
+			optional = props.field.prop.optional ?? false;
+			readonly = getFieldMeta(prop, META_READONLY) !== void 0;
+			required = props.field.phantom ? void 0 : hasMetaRequired;
+			label = getFieldMeta(prop, META_LABEL) ?? props.field.name;
+			description = getFieldMeta(prop, META_DESCRIPTION);
+			hint = getFieldMeta(prop, UI_FORM_HINT);
+			placeholder = getFieldMeta(prop, UI_FORM_PLACEHOLDER);
+			styles = getFieldMeta(prop, UI_FORM_STYLES);
+			options = resolveOptions(prop, emptyScope);
+			attrs = getFieldMeta(prop, UI_FORM_ATTR) !== void 0 ? resolveAttrs(prop, emptyScope) : void 0;
+			title = isStructured || isUnion ? getFieldMeta(prop, META_LABEL) ?? props.field.name : void 0;
+			classesBase = buildFieldClasses(getFieldMeta(prop, UI_FORM_CLASSES), disabled, hasMetaRequired, optional);
+			phantomValue = props.field.phantom ? getFieldMeta(prop, META_DEFAULT) : void 0;
+		} else {
+			const hasFn = /* @__PURE__ */ new Set();
+			for (const key of prop.metadata.keys()) {
+				const k = key;
+				if (k.startsWith(UI_FORM_FN_PREFIX)) hasFn.add(k.slice(UI_FORM_FN_PREFIX.length));
+			}
+			hasCustomValidators = getFieldMeta(prop, 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 ? computed(() => buildScope(getModel())) : void 0;
+			const boolOpts = { staticAsBoolean: true };
+			disabled = maybeComputed(hasFn.has("disabled"), () => resolveFieldProp(prop, UI_FORM_FN_DISABLED, UI_FORM_DISABLED, bs.value, boolOpts) ?? false, getFieldMeta(prop, UI_FORM_DISABLED) !== void 0);
+			hidden = maybeComputed(hasFn.has("hidden"), () => resolveFieldProp(prop, UI_FORM_FN_HIDDEN, UI_FORM_HIDDEN, bs.value, boolOpts) ?? false, getFieldMeta(prop, UI_FORM_HIDDEN) !== void 0);
+			optional = props.field.prop.optional ?? false;
+			readonly = maybeComputed(hasFn.has("readonly"), () => resolveFieldProp(prop, UI_FORM_FN_READONLY, META_READONLY, bs.value, boolOpts) ?? false, getFieldMeta(prop, META_READONLY) !== void 0);
+			required = props.field.phantom ? void 0 : hasMetaRequired;
+			const fs = needsFullScope ? computed(() => 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"), () => resolveFieldProp(prop, UI_FORM_FN_LABEL, META_LABEL, fs.value) ?? props.field.name, getFieldMeta(prop, META_LABEL) ?? props.field.name);
+			description = maybeComputed(hasFn.has("description"), () => resolveFieldProp(prop, UI_FORM_FN_DESCRIPTION, META_DESCRIPTION, fs.value), getFieldMeta(prop, META_DESCRIPTION));
+			hint = maybeComputed(hasFn.has("hint"), () => resolveFieldProp(prop, UI_FORM_FN_HINT, UI_FORM_HINT, fs.value), getFieldMeta(prop, UI_FORM_HINT));
+			placeholder = maybeComputed(hasFn.has("placeholder"), () => resolveFieldProp(prop, UI_FORM_FN_PLACEHOLDER, UI_FORM_PLACEHOLDER, fs.value), getFieldMeta(prop, UI_FORM_PLACEHOLDER));
+			styles = maybeComputed(hasFn.has("styles"), () => resolveFieldProp(prop, UI_FORM_FN_STYLES, UI_FORM_STYLES, fs.value), getFieldMeta(prop, UI_FORM_STYLES));
+			options = maybeComputed(hasFn.has("options"), () => resolveOptions(prop, fs.value), resolveOptions(prop, emptyScope));
+			attrs = hasFn.has("attr") ? computed(() => resolveAttrs(prop, fs.value)) : getFieldMeta(prop, UI_FORM_ATTR) !== void 0 ? resolveAttrs(prop, emptyScope) : void 0;
+			title = isStructured || isUnion ? maybeComputed(hasFn.has("title"), () => resolveFieldProp(prop, UI_FORM_FN_TITLE, META_LABEL, fs.value) ?? props.field.name, getFieldMeta(prop, META_LABEL) ?? props.field.name) : void 0;
+			const hasFnClasses = hasFn.has("classes");
+			classesBase = hasFnClasses || typeof disabled !== "boolean" ? computed(() => buildFieldClasses(hasFnClasses ? resolveFieldProp(prop, UI_FORM_FN_CLASSES, void 0, fs.value) : getFieldMeta(prop, UI_FORM_CLASSES), unwrap(disabled), hasMetaRequired, optional)) : buildFieldClasses(getFieldMeta(prop, UI_FORM_CLASSES), disabled, hasMetaRequired, optional);
+			phantomValue = props.field.phantom ? maybeComputed(hasFn.has("value"), () => resolveFieldProp(prop, UI_FORM_FN_VALUE, META_DEFAULT, fs.value), getFieldMeta(prop, META_DEFAULT)) : void 0;
+			if (hasFn.has("value") && !props.field.phantom) watch(computed(() => {
+				if (unwrap(readonly)) return resolveFieldProp(prop, UI_FORM_FN_VALUE, 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 } : isArrayField(props.field) || isTupleField(props.field) ? { resetValue: [] } : 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) watch(model, (value, prev) => {
+			if (value === prev) return;
+			const path = absolutePath.value;
+			if (path) dismissExternalAt(path);
+		});
+		const mergedError = 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 = 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 = 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 ? (openBlock(), createBlock(resolveDynamicComponent(resolvedComponent.value), mergeProps({ key: 0 }, componentProps.value, { onAction: unref(handleAction) }), null, 16, ["onAction"])) : (openBlock(), createElementBlock("div", _hoisted_1, " [" + toDisplayString(unwrap(unref(label))) + "] No component for type \"" + toDisplayString(__props.field.customType ?? __props.field.type) + "\"" + toDisplayString(unref(componentName) ? ` (component "${unref(componentName)}" not supplied)` : ""), 1));
+		};
+	}
+});
+//#endregion
+export { useAsData as n, useAsField as r, as_field_default as t };