@inertiajs/vue3 2.0.17 → 2.1.1

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";
@@ -433,10 +435,202 @@ var deferred_default = defineComponent2({
   }
 });
 
+// src/form.ts
+import {
+  formDataToObject,
+  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";
+var noop = () => void 0;
+var Form = defineComponent3({
+  name: "Form",
+  props: {
+    action: {
+      type: [String, Object],
+      default: ""
+    },
+    method: {
+      type: String,
+      default: "get"
+    },
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    queryStringArrayFormat: {
+      type: String,
+      default: "brackets"
+    },
+    errorBag: {
+      type: [String, null],
+      default: null
+    },
+    showProgress: {
+      type: Boolean,
+      default: true
+    },
+    transform: {
+      type: Function,
+      default: (data) => data
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    onCancelToken: {
+      type: Function,
+      default: noop
+    },
+    onBefore: {
+      type: Function,
+      default: noop
+    },
+    onStart: {
+      type: Function,
+      default: noop
+    },
+    onProgress: {
+      type: Function,
+      default: noop
+    },
+    onFinish: {
+      type: Function,
+      default: noop
+    },
+    onCancel: {
+      type: Function,
+      default: noop
+    },
+    onSuccess: {
+      type: Function,
+      default: noop
+    },
+    onError: {
+      type: Function,
+      default: noop
+    },
+    onSubmitComplete: {
+      type: Function,
+      default: noop
+    },
+    disableWhileProcessing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs, expose }) {
+    const form = useForm({});
+    const formElement = ref2();
+    const method = computed2(
+      () => typeof props.action === "object" ? props.action.method : props.method.toLowerCase()
+    );
+    const isDirty = ref2(false);
+    const defaultData = ref2(new FormData());
+    const onFormUpdate = (event) => {
+      isDirty.value = event.type === "reset" ? false : !isEqual2(getData(), formDataToObject(defaultData.value));
+    };
+    const formEvents = ["input", "change", "reset"];
+    onMounted(() => {
+      defaultData.value = getFormData();
+      formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate));
+    });
+    onBeforeUnmount(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)));
+    const getFormData = () => new FormData(formElement.value);
+    const getData = () => formDataToObject(getFormData());
+    const submit = () => {
+      const [action, data] = mergeDataIntoQueryString(
+        method.value,
+        typeof props.action === "object" ? props.action.url : props.action,
+        getData(),
+        props.queryStringArrayFormat
+      );
+      const submitOptions = {
+        headers: props.headers,
+        errorBag: props.errorBag,
+        showProgress: props.showProgress,
+        onCancelToken: props.onCancelToken,
+        onBefore: props.onBefore,
+        onStart: props.onStart,
+        onProgress: props.onProgress,
+        onFinish: props.onFinish,
+        onCancel: props.onCancel,
+        onSuccess: (...args) => {
+          props.onSuccess(...args);
+          props.onSubmitComplete(exposed);
+        },
+        onError: props.onError,
+        ...props.options
+      };
+      form.transform(() => props.transform(data)).submit(method.value, action, submitOptions);
+    };
+    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;
+      },
+      get hasErrors() {
+        return form.hasErrors;
+      },
+      get processing() {
+        return form.processing;
+      },
+      get progress() {
+        return form.progress;
+      },
+      get wasSuccessful() {
+        return form.wasSuccessful;
+      },
+      get recentlySuccessful() {
+        return form.recentlySuccessful;
+      },
+      clearErrors: (...fields) => form.clearErrors(...fields),
+      resetAndClearErrors,
+      setError: (fieldOrFields, maybeValue) => form.setError(typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields),
+      get isDirty() {
+        return isDirty.value;
+      },
+      reset,
+      submit,
+      defaults
+    };
+    expose(exposed);
+    return () => {
+      return h3(
+        "form",
+        {
+          ...attrs,
+          ref: formElement,
+          action: props.action,
+          method: method.value,
+          onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+          },
+          inert: props.disableWhileProcessing && form.processing
+        },
+        slots.default ? slots.default(exposed) : []
+      );
+    };
+  }
+});
+var form_default = Form;
+
 // src/head.ts
 import { escape } from "es-toolkit";
