feat: add component sort, fix alert/toast plugin docs

Author: Justineo

components/OneMenu.vue

@@ -17,42 +17,69 @@
       name="hamburger"
     />
   </div>
-  <veui-menu
+  <veui-sidenav
     class="one-menu"
     :items="menuItems"
     :expanded.sync="menuExpanded"
   >
-    <template #item-label="{ label, sub, cn }">
-      <small
-        v-if="sub"
-        class="sub"
-      >⤷</small>{{ label
-      }}<small
-        v-if="cn"
-        class="cn"
-      >{{ cn }}</small>
+    <template #item-label="{ name, label, sub, cn }">
+      <template v-if="name === '/components'">
+        {{ label }}
+        <veui-button
+          v-tooltip="t(sort ? 'unsort' : 'sort')"
+          class="sort"
+          :ui="`icon ${sort ? 'strong' : 'aux'}`"
+          @click.stop="sort = !sort"
+        >
+          <veui-icon name="one-alphabetical-sort"/>
+        </veui-button>
+      </template>
+      <template v-else>
+        <small
+          v-if="sub"
+          class="sub"
+        >⤷</small>{{ label
+        }}<small
+          v-if="cn"
+          class="cn"
+        >{{ cn }}</small>
+      </template>
     </template>
-  </veui-menu>
+  </veui-sidenav>
 </nav>
 </template>
 
 <script>
+import { Button, Sidenav, Icon } from 'veui'
 import i18n from '../common/i18n'
-import { Menu, Icon } from 'veui'
+import veuiI18n from 'veui/mixins/i18n'
+import tooltip from 'veui/directives/tooltip'
 import outside from 'veui/directives/outside'
+import { loadPref, savePref } from '../common/util'
 import 'veui-theme-dls-icons/hamburger'
 import 'veui-theme-dls-icons/chevron-left'
 
