feat(useValidation): add toObject (#723)

docs/.vuepress/components/ValidationExample.vue

@@ -84,7 +84,9 @@ export default defineComponent({
       if (form.$anyInvalid) {
         alert("invalid form");
       } else {
-        alert("submit form");
+        const o = form.toObject();
+        alert(`submit form "${JSON.stringify(o)}"`);
+        console.log("submitted", o);
       }
     };
 

docs/composable/validation/validation.md

@@ -117,6 +117,8 @@ interface ValidationValue<T> {
 
   $anyInvalid: boolean; // any validation invalid
   $errors: any[]; // array of errors
+
+  toObject(): T;
 }
 
 // validator
@@ -159,6 +161,9 @@ validationUsername.containsInvalidWords.$customProp; //custom prop
 
 // custom properties
 validationUsername.$placeholder; // custom prop
+
+// retrieve value object
+validationUsername.toObject(); // returns string
 ```
 
 ### NestedValidationObject
@@ -205,6 +210,8 @@ form.settings.$errors;
 form.personal.$anyDirty;
 form.personal.$anyInvalid;
 form.personal.$errors;
+
+form.toObject(); // returns { settings: { email: '' }, personal: { name: { first: '', last: '' } } }
 ```
 
 ```ts
@@ -308,7 +315,9 @@ export default defineComponent({
       if (form.$anyInvalid) {
         alert("invalid form");
       } else {
-        alert("submit form");
+        const o = form.toObject();
+        alert(`submit form "${JSON.stringify(o)}"`);
+        console.log("submitted", o);
       }
     };
 

packages/axios/package.json

@@ -60,5 +60,9 @@
     "@types/node": "^14.14.20",
     "@vue/runtime-core": "^3.0.5",
     "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-beta.14",
+    "axios": "^0.22.0"
   }
 }

packages/vue-composable/__tests__/validation/validation.spec.ts

@@ -12,14 +12,14 @@ describe("validation", () => {
         $value,
         required(x: string) {
           return !!x;
-        }
+        },
       },
       test1: {
         $value: $value1,
         required(x: string) {
           return !!x;
-        }
-      }
+        },
+      },
     });
 
     expect(validation).toMatchObject({
@@ -30,16 +30,16 @@ describe("validation", () => {
         $dirty: false,
         $value: $value.value,
         required: {
-          $invalid: true
-        }
+          $invalid: true,
+        },
       },
       test1: {
         $dirty: false,
         $value: $value1.value,
         required: {
-          $invalid: true
-        }
-      }
+          $invalid: true,
+        },
+      },
     });
 
     $value.value = "hello";
@@ -55,31 +55,31 @@ describe("validation", () => {
         $dirty: true,
         $value: $value.value,
         required: {
-          $invalid: false
-        }
+          $invalid: false,
+        },
       },
       test1: {
         $dirty: false,
         $value: $value1.value,
         required: {
-          $invalid: true
-        }
-      }
+          $invalid: true,
+        },
+      },
     });
   });
 
   it("validator should run if dependent of other ref", async () => {
     const password = ref("");
     const form = useValidation({
       password: {
-        $value: password
+        $value: password,
       },
       password2: {
         $value: ref(""),
         samePassword(r: string, ctx: any) {
           return r === ctx.password.$value;
-        }
-      }
+        },
+      },
     });
 
     expect(form.password2.samePassword.$invalid).toBe(false);
@@ -95,8 +95,8 @@ describe("validation", () => {
     const v = useValidation({
       password: {
         $value: ref(""),
-        $args
-      }
+        $args,
+      },
     });
 
     expect(v.password.$args).toStrictEqual($args);
@@ -109,8 +109,8 @@ describe("validation", () => {
         $value: ref(""),
         required() {
           throw error;
-        }
-      }
+        },
+      },
     });
 
     await nextTick();
@@ -122,15 +122,17 @@ describe("validation", () => {
 
   it("should handle promise validator", async () => {
     let promiseResolve: Function = NO_OP;
-    const promise = new Promise<boolean>(resolve => (promiseResolve = resolve));
+    const promise = new Promise<boolean>(
+      (resolve) => (promiseResolve = resolve)
+    );
 
     const v = useValidation({
       password: {
         $value: ref(""),
         required() {
           return promise;
-        }
-      }
+        },
+      },
     });
 
     expect(v.password.required.$pending).toBe(true);
@@ -143,7 +145,9 @@ describe("validation", () => {
 
   it("should handle promise validator with objectValidator", async () => {
     let promiseResolve: Function = NO_OP;
-    const promise = new Promise<boolean>(resolve => (promiseResolve = resolve));
+    const promise = new Promise<boolean>(
+      (resolve) => (promiseResolve = resolve)
+    );
 
     const v = useValidation({
       password: {
@@ -152,9 +156,9 @@ describe("validation", () => {
           $validator() {
             return promise;
           },
-          $message: ref("Err")
-        }
-      }
+          $message: ref("Err"),
+        },
+      },
     });
 
     v.password.$value;
@@ -178,15 +182,15 @@ describe("validation", () => {
         },
         match() {
           throw Error("error 2");
-        }
-      }
+        },
+      },
     });
     v.input.$value = "1";
     await nextTick();
 
     expect(v.input.$errors).toStrictEqual([
       new Error("error 1"),
-      new Error("error 2")
+      new Error("error 2"),
     ]);
   });
 
@@ -199,21 +203,109 @@ describe("validation", () => {
           $validator(x: string) {
             return false;
           },
-          $message
-        }
+          $message,
+        },
       },
       otherInput: {
         $value: "",
         required(x: string) {
           return false;
-        }
-      }
+        },
+      },
     });
 
     expect(v.input.$errors).toMatchObject([$message]);
     expect(v.otherInput.$errors).toMatchObject([]);
   });
 
+  describe("object", () => {
+    it("should convert to object", () => {
+      const v = useValidation({
+        input: {
+          $value: "",
+          required: {
+            $validator(x: string) {
+              return false;
+            },
+            $message: "test",
+          },
+        },
+        otherInput: {
+          $value: "",
+          required(x: string) {
+            return false;
+          },
+        },
+      });
+
+      expect(v.toObject()).toMatchObject({ input: "", otherInput: "" });
+
+      v.input.$value = "test";
+      v.otherInput.$value = "other";
+
+      expect(v.toObject()).toMatchObject({
+        input: "test",
+        otherInput: "other",
+      });
+
+      expect(v.input.toObject()).toBe("test");
+    });
+
+    it("should convert to object even on nested validations", () => {
+      const v = useValidation({
+        address: {
+          address1: {
+            $value: "address1",
+          },
+          address2: {
+            part1: {
+              $value: "part1",
+            },
+            part2: {
+              $value: "part2",
+            },
+          },
+        },
+      });
+      expect(v.toObject()).toMatchObject({
+        address: {
+          address1: "address1",
+          address2: {
+            part1: "part1",
+            part2: "part2",
+          },
+        },
+      });
+
+      v.address.address2.part1.$value = "1";
+
+      expect(v.toObject()).toMatchObject({
+        address: {
+          address1: "address1",
+          address2: {
+            part1: "1",
+            part2: "part2",
+          },
+        },
+      });
+
+      expect(v.address.toObject()).toMatchObject({
+        address1: "address1",
+        address2: {
+          part1: "1",
+          part2: "part2",
+        },
+      });
+
+      expect(v.address.address1.toObject()).toBe(v.address.address1.$value);
+
+      expect(v.address.address2.toObject()).toMatchObject({
+        part1: "1",
+        part2: "part2",
+      });
+    });
+  });
+
   describe("render", () => {
     it("should show error", async () => {
       const required = (x: any) => !!x;
@@ -223,9 +315,9 @@ describe("validation", () => {
           required,
           otherRequired: {
             $validator: required,
-            $message: ref("password is required")
-          }
-        }
+            $message: ref("password is required"),
+          },
+        },
       });
 
       const { mount } = createVue({
@@ -245,9 +337,9 @@ describe("validation", () => {
         `,
         setup() {
           return {
-            form
+            form,
           };
-        }
+        },
       });
 
       const vm = mount();

packages/vue-composable/package.json

@@ -52,5 +52,9 @@
   "peerDependencies2": {
     "@vue/composition-api": "^1.0.0-beta.14",
     "vue": "^2.6.10"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-beta.14",
+    "vue": "^2.6.10"
   }
 }