From bc5ca560216b73749d6f75008c43105d04bdcc41 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 31 Mar 2022 13:24:57 +0800
Subject: [PATCH] docs: refine form demo and message

---
 one/docs/components/message.md    | 18 +++---
 one/docs/demo/form/abstract.vue   |  6 +-
 one/docs/demo/form/disabled.vue   |  2 +-
 one/docs/demo/form/help.vue       | 37 ++++++++----
 one/docs/demo/form/normal.vue     | 63 +++++++++-----------
 one/docs/demo/form/readonly.vue   |  2 +-
 one/docs/demo/message/default.vue | 98 +++++++++++++++++++------------
 7 files changed, 127 insertions(+), 99 deletions(-)

diff --git a/one/docs/components/message.md b/one/docs/components/message.md
index ca7e9bc..f862adc 100644
--- a/one/docs/components/message.md
+++ b/one/docs/components/message.md
@@ -2,9 +2,7 @@
 
 ## 示例
 
-`Message` 有五种状态，分别是 `success`、`info`、`warning` 、`error` 和 `aux`，可以通过 [`status`](#props-status) 属性指定不同的类型。
-
-`Message` 有四种变体，分别是 `normal`、`popup`、`simple` 和 `standalone`，可以通过 [`display`](#props-display) 属性指定不同的变体。
+可以使用 [`status`](#props-status) 属性指定不同的上下文状态，使用 [`display`](#props-display) 属性指定不同的展示形态。
 
 [[ demo src="/demo/message/default.vue" ]]
 
@@ -34,11 +32,11 @@
 +++枚举值
 | 值 | 描述 |
 | -- | -- |
-| `info` | 消息提示样式。 |
-| `success` | 成功样式。 |
-| `warning` | 警告样式。 |
-| `error` | 错误样式。 |
-| `aux` | 辅助样式。 |
+| `info` | 信息提示状态。 |
+| `success` | 成功状态。 |
+| `warning` | 警告状态。 |
+| `error` | 错误状态。 |
+| `aux` | 辅助状态。 |
 +++
 ^^^
 
@@ -49,9 +47,9 @@
 | 值 | 描述 |
 | -- | -- |
 | `normal` | 普通样式，有图标和带状态文本。 |
-| `popup` | 气泡样式。 |
+| `popup` | 气泡样式，默认仅展示图标，可交互调起气泡展示详细内容。 |
 | `simple` | 简单样式，没有图标。 |
-| `standalone` | 独立样式，有图标和无状态文本。 |
+| `standalone` | 独立样式，展示图标和无状态文本。 |
 +++
 ^^^
 
diff --git a/one/docs/demo/form/abstract.vue b/one/docs/demo/form/abstract.vue
index fd5ae46..a09c292 100644
--- a/one/docs/demo/form/abstract.vue
+++ b/one/docs/demo/form/abstract.vue
@@ -4,15 +4,15 @@
     :data="formData"
   >
     <veui-field
-      label="门店："
+      label="门店"
       name="store"
       :rules="[{
-        name: 'required', message: `请选择门店`, triggers: 'select'
+        name: 'required', message: '请选择门店', triggers: 'select'
       }]"
     >
       <veui-transfer
-        :datasource="storeList"
         v-model="formData.store"
+        :datasource="storeList"
       >
         <template #selected-item-label="{ label, value }">
           <div class="selected-store">
diff --git a/one/docs/demo/form/disabled.vue b/one/docs/demo/form/disabled.vue
index 9f655ce..cf19ee3 100644
--- a/one/docs/demo/form/disabled.vue
+++ b/one/docs/demo/form/disabled.vue
@@ -9,7 +9,7 @@
     :data="formData"
     :disabled="disabled"
   >
-    <veui-field label="姓名：">
+    <veui-field label="姓名">
       <veui-input v-model="formData.name"/>
     </veui-field>
   </veui-form>
diff --git a/one/docs/demo/form/help.vue b/one/docs/demo/form/help.vue
index 52d245d..2969346 100644
--- a/one/docs/demo/form/help.vue
+++ b/one/docs/demo/form/help.vue
@@ -1,43 +1,56 @@
 <template>
 <article>
+  <section>
+    <veui-checkbox
+      v-model="helpPosition"
+      true-value="bottom"
+      false-value="side"
+    >
+      辅助信息显示在底部
+    </veui-checkbox>
+  </section>
   <veui-form
     :data="formData"
   >
     <veui-field
-      label="姓名："
-      tip="提示"
-      help="辅助文本"
       name="name"
+      label="姓名"
+      tip="你的全名"
+      help="至少 2 个字符"
+      :help-position="helpPosition"
     >
       <veui-input v-model="formData.name"/>
     </veui-field>
     <veui-field
-      label="爱好："
-      help="辅助文本"
-      name="hobby"
-      help-position="bottom"
+      name="address"
+      label="地址"
+      tip="居住地的详细地址"
+      help="精确到门牌号"
+      :help-position="helpPosition"
     >
-      <veui-input v-model="formData.hobby"/>
+      <veui-input v-model="formData.address"/>
     </veui-field>
   </veui-form>
 </article>
 </template>
 
 <script>
-import { Form, Field, Input } from 'veui'
+import { Form, Field, Input, Checkbox } from 'veui'
 
 export default {
   components: {
     'veui-form': Form,
     'veui-field': Field,
-    'veui-input': Input
+    'veui-input': Input,
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
       formData: {
         name: '',
-        hobby: ''
-      }
+        address: ''
+      },
+      helpPosition: 'side'
     }
   }
 }
