@hybridly/vue 0.10.0-beta.18 → 0.10.0-beta.19

package/dist/index.d.mts

@@ -31,7 +31,8 @@ declare const Deferred: vue.DefineComponent<vue.ExtractPropTypes<{
 //#endregion
 //#region src/composables/form.d.ts
 type Errors$1<T extends SearchableObject$1> = { [K in keyof T]?: T[K] extends Record<string, any> ? Errors$1<T[K]> : string };
-type DefaultFormOptions = Pick<FormOptions<object>, 'timeout' | 'resetOnSuccess' | 'setDefaultOnSuccess' | 'progress' | 'preserveScroll' | 'preserveState' | 'preserveUrl' | 'headers' | 'errorBag' | 'spoof' | 'transformUrl' | 'updateHistoryState' | 'useFormData'>;
+type FormFieldBehavior$1 = boolean | string[];
+type DefaultFormOptions = Pick<FormOptions<object>, 'timeout' | 'resetOnSuccess' | 'resetOnError' | 'setDefaultOnSuccess' | 'progress' | 'preserveScroll' | 'preserveState' | 'preserveUrl' | 'headers' | 'errorBag' | 'spoof' | 'transformUrl' | 'updateHistoryState' | 'useFormData'>;
 interface FormOptions<T extends SearchableObject$1> extends Omit<HybridRequestOptions, 'data' | 'url' | 'reset'> {
   fields: T;
   url?: UrlResolvable | (() => UrlResolvable);
@@ -44,12 +45,17 @@ interface FormOptions<T extends SearchableObject$1> extends Omit<HybridRequestOp
    * Resets the fields of the form to their default value after a successful submission.
    * @default true
    */
-  resetOnSuccess?: boolean;
+  resetOnSuccess?: FormFieldBehavior$1;
+  /**
+   * Resets the fields of the form to their default value after a failed submission.
+   * @default false
+   */
+  resetOnError?: FormFieldBehavior$1;
   /**
    * Updates the default values from the form after a successful submission.
    * @default false
    */
-  setDefaultOnSuccess?: boolean;
+  setDefaultOnSuccess?: FormFieldBehavior$1;
   /**
    * Callback executed before the form submission for transforming the fields.
    */
@@ -85,6 +91,7 @@ declare function useForm<T extends SearchableObject$1, P extends Path$1<T> & str
 //#region src/components/form.d.ts
 type DefaultFormFields = Record<string, any>;
 type FormInternalSubmitOptions<T extends SearchableObject$1 = DefaultFormFields> = NonNullable<Parameters<FormReturn<T>['submit']>[0]>;
+type FormFieldBehavior = boolean | string[];
 type FormRequestOptions = Omit<HybridRequestOptions, 'url' | 'data' | 'method' | 'errorBag' | 'progress'>;
 type FormSubmitOptions<T extends SearchableObject$1 = DefaultFormFields> = FormInternalSubmitOptions<T>;
 type FormSlotProps<T extends SearchableObject$1 = DefaultFormFields> = Omit<FormReturn<T>, 'submit' | 'reset' | 'resetFields' | 'errors'> & {
@@ -101,8 +108,9 @@ interface FormProps {
   errorBag?: string;
   showProgress?: boolean;
   disableWhileProcessing?: boolean;
-  resetOnSuccess?: boolean;
-  setDefaultOnSuccess?: boolean;
+  resetOnSuccess?: FormFieldBehavior;
+  resetOnError?: FormFieldBehavior;
+  setDefaultOnSuccess?: FormFieldBehavior;
 }
 declare const Form: vue.DefineComponent<vue.ExtractPropTypes<{
   action: {
@@ -133,11 +141,15 @@ declare const Form: vue.DefineComponent<vue.ExtractPropTypes<{
     default: false;
   };
   resetOnSuccess: {
-    type: BooleanConstructor;
+    type: PropType<FormFieldBehavior>;
     default: true;
   };
+  resetOnError: {
+    type: PropType<FormFieldBehavior>;
+    default: false;
+  };
   setDefaultOnSuccess: {
-    type: BooleanConstructor;
+    type: PropType<FormFieldBehavior>;
     default: false;
   };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -171,11 +183,15 @@ declare const Form: vue.DefineComponent<vue.ExtractPropTypes<{
     default: false;
   };
   resetOnSuccess: {
-    type: BooleanConstructor;
+    type: PropType<FormFieldBehavior>;
     default: true;
   };
+  resetOnError: {
+    type: PropType<FormFieldBehavior>;
+    default: false;
+  };
   setDefaultOnSuccess: {
-    type: BooleanConstructor;
+    type: PropType<FormFieldBehavior>;
     default: false;
   };
 }>> & Readonly<{}>, {
@@ -185,8 +201,9 @@ declare const Form: vue.DefineComponent<vue.ExtractPropTypes<{
   action: string;
   showProgress: boolean;
   disableWhileProcessing: boolean;
-  resetOnSuccess: boolean;
-  setDefaultOnSuccess: boolean;
+  resetOnSuccess: FormFieldBehavior;
+  resetOnError: FormFieldBehavior;
+  setDefaultOnSuccess: FormFieldBehavior;
 }, SlotsType<{
   default: FormSlotProps;
 }>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/index.mjs

@@ -153,9 +153,27 @@ function useForm(options) {
 	*/
 	function setDefault(newDefault) {
 		Object.entries(newDefault).forEach(([key, value]) => {
-			Reflect.set(defaults, key, safeClone(value));
+			set(defaults, key, safeClone(value));
 		});
 	}
+	function resolveFieldBehaviorKeys(option, fallback) {
+		if (option === false) return;
+		if (Array.isArray(option)) return option.length > 0 ? option : void 0;
+		if (option === true) return Object.keys(fields);
+		return fallback ? Object.keys(fields) : void 0;
+	}
+	function setDefaultFromFields(option) {
+		const keys = resolveFieldBehaviorKeys(option, false);
+		if (!keys) return;
+		keys.forEach((key) => {
+			set(defaults, key, safeClone(get(fields, key)));
+		});
+	}
+	function resetFieldsFromBehavior(option, fallback) {
+		const keys = resolveFieldBehaviorKeys(option, fallback);
+		if (!keys) return;
+		resetFields(...keys);
+	}
 	/**
 	* Resets the form's failed and successful flags.
 	*/
@@ -200,7 +218,7 @@ function useForm(options) {
 	function submit(optionsOverrides) {
 		const { fields: _f, key: _k, ...optionsWithoutFields } = options;
 		const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
-		const { timeout, resetOnSuccess, setDefaultOnSuccess, transform, ...requestOptions } = merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
+		const { timeout, resetOnSuccess, resetOnError, setDefaultOnSuccess, transform, ...requestOptions } = merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
 		const url = typeof requestOptions.url === "function" ? requestOptions.url() : requestOptions.url;
 		const data = typeof transform === "function" ? transform(fields) : fields;
 		const preserveState = requestOptions.preserveState ?? requestOptions.method !== "GET";
@@ -232,6 +250,7 @@ function useForm(options) {
 				},
 				"validation-error": (incoming, request, context) => {
 					setErrors(incoming);
+					resetFieldsFromBehavior(resetOnError, false);
 					failed.value = true;
 					recentlyFailed.value = true;
 					timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, timeout ?? 5e3);
@@ -239,8 +258,8 @@ function useForm(options) {
 				},
 				success: (payload, request, response, context) => {
 					clearErrors();
-					if (setDefaultOnSuccess) setDefault(fields);
-					if (resetOnSuccess !== false) resetFields();
+					setDefaultFromFields(setDefaultOnSuccess);
+					resetFieldsFromBehavior(resetOnSuccess, true);
 					successful.value = true;
 					recentlySuccessful.value = true;
 					timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, timeout ?? 5e3);
@@ -371,8 +390,10 @@ function getControlFieldInfo(control) {
 		appendToArray
 	};
 }
-function setCurrentValuesAsDefaults(form) {
+function setCurrentValuesAsDefaults(form, keys) {
 	for (const element of Array.from(form.elements)) {
+		const field = getControlFieldInfo(element);
+		if (keys && (!field || !keys.has(field.path))) continue;
 		if (element instanceof HTMLInputElement) {
 			if (element.type === "checkbox" || element.type === "radio") {
 				element.defaultChecked = element.checked;
@@ -490,11 +511,15 @@ const Form = defineComponent({
 			default: false
 		},
 		resetOnSuccess: {
-			type: Boolean,
+			type: [Boolean, Array],
 			default: true
 		},
+		resetOnError: {
+			type: [Boolean, Array],
+			default: false
+		},
 		setDefaultOnSuccess: {
-			type: Boolean,
+			type: [Boolean, Array],
 			default: false
 		}
 	},
@@ -508,6 +533,7 @@ const Form = defineComponent({
 			errorBag: props.errorBag,
 			progress: props.showProgress,
 			resetOnSuccess: props.resetOnSuccess,
+			resetOnError: props.resetOnError,
 			setDefaultOnSuccess: props.setDefaultOnSuccess
 		});
 		function collectFormFields(submitter) {
@@ -521,6 +547,47 @@ const Form = defineComponent({
 			}
 			return fields;
 		}
+		function collectDefaultFormFields() {
+			if (!element.value) return {};
+			const fields = {};
+			for (const control of Array.from(element.value.elements)) {
+				const field = getControlFieldInfo(control);
+				if (!field) continue;
+				if (control instanceof HTMLInputElement) {
+					if (control.type === "file") continue;
+					if (control.type === "checkbox" || control.type === "radio") {
+						if (control.defaultChecked) appendFieldValue(fields, field.path, control.value, field.appendToArray);
+						continue;
+					}
+					appendFieldValue(fields, field.path, control.defaultValue, field.appendToArray);
+					continue;
+				}
+				if (control instanceof HTMLTextAreaElement) {
+					appendFieldValue(fields, field.path, control.defaultValue, field.appendToArray);
+					continue;
+				}
+				if (control instanceof HTMLSelectElement) {
+					if (control.multiple) {
+						for (const option of Array.from(control.options)) if (option.defaultSelected) appendFieldValue(fields, field.path, option.value, field.appendToArray);
+						continue;
+					}
+					const defaultOption = Array.from(control.options).find((option) => option.defaultSelected) ?? control.options.item(0);
+					if (defaultOption) appendFieldValue(fields, field.path, defaultOption.value, field.appendToArray);
+				}
+			}
+			return fields;
+		}
+		function syncDefaultsFromNativeControls() {
+			if (!element.value) return;
+			const defaultFields = collectDefaultFormFields();
+			const nextDefaults = {};
+			for (const control of Array.from(element.value.elements)) {
+				const field = getControlFieldInfo(control);
+				if (!field) continue;
+				nextDefaults[field.path] = get(defaultFields, field.path);
+			}
+			form.setDefault(nextDefaults);
+		}
 		function syncFields(fields) {
 			const target = form.fields;
 			Object.keys(target).forEach((key) => {
@@ -550,16 +617,17 @@ const Form = defineComponent({
 		}
 		function submit(options, submitter) {
 			syncFields(collectFormFields(submitter));
-			const resolvedOptions = merge({
+			syncDefaultsFromNativeControls();
+			const { hooks, ...rest } = merge({
 				errorBag: props.errorBag,
 				progress: props.showProgress,
 				resetOnSuccess: props.resetOnSuccess,
+				resetOnError: props.resetOnError,
 				setDefaultOnSuccess: props.setDefaultOnSuccess
 			}, {
 				...props.options,
 				...options
 			}, { mergePlainObjects: true });
-			const { hooks, ...rest } = resolvedOptions;
 			const submitOptions = {
 				...rest,
 				hooks: {
@@ -572,9 +640,15 @@ const Form = defineComponent({
 						return hooks?.["validation-error"]?.(incoming, request, context);
 					},
 					success: (payload, request, response, context) => {
-						if (element.value && resolvedOptions.setDefaultOnSuccess) setCurrentValuesAsDefaults(element.value);
-						if (resolvedOptions.resetOnSuccess ?? props.resetOnSuccess) resetFields();
-						syncFields(collectFormFields());
+						if (element.value && rest.setDefaultOnSuccess !== false) {
+							const selectedKeys = Array.isArray(rest.setDefaultOnSuccess) ? new Set(rest.setDefaultOnSuccess) : void 0;
+							setCurrentValuesAsDefaults(element.value, selectedKeys);
+							syncDefaultsFromNativeControls();
+						}
+						nextTick(() => {
+							if (!element.value) return;
+							syncControlsFromFields(element.value, form.fields);
+						});
 						return hooks?.success?.(payload, request, response, context);
 					}
 				}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hybridly/vue",
 	"type": "module",
-	"version": "0.10.0-beta.18",
+	"version": "0.10.0-beta.19",
 	"description": "Vue adapter for Hybridly",
 	"author": "Enzo Innocenzi <enzo@innocenzi.dev>",
 	"license": "MIT",
@@ -47,8 +47,8 @@
 	"dependencies": {
 		"@clickbar/dot-diver": "^1.0.7",
 		"es-toolkit": "^1.45.1",
-		"@hybridly/core": "0.10.0-beta.18",
-		"@hybridly/utils": "0.10.0-beta.18",
+		"@hybridly/core": "0.10.0-beta.19",
+		"@hybridly/utils": "0.10.0-beta.19",
 		"@vue/devtools-api": "^8.1.0",
 		"defu": "^6.1.4",
 		"nprogress": "^0.2.0"