docs: add demo

Author: beizhedenglong

.eslintrc.js

@@ -15,7 +15,8 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     semi: ["error", "never"],
-    "@typescript-eslint/ban-ts-ignore": "off"
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   },
   overrides: [
     {

example/App.vue

@@ -1,29 +1,17 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <Demo />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
+import Demo from './components/Demo.vue'
 
 export default defineComponent({
   name: 'App',
   components: {
-    HelloWorld,
+    Demo,
   },
 })
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

example/components/Demo.vue

@@ -0,0 +1,87 @@
+<template>
+  <Input
+    label="Username"
+    icon="fa-user"
+    v-model="username.value"
+    :ref="username.ref"
+    :is-danger="!!username.error"
+    :error-message="username.error && username.error.message"
+  />
+  <Input
+    label="Password"
+    type="password"
+    icon="fa-key"
+    v-model="password.value"
+    :ref="password.ref"
+    :is-danger="!!password.error"
+    :error-message="password.error && password.error.message"
+  />
+  <Input
+    label="Confirm Password"
+    type="password"
+    icon="fa-key"
+    v-model="confirmedPassword.value"
+    :ref="confirmedPassword.ref"
+    :is-danger="!!confirmedPassword.error"
+    :error-message="confirmedPassword.error && confirmedPassword.error.message"
+  />
+  <button class="button is-link" @click="onSubmit">Submit</button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Input from './Input.vue'
+import { useForm } from '../../src'
+
+export default defineComponent({
+  name: 'Demo',
+  components: {
+    Input,
+  },
+  props: {
+    modelValue: String,
+  },
+  setup() {
+    const {
+      useField, validateFields, errorFields, getFieldValues, values,
+    } = useForm({
+      defaultValues: {
+        username: 'Victor',
+      },
+    })
+    const username = useField('username', {
+      rule: { required: true },
+    })
+    const password = useField('password', {
+      rule: {
+        required: true, min: 6, max: 10,
+      },
+    })
+    const confirmedPassword = useField('confirmedPassword', {
+      rule: {
+        required: true,
+        validator(rule, value) {
+          if (!value || value !== (values as any).password) {
+            return new Error('The two passwords that you entered do not match!')
+          }
+          return true
+        },
+      },
+    })
+    return {
+      username,
+      password,
+      confirmedPassword,
+      async onSubmit() {
+        try {
+          await validateFields()
+          console.log(getFieldValues())
+        } catch (error) {
+          console.log(error)
+        }
+      },
+      errorFields,
+    }
+  },
+})
+</script>

example/components/HelloWorld.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="field">
+    <label class="label">{{ label }}</label>
+    <div class="control has-icons-left has-icons-right">
+      <input
+        :class="['input', isDanger ? 'is-danger': '' ]"
+        type="text"
+        :value="modelValue"
+        @input="e => $emit('update:modelValue', e.target.value)"
+        v-bind="$attrs"
+      />
+      <span class="icon is-small is-left">
+        <i :class="['fas', icon]"></i>
+      </span>
+      <p class="help is-danger">{{errorMessage}}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Input',
+  components: {},
+  props: {
+    modelValue: String,
+    label: String,
+    icon: String,
+    errorMessage: String,
+    isDanger: Boolean,
+  },
+  computed: {
+    iconClass(): string {
+      return this.icon ? `fas ${this.icon}` : ''
+    },
+  },
+})
+</script>

example/components/Input.vue

@@ -3,11 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve example/main.ts",
+    "start": "vue-cli-service serve example/main.ts",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "test": "jest --coverage"
   },
   "dependencies": {
     "async-validator": "^3.4.0",
@@ -16,7 +14,9 @@
     "lodash.merge": "^4.6.2",
     "lodash.set": "^4.3.2",
     "lodash.setwith": "^4.3.2",
-    "lodash.topath": "^4.5.2",
+    "lodash.topath": "^4.5.2"
+  },
+  "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
@@ -41,7 +41,9 @@
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^7.0.0-0",
+    "materialize-css": "^1.0.0-rc.2",
     "typescript": "~3.9.3",
+    "vue": "^3.0.1",
     "vue-jest": "^5.0.0-0"
   }
 }

example/components/TestInput.vue

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
@@ -13,5 +14,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
   </body>
 </html>

package.json

@@ -19,6 +19,14 @@ const setRule = (rules: Rules, path: any, rule: RuleItem) => {
     return pathValue
   })
 }
+
+export type Errors = {
+  [key: string]: {
+    message: string;
+    field: string;
+  };
+}
+
 const DeepValidator = (rules: Rules = {}) => {
   const registerRule = (path: any, rule: RuleItem) => {
     setRule(rules, path, rule)
@@ -27,7 +35,11 @@ const DeepValidator = (rules: Rules = {}) => {
     try {
       return await new Validator(rules).validate(data)
     } catch ({ errors, fields }) {
-      throw fields
+      const errorObject: Errors = Object.keys(fields).reduce((acc, key) => {
+        acc[key] = get(fields, [key, 0])
+        return acc
+      }, {} as Errors)
+      throw errorObject
     }
   }
   return {
@@ -41,7 +53,7 @@ const DeepValidator = (rules: Rules = {}) => {
           set({}, path, value),
         )
       } catch ({ fields }) {
-        throw fields[path]
+        throw get(fields, [path, 0])
       }
     },
   }