From d0dd1ea4733fe7f34bfcfd6803b457b229c75644 Mon Sep 17 00:00:00 2001
From: xiaodemen <fuq_pr@163.com>
Date: Wed, 30 Mar 2022 14:09:18 +0800
Subject: [PATCH] docs: add docs for form

Change-Id: I6b84399995ed28e9fe098abe38465ed5d685fb47
---
 one/docs/components/field.md      |  36 ++++++-
 one/docs/components/form.md       |  12 +++
 one/docs/components/message.md    |  72 +++++++++++++
 one/docs/components/nav.md        |   3 +-
 one/docs/demo/form/abstract.vue   |  80 ++++++++++++++
 one/docs/demo/form/help.vue       |  50 +++++++++
 one/docs/demo/form/withhold.vue   |  47 ++++++++
 one/docs/demo/message/default.vue |  78 ++++++++++++++
 one/docs/demo/nav/size.vue        |   6 --
 one/docs/nav.json                 |   4 +
 package-lock.json                 | 174 ++++++++++++++++--------------
 package.json                      |  10 +-
 12 files changed, 479 insertions(+), 93 deletions(-)
 create mode 100644 one/docs/components/message.md
 create mode 100644 one/docs/demo/form/abstract.vue
 create mode 100644 one/docs/demo/form/help.vue
 create mode 100644 one/docs/demo/form/withhold.vue
 create mode 100644 one/docs/demo/message/default.vue

diff --git a/one/docs/components/field.md b/one/docs/components/field.md
index 4bb5c33..27ca305 100644
--- a/one/docs/components/field.md
+++ b/one/docs/components/field.md
@@ -22,6 +22,11 @@
 | ``name`` | `string` | - | 表单项名称，可用于指定数据字段名或展示错误消息的定位。 |
 | ``field`` | `string` | - | [^field] |
 | ``rules`` | `string | Array<Object>` | - | [^rules] |
+| ``help`` | `string` | - | 表单项辅助文案。 |
+| ``help-position`` | `'bottom' | 'side'` | `'side'` | [^help-position] |
+| ``abstract`` | `boolean=` | `false` | 抽象表单项，抽象的项目没有标题，也不会展示校验信息。 |
+| ``withhold-validity`` | `boolean=` | `false` | 当设置为 `true` 时，该表单项内容中的输入组件（如 `veui-input` ）不会自动绑定校验事件，也不会自动进入 `invalid` 状态，使用方可以通过 `default` 插槽来自行定制。 |
+| ``validity-display`` | `'normal' | 'simple'` | `'simple'` | [^validity-display] |
 
 ^^^ui
 预设样式。
