bitboss-ui 3.0.0-beta.4 → 3.0.0-beta.41

package/dist/components/BbForm/BbForm.vue.d.ts

@@ -0,0 +1,94 @@
+import { MaybeRef, Ref } from 'vue';
+import { BbFormFieldEntry, BbFormServerErrors, BbFormSetErrorsOptions } from '../../composables/useBbFormContext';
+import { ValidationMode } from '../../types/Config';
+import { BbFormInvalidPayload, BbFormSchema, BbFormSubmitValues } from './formSchema';
+declare const __VLS_export: <S extends BbFormSchema = BbFormSchema>(__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: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        /**
+         * Explicit id, so anything outside the form can read and drive it through
+         * `useBbFormContext(id)` — a dialog footer's submit button, a page toolbar,
+         * a leave guard. Omit it when the form is self-contained: the slot scope
+         * already carries the same state for chrome that lives inside.
+         */
+        id?: string;
+        /**
+         * One schema for the whole form: any Standard Schema — Zod (3.24+, 4),
+         * Valibot, ArkType, Yup, Joi, Effect — passed as it is, no adapter (the
+         * vee-validate option underneath is `validationSchema`). Errors land on the field
+         * whose `name` is the issue path (`address.city` or `address[city]`,
+         * `items.0.qty`), and `@submit` receives the schema's output (transforms
+         * applied) typed from it, and the required asterisk comes from the schema
+         * (every library above). A vee-validate `toTypedSchema(...)` or rules
+         * object works too.
+         *
+         * Reactive: pass a `computed` to validate a wizard one step at a time. It
+         * must be set when the form mounts; it can change, not appear later. While
+         * a schema is set, per-field `rules` are ignored (vee-validate's design).
+         */
+        schema?: MaybeRef<S | undefined>;
+        /**
+         * Keep a field's value (and its place in `@submit`) when it unmounts —
+         * the `v-if` wizard step you left, a collapsed section. Off, an unmounted
+         * field drops out of the values.
+         */
+        keepValuesOnUnmount?: boolean | Ref<boolean>;
+        /**
+         * When the fields inside check themselves while the user works:
+         * `aggressive`, `balanced`, `lazy`, `submit-only` or `submit-live` (see
+         * `ValidationMode`). A field's own `validation-mode` wins. Unset, the app's
+         * `formControls.validationMode` applies (`'balanced'` by default).
+         */
+        validationMode?: ValidationMode;
+        /**
+         * Any reactive object (a `reactive({})`, a `ref({})`, Inertia's `useForm()`)
+         * that holds the fields' values, both ways, updated IN PLACE, never
+         * replaced. A field without its own `v-model` starts from the value at its
+         * path (its `name`, else its slugged label), writes every change back there
+         * (nested paths created: `lines[0][qty]` → `lines[0].qty`), and follows
+         * the page's own writes (`values.email = 'x'`, `form.reset()`). Keys no
+         * field owns are never touched. Nothing is written on mount. A field's own
+         * `v-model` wins over it.
+         */
+        modelValue?: Record<string, any>;
+    } & {
+        onSubmit?: ((values: BbFormSubmitValues<S>) => any) | undefined;
+        onInvalid?: ((payload: BbFormInvalidPayload) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        $el: Readonly<import('vue').ShallowRef<HTMLFormElement | null>>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            touched: boolean;
+            dirty: boolean;
+            valid: boolean;
+            pending: boolean;
+            initialValues?: Partial<import('vee-validate').GenericObject> | undefined;
+            errors: Record<string, string[]>;
+            fields: Record<string, BbFormFieldEntry>;
+            isSubmitting: boolean;
+            removeField: (path: string) => void;
+            resetForm: (state?: Partial<import('vee-validate').FormState<import('vee-validate').GenericObject>> | undefined, opts?: Partial<import('vee-validate').ResetFormOpts>) => void;
+            setErrors: (serverErrors: BbFormServerErrors, options?: BbFormSetErrorsOptions) => void;
+            snapshot: (next?: Record<string, unknown>) => void;
+            submitCount: number;
+            unmatchedErrors: Record<string, string[]>;
+            validate: (opts?: Partial<import('vee-validate').ValidationOptions>) => Promise<import('vee-validate').FormValidationResult<import('vee-validate').GenericObject, import('vee-validate').GenericObject>>;
+            values: import('vee-validate').GenericObject;
+        }) => any;
+    };
+    emit: ((evt: "submit", values: BbFormSubmitValues<S>) => void) & ((evt: "invalid", payload: BbFormInvalidPayload) => void) & ((evt: "update:modelValue", value: Record<string, any>) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/{validated → components/BbForm}/BbForm.vue.js

@@ -1,5 +1,5 @@
 import e from "./BbForm.vue_vue_type_script_setup_true_lang.js";
-//#region src/validated/BbForm.vue
+//#region src/components/BbForm/BbForm.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/components/BbForm/BbForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,317 @@
+import { isEqual as e } from "../../utilities/functions/isEqual.js";
+import { BB_FORM_CONNECTION as t } from "../../composables/useFormBinding.js";
+import { messagesByKey as n, useBbFormContextHost as r } from "../../composables/useBbFormContext.js";
+import { BB_FORM_FIELDS as i, byDocumentOrder as a, focusTarget as o } from "./formFields.js";
+import { bindFormField as ee, nameToPath as s } from "./bindFormField.js";
+import { customFieldsOf as te } from "../../composables/useBbFormField.js";
+import ne from "./BbFormCustomField.js";
+import { schemaRequires as re, toFormSchema as ie } from "./formSchema.js";
+import { Fragment as ae, computed as c, createBlock as oe, createElementBlock as se, defineComponent as ce, getCurrentInstance as le, mergeProps as ue, nextTick as l, openBlock as u, provide as d, reactive as f, ref as de, renderList as fe, renderSlot as pe, shallowReactive as me, unref as p, useTemplateRef as he, withModifiers as ge } from "vue";
+import { useForm as _e } from "vee-validate";
+//#region src/components/BbForm/BbForm.vue?vue&type=script&setup=true&lang.ts
+var ve = /*@__PURE__*/ ce({
+	__name: "BbForm",
+	props: {
+		id: {},
+		schema: {},
+		keepValuesOnUnmount: { type: [Boolean, Object] },
+		validationMode: {},
+		modelValue: {}
+	},
+	emits: [
+		"submit",
+		"invalid",
+		"update:modelValue"
+	],
+	setup(ce, { expose: ve, emit: ye }) {
+		let m = ce, h = ye, be = c(() => ie(p(m.schema))), { handleSubmit: xe, isSubmitting: Se, submitCount: g, resetForm: Ce, meta: _, values: v, errors: we, validate: y, setFieldError: b, setValues: x } = _e({
+			validationSchema: be.value ? be : void 0,
+			keepValuesOnUnmount: c(() => p(m.keepValuesOnUnmount) ?? !1)
+		}), S = (e) => e.replace(/\.(0|[1-9]\d*)(?=\.|$)/g, "[$1]"), C = me(/* @__PURE__ */ new Set()), w = f({}), T = f({}), E = {}, D = () => {
+			for (let e of Object.keys(T)) delete T[e];
+			for (let e of Object.keys(E)) delete E[e];
+		}, O = (e) => [...C].some((t) => S(t.name()) === e), Te = te(m.id);
+		d(t, { bind: ee }), d(i, {
+			isRequired: (e) => re(p(m.schema), e),
+			validationMode: () => m.validationMode,
+			register: (e) => {
+				C.add(e);
+				let t = S(e.name());
+				delete w[t];
+				let n = T[t];
+				n && (b(t, n), E[t] = n, delete T[t]);
+				let r = Object.keys(j.value).find((e) => S(e) === t);
+				if (r) {
+					let e = j.value[r];
+					b(t, e), E[t] = e;
+					let { [r]: n, ...i } = j.value;
+					j.value = i;
+				}
+				return (t) => {
+					C.delete(e), K.add(e.name()), (U(e.name()) || m.modelValue) && X();
+					let n = S(e.name()), r = (E[n] ?? []).filter((e) => t.errors.includes(e));
+					delete E[n], !(!p(m.keepValuesOnUnmount) || O(n)) && (r.length && (T[n] = r), w[n] = {
+						key: e.name(),
+						label: e.label(),
+						validationLabel: e.validationLabel(),
+						dirty: t.dirty,
+						touched: t.touched
+					});
+				};
+			},
+			moved: (e) => {
+				q.add(e), X();
+			},
+			model: () => m.modelValue,
+			read: (e) => G(m.modelValue, e),
+			write: (t, n) => {
+				let r = m.modelValue;
+				!r || e(G(r, t), n) || (Fe(r, t, n), h("update:modelValue", r));
+			}
+		});
+		let k = c(() => {
+			let e = {};
+			for (let [t, n] of Object.entries(w)) {
+				let { key: r, ...i } = n, a = we.value[t];
+				e[r] = {
+					...i,
+					mounted: !1,
+					errors: [...T[t] ?? [], ...a ? [a] : []]
+				};
+			}
+			for (let t of C) e[t.name()] = {
+				mounted: !0,
+				label: t.label(),
+				validationLabel: t.validationLabel(),
+				errors: [...t.errors()],
+				dirty: t.dirty(),
+				touched: t.touched()
+			};
+			return e;
+		}), A = c(() => {
+			let e = {};
+			for (let [t, n] of Object.entries(k.value)) n.errors.length && (e[t] = n.errors);
+			return e;
+		}), j = de({}), M = (e, t = {}) => {
+			let r = document.activeElement, i = new Map(Object.keys(k.value).map((e) => [S(s(e)), e]));
+			D();
+			let a = {}, o = {};
+			for (let [t, r] of Object.entries(n(e))) {
+				let e = S(s(t));
+				if (!i.has(e)) {
+					a[s(t)] = r;
+					continue;
+				}
+				o[i.get(e)] = r, O(e) ? (b(e, r), E[e] = r) : T[e] = r;
+			}
+			j.value = a, $(), t.focus !== !1 && Object.keys(o).length && Ee(o, r);
+		}, Ee = async (e, t) => {
+			await l();
+			let n = Q.value, r = document.activeElement;
+			r !== t && r && r !== document.body || (!r || r === document.body ? g.value === 0 : !n?.contains(r)) || I(e);
+		}, N = (e) => {
+			let t = JSON.parse(JSON.stringify(v)), n = e ? P(t, e) : t, r = {};
+			for (let e of C) {
+				let t = e.errors();
+				t.length && (r[S(e.name())] = [...t]);
+			}
+			let i = g.value;
+			Ce({
+				values: n,
+				submitCount: i
+			}, { force: !0 });
+			for (let [e, t] of Object.entries(r)) b(e, t);
+			for (let e of Object.values(w)) Object.assign(e, {
+				dirty: !1,
+				touched: !1
+			});
+		}, P = (e, t) => {
+			let n = { ...e };
+			for (let [e, r] of Object.entries(t)) {
+				let t = n[e];
+				n[e] = F(t) && F(r) ? P(t, r) : r;
+			}
+			return n;
+		}, F = (e) => !!e && typeof e == "object" && Object.getPrototypeOf(e) === Object.prototype, I = (e) => {
+			let t = Q.value;
+			if (!t) return;
+			let n = [...C].filter((t) => e[t.name()] !== void 0).map((e) => e.el()).filter((e) => !!e && t.contains(e)).sort(a);
+			for (let e of n) {
+				let t = o(e);
+				if (t) {
+					t.focus();
+					return;
+				}
+			}
+		}, De = async (e) => {
+			let t = {};
+			for (let [n, r] of Object.entries(e.results ?? {})) {
+				let e = r?.errors;
+				e?.length && (t[s(n)] = [...e]);
+			}
+			for (let [n, r] of Object.entries(e.errors ?? {})) r && !t[s(n)] && (t[s(n)] = [r]);
+			let n = {
+				errors: t,
+				values: e.values
+			}, r = document.activeElement;
+			h("invalid", n), await l();
+			let i = document.activeElement;
+			i !== r && i && i !== document.body || I(n.errors);
+		}, L = le(), Oe = !1, ke = (e) => {
+			let t = L?.appContext.config.errorHandler;
+			t ? t(e, L?.proxy ?? null, "component event handler") : console.error(e);
+		}, Ae = (e) => typeof e?.then == "function", je = (e) => {
+			let t = L?.vnode.props, n = (e) => Array.isArray(e) ? e : typeof e == "function" ? [e] : [], r = n(t?.onSubmit);
+			if (!Oe) {
+				let e = n(t?.onSubmitOnce);
+				e.length && (Oe = !0, r.push(...e));
+			}
+			if (!r.length) return;
+			let i = [];
+			for (let t of r) try {
+				let n = t(e);
+				Ae(n) && i.push(Promise.resolve(n).catch(ke));
+			} catch (e) {
+				ke(e);
+			}
+			return i.length ? Promise.all(i) : void 0;
+		}, Me = xe((e) => je(e), De), R = (e) => e.split(/\.|\[(\d+)\]/).filter((e) => e !== void 0 && e !== ""), z = (e, t) => e === t || e.startsWith(`${t}.`) || e.startsWith(`${t}[`), B = (e) => Array.isArray(e) ? e.map(B) : e && Object.getPrototypeOf(e) === Object.prototype ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, B(t)])) : e, V = (e) => {
+			let t = S(s(e)), n = R(t);
+			if (!n.length) return;
+			let [r, ...i] = n, a = v[r];
+			if (!i.length) r in v && x({ [r]: void 0 }, !1);
+			else if (a && typeof a == "object") {
+				let e = B(a), t = e;
+				for (let e of i.slice(0, -1)) if (t = t?.[e], !t || typeof t != "object") break;
+				let n = i[i.length - 1];
+				t && typeof t == "object" && (Array.isArray(t) && Number(n) === t.length - 1 ? --t.length : n in t && (t[n] = void 0), x({ [r]: e }, !1));
+			}
+			for (let e of Object.keys(we.value)) z(S(e), t) && b(e, void 0);
+			for (let e of Object.keys(T)) z(e, t) && delete T[e];
+			for (let e of Object.keys(E)) z(e, t) && delete E[e];
+			j.value = Object.fromEntries(Object.entries(j.value).filter(([e]) => !z(S(e), t)));
+			for (let e of Object.keys(w)) z(e, t) && delete w[e];
+			$();
+		}, H = (e) => R(s(e)).join("."), U = (e) => {
+			let t = R(s(e));
+			for (let e = t.length - 1; e > 0; e--) if (/^(0|[1-9]\d*)$/.test(t[e])) return {
+				container: t.slice(0, e).join("."),
+				index: Number(t[e])
+			};
+			return null;
+		}, Ne = (e) => e.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, v), W = (e) => {
+			let t = H(e);
+			return [...C].some((e) => {
+				let n = H(e.name());
+				return n === t || n.startsWith(`${t}.`);
+			});
+		}, Pe = (e) => {
+			let t = Ne(e);
+			if (!Array.isArray(t)) return;
+			let n = -1;
+			for (let t of C) {
+				let r = U(t.name());
+				r && r.container === e && (n = Math.max(n, r.index));
+			}
+			let r = G(m.modelValue, e);
+			Array.isArray(r) && (n = Math.max(n, r.length - 1));
+			for (let r = t.length - 1; r > n; r--) V(`${e}.${r}`);
+		}, G = (e, t) => R(s(t)).reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e), Fe = (e, t, n) => {
+			let r = R(s(t)), i = e;
+			r.slice(0, -1).forEach((e, t) => {
+				let n = i[e];
+				(!n || typeof n != "object") && (i[e] = /^(0|[1-9]\d*)$/.test(r[t + 1]) ? [] : {}), i = i[e];
+			}), i[r[r.length - 1]] = n;
+		}, Ie = (e, t) => {
+			let n = R(s(t)), r = G(e, n.slice(0, -1).join(".")), i = n[n.length - 1];
+			!r || typeof r != "object" || Array.isArray(r) || i in r && (delete r[i], h("update:modelValue", e));
+		}, K = /* @__PURE__ */ new Set(), q = /* @__PURE__ */ new Set(), J = /* @__PURE__ */ new Set(), Y = !1, X = () => {
+			Y || (Y = !0, l().then(() => l()).then(Le));
+		}, Le = () => {
+			Y = !1;
+			for (let e of C) e.reassert();
+			let e = !!p(m.keepValuesOnUnmount), t = /* @__PURE__ */ new Set();
+			if (!e) for (let e of C) {
+				let n = U(e.name());
+				n && t.add(n.container);
+			}
+			for (let e of [...q, ...J]) {
+				let n = U(e), r = n !== null && H(e) === `${n.container}.${n.index}`;
+				n && (r || q.has(e)) ? (r && J.has(e) && !W(e) && V(e), t.add(n.container)) : W(e) || V(e);
+			}
+			let n = m.modelValue;
+			if (n) {
+				for (let e of C) {
+					let n = U(e.name());
+					n && t.add(n.container);
+				}
+				for (let r of K) {
+					let i = U(r);
+					i ? t.add(i.container) : !e && !W(r) && Ie(n, r);
+				}
+			}
+			K.clear(), q.clear(), J.clear();
+			for (let e of t) Pe(e);
+			$();
+		}, Re = (e) => {
+			J.add(e), X();
+		}, ze = (e) => (j.value = {}, Me(e)), Be = (e, t) => {
+			let n = e;
+			for (let e of t.split(/\.|\[(\d+)\]/).filter(Boolean)) {
+				if (!n || typeof n != "object" || !(e in n)) return !1;
+				n = n[e];
+			}
+			return !0;
+		}, Z = (...e) => {
+			Ce(...e), j.value = {}, D();
+			for (let [e, t] of Object.entries(w)) Be(v, e) ? Object.assign(t, {
+				dirty: !1,
+				touched: !1
+			}) : delete w[e];
+		}, Q = he("form-el"), $ = r(() => m.id, {
+			state: () => ({
+				valid: _.value.valid,
+				dirty: _.value.dirty,
+				touched: _.value.touched,
+				pending: _.value.pending,
+				submitting: Se.value,
+				submitCount: g.value,
+				values: { ...v },
+				errors: A.value,
+				fields: k.value,
+				unmatchedErrors: j.value
+			}),
+			actions: {
+				submit: () => void ze(),
+				reset: () => Z(),
+				snapshot: N,
+				validate: async () => (await y()).valid,
+				setErrors: M,
+				removeField: Re
+			}
+		});
+		return ve({ $el: Q }), (e, t) => (u(), se("form", {
+			ref: "form-el",
+			novalidate: "",
+			onReset: t[0] ||= ge((e) => Z(), ["prevent"]),
+			onSubmit: ze
+		}, [pe(e.$slots, "default", ue({
+			errors: A.value,
+			fields: k.value,
+			isSubmitting: p(Se),
+			removeField: Re,
+			resetForm: Z,
+			setErrors: M,
+			snapshot: N,
+			submitCount: p(g),
+			unmatchedErrors: j.value,
+			validate: p(y),
+			values: p(v)
+		}, p(_))), (u(!0), se(ae, null, fe(p(Te), (e) => (u(), oe(p(ne), {
+			key: e.key,
+			spec: e
+		}, null, 8, ["spec"]))), 128))], 544));
+	}
+});
+//#endregion
+export { ve as default };

