@picked/client 0.0.1-dev.1774231221701 → 0.0.1-dev.1774912386475

package/dist/esm/form/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../rules-logic-B7vJrWyO.js";
+import { t as e } from "../../rules-logic-BIkBWZmf.js";
 import { attach as t, combine as n, createEffect as r, createEvent as i, createStore as a, sample as o, split as s } from "effector";
 //#region src/form/build-responses.ts
 function c(e, t, n) {
@@ -16,22 +16,22 @@ function c(e, t, n) {
 function l(e, t) {
 	let n = Array.from(t.entries()), r = {};
 	return e.forEach((e) => {
-		let t = n.filter(([t]) => t === e.id);
-		t.length === 0 && (t = [[e.id, ""]]), t.forEach(([, t]) => {
+		let t = n.filter(([t]) => t === e.key);
+		t.length === 0 && (t = [[e.key, ""]]), t.forEach(([, t]) => {
 			if (t === "") {
-				c(r, e.id, null);
+				c(r, e.key, null);
 				return;
 			}
 			switch (e.type) {
 				case "text":
 				case "object":
-					c(r, e.id, e.multiple ? [String(t)] : String(t));
+					c(r, e.key, e.multiple ? [String(t)] : String(t));
 					break;
 				case "number":
-					c(r, e.id, e.multiple ? [Number(t)] : Number(t));
+					c(r, e.key, e.multiple ? [Number(t)] : Number(t));
 					break;
 				case "boolean":
-					c(r, e.id, e.multiple ? [t === "true"] : t === "true");
+					c(r, e.key, e.multiple ? [t === "true"] : t === "true");
 					break;
 			}
 		});
@@ -45,20 +45,24 @@ function u(e) {
 function d(e) {
 	return e.some((e) => e.condition || u(e));
 }
-async function f(t, n, r) {
+function f(e) {
+	return e.condition ?? null;
+}
+async function p(t, n, r) {
 	return n.length === 0 || !d(n) ? n : (await Promise.all(n.map(async (n) => {
-		if (!(!n.condition || await e(t, n.condition, r))) return null;
+		let i = f(n);
+		if (!(!i || await e(t, i, r))) return null;
 		if (!Array.isArray(n.options) || !u(n)) return n;
-		let i = (await Promise.all(n.options.map(async (n) => n.condition ? await e(t, n.condition, r) ? n : null : n))).filter((e) => e !== null);
-		return i.length === n.options.length ? n : i.length === 0 ? null : {
+		let a = (await Promise.all(n.options.map(async (n) => n.condition ? await e(t, n.condition, r) ? n : null : n))).filter((e) => e !== null);
+		return a.length === n.options.length ? n : a.length === 0 ? null : {
 			...n,
-			options: i
+			options: a
 		};
 	}))).filter((e) => e !== null);
 }
 //#endregion
 //#region src/form/create-field-evaluator.ts
-function p(e, n, i) {
+function m(e, n, i) {
 	let s = a([]), c = t({
 		source: {
 			allFields: e.fields.listStore,
@@ -66,7 +70,7 @@ function p(e, n, i) {
 			staged: i,
 			committed: e.responses.getAllStore
 		},
-		effect: r(async ({ allFields: t, fieldIds: n, staged: r, committed: i }) => await f(e, t.filter((e) => n.includes(e.id)), { responses: {
+		effect: r(async ({ allFields: t, fieldIds: n, staged: r, committed: i }) => await p(e, t.filter((e) => n.includes(e.key) || n.includes(e.id)), { responses: {
 			...i,
 			...r
 		} }))
@@ -86,21 +90,21 @@ function p(e, n, i) {
 }
 //#endregion
 //#region src/form/create-field-validation.ts
-function m(e) {
+function h(e) {
 	return e === null || e === "" || Array.isArray(e) && e.length === 0;
 }
-function h(n, r, s) {
-	let c = i(), l = i(), u = a({});
+function g(n, r, s) {
+	let c = i(), l = i(), u = i(), d = a({});
 	o({
-		clock: l,
-		source: u,
+		clock: u,
+		source: d,
 		fn: (e, { fieldId: t }) => ({
 			...e,
 			[t]: !0
 		}),
-		target: u
+		target: d
 	});
-	let d = a({}), f = d.map((e) => Object.values(e).filter((e) => e !== void 0)), p = t({
+	let f = a({}), p = f.map((e) => Object.values(e).filter((e) => e !== void 0)), m = t({
 		source: {
 			fields: r,
 			staged: s,
@@ -123,7 +127,7 @@ function h(n, r, s) {
 				if (typeof s == "string") return {
 					fieldId: a,
 					error: {
-						fieldId: a,
+						fieldKey: c.key,
 						userMessage: s,
 						systemMessage: s,
 						value: o
@@ -132,17 +136,17 @@ function h(n, r, s) {
 				if (s === !1) return {
 					fieldId: a,
 					error: {
-						fieldId: a,
+						fieldKey: c.key,
 						userMessage: "This field is invalid",
 						systemMessage: "Field validation rule returned false.",
 						value: o
 					}
 				};
 			}
-			return s && c.required && m(o) ? {
+			return s && c.required && h(o) ? {
 				fieldId: a,
 				error: {
-					fieldId: a,
+					fieldKey: c.key,
 					userMessage: "This field is required",
 					systemMessage: "Field is required.",
 					value: o
@@ -155,29 +159,42 @@ function h(n, r, s) {
 	});
 	return o({
 		clock: c,
-		source: u,
+		source: d,
 		filter: (e, { fieldId: t }) => e[t] === !0,
 		fn: (e, { fieldId: t, value: n }) => ({
 			fieldId: t,
 			value: n,
 			checkRequired: !1
 		}),
-		target: p
+		target: m
 	}), o({
 		clock: l,
+		source: d,
+		filter: (e, { fieldId: t }) => e[t] === !0,
+		fn: (e, { fieldId: t, value: n }) => ({
+			fieldId: t,
+			value: n,
+			checkRequired: !1
+		}),
+		target: m
+	}), o({
+		clock: u,
 		fn: ({ fieldId: e, value: t }) => ({
 			fieldId: e,
 			value: t,
 			checkRequired: !0
 		}),
-		target: p
+		target: m
 	}), s.on(c, (e, { fieldId: t, value: n }) => ({
 		...e,
 		[t]: n
 	})), s.on(l, (e, { fieldId: t, value: n }) => ({
 		...e,
 		[t]: n
-	})), d.on(p.doneData, (e, { fieldId: t, error: n }) => {
+	})), s.on(u, (e, { fieldId: t, value: n }) => ({
+		...e,
+		[t]: n
+	})), f.on(m.doneData, (e, { fieldId: t, error: n }) => {
 		if (n === null) {
 			let n = { ...e };
 			return delete n[t], n;
@@ -187,17 +204,18 @@ function h(n, r, s) {
 			[t]: n
 		};
 	}), {
-		fieldChangeEvent: c,
-		fieldBlurEvent: l,
-		touchedStore: u,
-		fieldErrorsStore: d,
-		formErrorsStore: f,
+		fieldInputEvent: c,
+		fieldChangeEvent: l,
+		fieldBlurEvent: u,
+		touchedStore: d,
+		fieldErrorsStore: f,
+		formErrorsStore: p,
 		stagedValuesStore: s
 	};
 }
 //#endregion
 //#region src/form/create-submit-pipeline.ts
-function g(e) {
+function _(e) {
 	let t = [];
 	return {
 		executeFx: r(async (...n) => await e(t, ...n)),
@@ -206,14 +224,14 @@ function g(e) {
 		})
 	};
 }
-function _({ client: e, experienceInstance: n, formId: c, title: u, stepStore: d, fieldsStore: f, goToNextStep: p }) {
-	let m = i(), h = i(), _ = i(), v = i(), y = i(), b = a(!1), x = a(!1);
+function v({ client: e, experienceInstance: n, formId: c, title: u, stepStore: d, fieldsStore: f, goToNextStep: p }) {
+	let m = i(), h = i(), g = i(), v = i(), y = i(), b = a(!1), x = a(!1);
 	x.on(v, () => !0).on(m, () => !1);
-	let S = m.map(() => void 0), C = g(async (e, t) => {
+	let S = m.map(() => void 0), C = _(async (e, t) => {
 		await Promise.all(e.map((e) => Promise.resolve(e(t))));
-	}), w = g(async (e, t) => {
+	}), w = _(async (e, t) => {
 		await Promise.all(e.map((e) => Promise.resolve(e(t))));
-	}), T = g(async (e, t) => {
+	}), T = _(async (e, t) => {
 		let n = t;
 		for (let t of e) {
 			let e = await Promise.resolve(t(n));
@@ -331,9 +349,9 @@ function _({ client: e, experienceInstance: n, formId: c, title: u, stepStore: d
 		target: p
 	}), o({
 		clock: O.doneData,
-		target: _
+		target: g
 	}), o({
-		clock: _,
+		clock: g,
 		target: w.executeFx
 	}), o({
 		clock: [y, w.executeFx.done],
@@ -342,87 +360,113 @@ function _({ client: e, experienceInstance: n, formId: c, title: u, stepStore: d
 	}), {
 		submitEvent: m,
 		isFormSubmitting: b,
-		onSubmit: T.register,
+		onBeforeSubmit: T.register,
 		onSuccess: C.register,
 		onError: w.register,
 		submitStarted: S,
-		validationErrorsReceived: _
+		validationErrorsReceived: g
 	};
 }
 //#endregion
 //#region src/form/create-form.ts
-function v(e) {
+function y(e) {
 	let t = e.currentTarget;
 	if (t instanceof HTMLInputElement) return t.type === "checkbox" ? t.checked : t.value;
 	if (t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement) return t.value;
 }
-function y(e, t, r, i) {
-	let { client: s, experienceInstance: c } = e, { currentStepStore: l, goToNextStep: u } = c, d = a({}), { fieldsStore: f } = p(s, i, d), { fieldChangeEvent: m, fieldBlurEvent: g, touchedStore: y, fieldErrorsStore: b, formErrorsStore: x } = h(s, f, d), S = n({
-		fields: f,
+function b(e, t, r, i) {
+	let { client: s, experienceInstance: c } = e, { currentStepStore: l, goToNextStep: u } = c, d = n(l, c, (e, t) => ({
+		stepId: e?.id,
+		experienceId: t.id
+	})), f = a({}), { fieldsStore: p } = m(s, i, f);
+	o({
+		clock: p,
+		source: f,
+		fn: (e, t) => {
+			let n = !1, r = { ...e };
+			for (let e of t) e.defaultValue != null && !(e.id in r) && (r[e.id] = e.defaultValue, n = !0);
+			return n ? r : e;
+		},
+		target: f
+	});
+	let { fieldInputEvent: h, fieldChangeEvent: _, fieldBlurEvent: b, touchedStore: x, fieldErrorsStore: S, formErrorsStore: C } = g(s, p, f), w = n({
+		fields: p,
 		responses: s.responses.listStore,
-		staged: d,
-		fieldErrors: b,
-		touched: y
-	}, ({ fields: e, responses: t, staged: n, fieldErrors: r, touched: i }) => e.map((e) => {
-		let a = (t) => {
-			let n = v(t);
-			n !== void 0 && m({
+		staged: f,
+		fieldErrors: S,
+		touched: x,
+		experienceAndStepId: d
+	}, ({ fields: e, responses: t, staged: n, fieldErrors: r, touched: i, experienceAndStepId: a }) => e.map((e) => {
+		let o = (t) => {
+			let n = y(t);
+			n !== void 0 && h({
 				fieldId: e.id,
 				value: n
 			});
-		}, o = (t) => {
-			let n = v(t);
-			n !== void 0 && g({
+		}, s = (t) => {
+			let n = y(t);
+			n !== void 0 && _({
 				fieldId: e.id,
 				value: n
 			});
-		};
+		}, c = (t) => {
+			let n = y(t);
+			n !== void 0 && b({
+				fieldId: e.id,
+				value: n
+			});
+		}, l = n[e.id] ?? t.find((t) => t.fieldId === e.id)?.value ?? e.defaultValue, u = r[e.id], d = e.type === "number" ? "number" : "text", f = e.type === "boolean" ? "checkbox" : d, { experienceId: p, stepId: m } = a, g = `${p}-${m ?? "step"}-${e.id}`;
 		return {
 			...e,
-			value: n[e.id] ?? t.find((t) => t.fieldId === e.id)?.value,
-			error: r[e.id],
+			value: l,
+			error: u,
 			touched: i[e.id] ?? !1,
-			onChange: a,
-			onBlur: o,
 			props: {
-				name: e.id,
-				id: e.id,
-				oninput: a,
-				onblur: o
+				id: g,
+				name: e.key,
+				key: e.key,
+				value: l,
+				type: f,
+				required: e.required,
+				placeholder: e.placeholder,
+				oninput: o,
+				onchange: s,
+				onblur: c
 			}
 		};
-	})), { submitEvent: C, isFormSubmitting: w, onSubmit: T, onSuccess: E, onError: D, submitStarted: O, validationErrorsReceived: k } = _({
+	})), { submitEvent: T, isFormSubmitting: E, onBeforeSubmit: D, onSuccess: O, onError: k, submitStarted: A, validationErrorsReceived: j } = v({
 		client: s,
 		experienceInstance: c,
 		formId: t,
 		title: r,
 		stepStore: l,
-		fieldsStore: f,
+		fieldsStore: p,
 		goToNextStep: u
 	});
 	return o({
-		clock: O,
+		clock: A,
 		fn: () => ({}),
-		target: y
+		target: x
 	}), o({
-		clock: O,
+		clock: A,
 		fn: () => ({}),
-		target: b
+		target: S
 	}), o({
-		clock: k,
-		fn: (e) => Object.fromEntries(e.map((e) => [e.fieldId, e])),
-		target: b
+		clock: j,
+		source: p,
+		fn: (e, t) => Object.fromEntries(t.map((t) => [e.find((e) => e.key === t.fieldKey)?.id ?? t.fieldKey, t])),
+		target: S
 	}), {
 		form: {
-			props: { onsubmit: C },
-			errors: x,
-			submitting: w,
-			onSubmit: T,
-			onSuccess: E,
-			onError: D
+			props: { onsubmit: T },
+			errors: C,
+			submitting: E,
+			onBeforeSubmit: D,
+			onSuccess: O,
+			onError: k
 		},
-		fields: S
+		fields: w
 	};
 }
 //#endregion
-export { l as buildResponsesFromFormData, p as createFieldEvaluator, h as createFieldValidation, y as createForm, _ as createSubmitPipeline, v as getEventValue, f as getStepFields };
+export { l as buildResponsesFromFormData, m as createFieldEvaluator, g as createFieldValidation, b as createForm, v as createSubmitPipeline, y as getEventValue, p as getStepFields };