@inertiajs/vue3 2.1.0 → 2.1.2

package/dist/index.esm.js

@@ -64,7 +64,9 @@ var remember = {
 var remember_default = remember;
 
 // src/useForm.ts
-import { router as router2 } from "@inertiajs/core";
+import {
+  router as router2
+} from "@inertiajs/core";
 import { cloneDeep as cloneDeep2, isEqual } from "es-toolkit";
 import { get, has, set } from "es-toolkit/compat";
 import { reactive, watch } from "vue";
@@ -436,7 +438,8 @@ var deferred_default = defineComponent2({
 // src/form.ts
 import {
   formDataToObject,
-  mergeDataIntoQueryString
+  mergeDataIntoQueryString,
+  resetFormFields
 } from "@inertiajs/core";
 import { isEqual as isEqual2 } from "es-toolkit";
 import { computed as computed2, defineComponent as defineComponent3, h as h3, onBeforeUnmount, onMounted, ref as ref2 } from "vue";
@@ -476,6 +479,18 @@ var Form = defineComponent3({
       type: Object,
       default: () => ({})
     },
+    resetOnError: {
+      type: [Boolean, Array],
+      default: false
+    },
+    resetOnSuccess: {
+      type: [Boolean, Array],
+      default: false
+    },
+    setDefaultsOnSuccess: {
+      type: Boolean,
+      default: false
+    },
     onCancelToken: {
       type: Function,
       default: noop
@@ -507,6 +522,18 @@ var Form = defineComponent3({
     onError: {
       type: Function,
       default: noop
+    },
+    onSubmitComplete: {
+      type: Function,
+      default: noop
+    },
+    disableWhileProcessing: {
+      type: Boolean,
+      default: false
+    },
+    invalidateCacheTags: {
+      type: [String, Array],
+      default: () => []
     }
   },
   setup(props, { slots, attrs, expose }) {
@@ -516,19 +543,18 @@ var Form = defineComponent3({
       () => typeof props.action === "object" ? props.action.method : props.method.toLowerCase()
     );
     const isDirty = ref2(false);
-    let defaults = {};
+    const defaultData = ref2(new FormData());
     const onFormUpdate = (event) => {
-      isDirty.value = event.type === "reset" ? false : !isEqual2(getData(), defaults);
+      isDirty.value = event.type === "reset" ? false : !isEqual2(getData(), formDataToObject(defaultData.value));
     };
     const formEvents = ["input", "change", "reset"];
     onMounted(() => {
-      defaults = getData();
+      defaultData.value = getFormData();
       formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate));
     });
     onBeforeUnmount(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)));
-    const getData = () => {
-      return formDataToObject(new FormData(formElement.value));
-    };
+    const getFormData = () => new FormData(formElement.value);
+    const getData = () => formDataToObject(getFormData());
     const submit = () => {
       const [action, data] = mergeDataIntoQueryString(
         method.value,
@@ -536,23 +562,55 @@ var Form = defineComponent3({
         getData(),
         props.queryStringArrayFormat
       );
+      const maybeReset = (resetOption) => {
+        if (!resetOption) {
+          return;
+        }
+        if (resetOption === true) {
+          reset();
+        } else if (resetOption.length > 0) {
+          reset(...resetOption);
+        }
+      };
       const submitOptions = {
         headers: props.headers,
         errorBag: props.errorBag,
         showProgress: props.showProgress,
+        invalidateCacheTags: props.invalidateCacheTags,
         onCancelToken: props.onCancelToken,
         onBefore: props.onBefore,
         onStart: props.onStart,
         onProgress: props.onProgress,
         onFinish: props.onFinish,
         onCancel: props.onCancel,
-        onSuccess: props.onSuccess,
-        onError: props.onError,
+        onSuccess: (...args) => {
+          props.onSuccess(...args);
+          props.onSubmitComplete(exposed);
+          maybeReset(props.resetOnSuccess);
+          if (props.setDefaultsOnSuccess === true) {
+            defaults();
+          }
+        },
+        onError: (...args) => {
+          props.onError(...args);
+          maybeReset(props.resetOnError);
+        },
         ...props.options
       };
       form.transform(() => props.transform(data)).submit(method.value, action, submitOptions);
     };
-    expose({
+    const reset = (...fields) => {
+      resetFormFields(formElement.value, defaultData.value, fields);
+    };
+    const resetAndClearErrors = (...fields) => {
+      form.clearErrors(...fields);
+      reset(...fields);
+    };
+    const defaults = () => {
+      defaultData.value = getFormData();
+      isDirty.value = false;
+    };
+    const exposed = {
       get errors() {
         return form.errors;
       },
@@ -572,14 +630,16 @@ var Form = defineComponent3({
         return form.recentlySuccessful;
       },
       clearErrors: (...fields) => form.clearErrors(...fields),
-      resetAndClearErrors: (...fields) => form.resetAndClearErrors(...fields),
+      resetAndClearErrors,
       setError: (fieldOrFields, maybeValue) => form.setError(typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields),
       get isDirty() {
         return isDirty.value;
       },
-      reset: () => formElement.value.reset(),
-      submit
-    });
+      reset,
+      submit,
+      defaults
+    };
+    expose(exposed);
     return () => {
       return h3(
         "form",
@@ -591,22 +651,10 @@ var Form = defineComponent3({
           onSubmit: (event) => {
             event.preventDefault();
             submit();
-          }
+          },
+          inert: props.disableWhileProcessing && form.processing
         },
-        slots.default ? slots.default({
-          errors: form.errors,
-          hasErrors: form.hasErrors,
-          processing: form.processing,
-          progress: form.progress,
-          wasSuccessful: form.wasSuccessful,
-          recentlySuccessful: form.recentlySuccessful,
-          setError: (fieldOrFields, maybeValue) => form.setError(typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields),
-          clearErrors: (...fields) => form.clearErrors(...fields),
-          resetAndClearErrors: (...fields) => form.resetAndClearErrors(...fields),
-          isDirty: isDirty.value,
-          reset: () => formElement.value.reset(),
-          submit
-        }) : []
+        slots.default ? slots.default(exposed) : []
       );
     };
   }
@@ -742,6 +790,8 @@ import {
   shouldIntercept
 } from "@inertiajs/core";
 import { computed as computed3, defineComponent as defineComponent5, h as h4, onMounted as onMounted2, onUnmounted, ref as ref3 } from "vue";
+var noop2 = () => {
+};
 var Link = defineComponent5({
   name: "Link",
   props: {
@@ -755,7 +805,7 @@ var Link = defineComponent5({
     },
     href: {
       type: [String, Object],
-      required: true
+      default: ""
     },
     method: {
       type: String,
@@ -803,43 +853,47 @@ var Link = defineComponent5({
     },
     onStart: {
       type: Function,
-      default: (_visit) => {
-      }
+      default: noop2
     },
     onProgress: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onFinish: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onBefore: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onCancel: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onSuccess: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onError: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
     },
     onCancelToken: {
       type: Function,
-      default: () => {
-      }
+      default: noop2
+    },
+    onPrefetching: {
+      type: Function,
+      default: noop2
+    },
+    onPrefetched: {
+      type: Function,
+      default: noop2
+    },
+    cacheTags: {
+      type: [String, Array],
+      default: () => []
     }
   },
   setup(props, { slots, attrs }) {
@@ -886,7 +940,7 @@ var Link = defineComponent5({
     const mergeDataArray = computed3(
       () => mergeDataIntoQueryString2(
         method.value,
-        typeof props.href === "object" ? props.href.url : props.href || "",
+        typeof props.href === "object" ? props.href.url : props.href,
         props.data,
         props.queryStringArrayFormat
       )
@@ -917,21 +971,32 @@ var Link = defineComponent5({
       ...baseParams.value,
       onCancelToken: props.onCancelToken,
       onBefore: props.onBefore,
-      onStart: (event) => {
+      onStart: (visit) => {
         inFlightCount.value++;
-        props.onStart(event);
+        props.onStart(visit);
       },
       onProgress: props.onProgress,
-      onFinish: (event) => {
+      onFinish: (visit) => {
         inFlightCount.value--;
-        props.onFinish(event);
+        props.onFinish(visit);
       },
       onCancel: props.onCancel,
       onSuccess: props.onSuccess,
       onError: props.onError
     }));
     const prefetch = () => {
-      router5.prefetch(href.value, baseParams.value, { cacheFor: cacheForValue.value });
+      router5.prefetch(
+        href.value,
+        {
+          ...baseParams.value,
+          onPrefetching: props.onPrefetching,
+          onPrefetched: props.onPrefetched
+        },
+        {
+          cacheFor: cacheForValue.value,
+          cacheTags: props.cacheTags
+        }
+      );
     };
     const regularEvents = {
       onClick: (event) => {