docs: refine form demo and message

one/docs/components/message.md

@@ -2,9 +2,7 @@
 
 ## 示例
 
-`Message` 有五种状态，分别是 `success`、`info`、`warning` 、`error` 和 `aux`，可以通过 [`status`](#props-status) 属性指定不同的类型。
+可以使用 [`status`](#props-status) 属性指定不同的上下文状态，使用 [`display`](#props-display) 属性指定不同的展示形态。
-
-`Message` 有四种变体，分别是 `normal`、`popup`、`simple` 和 `standalone`，可以通过 [`display`](#props-display) 属性指定不同的变体。
 
 [[ demo src="/demo/message/default.vue" ]]
 
@@ -34,11 +32,11 @@
 +++枚举值
 | 值 | 描述 |
 | -- | -- |
-| `info` | 消息提示样式。 |
+| `info` | 信息提示状态。 |
-| `success` | 成功样式。 |
+| `success` | 成功状态。 |
-| `warning` | 警告样式。 |
+| `warning` | 警告状态。 |
-| `error` | 错误样式。 |
+| `error` | 错误状态。 |
-| `aux` | 辅助样式。 |
+| `aux` | 辅助状态。 |
 +++
 ^^^
 
@@ -49,9 +47,9 @@
 | 值 | 描述 |
 | -- | -- |
 | `normal` | 普通样式，有图标和带状态文本。 |
-| `popup` | 气泡样式。 |
+| `popup` | 气泡样式，默认仅展示图标，可交互调起气泡展示详细内容。 |
 | `simple` | 简单样式，没有图标。 |
-| `standalone` | 独立样式，有图标和无状态文本。 |
+| `standalone` | 独立样式，展示图标和无状态文本。 |
 +++
 ^^^
 

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">

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>

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="爱好："
+      name="address"
-      help="辅助文本"
+      label="地址"
-      name="hobby"
+      tip="居住地的详细地址"
-      help-position="bottom"
+      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'
     }
   }
 }

one/docs/demo/form/normal.vue

@@ -1,27 +1,20 @@
 <template>
 <article>
-  <veui-form :data="formData">
+  <veui-form
-    <veui-field label="状态：">
+    :data="formData"
+    @submit="handleSubmit"
+  >
+    <veui-field label="型号">
       <veui-select
-        v-model="formData.statusSelected"
+        v-model="formData.model"
-        :options="statusOptions"
+        :options="models"
       />
     </veui-field>
-
+    <veui-field label="日期">
-    <veui-field label="时间：">
+      <veui-date-picker
-      <veui-datepicker
+        v-model="formData.date"
-        v-model="formData.range"
-        range
       />
     </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-date-picker': DatePicker
-    'veui-search-box': SearchBox
   },
   data () {
-    const start = new Date()
-    const end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
-
     return {
-      statusOptions: [
+      models: [
         {
-          label: '状态1',
+          label: 'APTX-4867',
-          value: 1
+          value: 'aptx-4867'
         },
         {
-          label: '状态2',
+          label: 'APTX-4868',
-          value: 2
+          value: 'aptx-4868'
         },
         {
-          label: '状态3',
+          label: 'APTX-4869',
-          value: 3
+          value: 'aptx-4869'
         },
         {
-          label: '状态4',
+          label: 'APTX-4870',
-          value: 4
+          value: 'aptx-4870'
         }
       ],
       formData: {
-        statusSelected: 1,
+        model: null,
-        query: '',
+        date: null
-        range: [start, end]
       }
     }
+  },
+  methods: {
+    handleSubmit (data) {
+      this.$toast(JSON.stringify(data, null, 2))
+    }
   }
 }
 </script>

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>

one/docs/demo/message/default.vue

@@ -1,28 +1,62 @@
 <template>
 <article>
-  <section>
+  <section class="options">
-    <div class="control-wrapper">
+    <veui-radio-button-group
-      <veui-radio-button-group
+      v-model="ui"
-        v-model="ui"
+      ui="s"
-        :items="uiValues"
+      :items="uiValues"
-      />
+    />
 
-      <veui-radio-button-group
+    <veui-radio-button-group
-        v-model="display"
+      v-model="display"
-        :items="displayValues"
+      ui="s"
-      />
+      :items="displayValues"
-    </div>
+    />
-    <div
+  </section>
-      v-for="(status, index) in statuses"
+  <section>
-      :key="index"
+    <veui-message
+      :display="display"
+      :ui="ui"
+      status="info"
     >
-      <span class="message-label">{{ status }}:</span>
+      请在一小时内容完成付款，否则订单将自动取消
-      <veui-message
+    </veui-message>
-        :display="display"
+  </section>
-        :ui="ui"
+  <section>
-        :status="status"
+    <veui-message
-      >消息</veui-message>
+      :display="display"
-    </div>
+      :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 {
+section + section {
-  margin-bottom: 10px;
+  margin-top: 20px;
-
-  & > div {
-    display: flex;
-    height: 32px;
-    align-items: center;
-  }
-
-  .message-label {
-    min-width: 120px;
-  }
 }
 
-.veui-radio-button-group {
+.options {
-  & + & {
+  display: flex;
-    margin-left: 26px;
+  align-items: center;
-  }
+  gap: 8px;
 }
 </style>