-import { defineComponent as defineComponent3 } from "vue";
-var Head = defineComponent3({
+import { defineComponent as defineComponent4 } from "vue";
+var Head = defineComponent4({
   props: {
     title: {
       type: String,
@@ -557,16 +751,18 @@ var head_default = Head;
 
 // src/link.ts
 import {
-  mergeDataIntoQueryString,
+  mergeDataIntoQueryString as mergeDataIntoQueryString2,
   router as router5,
   shouldIntercept
 } from "@inertiajs/core";
-import { computed as computed2, defineComponent as defineComponent4, h as h3, onMounted, onUnmounted, ref as ref2 } from "vue";
-var Link = defineComponent4({
+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: {
     as: {
-      type: String,
+      type: [String, Object],
       default: "a"
     },
     data: {
@@ -575,7 +771,7 @@ var Link = defineComponent4({
     },
     href: {
       type: [String, Object],
-      required: true
+      default: ""
     },
     method: {
       type: String,
@@ -623,49 +819,49 @@ var Link = defineComponent4({
     },
     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
     }
   },
   setup(props, { slots, attrs }) {
-    const inFlightCount = ref2(0);
-    const hoverTimeout = ref2(null);
-    const prefetchModes = computed2(() => {
+    const inFlightCount = ref3(0);
+    const hoverTimeout = ref3(null);
+    const prefetchModes = computed3(() => {
       if (props.prefetch === true) {
         return ["hover"];
       }
@@ -677,7 +873,7 @@ var Link = defineComponent4({
       }
       return [props.prefetch];
     });
-    const cacheForValue = computed2(() => {
+    const cacheForValue = computed3(() => {
       if (props.cacheFor !== 0) {
         return props.cacheFor;
       }
@@ -686,7 +882,7 @@ var Link = defineComponent4({
       }
       return 3e4;
     });
-    onMounted(() => {
+    onMounted2(() => {
       if (prefetchModes.value.includes("mount")) {
         prefetch();
       }
@@ -694,25 +890,35 @@ var Link = defineComponent4({
     onUnmounted(() => {
       clearTimeout(hoverTimeout.value);
     });
-    const method = computed2(
+    const method = computed3(
       () => typeof props.href === "object" ? props.href.method : props.method.toLowerCase()
     );
-    const as = computed2(() => method.value !== "get" ? "button" : props.as.toLowerCase());
-    const mergeDataArray = computed2(
-      () => mergeDataIntoQueryString(
+    const as = computed3(() => {
+      if (typeof props.as !== "string") {
+        return props.as;
+      }
+      return method.value !== "get" ? "button" : props.as.toLowerCase();
+    });
+    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
       )
     );
-    const href = computed2(() => mergeDataArray.value[0]);
-    const data = computed2(() => mergeDataArray.value[1]);
-    const elProps = computed2(() => ({
-      a: { href: href.value },
-      button: { type: "button" }
-    }));
-    const baseParams = computed2(() => ({
+    const href = computed3(() => mergeDataArray.value[0]);
+    const data = computed3(() => mergeDataArray.value[1]);
+    const elProps = computed3(() => {
+      if (as.value === "button") {
+        return { type: "button" };
+      }
+      if (as.value === "a" || typeof as.value !== "string") {
+        return { href: href.value };
+      }
+      return {};
+    });
+    const baseParams = computed3(() => ({
       data: data.value,
       method: method.value,
       replace: props.replace,
@@ -723,25 +929,35 @@ var Link = defineComponent4({
       headers: props.headers,
       async: props.async
     }));
-    const visitParams = computed2(() => ({
+    const visitParams = computed3(() => ({
       ...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
+        }
+      );
     };
     const regularEvents = {
       onClick: (event) => {
@@ -780,11 +996,11 @@ var Link = defineComponent4({
       }
     };
     return () => {
-      return h3(
+      return h4(
         as.value,
         {
           ...attrs,
-          ...elProps.value[as.value] || {},
+          ...elProps.value,
           "data-loading": inFlightCount.value > 0 ? "" : void 0,
           ...(() => {
             if (prefetchModes.value.includes("hover")) {
@@ -805,7 +1021,7 @@ var link_default = Link;
 
 // src/usePoll.ts
 import { router as router6 } from "@inertiajs/core";
-import { onMounted as onMounted2, onUnmounted as onUnmounted2 } from "vue";
+import { onMounted as onMounted3, onUnmounted as onUnmounted2 } from "vue";
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
@@ -814,7 +1030,7 @@ function usePoll(interval, requestOptions = {}, options = {
     ...options,
     autoStart: false
   });
-  onMounted2(() => {
+  onMounted3(() => {
     if (options.autoStart ?? true) {
       start();
     }
@@ -830,11 +1046,11 @@ function usePoll(interval, requestOptions = {}, options = {
 
 // src/usePrefetch.ts
 import { router as router7 } from "@inertiajs/core";
-import { onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref3 } from "vue";
+import { onMounted as onMounted4, onUnmounted as onUnmounted3, ref as ref4 } from "vue";
 function usePrefetch(options = {}) {
-  const isPrefetching = ref3(false);
-  const lastUpdatedAt = ref3(null);
-  const isPrefetched = ref3(false);
+  const isPrefetching = ref4(false);
+  const lastUpdatedAt = ref4(null);
+  const isPrefetched = ref4(false);
   const cached = typeof window === "undefined" ? null : router7.getCached(window.location.pathname, options);
   const inFlight = typeof window === "undefined" ? null : router7.getPrefetching(window.location.pathname, options);
   lastUpdatedAt.value = cached?.staleTimestamp || null;
@@ -842,7 +1058,7 @@ function usePrefetch(options = {}) {
   isPrefetched.value = cached !== null;
   let onPrefetchedListener;
   let onPrefetchingListener;
-  onMounted3(() => {
+  onMounted4(() => {
     onPrefetchingListener = router7.on("prefetching", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         isPrefetching.value = true;
@@ -870,13 +1086,13 @@ function usePrefetch(options = {}) {
 // src/useRemember.ts
 import { router as router8 } from "@inertiajs/core";
 import { cloneDeep as cloneDeep3 } from "es-toolkit";
-import { isReactive, reactive as reactive3, ref as ref4, watch as watch2 } from "vue";
+import { isReactive, reactive as reactive3, ref as ref5, watch as watch2 } from "vue";
 function useRemember(data, key2) {
   if (typeof data === "object" && data !== null && data.__rememberable === false) {
     return data;
   }
   const restored = router8.restore(key2);
-  const type = isReactive(data) ? reactive3 : ref4;
+  const type = isReactive(data) ? reactive3 : ref5;
   const hasCallbacks = typeof data.__remember === "function" && typeof data.__restore === "function";
   const remembered = type(restored === void 0 ? data : hasCallbacks ? data.__restore(restored) : restored);
   watch2(
@@ -891,8 +1107,8 @@ function useRemember(data, key2) {
 
 // src/whenVisible.ts
 import { router as router9 } from "@inertiajs/core";
-import { defineComponent as defineComponent5, h as h4 } from "vue";
-var whenVisible_default = defineComponent5({
+import { defineComponent as defineComponent6, h as h5 } from "vue";
+var whenVisible_default = defineComponent6({
   name: "WhenVisible",
   props: {
     data: {
@@ -973,7 +1189,7 @@ var whenVisible_default = defineComponent5({
   render() {
     const els = [];
     if (this.$props.always || !this.loaded) {
-      els.push(h4(this.$props.as));
+      els.push(h5(this.$props.as));
     }
     if (!this.loaded) {
       els.push(this.$slots.fallback ? this.$slots.fallback() : null);
@@ -985,6 +1201,7 @@ var whenVisible_default = defineComponent5({
 });
 export {
   deferred_default as Deferred,
+  form_default as Form,
   head_default as Head,
   link_default as Link,
   whenVisible_default as WhenVisible,