@@ -116,16 +121,45 @@ let minLengthRule = {
 +++
 ^^^
 
+^^^help-position
+表单项辅助文案的展示位置。
+
++++辅助文案位置
+| 值 | 描述 |
+| -- | -- |
+| `side` | 辅助文案展示在表单项内的侧边。 |
+| `bottom` | 辅助文案展示在表单项内的下方，在校验信息之前。 |
++++
+^^^
+
+^^^validity-display
+表单项的校验信息是否展示图标。
+
++++详情说明
+| 值 | 描述 |
+| -- | -- |
+| `normal` | 校验信息展示图标。 |
+| `simple` | 校验信息不展示图标。 |
++++
+^^^
+
 ### 插槽
 
 | 名称 | 描述 |
 | -- | -- |
-| ``default`` | 用于内联输入组件。无默认内容。 |
+| ``default`` | 用于内联输入组件。作用域参数为 `(listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)`，其中 `invalid` 是当前表单项是否校验出错误，`listeners` 是校验时机的事件绑定，`validities` 是校验信息。 |
 | ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
 | ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
+| ``help`` | 表单项辅助文本内容。默认为 [`help`](#props-help) 属性的文本值。 |
 
 ### 图标
 
 | 名称 | 描述 |
 | -- | -- |
 | ``alert`` | 警示图标。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``field.validityDisplay`` | `'normal' | 'simple'` | `'simple'` | 见 [`validity-display`](#props-validity-display) 属性。 |
diff --git a/one/docs/components/form.md b/one/docs/components/form.md
index 346f923..82a1878 100644
--- a/one/docs/components/form.md
+++ b/one/docs/components/form.md
@@ -24,10 +24,22 @@
 
 [[ demo src="/demo/form/disabled.vue" ]]
 
+### 提示与辅助文本
+
+[[ demo src="/demo/form/help.vue" ]]
+
 ### 校验
 
 [[ demo src="/demo/form/validate.vue" ]]
 
+### 抽象表单项
+
+[[ demo src="/demo/form/abstract.vue" ]]
+
+### 原生输入框与表单项整合
+
+[[ demo src="/demo/form/withhold.vue" ]]
+
 ## API
 
 ### 属性
diff --git a/one/docs/components/message.md b/one/docs/components/message.md
new file mode 100644
index 0000000..ca7e9bc
--- /dev/null
+++ b/one/docs/components/message.md
@@ -0,0 +1,72 @@
+# Message <small>消息</small>
+
+## 示例
+
+`Message` 有五种状态，分别是 `success`、`info`、`warning` 、`error` 和 `aux`，可以通过 [`status`](#props-status) 属性指定不同的类型。
+
+`Message` 有四种变体，分别是 `normal`、`popup`、`simple` 和 `standalone`，可以通过 [`display`](#props-display) 属性指定不同的变体。
+
+[[ demo src="/demo/message/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``ui`` | `string=` | `'m'` | [^ui] |
+| ``status`` | `'success' | 'error' | 'info' | 'warning' | 'aux'` | `'info'` | [^status] |
+| ``display`` | `'normal' | 'popup' | 'simple' | 'standalone'` | `'normal'` | [^display] |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+
+^^^status
+消息状态。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `info` | 消息提示样式。 |
+| `success` | 成功样式。 |
+| `warning` | 警告样式。 |
+| `error` | 错误样式。 |
+| `aux` | 辅助样式。 |
++++
+^^^
+
+^^^display
+消息展示形态。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `normal` | 普通样式，有图标和带状态文本。 |
+| `popup` | 气泡样式。 |
+| `simple` | 简单样式，没有图标。 |
+| `standalone` | 独立样式，有图标和无状态文本。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 消息内容区域 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| ``success`` | 成功消息。 |
+| ``warning`` | 警告消息。 |
+| ``info`` | 信息消息。 |
+| ``error`` | 错误消息。 |
+| ``aux`` | 辅助消息。 |
diff --git a/one/docs/components/nav.md b/one/docs/components/nav.md
index 6d74aa3..6879b06 100644
--- a/one/docs/components/nav.md
+++ b/one/docs/components/nav.md
@@ -4,7 +4,7 @@
 
 ### 尺寸
 
-可选的尺寸 [`ui`](#props-ui) 属性值：`s`/`m`。
+可选的尺寸 [`ui`](#props-ui) 属性值：`m`。
 
 [[ demo src="/demo/nav/size.vue" ]]
 
@@ -42,7 +42,6 @@
 +++枚举值
 | 值 | 描述 |
 | -- | -- |
-| `s` | 小尺寸样式。 |
 | `m` | 中尺寸样式。 |
 +++
 ^^^
diff --git a/one/docs/demo/form/abstract.vue b/one/docs/demo/form/abstract.vue
new file mode 100644
index 0000000..fd5ae46
--- /dev/null
+++ b/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>
diff --git a/one/docs/demo/form/help.vue b/one/docs/demo/form/help.vue
new file mode 100644
index 0000000..52d245d
--- /dev/null
+++ b/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>
diff --git a/one/docs/demo/form/withhold.vue b/one/docs/demo/form/withhold.vue
new file mode 100644
index 0000000..624dac1
--- /dev/null
+++ b/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>
diff --git a/one/docs/demo/message/default.vue b/one/docs/demo/message/default.vue
new file mode 100644
index 0000000..36d9167
--- /dev/null
+++ b/one/docs/demo/message/default.vue
@@ -0,0 +1,78 @@
+<template>
+<article>
+  <section>
+    <div class="control-wrapper">
+      <veui-radio-button-group
+        v-model="ui"
+        :items="uiValues"
+      />
+
+      <veui-radio-button-group
+        v-model="display"
+        :items="displayValues"
+      />
+    </div>
+    <div
+      v-for="(status, index) in statuses"
+      :key="index"
+    >
+      <span class="message-label">{{ status }}:</span>
+      <veui-message
+        :display="display"
+        :ui="ui"
+        :status="status"
+      >消息</veui-message>
+    </div>
+  </section>
+</article>
+</template>
+<script>
+import { Message, RadioButtonGroup } from 'veui'
+
+export default {
+  name: 'message-demo',
+  components: {
+    'veui-message': Message,
+    'veui-radio-button-group': RadioButtonGroup
+  },
+  data () {
+    return {
+      ui: 'm',
+      uiValues: [
+        { label: 's', value: 's' },
+        { label: 'm', value: 'm' }
+      ],
+      statuses: ['success', 'error', 'info', 'warning', 'aux'],
+      display: 'normal',
+      displayValues: [
+        { label: 'normal', value: 'normal' },
+        { label: 'popup', value: 'popup' },
+        { label: 'simple', value: 'simple' },
+        { label: 'standalone', value: 'standalone' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+section {
+  margin-bottom: 10px;
+
+  & > div {
+    display: flex;
+    height: 32px;
+    align-items: center;
+  }
+
+  .message-label {
+    min-width: 120px;
+  }
+}
+
+.veui-radio-button-group {
+  & + & {
+    margin-left: 26px;
+  }
+}
+</style>
diff --git a/one/docs/demo/nav/size.vue b/one/docs/demo/nav/size.vue
index 232037a..29dd06a 100644
--- a/one/docs/demo/nav/size.vue
+++ b/one/docs/demo/nav/size.vue
@@ -1,11 +1,5 @@
 <template>
 <article>
-  <section>
-    <veui-nav
-      ui="s"
-      :items="items"
-    />
-  </section>
   <section>
     <veui-nav
       ui="m"
diff --git a/one/docs/nav.json b/one/docs/nav.json
index 603e7e1..b8ad720 100644
--- a/one/docs/nav.json
+++ b/one/docs/nav.json
@@ -311,6 +311,10 @@
           "title": "Menu - 边栏菜单",
           "slug": "menu"
         },
+        {
+          "title": "Message - 消息",
+          "slug": "message"
+        },
         {
           "title": "Nav - 导航菜单",
           "slug": "nav"
diff --git a/package-lock.json b/package-lock.json
index 067dcbc..dd55907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,18 +8,17 @@
       "name": "veui-docs",
       "version": "1.0.0",
       "dependencies": {
-        "@vue/runtime-dom": "^3.2.31",
-        "express": "^4.16.2",
-        "typescript": "^4.6.2"
+        "express": "^4.16.2"
       },
       "devDependencies": {
         "@docsearch/css": "^3.0.0-alpha.39",
         "@docsearch/js": "^3.0.0-alpha.39",
         "@justfork/vue-monaco": "^0.3.1",
         "@stackblitz/sdk": "^1.5.2",
+        "@vue/runtime-dom": "^3.2.31",
         "babel-eslint": "^10.1.0",
         "babel-plugin-lodash": "^3.3.4",
-        "babel-plugin-veui": "^2.5.5",
+        "babel-plugin-veui": "^2.6.0",
         "cheerio": "^1.0.0-rc.10",
         "dls-graphics": "^1.0.0-alpha.3",
         "dls-icons-vue": "^0.14.0",
@@ -75,12 +74,13 @@
         "stylelint-plugin-stylus": "^0.9.0",
         "stylus": "^0.54.5",
         "stylus-loader": "^3.0.2",
+        "typescript": "^4.6.2",
         "unist-util-remove": "^1.0.1",
         "unist-util-visit": "^1.4.0",
-        "veui": "^2.5.5",
-        "veui-loader": "^2.5.5",
-        "veui-theme-dls": "^2.5.5",
-        "veui-theme-dls-icons": "^2.5.5",
+        "veui": "^2.6.0",
+        "veui-loader": "^2.6.0",
+        "veui-theme-dls": "^2.6.0",
+        "veui-theme-dls-icons": "^2.6.0",
         "vue-awesome": "^4.5.0",
         "vue-i18n": "^8.16.0",
         "vue-live": "^1.17.2",
@@ -4254,6 +4254,7 @@
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.31.tgz",
       "integrity": "sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==",
+      "dev": true,
       "dependencies": {
         "@vue/shared": "3.2.31"
       }
@@ -4261,12 +4262,14 @@
     "node_modules/@vue/reactivity/node_modules/@vue/shared": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+      "dev": true
     },
     "node_modules/@vue/runtime-core": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.31.tgz",
       "integrity": "sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==",
+      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.2.31",
         "@vue/shared": "3.2.31"
@@ -4275,12 +4278,14 @@
     "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+      "dev": true
     },
     "node_modules/@vue/runtime-dom": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz",
       "integrity": "sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==",
+      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.2.31",
         "@vue/shared": "3.2.31",
@@ -4290,7 +4295,8 @@
     "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+      "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+      "dev": true
     },
     "node_modules/@vue/shared": {
       "version": "3.2.26",
@@ -5290,9 +5296,9 @@
       }
     },
     "node_modules/babel-plugin-veui": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.5.5.tgz",
-      "integrity": "sha512-fkEJVCLbAKrVgUB+S5ZiwvSrdjj/SxIxlyiz+yByN1lMokyHWrqDFe0HEaEPS8NRMi67puIoq4AAgYCbFWRP4A==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.0.tgz",
+      "integrity": "sha512-J8Z6IcSbFr2f8HfnlBMxnDLjCuUICvJEiCznfoZJkpv3WuE2ren+M+gUMoTQcTGJwz9ip/sqFhltHAfSJO7lLw==",
       "dev": true,
       "peerDependencies": {
         "veui": "*"
@@ -7778,7 +7784,8 @@
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+      "dev": true
     },
     "node_modules/cuint": {
       "version": "0.2.2",
@@ -12115,9 +12122,9 @@
       }
     },
     "node_modules/less-plugin-dls": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-5.1.0.tgz",
-      "integrity": "sha512-b0SypLx3Z7XtRlF0HdfmCMvQofmpchyOZ/8s90Z8rTqBVfeXr4ZOoHcS2KRmukHwDd59PSQGfaQK8I5ApZLmYA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-7.1.0.tgz",
+      "integrity": "sha512-ew6NBBG0csxRMQ0tSx/xzcogDwqu6jZhgtzVr6C5vBZXAUU+EHg9BsX6tJOqk9fOPswidMvaUPRAcV+7a+ve9Q==",
       "dev": true,
       "dependencies": {
         "arg": "^4.1.3",
@@ -20400,6 +20407,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
       "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -21042,9 +21050,9 @@
       }
     },
     "node_modules/veui": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui/-/veui-2.5.5.tgz",
-      "integrity": "sha512-ikWZHvyfdGpyAt2SPuv1hOCTnRxj1NwPA1JP7PLsnTYcjYyw8pxmztCRdVLYYLmbC4ioEkrP/rBDLjer1pg5gw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui/-/veui-2.6.0.tgz",
+      "integrity": "sha512-DuecjEYclnoK48lWQCl1ViOgbUriy5k2KJn9kQdNs8vK35nsx6z+0+uWpEv2FEZgNlvICxW1YmDDYgSLZl5Qiw==",
       "dev": true,
       "dependencies": {
         "bytes": "^3.0.0",
@@ -21069,9 +21077,9 @@
       }
     },
     "node_modules/veui-loader": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.5.5.tgz",
-      "integrity": "sha512-hYqI1ibjn9mlwYXMi4UhC+juseujQeuU4ecBTLyr2LAF3Dd6P1+u55U5KfxcEzU5ru+hATKem6w4ErFW26mDzg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.0.tgz",
+      "integrity": "sha512-0t2bKtvdg7iLMZFnN0xlE/ISzgS2sVzJCOigq34tHcPjMAvycx3yS3t3dg4aPopVbA5lWe08ItH3FxFH8JjuNQ==",
       "dev": true,
       "dependencies": {
         "loader-utils": "^2.0.0",
@@ -21195,53 +21203,53 @@
       }
     },
     "node_modules/veui-theme-dls": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.5.5.tgz",
-      "integrity": "sha512-DMS97paGf54AZAb5Zy+gbedvNBTef4+v4J5oSnf64YWu0kqBESwgKMQ+OeQ8AZkvQBtYwMkCZPIB51JgA2Qa0Q==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.0.tgz",
+      "integrity": "sha512-WVveqOEDXJpq//r1cnepU8K8iTaNepcF3N7MCCmaRZqmzx66R7a/JQGIXFDUvuYeYFcoNDz7uL0PxPfbmSg2MA==",
       "dev": true,
       "dependencies": {
         "classlist-polyfill": "^1.2.0",
-        "dls-icons-vue": "~2.5.0",
+        "dls-icons-vue": "~2.6.0",
         "focus-visible": "^4.1.0",
-        "less-plugin-dls": "^5.1.0",
+        "less-plugin-dls": "^7.1.0",
         "less-plugin-est": "^3.0.0",
-        "veui-theme-dls-icons": "^2.5.5"
+        "veui-theme-dls-icons": "^2.6.0"
       },
       "peerDependencies": {
-        "veui": "2.5.5"
+        "veui": "2.6.0"
       }
     },
     "node_modules/veui-theme-dls-icons": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.5.5.tgz",
-      "integrity": "sha512-fZXhiFYHPsZiZZ2dHAb53MlwQ0zy6Y69FpznMxLsdRaAQfAhZF5KjDb2kyGuMXMcRDZLGyMwJtQfh7UCMXBpMw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.0.tgz",
+      "integrity": "sha512-8ba1mjNA6RT4eSYP3mgw7qA24jHw4YgtlIlXAecrLVm/ZQXhIdBqsmii1+at8mEKxBxqwublaq+5oNVSG/NTMQ==",
       "dev": true,
       "dependencies": {
-        "dls-icons-vue": "~2.5.0"
+        "dls-icons-vue": "~2.6.0"
       },
       "peerDependencies": {
-        "veui": "2.5.5"
+        "veui": "2.6.0"
       }
     },
     "node_modules/veui-theme-dls-icons/node_modules/dls-icons-vue": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.5.0.tgz",
-      "integrity": "sha512-23r8e5XCWgchj3N/XhMItKymvCKQ0gqjShU8/SUrziyNDgs7fghM5ZK0Hgn+ciKW2OKiKJlxU1hK5BrD6KsbAg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.6.0.tgz",
+      "integrity": "sha512-Gsf8517qvRQKRY9weJZdGL94NWCVQ0nRckfg7wkCiEl/XIEqnLJl0CX+jBVjoCS/V7G7mSAwIYfxWNWeQeDl3A==",
       "dev": true,
       "dependencies": {
-        "dls-icons-data": "^2.5.0"
+        "dls-icons-data": "^2.6.0"
       },
       "peerDependencies": {
         "vue": "2.x"
       }
     },
     "node_modules/veui-theme-dls/node_modules/dls-icons-vue": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.5.0.tgz",
-      "integrity": "sha512-23r8e5XCWgchj3N/XhMItKymvCKQ0gqjShU8/SUrziyNDgs7fghM5ZK0Hgn+ciKW2OKiKJlxU1hK5BrD6KsbAg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.6.0.tgz",
+      "integrity": "sha512-Gsf8517qvRQKRY9weJZdGL94NWCVQ0nRckfg7wkCiEl/XIEqnLJl0CX+jBVjoCS/V7G7mSAwIYfxWNWeQeDl3A==",
       "dev": true,
       "dependencies": {
-        "dls-icons-data": "^2.5.0"
+        "dls-icons-data": "^2.6.0"
       },
       "peerDependencies": {
         "vue": "2.x"
@@ -26187,6 +26195,7 @@
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.31.tgz",
       "integrity": "sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==",
+      "dev": true,
       "requires": {
         "@vue/shared": "3.2.31"
       },
@@ -26194,7 +26203,8 @@
         "@vue/shared": {
           "version": "3.2.31",
           "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+          "dev": true
         }
       }
     },
@@ -26202,6 +26212,7 @@
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.31.tgz",
       "integrity": "sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==",
+      "dev": true,
       "requires": {
         "@vue/reactivity": "3.2.31",
         "@vue/shared": "3.2.31"
@@ -26210,7 +26221,8 @@
         "@vue/shared": {
           "version": "3.2.31",
           "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+          "dev": true
         }
       }
     },
@@ -26218,6 +26230,7 @@
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz",
       "integrity": "sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==",
+      "dev": true,
       "requires": {
         "@vue/runtime-core": "3.2.31",
         "@vue/shared": "3.2.31",
@@ -26227,7 +26240,8 @@
         "@vue/shared": {
           "version": "3.2.31",
           "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
-          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+          "dev": true
         }
       }
     },
@@ -27052,9 +27066,9 @@
       }
     },
     "babel-plugin-veui": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.5.5.tgz",