package/dist/components/BbForm/BbFormCustomField.d.ts

@@ -0,0 +1,14 @@
+import { PropType } from 'vue';
+import { BbFormFieldSpec } from '../../composables/useBbFormField';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    spec: {
+        type: PropType<BbFormFieldSpec>;
+        required: true;
+    };
+}>, () => null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    spec: {
+        type: PropType<BbFormFieldSpec>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/BbForm/BbFormCustomField.js

@@ -0,0 +1,43 @@
+import { BB_FORM_FIELDS as e } from "./formFields.js";
+import { nameToPath as t } from "./bindFormField.js";
+import { defineComponent as n, inject as r, onBeforeUnmount as i, onMounted as a, watch as o } from "vue";
+import { useField as s } from "vee-validate";
+//#region src/components/BbForm/BbFormCustomField.ts
+var c = n({
+	name: "BbFormCustomField",
+	props: { spec: {
+		type: Object,
+		required: !0
+	} },
+	setup(n) {
+		let c = n.spec, l = r(e, null), u = () => t(c.name), d = c.value === void 0 ? l?.read(u()) : c.value, { value: f, errors: p, meta: m, validate: h, setValue: g } = s(u, c.rules, {
+			initialValue: d,
+			validateOnValueUpdate: !1,
+			label: () => c.validationLabel ?? c.name
+		});
+		c.setValue = (e) => {
+			g(e, !1), l?.model() && l.write(u(), e);
+		}, c.validate = async () => (await h()).valid, o(f, (e) => c.value = e, { immediate: !0 }), o(p, (e) => c.errors = [...e], { immediate: !0 }), c.bound = !0;
+		let _;
+		return a(() => {
+			_ = l?.register({
+				name: u,
+				el: () => document.querySelector(`[data-bb-field="${CSS.escape(c.name)}"]`),
+				label: () => c.validationLabel,
+				validationLabel: () => c.validationLabel,
+				errors: () => p.value,
+				dirty: () => m.dirty,
+				touched: () => m.touched,
+				reassert: () => {}
+			});
+		}), i(() => {
+			_?.({
+				dirty: m.dirty,
+				touched: m.touched,
+				errors: [...p.value]
+			}), c.bound = !1, c.setValue = void 0, c.validate = void 0;
+		}), () => null;
+	}
+});
+//#endregion
+export { c as default };

package/dist/components/BbForm/bindFormField.d.ts

@@ -0,0 +1,16 @@
+import { FieldBinding, FieldBindingOptions } from '../../composables/useFormBinding';
+/**
+ * Q53.22 — a native form `name` as a vee-validate path. Brackets are how an
+ * HTML form (and PHP / Laravel on the other end) spells nesting, so both
+ * spellings reach the same field: `address[city]` → `address.city`,
+ * `users[0][name]` → `users.0.name`, and a trailing `[]` (the "post every
+ * value" suffix) goes: `tags[]` → `tags`. Dots are accepted as they are.
+ */
+export declare const nameToPath: (name: string) => string;
+/**
+ * The binding a `BbForm` gives every form control inside it: binds the field to
+ * vee-validate, keeps `modelValue` and the field value in sync, merges the
+ * engine's errors with any external `errors` prop, and derives the required
+ * asterisk. The control routes its events through it (useFormBinding).
+ */
+export declare function bindFormField<T>(props: Record<string, any>, emit: (event: any, ...args: any[]) => void, opts: FieldBindingOptions): FieldBinding<T>;

package/dist/components/BbForm/bindFormField.js

@@ -0,0 +1,85 @@
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useLocale as t } from "../../composables/useLocale.js";
+import { isEqual as n } from "../../utilities/functions/isEqual.js";
+import { deburr as r } from "../../utilities/functions/deburr.js";
+import { BB_FORM_FIELDS as i } from "./formFields.js";
+import { computed as a, getCurrentInstance as o, inject as s, onBeforeMount as c, onBeforeUnmount as l, onMounted as u, watch as d } from "vue";
+import { useField as f } from "vee-validate";
+//#region src/components/BbForm/bindFormField.ts
+var p = (e) => r(e).replace(/\s+/g, "").toLowerCase(), m = (e) => e.replace(/\[\]$/, "").replace(/\[([^\]]*)\]/g, ".$1").replace(/^\./, ""), h = (e) => typeof e == "string" ? e.split("|").some((e) => e.trim().split(":")[0] === "required") : e && typeof e == "object" && !Array.isArray(e) ? !!e.required : !1;
+function g(r, g, _) {
+	let v = a(() => _.identifierFallback()), y = a(() => {
+		let e = typeof r.name == "string" ? r.name.trim() : "";
+		return e ? m(e) : v.value ? p(v.value) : void 0;
+	}), { t: b } = t(), x = b("common.fieldLabel"), S = a(() => r.validationLabel || v.value || x.value);
+	c(() => {
+		if (!y.value) throw Error(`[bitboss-ui] ${_.componentName} is inside a BbForm: give the field a \`label\` or a \`name\`, or \`formless\` if it is not form data.`);
+	});
+	let C = e(), w = a(() => r.rules), T = a(() => y.value ?? ""), E = s(i, null), D = a(() => r.validationMode ?? E?.validationMode() ?? C.formControls?.validationMode ?? "balanced"), O = () => I.value.length > 0, k = () => D.value === "aggressive" || O() && (D.value === "balanced" || D.value === "submit-live"), A = () => D.value === "aggressive" || D.value === "balanced" || D.value === "lazy", j;
+	E && l(() => j?.({
+		dirty: L.dirty,
+		touched: L.touched,
+		errors: [...I.value]
+	}));
+	let M = () => r.modelValue !== void 0, N = () => M() ? r.modelValue : E?.model() ? E.read(T.value) : void 0, P = (e) => {
+		!M() && E?.model() && E.write(T.value, e), g("update:modelValue", e);
+	}, { value: F, errors: I, meta: L, validate: R, setValue: z } = f(T, w, {
+		initialValue: N(),
+		validateOnValueUpdate: !1,
+		label: () => S.value
+	});
+	d(() => N(), (e, t) => {
+		if (n(e, t)) return;
+		let r = !n(e, F.value);
+		F.value = e, r && O() && D.value !== "lazy" && D.value !== "submit-only" && R();
+	});
+	let B = () => {
+		let e = N();
+		e !== void 0 && (n(F.value, e) || z(e, !1));
+	};
+	E && d(T, (e, t) => {
+		!t || e === t || (B(), E.moved(t));
+	}, { flush: "sync" }), d(F, (e) => {
+		n(e, N()) || P(e);
+	}, { flush: "post" });
+	let V = a(() => {
+		let e = [...I.value];
+		return r.errors && e.push(...[].concat(r.errors)), e;
+	});
+	if (E) {
+		let e = o();
+		u(() => {
+			j = E.register({
+				name: () => T.value,
+				el: () => {
+					let t = e?.proxy?.$el;
+					return t instanceof Element ? t : null;
+				},
+				label: () => v.value,
+				validationLabel: () => r.validationLabel,
+				errors: () => V.value,
+				dirty: () => L.dirty,
+				touched: () => L.touched,
+				reassert: B
+			});
+		});
+	}
+	let H = a(() => !!E?.isRequired(T.value)), U = a(() => C.requiredAsterisk && (!!r.required || h(r.rules) || H.value)), W = a(() => r.modelValue === void 0 ? F.value === void 0 ? (_.emptyValue ?? (() => null))() : F.value : r.modelValue), G = a(() => !!r.required || H.value), K = (e) => {
+		z(e, k()), P(e);
+	}, q = () => {
+		L.touched = !0, A() && R();
+	}, J = () => k() || A();
+	return {
+		model: W,
+		errors: V,
+		required: G,
+		showAsterisk: U,
+		setModelValue: K,
+		leave: q,
+		commit: (e) => {
+			z(e, J()), P(e);
+		}
+	};
+}
+//#endregion
+export { g as bindFormField, m as nameToPath };

