@inertiajs/vue3 2.2.21 → 2.3.1

package/dist/index.js

@@ -97,16 +97,17 @@ var remember_default = remember;
 
 // src/useForm.ts
 var import_core2 = require("@inertiajs/core");
+var import_laravel_precognition = require("laravel-precognition");
 var import_lodash_es2 = require("lodash-es");
 var import_vue = require("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 } = import_core2.UseFormUtils.parseUseFormArguments(...args);
   const restored = rememberKey ? import_core2.router.restore(rememberKey) : null;
   let defaults = typeof data === "function" ? (0, import_lodash_es2.cloneDeep)(data()) : (0, import_lodash_es2.cloneDeep)(data);
   let cancelToken = null;
   let recentlySuccessfulTimeoutId;
   let transform = (data2) => data2;
+  let validatorRef = null;
   let defaultsCalledInOnSuccess = false;
   const form = (0, import_vue.reactive)({
     ...restored ? restored.data : (0, import_lodash_es2.cloneDeep)(defaults),
@@ -117,6 +118,76 @@ function useForm(rememberKeyOrData, maybeData) {
     progress: null,
     wasSuccessful: false,
     recentlySuccessful: false,
+    withPrecognition(...args2) {
+      precognitionEndpoint = import_core2.UseFormUtils.createWayfinderCallback(...args2);
+      const formWithPrecognition = this;
+      let withAllErrors = false;
+      const validator = (0, import_laravel_precognition.createValidator)((client) => {
+        const { method, url } = precognitionEndpoint();
+        const transformedData = (0, import_lodash_es2.cloneDeep)(transform(this.data()));
+        return client[method](url, transformedData);
+      }, (0, import_lodash_es2.cloneDeep)(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() : (0, import_laravel_precognition.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 = (0, import_laravel_precognition.resolveName)(field);
+            const transformedData = transform(this.data());
+            validator.validate(fieldName, (0, import_lodash_es2.get)(transformedData, fieldName), config2);
+          }
+          return formWithPrecognition;
+        },
+        setErrors: (errors) => tap(formWithPrecognition, () => this.setError(errors)),
+        forgetError: (field) => tap(
+          formWithPrecognition,
+          () => this.clearErrors((0, import_laravel_precognition.resolveName)(field))
+        )
+      });
+      return formWithPrecognition;
+    },
     data() {
       return Object.keys(defaults).reduce((carry, key2) => {
         return (0, import_lodash_es2.set)(carry, key2, (0, import_lodash_es2.get)(this, key2));
@@ -137,6 +208,7 @@ function useForm(rememberKeyOrData, maybeData) {
       } else {
         defaults = typeof fieldOrFields === "string" ? (0, import_lodash_es2.set)((0, import_lodash_es2.cloneDeep)(defaults), fieldOrFields, maybeValue) : Object.assign({}, (0, import_lodash_es2.cloneDeep)(defaults), fieldOrFields);
       }
+      validatorRef?.defaults(defaults);
       return this;
     },
     reset(...fields) {
@@ -152,11 +224,14 @@ function useForm(rememberKeyOrData, maybeData) {
           (0, import_lodash_es2.set)(this, key2, (0, import_lodash_es2.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) {
@@ -168,6 +243,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) {
@@ -175,11 +257,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 } = import_core2.UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint);
       defaultsCalledInOnSuccess = false;
       const _options = {
         ...options,
@@ -204,7 +283,7 @@ function useForm(rememberKeyOrData, maybeData) {
           }
         },
         onProgress: (event) => {
-          this.progress = event;
+          this.progress = event ?? null;
           if (options.onProgress) {
             return options.onProgress(event);
           }
@@ -286,17 +365,18 @@ function useForm(rememberKeyOrData, maybeData) {
       this.setError(restored2.errors);
     }
   });
+  const typedForm = form;
   (0, import_vue.watch)(
-    form,
+    typedForm,
     (newValue) => {
-      form.isDirty = !(0, import_lodash_es2.isEqual)(form.data(), defaults);
+      typedForm.isDirty = !(0, import_lodash_es2.isEqual)(typedForm.data(), defaults);
       if (rememberKey) {
         import_core2.router.remember((0, import_lodash_es2.cloneDeep)(newValue.__remember()), rememberKey);
       }
     },
     { immediate: true, deep: true }
   );
-  return form;
+  return precognitionEndpoint ? typedForm.withPrecognition(precognitionEndpoint) : typedForm;
 }
 
 // src/app.ts
@@ -466,7 +546,7 @@ async function createInertiaApp({
         (0, import_vue3.h)("script", {
           "data-page": id,
           type: "application/json",
-          innerHTML: JSON.stringify(initialPage)
+          innerHTML: JSON.stringify(initialPage).replace(/\//g, "\\/")
         }),
         (0, import_vue3.h)("div", {
           id,
@@ -598,10 +678,35 @@ var Form = (0, import_vue5.defineComponent)({
     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 = (0, import_vue5.ref)();
     const method = (0, import_vue5.computed)(
       () => (0, import_core5.isUrlMethodPair)(props.action) ? props.action.method : props.method.toLowerCase()
@@ -614,18 +719,29 @@ var Form = (0, import_vue5.defineComponent)({
     const formEvents = ["input", "change", "reset"];
     (0, import_vue5.onMounted)(() => {
       defaultData.value = getFormData();
+      form.defaults(getData());
       formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate));
     });
+    (0, import_vue5.watch)(
+      () => props.validateFiles,
+      (value) => value ? form.validateFiles() : form.withoutFileValidation()
+    );
+    (0, import_vue5.watch)(
+      () => props.validationTimeout,
+      (value) => form.setValidationTimeout(value)
+    );
     (0, import_vue5.onBeforeUnmount)(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)));
     const getFormData = () => new FormData(formElement.value);
     const getData = () => (0, import_core5.formDataToObject)(getFormData());
-    const submit = () => {
-      const [action, data] = (0, import_core5.mergeDataIntoQueryString)(
+    const getUrlAndData = () => {
+      return (0, import_core5.mergeDataIntoQueryString)(
         method.value,
         (0, import_core5.isUrlMethodPair)(props.action) ? props.action.url : props.action,
         getData(),
         props.queryStringArrayFormat
       );
+    };
+    const submit = () => {
       const maybeReset = (resetOption) => {
         if (!resetOption) {
           return;
@@ -662,13 +778,18 @@ var Form = (0, import_vue5.defineComponent)({
         },
         ...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) => {
       (0, import_core5.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 = () => {
@@ -694,7 +815,10 @@ var Form = (0, import_vue5.defineComponent)({
       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() {
@@ -704,7 +828,14 @@ var Form = (0, import_vue5.defineComponent)({
       submit,
       defaults,
       getData,
-      getFormData
+      getFormData,
+      // Precognition
+      touch: form.touch,
+      valid: form.valid,
+      invalid: form.invalid,
+      touched: form.touched,
+      validate: (field, config2) => form.validate(...import_core5.UseFormUtils.mergeHeadersForValidation(field, config2, props.headers)),
+      validator: () => form.validator()
     };
     expose(exposed);
     return () => {
@@ -1494,21 +1625,21 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
   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 }