-      "integrity": "sha512-fkEJVCLbAKrVgUB+S5ZiwvSrdjj/SxIxlyiz+yByN1lMokyHWrqDFe0HEaEPS8NRMi67puIoq4AAgYCbFWRP4A==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.0.tgz",
+      "integrity": "sha512-J8Z6IcSbFr2f8HfnlBMxnDLjCuUICvJEiCznfoZJkpv3WuE2ren+M+gUMoTQcTGJwz9ip/sqFhltHAfSJO7lLw==",
       "dev": true,
       "requires": {}
     },
@@ -29041,7 +29055,8 @@
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+      "dev": true
     },
     "cuint": {
       "version": "0.2.2",
@@ -32471,9 +32486,9 @@
       }
     },
     "less-plugin-dls": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-5.1.0.tgz",
-      "integrity": "sha512-b0SypLx3Z7XtRlF0HdfmCMvQofmpchyOZ/8s90Z8rTqBVfeXr4ZOoHcS2KRmukHwDd59PSQGfaQK8I5ApZLmYA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-7.1.0.tgz",
+      "integrity": "sha512-ew6NBBG0csxRMQ0tSx/xzcogDwqu6jZhgtzVr6C5vBZXAUU+EHg9BsX6tJOqk9fOPswidMvaUPRAcV+7a+ve9Q==",
       "dev": true,
       "requires": {
         "arg": "^4.1.3",
@@ -39169,7 +39184,8 @@
     "typescript": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
-      "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg=="
+      "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
+      "dev": true
     },
     "typescript-eslint-parser": {
       "version": "16.0.1",
@@ -39678,9 +39694,9 @@
       "dev": true
     },
     "veui": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui/-/veui-2.5.5.tgz",