+Icon.register({
+  'one-alphabetical-sort': {
+    width: 24,
+    height: 24,
+    d:
+      'M12 5h10v2H12m0 12v-2h10v2m-10-8h10v2H12m-3 0v2l-3.33 4H9v2H3v-2l3.33-4H3v-2M7 3H5c-1.1 0-2 .9-2 2v6h2V9h2v2h2V5a2 2 0 0 0-2-2m0 4H5V5h2Z'
+  }
+})
+
 export default {
   name: 'one-menu',
   directives: {
-    outside
+    outside,
+    tooltip
   },
   components: {
-    'veui-menu': Menu,
+    'veui-button': Button,
+    'veui-sidenav': Sidenav,
     'veui-icon': Icon
   },
-  mixins: [i18n],
+  mixins: [i18n, veuiI18n],
   props: {
     expanded: Boolean,
     nav: {
@@ -64,14 +91,20 @@ export default {
   },
   data () {
     return {
-      menuExpanded: []
+      menuExpanded: [],
+      sort: loadPref('sort-components') || false
     }
   },
   computed: {
     menuItems () {
       return this.nav.map(item => this.normalizeItem(item))
     }
   },
+  watch: {
+    sort (val) {
+      savePref('sort-components', val)
+    }
+  },
   created () {
     this.menuExpanded = this.menuItems.map(({ name }) => name)
   },
@@ -90,16 +123,20 @@ export default {
       const to = link !== false && fullSlug && !disabled ? localePath : null
       const [main, cn] = this.getTitleDetail(title)
 
+      const normalizedChildren = children
+        ? children.map(child => this.normalizeItem(child, fullSlug))
+        : []
+
       return {
         label: main,
         cn,
         to,
         name: fullSlug,
-        sub,
+        sub: this.sort ? false : sub,
         disabled,
-        children: children
-          ? children.map(child => this.normalizeItem(child, fullSlug))
-          : []
+        children: fullSlug === '/components' && this.sort
+          ? normalizedChildren.sort((a, b) => a.label.localeCompare(b.label))
+          : normalizedChildren
       }
     },
     toggleMenu () {
@@ -124,11 +161,6 @@ export default {
   width 100%
   overflow auto
 
-  & >>> .DocSearch
-    margin 0
-    border-radius 6px
-    font inherit
-
   .cn
     margin-left 8px
     opacity 0.7
@@ -137,6 +169,12 @@ export default {
     margin-right 8px
     opacity 0.3
 
+  & >>> .veui-menu-item-label
+    flex-grow 1
+
+  .sort
+    margin-left 8px
+
 .toggle
   display none
 

one/docs/en-US/plugins/alert.md

@@ -31,11 +31,11 @@ The method returns a `Promise` object that is resolved when the alert dialog is
 | `ok` | `function(): Promise<void>` | The function to be called when the "I got it" button is clicked. If the `Promise` returned by this function is resolved, the dialog will be closed, otherwise it will not. |
 ^^^
 
-The `$alert` method also provides the following shortcut methods, which set the `type` option to the corresponding value:
+The `$alert` method also provides the following shortcut methods, which set the `status` option to the corresponding value:
 
 | Method | Type | Description |
 | -- | -- | -- |
-| `success` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "success" style. |
-| `warn` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "warning" style. |
-| `info` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "info" style. |
-| `error` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "error" style. |
+| `success` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "success" status. |
+| `warn` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "warning" status. |
+| `info` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "info" status. |
+| `error` | `function(content, title, options): Promise<void>` | Shows an alert dialog with the "error" status. |

one/docs/en-US/plugins/toast.md

@@ -18,19 +18,19 @@ After installing, this plugin will provide a `$toast` object on all component in
 | `message` | `string` | The text content displayed in the message popup. |
 | `options` | `Object` | [^options] |
 
-^^^ref
+^^^options
 | Name | Type | Default | Description |
 | -- | -- | -- | -- |
 | `status` | `string` | `'info'` | The type of message, can be `'success'` / `'warning'` / `'info'` / `'error'`. |
 | `type` | `string` | `'info'` | Deprecated. Please use the `status` property instead. |
 | `duration` | `number` | `3000` | Sets the duration in milliseconds before the message disappears. |
 ^^^
 
-The `$toast` method also provides the following shortcut methods, which will set the `type` value of `options` to the corresponding type:
+The `$toast` method also provides the following shortcut methods, which will set the `status` value of `options` to the corresponding value:
 
 | Method Name | Type | Description |
 | -- | -- | -- |
-| `success` | `function(message, options): void` | Displays a message with the "success" style. |
-| `warn` | `function(message, options): void` | Displays a message with the "warning" style. |
-| `info` | `function(message, options): void` | Displays a message with the "normal message" style. |
-| `error` | `function(message, options): void` | Displays a message with the "error" style. |
+| `success` | `function(message, options): void` | Displays a message with the "success" status. |
+| `warn` | `function(message, options): void` | Displays a message with the "warning" status. |
+| `info` | `function(message, options): void` | Displays a message with the "normal message" status. |
+| `error` | `function(message, options): void` | Displays a message with the "error" status. |

one/docs/plugins/alert.md

@@ -31,11 +31,11 @@ Vue.use($alert)
 | `ok` | `function(): Promise<void>` | 点击“知道了”按钮后调用。如果该函数返回的 `Promise` 被 resolve，则弹框会被关闭，否则不会关闭。 |
 ^^^
 
-`$alert` 方法上还提供如下快捷方法，将把 `options` 中的 `type` 指定为对应类型值：
+`$alert` 方法上还提供如下快捷方法，将把 `options` 中的 `status` 指定为对应状态值：
 
 | 方法名 | 类型 | 描述 |
 | -- | -- | -- |
-| `success` | `function(content, title, options): Promise<void>` | 展示“成功”样式的弹框。 |
-| `warn` | `function(content, title, options): Promise<void>` | 展示“警告”样式的弹框。 |
-| `info` | `function(content, title, options): Promise<void>` | 展示“普通消息”样式的弹框。 |
-| `error` | `function(content, title, options): Promise<void>` | 展示“错误”样式的弹框。 |
+| `success` | `function(content, title, options): Promise<void>` | 展示“成功”状态的弹框。 |
+| `warn` | `function(content, title, options): Promise<void>` | 展示“警告”状态的弹框。 |
+| `info` | `function(content, title, options): Promise<void>` | 展示“普通消息”状态的弹框。 |
+| `error` | `function(content, title, options): Promise<void>` | 展示“错误”状态的弹框。 |

one/docs/plugins/toast.md

@@ -26,11 +26,11 @@ Vue.use(toast)
 | `duration` | `number` | `3000` |  设置消息经过指定的毫秒数之后消失。 |
 ^^^
 
-`$toast` 方法上还提供如下快捷方法，将把 `options` 中的 `type` 指定为对应类型值：
+`$toast` 方法上还提供如下快捷方法，将把 `options` 中的 `status` 指定为对应状态值：
 
 | 方法名 | 类型 | 描述 |
 | -- | -- | -- |
-| `success` | `function(message, options): void` | 展示“成功”样式的消息。 |
-| `warn` | `function(message, options): void` | 展示“警告”样式的消息。 |
-| `info` | `function(message, options): void` | 展示“普通消息”样式的消息。 |
-| `error` | `function(message, options): void` | 展示“错误”样式的消息。 |
+| `success` | `function(message, options): void` | 展示“成功”状态的消息。 |
+| `warn` | `function(message, options): void` | 展示“警告”状态的消息。 |
+| `info` | `function(message, options): void` | 展示“普通消息”状态的消息。 |
+| `error` | `function(message, options): void` | 展示“错误”状态的消息。 |

plugins/l10n.js

@@ -32,6 +32,28 @@ i18n.register(
   }
 )
 
+i18n.register(
+  'zh-Hans',
+  {
+    sort: '按字母顺序排列',
+    unsort: '取消排列'
+  },
+  {
+    ns: 'onemenu'
+  }
+)
+
+i18n.register(
+  'en-US',
+  {
+    sort: 'Sort by alphabetical oder',
+    unsort: 'Unsort'
+  },
+  {
+    ns: 'onemenu'
+  }
+)
+
 i18n.register(
   'zh-Hans',
   {