package/dist/components/BbForm/formFields.d.ts

@@ -0,0 +1,64 @@
+import { InjectionKey } from 'vue';
+import { ValidationMode } from '../../types/Config';
+export type BbFormField = {
+    /** The field's vee-validate path (its `name` as a path, or its slugged label). */
+    name: () => string;
+    /** The field's root element, once mounted. */
+    el: () => Element | null;
+    /** The visible label (the legend for a group). */
+    label: () => string | undefined;
+    /** The `validation-label` prop. */
+    validationLabel: () => string | undefined;
+    /** Every current message: rules, schema, server and the `errors` prop. */
+    errors: () => string[];
+    dirty: () => boolean;
+    touched: () => boolean;
+    /**
+     * Q54.3 — write the value the page owns for this field (its `v-model`)
+     * back to its path, when the page owns one. The form calls it after a
+     * render that moved or removed fields, because vee-validate keys values by
+     * path: a field that moved (an id-keyed row after a delete) would otherwise
+     * read the leftover at its new path, and a removed sibling's unmount can
+     * unset it.
+     */
+    reassert: () => void;
+};
+export type BbFormFieldsContext = {
+    /** The current schema marks the field at this path as mandatory. */
+    isRequired: (name: string) => boolean;
+    /** The form's `validation-mode`, when it sets one (a field's own wins). */
+    validationMode: () => ValidationMode | undefined;
+    /**
+     * Registers a mounted field; returns the function its unmount calls, with
+     * `dirty` / `touched` / its vee-validate messages as the user left them (a
+     * preserving form keeps what still applies).
+     */
+    register: (field: BbFormField) => (left: {
+        dirty: boolean;
+        touched: boolean;
+        errors: string[];
+    }) => void;
+    /**
+     * A mounted field's path changed (`lines.2` → `lines.1`): after the render,
+     * the form re-asserts the fields the page owns and releases the old path if
+     * no field on the page owns it any more.
+     */
+    moved: (from: string) => void;
+    /**
+     * Q54.5 — the object bound with `<BbForm v-model>`, when there is one. A
+     * field without its own `v-model` reads its page value from it (`read`) and
+     * writes every change back into it (`write`), by path.
+     */
+    model: () => Record<string, unknown> | undefined;
+    read: (path: string) => unknown;
+    write: (path: string, value: unknown) => void;
+};
+export declare const BB_FORM_FIELDS: InjectionKey<BbFormFieldsContext>;
+/**
+ * The element to focus inside a field: the one marked `aria-invalid` when the
+ * control marks one, else its first tabbable element (a radio group's roving
+ * tabindex leaves exactly one at `0`).
+ */
+export declare const focusTarget: (root: Element) => HTMLElement | null;
+/** Document order, so "first" means first on the page, not first mounted. */
+export declare const byDocumentOrder: (a: Element, b: Element) => 0 | 1 | -1;

package/dist/components/BbForm/formFields.js

@@ -0,0 +1,11 @@
+//#region src/components/BbForm/formFields.ts
+var e = Symbol.for("bitboss-ui:form-fields"), t = "input:not([type=\"hidden\"]), select, textarea, button, [contenteditable=\"true\"], [tabindex]", n = (e) => {
+	if (e.closest("[inert]")) return !1;
+	let t = e.checkVisibility;
+	return typeof t == "function" ? t.call(e, { visibilityProperty: !0 }) : e.getClientRects().length > 0;
+}, r = (e) => e instanceof HTMLElement && !e.disabled && e.tabIndex >= 0 && n(e), i = (e) => {
+	let n = [e, ...e.querySelectorAll(t)].filter(r);
+	return n.find((e) => e.getAttribute("aria-invalid") === "true") ?? n[0] ?? null;
+}, a = (e, t) => e === t ? 0 : e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+//#endregion
+export { e as BB_FORM_FIELDS, a as byDocumentOrder, i as focusTarget };