-      "integrity": "sha512-ikWZHvyfdGpyAt2SPuv1hOCTnRxj1NwPA1JP7PLsnTYcjYyw8pxmztCRdVLYYLmbC4ioEkrP/rBDLjer1pg5gw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui/-/veui-2.6.0.tgz",
+      "integrity": "sha512-DuecjEYclnoK48lWQCl1ViOgbUriy5k2KJn9kQdNs8vK35nsx6z+0+uWpEv2FEZgNlvICxW1YmDDYgSLZl5Qiw==",
       "dev": true,
       "requires": {
         "bytes": "^3.0.0",
@@ -39704,9 +39720,9 @@
       }
     },
     "veui-loader": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.5.5.tgz",
-      "integrity": "sha512-hYqI1ibjn9mlwYXMi4UhC+juseujQeuU4ecBTLyr2LAF3Dd6P1+u55U5KfxcEzU5ru+hATKem6w4ErFW26mDzg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.0.tgz",
+      "integrity": "sha512-0t2bKtvdg7iLMZFnN0xlE/ISzgS2sVzJCOigq34tHcPjMAvycx3yS3t3dg4aPopVbA5lWe08ItH3FxFH8JjuNQ==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -39796,46 +39812,46 @@
       }
     },
     "veui-theme-dls": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.5.5.tgz",
