@inertiajs/vue3 2.2.21 → 2.3.1

package/dist/index.esm.js

@@ -69,18 +69,24 @@ var remember_default = remember;
 
 // src/useForm.ts
 import {
-  router as router2
+  router as router2,
+  UseFormUtils
 } from "@inertiajs/core";
+import {
+  createValidator,
+  resolveName,
+  toSimpleValidationErrors
+} from "laravel-precognition";
 import { cloneDeep as cloneDeep2, get, has, isEqual, set } from "lodash-es";
 import { reactive, watch } from "vue";
-function useForm(rememberKeyOrData, maybeData) {
-  const rememberKey = typeof rememberKeyOrData === "string" ? rememberKeyOrData : null;
-  const data = (typeof rememberKeyOrData === "string" ? maybeData : rememberKeyOrData) ?? {};
+function useForm(...args) {
+  let { rememberKey, data, precognitionEndpoint } = UseFormUtils.parseUseFormArguments(...args);
   const restored = rememberKey ? router2.restore(rememberKey) : null;
   let defaults = typeof data === "function" ? cloneDeep2(data()) : cloneDeep2(data);
   let cancelToken = null;
   let recentlySuccessfulTimeoutId;
   let transform = (data2) => data2;
+  let validatorRef = null;
   let defaultsCalledInOnSuccess = false;
   const form = reactive({
     ...restored ? restored.data : cloneDeep2(defaults),
@@ -91,6 +97,76 @@ function useForm(rememberKeyOrData, maybeData) {
     progress: null,
     wasSuccessful: false,
     recentlySuccessful: false,
+    withPrecognition(...args2) {
+      precognitionEndpoint = UseFormUtils.createWayfinderCallback(...args2);
+      const formWithPrecognition = this;
+      let withAllErrors = false;
+      const validator = createValidator((client) => {
+        const { method, url } = precognitionEndpoint();
+        const transformedData = cloneDeep2(transform(this.data()));
+        return client[method](url, transformedData);
+      }, cloneDeep2(defaults));
+      validatorRef = validator;
+      validator.on("validatingChanged", () => {
+        formWithPrecognition.validating = validator.validating();
+      }).on("validatedChanged", () => {
+        formWithPrecognition.__valid = validator.valid();
+      }).on("touchedChanged", () => {
+        formWithPrecognition.__touched = validator.touched();
+      }).on("errorsChanged", () => {
+        const validationErrors = withAllErrors ? validator.errors() : toSimpleValidationErrors(validator.errors());
+        this.errors = {};
+        this.setError(validationErrors);
+        formWithPrecognition.__valid = validator.valid();
+      });
+      const tap = (value, callback) => {
+        callback(value);
+        return value;
+      };
+      Object.assign(formWithPrecognition, {
+        __touched: [],
+        __valid: [],
+        validating: false,
+        validator: () => validator,
+        withAllErrors: () => tap(formWithPrecognition, () => withAllErrors = true),
+        valid: (field) => formWithPrecognition.__valid.includes(field),
+        invalid: (field) => field in this.errors,
+        setValidationTimeout: (duration) => tap(formWithPrecognition, () => validator.setTimeout(duration)),
+        validateFiles: () => tap(formWithPrecognition, () => validator.validateFiles()),
+        withoutFileValidation: () => tap(formWithPrecognition, () => validator.withoutFileValidation()),
+        touch: (field, ...fields) => {
+          if (Array.isArray(field)) {
+            validator.touch(field);
+          } else if (typeof field === "string") {
+            validator.touch([field, ...fields]);
+          } else {
+            validator.touch(field);
+          }
+          return formWithPrecognition;
+        },
+        touched: (field) => typeof field === "string" ? formWithPrecognition.__touched.includes(field) : formWithPrecognition.__touched.length > 0,
+        validate: (field, config2) => {
+          if (typeof field === "object" && !("target" in field)) {
+            config2 = field;
+            field = void 0;
+          }
+          if (field === void 0) {
+            validator.validate(config2);
+          } else {
+            const fieldName = resolveName(field);
+            const transformedData = transform(this.data());
+            validator.validate(fieldName, get(transformedData, fieldName), config2);
+          }
+          return formWithPrecognition;
+        },
+        setErrors: (errors) => tap(formWithPrecognition, () => this.setError(errors)),
+        forgetError: (field) => tap(
+          formWithPrecognition,
+          () => this.clearErrors(resolveName(field))
+        )
+      });
+      return formWithPrecognition;
+    },
     data() {
       return Object.keys(defaults).reduce((carry, key2) => {
         return set(carry, key2, get(this, key2));
@@ -111,6 +187,7 @@ function useForm(rememberKeyOrData, maybeData) {
       } else {
         defaults = typeof fieldOrFields === "string" ? set(cloneDeep2(defaults), fieldOrFields, maybeValue) : Object.assign({}, cloneDeep2(defaults), fieldOrFields);
       }
+      validatorRef?.defaults(defaults);
       return this;
     },
     reset(...fields) {
@@ -126,11 +203,14 @@ function useForm(rememberKeyOrData, maybeData) {
           set(this, key2, get(resolvedData, key2));
         });
       }
+      validatorRef?.reset(...fields);
       return this;
     },
     setError(fieldOrFields, maybeValue) {
-      Object.assign(this.errors, typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields);
+      const errors = typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields;
+      Object.assign(this.errors, errors);
       this.hasErrors = Object.keys(this.errors).length > 0;
+      validatorRef?.setErrors(errors);
       return this;
     },
     clearErrors(...fields) {
@@ -142,6 +222,13 @@ function useForm(rememberKeyOrData, maybeData) {
         {}
       );
       this.hasErrors = Object.keys(this.errors).length > 0;
+      if (validatorRef) {
+        if (fields.length === 0) {
+          validatorRef.setErrors({});
+        } else {
+          fields.forEach(validatorRef.forgetError);
+        }
+      }
       return this;
     },
     resetAndClearErrors(...fields) {
@@ -149,11 +236,8 @@ function useForm(rememberKeyOrData, maybeData) {
       this.clearErrors(...fields);
       return this;
     },
-    submit(...args) {
-      const objectPassed = args[0] !== null && typeof args[0] === "object";
-      const method = objectPassed ? args[0].method : args[0];
-      const url = objectPassed ? args[0].url : args[1];
-      const options = (objectPassed ? args[1] : args[2]) ?? {};
+    submit(...args2) {
+      const { method, url, options } = UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint);
       defaultsCalledInOnSuccess = false;
       const _options = {
         ...options,
@@ -178,7 +262,7 @@ function useForm(rememberKeyOrData, maybeData) {
           }
         },
         onProgress: (event) => {
-          this.progress = event;
+          this.progress = event ?? null;
           if (options.onProgress) {
             return options.onProgress(event);
           }
@@ -260,17 +344,18 @@ function useForm(rememberKeyOrData, maybeData) {
       this.setError(restored2.errors);
     }
   });
+  const typedForm = form;
   watch(
-    form,
+    typedForm,
     (newValue) => {
-      form.isDirty = !isEqual(form.data(), defaults);
+      typedForm.isDirty = !isEqual(typedForm.data(), defaults);
       if (rememberKey) {
         router2.remember(cloneDeep2(newValue.__remember()), rememberKey);
       }
     },
     { immediate: true, deep: true }
   );
-  return form;
+  return precognitionEndpoint ? typedForm.withPrecognition(precognitionEndpoint) : typedForm;
 }
 
 // src/app.ts
@@ -444,7 +529,7 @@ async function createInertiaApp({
         h2("script", {
           "data-page": id,
           type: "application/json",
-          innerHTML: JSON.stringify(initialPage)
+          innerHTML: JSON.stringify(initialPage).replace(/\//g, "\\/")
         }),
         h2("div", {
           id,
@@ -485,10 +570,11 @@ import {
   formDataToObject,
   isUrlMethodPair,
   mergeDataIntoQueryString,
-  resetFormFields
+  resetFormFields,
+  UseFormUtils as UseFormUtils2
 } from "@inertiajs/core";
 import { isEqual as isEqual2 } from "lodash-es";
-import { computed as computed2, defineComponent as defineComponent3, h as h3, onBeforeUnmount, onMounted, ref as ref2 } from "vue";
+import { computed as computed2, defineComponent as defineComponent3, h as h3, onBeforeUnmount, onMounted, ref as ref2, watch as watch2 } from "vue";
 var noop = () => void 0;
 var Form = defineComponent3({
   name: "Form",
@@ -581,10 +667,35 @@ var Form = defineComponent3({
     invalidateCacheTags: {
       type: [String, Array],
       default: () => []
+    },
+    validateFiles: {
+      type: Boolean,
+      default: false
+    },
+    validationTimeout: {
+      type: Number,
+      default: 1500
+    },
+    withAllErrors: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { slots, attrs, expose }) {
-    const form = useForm({});
+    const getTransformedData = () => {
+      const [_url, data] = getUrlAndData();
+      return props.transform(data);
+    };
+    const form = useForm({}).withPrecognition(
+      () => method.value,
+      () => getUrlAndData()[0]
+    ).transform(getTransformedData).setValidationTimeout(props.validationTimeout);
+    if (props.validateFiles) {
+      form.validateFiles();
+    }
+    if (props.withAllErrors) {
+      form.withAllErrors();
+    }
     const formElement = ref2();
     const method = computed2(
       () => isUrlMethodPair(props.action) ? props.action.method : props.method.toLowerCase()
@@ -597,18 +708,29 @@ var Form = defineComponent3({
     const formEvents = ["input", "change", "reset"];
     onMounted(() => {
       defaultData.value = getFormData();
+      form.defaults(getData());
       formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate));
     });
+    watch2(
+      () => props.validateFiles,
+      (value) => value ? form.validateFiles() : form.withoutFileValidation()
+    );
+    watch2(
+      () => props.validationTimeout,
+      (value) => form.setValidationTimeout(value)
+    );
     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(
+    const getUrlAndData = () => {
+      return mergeDataIntoQueryString(
         method.value,
         isUrlMethodPair(props.action) ? props.action.url : props.action,
         getData(),
         props.queryStringArrayFormat
       );
+    };
+    const submit = () => {
       const maybeReset = (resetOption) => {
         if (!resetOption) {
           return;
@@ -645,13 +767,18 @@ var Form = defineComponent3({
         },
         ...props.options
       };
-      form.transform(() => props.transform(data)).submit(method.value, action, submitOptions);
+      const [url, data] = getUrlAndData();
+      form.transform(() => props.transform(data)).submit(method.value, url, submitOptions);
     };
     const reset = (...fields) => {
       resetFormFields(formElement.value, defaultData.value, fields);
+      form.reset(...fields);
     };
-    const resetAndClearErrors = (...fields) => {
+    const clearErrors = (...fields) => {
       form.clearErrors(...fields);
+    };
+    const resetAndClearErrors = (...fields) => {
+      clearErrors(...fields);
       reset(...fields);
     };
     const defaults = () => {
@@ -677,7 +804,10 @@ var Form = defineComponent3({
       get recentlySuccessful() {
         return form.recentlySuccessful;
       },
-      clearErrors: (...fields) => form.clearErrors(...fields),
+      get validating() {
+        return form.validating;
+      },
+      clearErrors,
       resetAndClearErrors,
       setError: (fieldOrFields, maybeValue) => form.setError(typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields),
       get isDirty() {
@@ -687,7 +817,14 @@ var Form = defineComponent3({
       submit,
       defaults,
       getData,
-      getFormData
+      getFormData,
+      // Precognition
+      touch: form.touch,
+      valid: form.valid,
+      invalid: form.invalid,
+      touched: form.touched,
+      validate: (field, config2) => form.validate(...UseFormUtils2.mergeHeadersForValidation(field, config2, props.headers)),
+      validator: () => form.validator()
     };
     expose(exposed);
     return () => {
@@ -846,7 +983,7 @@ import {
   getScrollableParent,
   useInfiniteScroll
 } from "@inertiajs/core";
-import { computed as computed3, defineComponent as defineComponent5, Fragment, h as h4, onMounted as onMounted2, onUnmounted, ref as ref3, watch as watch2 } from "vue";
+import { computed as computed3, defineComponent as defineComponent5, Fragment, h as h4, onMounted as onMounted2, onUnmounted, ref as ref3, watch as watch3 } from "vue";
 var resolveHTMLElement = (value, fallback) => {
   if (!value) {
     return fallback;
@@ -991,7 +1128,7 @@ var InfiniteScroll = defineComponent5({
       }
     });
     onUnmounted(flushInfiniteScroll);
-    watch2(
+    watch3(
       () => [autoLoad.value, props.onlyNext, props.onlyPrevious],
       ([enabled]) => {
         enabled ? elementManager.enableTriggers() : elementManager.disableTriggers();
@@ -1432,7 +1569,7 @@ function usePrefetch(options = {}) {
 // src/useRemember.ts
 import { router as router8 } from "@inertiajs/core";
 import { cloneDeep as cloneDeep3 } from "lodash-es";
-import { isReactive, reactive as reactive3, ref as ref6, watch as watch3 } from "vue";
+import { isReactive, reactive as reactive3, ref as ref6, watch as watch4 } from "vue";
 function useRemember(data, key2) {
   if (typeof data === "object" && data !== null && data.__rememberable === false) {
     return data;
@@ -1441,7 +1578,7 @@ function useRemember(data, key2) {
   const type = isReactive(data) ? reactive3 : ref6;
   const hasCallbacks = typeof data.__remember === "function" && typeof data.__restore === "function";
   const remembered = type(restored === void 0 ? data : hasCallbacks ? data.__restore(restored) : restored);
-  watch3(
+  watch4(
     remembered,
     (newValue) => {
       router8.remember(cloneDeep3(hasCallbacks ? data.__remember() : newValue), key2);
@@ -1486,21 +1623,21 @@ var whenVisible_default = defineComponent7({
   unmounted() {
     this.observer?.disconnect();
   },
+  computed: {
+    keys() {
+      return this.data ? Array.isArray(this.data) ? this.data : [this.data] : [];
+    }
+  },
   created() {
     const page2 = usePage();
     this.$watch(
+      () => this.keys.map((key2) => page2.props[key2]),
       () => {
-        return Array.isArray(this.data) ? this.data.map((data) => page2.props[data]) : page2.props[this.data];
-      },
-      (value) => {
-        if (Array.isArray(this.data)) {
-          if (this.data.every((data) => page2.props[data] !== void 0)) {
-            return;
-          }
-        } else if (value !== void 0) {
+        const exists = this.keys.length > 0 && this.keys.every((key2) => page2.props[key2] !== void 0);
+        this.loaded = exists;
+        if (exists && !this.always) {
           return;
         }
-        this.loaded = false;
         this.$nextTick(this.registerObserver);
       },
       { immediate: true }