docs: update example

Author: beizhedenglong

README.md

@@ -1,34 +1 @@
-# vue-hooks-form2
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Run your unit tests
-```
-yarn test:unit
-```
-
-### Run your end-to-end tests
-```
-yarn test:e2e
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# Vue Hooks Form

example/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
-    <Demo />
-  </div>
+  <Demo />
 </template>
 
 <script lang="ts">

example/components/Demo.vue

@@ -1,31 +1,53 @@
 <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>
+  <h1 class="title is-1 container">Vue Hooks Form</h1>
+  <div class="tile columns">
+    <div class="column tile ">
+      <div class="tile is-child box">
+        <h2 class="title">Example:</h2>
+        <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>
+      </div>
+    </div>
+    <div class="column tile">
+      <div class="tile is-child box">
+        <h2 class="title">Values:</h2>
+        <pre>{{ JSON.stringify(values, null, 2) }}</pre>
+      </div>
+    </div>
+    <div class="column tile">
+      <div class="tile is-child box">
+        <h2 class="title">ErrorFields:</h2>
+        <pre>{{ JSON.stringify(errorFields, null, 2) }}</pre>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -43,7 +65,11 @@ export default defineComponent({
   },
   setup() {
     const {
-      useField, validateFields, errorFields, getFieldValues, values,
+      useField,
+      validateFields,
+      errorFields,
+      getFieldValues,
+      values,
     } = useForm({
       defaultValues: {
         username: 'Victor',
@@ -54,15 +80,19 @@ export default defineComponent({
     })
     const password = useField('password', {
       rule: {
-        required: true, min: 6, max: 10,
+        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 new Error(
+              'The two passwords that you entered do not match!',
+            )
           }
           return true
         },
@@ -81,7 +111,14 @@ export default defineComponent({
         }
       },
       errorFields,
+      values,
     }
   },
 })
 </script>
+
+<style scoped>
+  h1 {
+    text-align: center;
+  }
+</style>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue-hooks-form2",
+  "name": "vue-hooks-form",
   "version": "0.1.0",
   "private": true,
   "scripts": {

public/index.html

@@ -12,7 +12,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app" class="section"></div>
     <!-- built files will be auto injected -->
     <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
   </body>