-      "integrity": "sha512-DMS97paGf54AZAb5Zy+gbedvNBTef4+v4J5oSnf64YWu0kqBESwgKMQ+OeQ8AZkvQBtYwMkCZPIB51JgA2Qa0Q==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.0.tgz",
+      "integrity": "sha512-WVveqOEDXJpq//r1cnepU8K8iTaNepcF3N7MCCmaRZqmzx66R7a/JQGIXFDUvuYeYFcoNDz7uL0PxPfbmSg2MA==",
       "dev": true,
       "requires": {
         "classlist-polyfill": "^1.2.0",
-        "dls-icons-vue": "~2.5.0",
+        "dls-icons-vue": "~2.6.0",
         "focus-visible": "^4.1.0",
-        "less-plugin-dls": "^5.1.0",
+        "less-plugin-dls": "^7.1.0",
         "less-plugin-est": "^3.0.0",
-        "veui-theme-dls-icons": "^2.5.5"
+        "veui-theme-dls-icons": "^2.6.0"
       },
       "dependencies": {
         "dls-icons-vue": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.5.0.tgz",
-          "integrity": "sha512-23r8e5XCWgchj3N/XhMItKymvCKQ0gqjShU8/SUrziyNDgs7fghM5ZK0Hgn+ciKW2OKiKJlxU1hK5BrD6KsbAg==",
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.6.0.tgz",
+          "integrity": "sha512-Gsf8517qvRQKRY9weJZdGL94NWCVQ0nRckfg7wkCiEl/XIEqnLJl0CX+jBVjoCS/V7G7mSAwIYfxWNWeQeDl3A==",
           "dev": true,
           "requires": {
-            "dls-icons-data": "^2.5.0"
+            "dls-icons-data": "^2.6.0"
           }
         }
       }
     },
     "veui-theme-dls-icons": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.5.5.tgz",
