@atscript/vue-form 0.1.58

package/dist/as-form-CWwgyvfw.mjs

@@ -0,0 +1,425 @@
+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, s as DISMISS_EXTERNAL_AT_KEY, u as FORM_DATA_KEY } from "./use-form-context-bAj7UoSe.mjs";
+import { n as provideAsNestedSectionsStore, r as useAsNestedSectionsStore, t as DESCENDANT_ERROR_COUNTS_KEY } from "./use-as-nested-sections-store-lhi0z5z1.mjs";
+import { t as CLIENT_FACTORY_KEY } from "./use-as-value-help-CBykDEjZ.mjs";
+import { t as as_field_default } from "./as-field-CXVjrEPQ.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, provide, reactive, ref, renderSlot, toDisplayString, toRaw, toValue, unref, watch, watchEffect, withModifiers } from "vue";
+import { UI_FORM_ACTION, UI_FORM_FN_SUBMIT_DISABLED, UI_FORM_FN_SUBMIT_TEXT, UI_FORM_SUBMIT_TEXT, WF_ACTION_WITH_DATA, buildDescendantErrorCounts, getFieldMeta, getFormValidator, iteratePathAncestors, mergeErrorMaps, resolveFormProp } from "@atscript/ui";
+//#region src/composables/use-as-external-errors.ts
+/**
+* Local dismissal state for externally-supplied errors.
+*
+* - `dismissAt(path)` hides a leaf error until either the user un-dismisses
+*   it or a *fresh* errors object arrives (new identity).
+* - `dismissForm()` hides the `__form` banner. Same identity-reset rule, but
+*   never cleared by leaf calls.
+* - In-place mutation of the source object does NOT reset dismissals; only
+*   identity changes do. A fresh response (`errors.value = { ... }`) re-arms
+*   everything, while in-place tweaks (rare) deliberately preserve them.
+*
+* The composable is pure — it does NOT call `provide()`. The owning form
+* composable wires `dismissAt` into the form's inject contract.
+*/
+function useAsExternalErrors(options) {
+	const dismissedPaths = ref(/* @__PURE__ */ new Set());
+	const formDismissed = ref(false);
+	function reset() {
+		if (dismissedPaths.value.size > 0) dismissedPaths.value = /* @__PURE__ */ new Set();
+		if (formDismissed.value) formDismissed.value = false;
+	}
+	watch(() => options.source(), reset);
+	const effective = computed(() => {
+		const errs = options.source();
+		if (!errs) return void 0;
+		const dismissed = dismissedPaths.value;
+		if (dismissed.size === 0 && errs.__form === void 0) return errs;
+		const out = {};
+		for (const k in errs) {
+			if (k === "__form") continue;
+			if (dismissed.has(k)) continue;
+			out[k] = errs[k];
+		}
+		return out;
+	});
+	const formError = computed(() => {
+		if (formDismissed.value) return void 0;
+		return options.source()?.__form;
+	});
+	const isFormDismissed = computed(() => formDismissed.value);
+	function dismissAt(path) {
+		if (!path) return;
+		if (dismissedPaths.value.has(path)) return;
+		const next = new Set(dismissedPaths.value);
+		next.add(path);
+		dismissedPaths.value = next;
+	}
+	function dismissForm() {
+		if (!formDismissed.value) formDismissed.value = true;
+	}
+	return {
+		effective,
+		formError,
+		isFormDismissed,
+		dismissAt,
+		dismissForm,
+		reset
+	};
+}
+//#endregion
+//#region src/composables/use-as-state.ts
+function useAsState(opts) {
+	const fieldsById = /* @__PURE__ */ new Map();
+	const register = (id, registration) => {
+		fieldsById.set(id, registration);
+		if (formState.firstSubmitHappened) formState.freshFields.add(id);
+	};
+	const unregister = (id) => {
+		fieldsById.delete(id);
+		formState.freshFields.delete(id);
+	};
+	const formState = reactive({
+		firstSubmitHappened: false,
+		firstValidation: toValue(opts.firstValidation) ?? "on-change",
+		freshFields: /* @__PURE__ */ new Set(),
+		register,
+		unregister
+	});
+	watchEffect(() => {
+		const v = toValue(opts.firstValidation) ?? "on-change";
+		if (formState.firstValidation !== v) formState.firstValidation = v;
+	});
+	provide(FORM_STATE_KEY, formState);
+	provide(FORM_DATA_KEY, computed(() => toValue(opts.formData)));
+	provide(FORM_CONTEXT_KEY, computed(() => opts.formContext ? toValue(opts.formContext) : void 0));
+	function clearErrors() {
+		formState.firstSubmitHappened = false;
+		formState.freshFields.clear();
+		for (const reg of fieldsById.values()) reg.callbacks.clearErrors();
+	}
+	async function reset() {
+		for (const reg of fieldsById.values()) reg.callbacks.reset();
+		await nextTick();
+		clearErrors();
+	}
+	function submit() {
+		formState.firstSubmitHappened = true;
+		formState.freshFields.clear();
+		if (formState.firstValidation === "none") return true;
+		if (opts.submitValidator) {
+			const errors = opts.submitValidator();
+			const entries = Object.entries(errors);
+			if (entries.length === 0) return true;
+			setErrors(errors);
+			return entries.map(([path, message]) => ({
+				path,
+				message
+			}));
+		}
+		const errors = [];
+		for (const reg of fieldsById.values()) {
+			const result = reg.callbacks.validate();
+			if (result !== true) {
+				const path = reg.path();
+				errors.push({
+					path,
+					message: result
+				});
+			}
+		}
+		return errors.length > 0 ? errors : true;
+	}
+	function setErrors(errors) {
+		for (const reg of fieldsById.values()) {
+			const p = reg.path();
+			reg.callbacks.setExternalError(errors[p]);
+		}
+	}
+	return {
+		clearErrors,
+		reset,
+		submit,
+		setErrors,
+		formState
+	};
+}
+//#endregion
+//#region src/composables/use-as-form.ts
+/**
+* Composable backing `<AsForm>`. Owns the entire form state machine —
+* data container, internal validator, external-error dismissal, action
+* routing, change merging, descendant counts, auto-open, and all
+* provide/inject wiring. Customers building a custom form root can
+* call this directly and render their own `<form>` template.
+*
+* MUST be called from a component's `<script setup>` (it issues
+* `provide()` calls that need an active component instance).
+*/
+function useAsForm(options) {
+	const _data = ref({});
+	const data = computed(() => {
+		return options.formData?.() ?? _data.value;
+	});
+	/**
+	* Unwraps domain data from the form data container. Form data is
+	* `{ value: domainData }` — getByPath/setByPath handle this wrapper
+	* automatically, but scope/validator callers need the inner value.
+	*/
+	function getDomainData() {
+		return data.value.value;
+	}
+	const domainData = () => toRaw(getDomainData());
+	const formContext = computed(() => options.formContext?.());
+	const formValidator = computed(() => getFormValidator(options.def(), { errorLimit: Number.MAX_SAFE_INTEGER }));
+	const { clearErrors, reset: resetState, submit, setErrors } = useAsState({
+		formData: data,
+		formContext,
+		firstValidation: computed(() => options.firstValidation?.()),
+		submitValidator: () => formValidator.value({
+			data: getDomainData(),
+			context: formContext.value ?? {}
+		})
+	});
+	provide(ROOT_DATA_KEY, data);
+	provide(PATH_PREFIX_KEY, computed(() => ""));
+	provide(TYPES_KEY, computed(() => options.types()));
+	provide(COMPONENTS_KEY, computed(() => options.components?.()));
+	provide(HIDE_ROOT_TITLE_KEY, options.hideRootTitle?.() === true);
+	const ext = useAsExternalErrors({ source: () => options.errors?.() });
+	provide(ERRORS_KEY, ext.effective);
+	provide(DISMISS_EXTERNAL_AT_KEY, ext.dismissAt);
+	const sectionsStore = useAsNestedSectionsStore() ?? provideAsNestedSectionsStore();
+	const cf = options.clientFactory?.();
+	if (cf) provide(CLIENT_FACTORY_KEY, cf);
+	const internalErrors = ref({});
+	const allErrors = computed(() => mergeErrorMaps(ext.effective.value, internalErrors.value));
+	provide(DESCENDANT_ERROR_COUNTS_KEY, computed(() => buildDescendantErrorCounts(allErrors.value)));
+	watch(allErrors, (errors) => {
+		for (const errPath of Object.keys(errors)) for (const ancestor of iteratePathAncestors(errPath)) sectionsStore.setOpen(ancestor, true);
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const ctx = computed(() => ({
+		v: void 0,
+		data: getDomainData(),
+		context: formContext.value ?? {},
+		entry: void 0
+	}));
+	const submitText = computed(() => resolveFormProp(options.def().type, UI_FORM_FN_SUBMIT_TEXT, UI_FORM_SUBMIT_TEXT, ctx.value) ?? "Submit");
+	const submitDisabled = computed(() => resolveFormProp(options.def().type, UI_FORM_FN_SUBMIT_DISABLED, void 0, ctx.value) ?? false);
+	function supportsAction(def, actionId) {
+		return def.fields.some((f) => {
+			if (getFieldMeta(f.prop, UI_FORM_ACTION)?.id === actionId) return true;
+			return getFieldMeta(f.prop, WF_ACTION_WITH_DATA) === actionId;
+		});
+	}
+	function invokeAction(name) {
+		if (supportsAction(options.def(), name)) options.emits?.action?.(name, domainData());
+		else options.emits?.unsupportedAction?.(name, domainData());
+	}
+	provide(ACTION_HANDLER_KEY, invokeAction);
+	function handleChange(type, path, value) {
+		ext.dismissAt(path);
+		const errors = internalErrors.value;
+		let stale = null;
+		let next = null;
+		for (const key in errors) {
+			if (!stale) stale = new Set(iteratePathAncestors(path));
+			if (stale.has(key)) {
+				if (!next) next = { ...errors };
+				delete next[key];
+			}
+		}
+		if (next) {
+			internalErrors.value = next;
+			setErrors(next);
+		}
+		options.emits?.change?.(type, path, value, domainData());
+	}
+	provide(CHANGE_HANDLER_KEY, handleChange);
+	function onSubmit() {
+		const result = submit();
+		if (result === true) {
+			internalErrors.value = {};
+			options.emits?.submit?.(domainData());
+		} else {
+			const errs = {};
+			for (const e of result) errs[e.path] = e.message;
+			internalErrors.value = errs;
+			options.emits?.error?.(result);
+		}
+	}
+	return {
+		data,
+		errors: ext.effective,
+		formError: ext.formError,
+		internalErrors,
+		reset: resetState,
+		clearErrors,
+		setErrors,
+		onSubmit,
+		submitText,
+		submitDisabled,
+		invokeAction,
+		dismissError: ext.dismissAt,
+		dismissFormError: ext.dismissForm,
+		formContext,
+		handleChange
+	};
+}
+//#endregion
+//#region src/components/as-form.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["inert"];
+const _hoisted_2 = {
+	role: "alert",
+	class: "as-form-error"
+};
+const _hoisted_3 = { class: "as-form-error-message" };
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = {
+	key: 2,
+	class: "as-form-overlay"
+};
+//#endregion
+//#region src/components/as-form.vue
+var as_form_default = /* @__PURE__ */ defineComponent({
+	__name: "as-form",
+	props: {
+		def: {
+			type: Object,
+			required: true
+		},
+		formData: {
+			type: null,
+			required: false
+		},
+		formContext: {
+			type: null,
+			required: false
+		},
+		firstValidation: {
+			type: String,
+			required: false
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		types: {
+			type: Object,
+			required: true
+		},
+		errors: {
+			type: Object,
+			required: false
+		},
+		clientFactory: {
+			type: Function,
+			required: false
+		},
+		hideRootTitle: {
+			type: Boolean,
+			required: false
+		},
+		hideSubmit: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: [
+		"submit",
+		"error",
+		"action",
+		"unsupported-action",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const form = useAsForm({
+			def: () => props.def,
+			formData: () => props.formData,
+			formContext: () => props.formContext,
+			firstValidation: () => props.firstValidation,
+			components: () => props.components,
+			types: () => props.types,
+			errors: () => props.errors,
+			clientFactory: () => props.clientFactory,
+			hideRootTitle: () => props.hideRootTitle,
+			emits: {
+				submit: (data) => emit("submit", data),
+				error: (errors) => emit("error", errors),
+				action: (name, data) => emit("action", name, data),
+				unsupportedAction: (name, data) => emit("unsupported-action", name, data),
+				change: (type, path, value, formData) => emit("change", type, path, value, formData)
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "as-form",
+				inert: __props.loading,
+				onSubmit: _cache[1] || (_cache[1] = withModifiers((...args) => unref(form).onSubmit && unref(form).onSubmit(...args), ["prevent"]))
+			}, [
+				renderSlot(_ctx.$slots, "form.header", {
+					clearErrors: unref(form).clearErrors,
+					reset: unref(form).reset,
+					setErrors: unref(form).setErrors,
+					formContext: __props.formContext,
+					disabled: unref(form).submitDisabled.value
+				}),
+				renderSlot(_ctx.$slots, "form.before", {
+					clearErrors: unref(form).clearErrors,
+					reset: unref(form).reset,
+					setErrors: unref(form).setErrors,
+					formContext: __props.formContext,
+					disabled: unref(form).submitDisabled.value
+				}),
+				createVNode(as_field_default, { field: __props.def.rootField }, null, 8, ["field"]),
+				renderSlot(_ctx.$slots, "form.after", {
+					clearErrors: unref(form).clearErrors,
+					reset: unref(form).reset,
+					setErrors: unref(form).setErrors,
+					disabled: unref(form).submitDisabled.value,
+					formContext: __props.formContext
+				}),
+				unref(form).formError.value ? renderSlot(_ctx.$slots, "form.error", {
+					key: 0,
+					message: unref(form).formError.value,
+					dismiss: unref(form).dismissFormError
+				}, () => [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(unref(form).formError.value), 1), createElementVNode("button", {
+					type: "button",
+					class: "as-form-error-dismiss",
+					onClick: _cache[0] || (_cache[0] = (...args) => unref(form).dismissFormError && unref(form).dismissFormError(...args))
+				}, " Dismiss ")])]) : createCommentVNode("v-if", true),
+				!__props.hideSubmit ? renderSlot(_ctx.$slots, "form.submit", {
+					key: 1,
+					disabled: unref(form).submitDisabled.value,
+					text: unref(form).submitText.value,
+					clearErrors: unref(form).clearErrors,
+					reset: unref(form).reset,
+					setErrors: unref(form).setErrors,
+					formContext: __props.formContext
+				}, () => [createElementVNode("button", {
+					class: "as-submit-btn",
+					disabled: unref(form).submitDisabled.value
+				}, toDisplayString(unref(form).submitText.value), 9, _hoisted_4)]) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "form.footer", {
+					disabled: unref(form).submitDisabled.value,
+					clearErrors: unref(form).clearErrors,
+					reset: unref(form).reset,
+					setErrors: unref(form).setErrors,
+					formContext: __props.formContext
+				}),
+				__props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "form.loading", {}, () => [_cache[2] || (_cache[2] = createElementVNode("span", {
+					class: "as-form-overlay-icon",
+					"aria-hidden": "true"
+				}, null, -1))])])) : createCommentVNode("v-if", true)
+			], 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { useAsExternalErrors as i, useAsForm as n, useAsState as r, as_form_default as t };