From facb9c8190c3fdabe25610b69b48ff9997617ebc Mon Sep 17 00:00:00 2001
From: Kyle He <599316527@users.noreply.github.com>
Date: Thu, 3 Dec 2020 10:30:05 +0800
Subject: [PATCH] docs: add size demo for Dialog; sort component list by
 alphabetic order (#3)

---
 common/i18n.js                |  2 +-
 common/nav.js                 | 15 ++++++++
 layouts/default.vue           |  2 +-
 one/docs/components/dialog.md |  4 +++
 one/docs/demo/dialog/size.vue | 66 +++++++++++++++++++++++++++++++++++
 5 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 common/nav.js
 create mode 100644 one/docs/demo/dialog/size.vue

diff --git a/common/i18n.js b/common/i18n.js
index 19433f8..143ea28 100644
--- a/common/i18n.js
+++ b/common/i18n.js
@@ -1,5 +1,5 @@
 import { compact, find } from 'lodash'
-import nav from '../assets/data/nav.json'
+import nav from './nav'
 
 export const LOCALES = [
   {
diff --git a/common/nav.js b/common/nav.js
new file mode 100644
index 0000000..3510057
--- /dev/null
+++ b/common/nav.js
@@ -0,0 +1,15 @@
+import { entries, sortBy } from 'lodash'
+import nav from '../assets/data/nav.json'
+
+export default entries(nav).reduce(function (ret, [lang, items]) {
+  ret[lang] = items.map(function (item) {
+    if (!item.children) {
+      return item
+    }
+    return {
+      ...item,
+      children: sortBy(item.children, child => child.title)
+    }
+  })
+  return ret
+}, {})
diff --git a/layouts/default.vue b/layouts/default.vue
index b20dae0..0412227 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,7 +23,7 @@ import OneHeader from '../components/OneHeader'
 import OneMenu from '../components/OneMenu'
 import OneFooter from '../components/OneFooter'
 import OneBackToTop from '../components/OneBackToTop'
-import nav from '../assets/data/nav.json'
+import nav from '../common/nav'
 import i18n from '../common/i18n'
 import i18nMgr from 'veui/managers/i18n'
 
diff --git a/one/docs/components/dialog.md b/one/docs/components/dialog.md
index bbec21c..0adef56 100644
--- a/one/docs/components/dialog.md
+++ b/one/docs/components/dialog.md
@@ -2,6 +2,10 @@
 
 ## 示例
 
+### 尺寸与全屏
+
+[[ demo src="/demo/dialog/size.vue" ]]
+
 ### 模态与非模态
 
 [[ demo src="/demo/dialog/modal.vue" ]]
diff --git a/one/docs/demo/dialog/size.vue b/one/docs/demo/dialog/size.vue
new file mode 100644
index 0000000..6d25acc
--- /dev/null
+++ b/one/docs/demo/dialog/size.vue
@@ -0,0 +1,66 @@
+<template>
+<article>
+  <veui-button @click="openDialog('s')">
+    s
+  </veui-button>
+  <veui-button @click="openDialog('m')">
+    m
+  </veui-button>
+  <veui-button @click="openDialog('narrow')">
+    narrow
+  </veui-button>
+  <veui-button @click="openDialog('medium')">
+    medium
+  </veui-button>
+  <veui-button @click="openDialog('wide')">
+    wide
+  </veui-button>
+  <veui-button @click="openDialog('fullscreen')">
+    fullscreen
+  </veui-button>
+  <veui-button @click="openDialog('auto')">
+    auto
+  </veui-button>
+  <veui-dialog
+    title="System"
+    :ui="ui"
+    :open.sync="open"
+  >
+    <p>Current UI: "{{ ui }}"</p>
+    <p v-if="ui === 's' || ui === 'm'">
+      <veui-button>Button size: {{ ui }}</veui-button>
+      <veui-switch>{{ ui }}</veui-switch>
+    </p>
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button, Switch } from 'veui'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    'veui-button': Button,
+    'veui-switch': Switch
+  },
+  data () {
+    return {
+      open: false,
+      ui: null
+    }
+  },
+  methods: {
+    openDialog (size) {
+      this.ui = size
+      this.open = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>