-      "integrity": "sha512-fZXhiFYHPsZiZZ2dHAb53MlwQ0zy6Y69FpznMxLsdRaAQfAhZF5KjDb2kyGuMXMcRDZLGyMwJtQfh7UCMXBpMw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.0.tgz",
+      "integrity": "sha512-8ba1mjNA6RT4eSYP3mgw7qA24jHw4YgtlIlXAecrLVm/ZQXhIdBqsmii1+at8mEKxBxqwublaq+5oNVSG/NTMQ==",
       "dev": true,
       "requires": {
-        "dls-icons-vue": "~2.5.0"
+        "dls-icons-vue": "~2.6.0"
       },
       "dependencies": {
         "dls-icons-vue": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.5.0.tgz",
-          "integrity": "sha512-23r8e5XCWgchj3N/XhMItKymvCKQ0gqjShU8/SUrziyNDgs7fghM5ZK0Hgn+ciKW2OKiKJlxU1hK5BrD6KsbAg==",
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/dls-icons-vue/-/dls-icons-vue-2.6.0.tgz",
+          "integrity": "sha512-Gsf8517qvRQKRY9weJZdGL94NWCVQ0nRckfg7wkCiEl/XIEqnLJl0CX+jBVjoCS/V7G7mSAwIYfxWNWeQeDl3A==",
           "dev": true,
           "requires": {
-            "dls-icons-data": "^2.5.0"
+            "dls-icons-data": "^2.6.0"
           }
         }
       }
diff --git a/package.json b/package.json
index 8150670..9f9228b 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@vue/runtime-dom": "^3.2.31",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-veui": "^2.5.5",
+    "babel-plugin-veui": "^2.6.0",
     "cheerio": "^1.0.0-rc.10",
     "dls-graphics": "^1.0.0-alpha.3",
     "dls-icons-vue": "^0.14.0",
@@ -86,10 +86,10 @@
     "typescript": "^4.6.2",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0",
-    "veui": "^2.5.5",
-    "veui-loader": "^2.5.5",
-    "veui-theme-dls": "^2.5.5",
-    "veui-theme-dls-icons": "^2.5.5",
+    "veui": "^2.6.0",
+    "veui-loader": "^2.6.0",
+    "veui-theme-dls": "^2.6.0",
+    "veui-theme-dls-icons": "^2.6.0",
     "vue-awesome": "^4.5.0",
     "vue-i18n": "^8.16.0",
     "vue-live": "^1.17.2",