diff --git a/one/docs/demo/form/normal.vue b/one/docs/demo/form/normal.vue
index d66ffc9..213e041 100644
--- a/one/docs/demo/form/normal.vue
+++ b/one/docs/demo/form/normal.vue
@@ -1,27 +1,20 @@
 <template>
 <article>
-  <veui-form :data="formData">
-    <veui-field label="状态：">
+  <veui-form
+    :data="formData"
+    @submit="handleSubmit"
+  >
+    <veui-field label="型号">
       <veui-select
-        v-model="formData.statusSelected"
-        :options="statusOptions"
+        v-model="formData.model"
+        :options="models"
       />
     </veui-field>
-
-    <veui-field label="时间：">
-      <veui-datepicker
-        v-model="formData.range"
-        range
+    <veui-field label="日期">
+      <veui-date-picker
+        v-model="formData.date"
       />
     </veui-field>
-
-    <veui-field>
-      <veui-search-box
-        v-model="formData.query"
-        placeholder="请输入搜索内容"
-      />
-    </veui-field>
-
     <template #actions>
       <veui-button
         ui="primary"
@@ -36,7 +29,7 @@
 </template>
 
 <script>
-import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
+import { Form, Field, Button, Select, DatePicker } from 'veui'
 
 export default {
   components: {
@@ -44,38 +37,38 @@ export default {
     'veui-field': Field,
     'veui-button': Button,
     'veui-select': Select,
-    'veui-datepicker': DatePicker,
-    'veui-search-box': SearchBox
+    'veui-date-picker': DatePicker
   },
   data () {
-    const start = new Date()
-    const end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
-
     return {
-      statusOptions: [
+      models: [
         {
-          label: '状态1',
-          value: 1
+          label: 'APTX-4867',
+          value: 'aptx-4867'
         },
         {
-          label: '状态2',
-          value: 2
+          label: 'APTX-4868',
+          value: 'aptx-4868'
         },
         {
-          label: '状态3',
-          value: 3
+          label: 'APTX-4869',
+          value: 'aptx-4869'
         },
         {
-          label: '状态4',
-          value: 4
+          label: 'APTX-4870',
+          value: 'aptx-4870'
         }
       ],
       formData: {
-        statusSelected: 1,
-        query: '',
-        range: [start, end]
+        model: null,
+        date: null
       }
     }
+  },
+  methods: {
+    handleSubmit (data) {
+      this.$toast(JSON.stringify(data, null, 2))
+    }
   }
 }
 </script>
diff --git a/one/docs/demo/form/readonly.vue b/one/docs/demo/form/readonly.vue
index 671d571..3b2ae7e 100644
--- a/one/docs/demo/form/readonly.vue
+++ b/one/docs/demo/form/readonly.vue
@@ -9,7 +9,7 @@
     :data="formData"
     :readonly="readonly"
   >
-    <veui-field label="姓名：">
+    <veui-field label="姓名">
       <veui-input v-model="formData.name"/>
     </veui-field>
   </veui-form>
diff --git a/one/docs/demo/message/default.vue b/one/docs/demo/message/default.vue
index 36d9167..4d0295e 100644
--- a/one/docs/demo/message/default.vue
+++ b/one/docs/demo/message/default.vue
@@ -1,28 +1,62 @@
 <template>
 <article>
-  <section>
-    <div class="control-wrapper">
-      <veui-radio-button-group
-        v-model="ui"
-        :items="uiValues"
-      />
+  <section class="options">
+    <veui-radio-button-group
+      v-model="ui"
+      ui="s"
+      :items="uiValues"
+    />
 
-      <veui-radio-button-group
-        v-model="display"
-        :items="displayValues"
-      />
-    </div>
-    <div
-      v-for="(status, index) in statuses"
-      :key="index"
+    <veui-radio-button-group
+      v-model="display"
+      ui="s"
+      :items="displayValues"
+    />
+  </section>
+  <section>
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="info"
     >
-      <span class="message-label">{{ status }}:</span>
-      <veui-message
-        :display="display"
-        :ui="ui"
-        :status="status"
-      >消息</veui-message>
-    </div>
+      请在一小时内容完成付款，否则订单将自动取消
+    </veui-message>
+  </section>
+  <section>
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="success"
+    >
+      订单创建成功
+    </veui-message>
+  </section>
+  <section>
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="error"
+    >
+      网络连接失败
+    </veui-message>
+  </section>
+  <section>
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="warning"
+    >
+      余额较低，请及时续费
+    </veui-message>
+  </section>
+  <section>
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="aux"
+    >
+      允许上传的文件类型为：JPG、PNG
+    </veui-message>
   </section>
 </article>
 </template>
@@ -56,23 +90,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
-section {
-  margin-bottom: 10px;
-
-  & > div {
-    display: flex;
-    height: 32px;
-    align-items: center;
-  }
-
-  .message-label {
-    min-width: 120px;
-  }
+section + section {
+  margin-top: 20px;
 }
 
-.veui-radio-button-group {
-  & + & {
-    margin-left: 26px;
-  }
+.options {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 </style>