docs: add docs for form

Change-Id: I6b84399995ed28e9fe098abe38465ed5d685fb47

one/docs/demo/form/abstract.vue

@@ -0,0 +1,80 @@
+<template>
+<article>
+  <veui-form
+    :data="formData"
+  >
+    <veui-field
+      label="门店："
+      name="store"
+      :rules="[{
+        name: 'required', message: `请选择门店`, triggers: 'select'
+      }]"
+    >
+      <veui-transfer
+        :datasource="storeList"
+        v-model="formData.store"
+      >
+        <template #selected-item-label="{ label, value }">
+          <div class="selected-store">
+            <span class="store-label">{{ label }}</span>
+            <veui-field
+              :key="`storeCounts.${value}`"
+              :name="`storeCounts.${value}`"
+              :rules="[
+                { name: 'required', message: `请填写${label}的数量`, triggers: 'change,blur' }
+              ]"
+              abstract
+            >
+              <veui-number-input
+                v-model="formData.storeCounts[value]"
+                class="store-number"
+                ui="s"
+                :min="1"
+              />
+            </veui-field>
+          </div>
+        </template>
+      </veui-transfer>
+    </veui-field>
+  </veui-form>
+</article>
+</template>
+
+<script>
+import { Form, Field, NumberInput, Transfer } from 'veui'
+
+export default {
+  components: {
+    'veui-form': Form,
+    'veui-field': Field,
+    'veui-number-input': NumberInput,
+    'veui-transfer': Transfer
+  },
+  data () {
+    return {
+      disabled: true,
+      formData: {
+        store: [],
+        storeCounts: {}
+      },
+      storeList: [
+        { label: '门店1', value: '1' },
+        { label: '门店2', value: '2' },
+        { label: '门店3', value: '3' },
+        { label: '门店4', value: '4' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.selected-store {
+  display: flex;
+  align-items: center;
+
+  .store-label {
+    min-width: 60px;
+  }
+}
+</style>

one/docs/demo/form/help.vue

@@ -0,0 +1,50 @@
+<template>
+<article>
+  <veui-form
+    :data="formData"
+  >
+    <veui-field
+      label="姓名："
+      tip="提示"
+      help="辅助文本"
+      name="name"
+    >
+      <veui-input v-model="formData.name"/>
+    </veui-field>
+    <veui-field
+      label="爱好："
+      help="辅助文本"
+      name="hobby"
+      help-position="bottom"
+    >
+      <veui-input v-model="formData.hobby"/>
+    </veui-field>
+  </veui-form>
+</article>
+</template>
+
+<script>
+import { Form, Field, Input } from 'veui'
+
+export default {
+  components: {
+    'veui-form': Form,
+    'veui-field': Field,
+    'veui-input': Input
+  },
+  data () {
+    return {
+      formData: {
+        name: '',
+        hobby: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+section {
+  margin-bottom: 20px;
+}
+</style>

one/docs/demo/form/withhold.vue

@@ -0,0 +1,47 @@
+<template>
+<article>
+  <veui-form
+    :data="formData"
+  >
+    <veui-field
+      label="名称："
+      name="name"
+      :rules="[{ name: 'required', triggers: 'input,blur' }]"
+    >
+      <template #default="{ invalid, listeners }">
+        <input
+          :class="{
+            'demo-invalid': invalid
+          }"
+          v-model="formData.name"
+          v-on="listeners"
+        >
+      </template>
+    </veui-field>
+  </veui-form>
+</article>
+</template>
+
+<script>
+import { Form, Field } from 'veui'
+
+export default {
+  components: {
+    'veui-form': Form,
+    'veui-field': Field
+  },
+  data () {
+    return {
+      formData: {
+        name: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-invalid {
+  border: 1px solid #cc1800;
+}
+</style>