feat(sidenav): The menu was renamed sidenav. #89

demo/cases/Menu.vue

@@ -1,100 +1,115 @@
 <template>
- <article class="veui-menu-demo">
- <h1><code>&lt;veui-menu&gt;</code></h1>
- <div class="options-desc">竖向菜单不区分型号</div>
- <div>expanded: {{ expanded }} active: {{ active1 }}
- 外部控制
- <veui-button @click="$router.push('/menu/input')">input</veui-button>
- <veui-button @click="$router.push('/menu/button')">button</veui-button>
- </div>
+ <article class="veui-sidenav-demo">
+ <h1>
+ <code>&lt;veui-sidenav&gt;</code>
+ </h1>
+ <div>expanded: {{ expanded }}</div>
+ <div>active: {{ active1 }}</div>
+ <veui-button
+ @click="$router.push('/sidenav/input')"
+ >跳转到 input</veui-button>
+ <veui-button @click="collapsed = !collapsed">切换展开</veui-button>
  <section>
- <h2>正常样式</h2>
- <veui-menu
- :items="items"
- :active.sync="active1"
- :expanded.sync="expanded"
- collapsible
- :collapsed.sync="collapsed"
- />
+ <h2>尺寸</h2>
+ <div class="options-desc">可选的尺寸
+ <span class="bg-gray-show">ui</span>
+ 属性值：
+ <span class="bg-gray-show">s / m / l</span>
+ </div>
+ <veui-form>
+ <veui-field label="小号[ui=s]" ui="multi">
+ <veui-sidenav
+ class="small-sidenav"
+ ui="s"
+ :items="items"
+ :expanded.sync="expanded"
+ :collapsed.sync="collapsed"
+ />
+ </veui-field>
+ <veui-field label="中号[ui=m]" ui="multi">
+ <veui-sidenav
+ ui="m"
+ :items="items"
+ :active.sync="active1"
+ :expanded.sync="expanded"
+ :collapsed.sync="collapsed"
+ />
+ </veui-field>
+ <veui-field label="大号[ui=l]" ui="multi">
+ <veui-sidenav
+ ui="l"
+ :items="items2"
+ :active.sync="active2"
+ :collapsed.sync="collapsed"
+ />
+ </veui-field>
+ </veui-form>
  </section>
- <br>
  <section>
- <h2>自定义 icon slot</h2>
- <veui-menu
- collapsible
- :items="items"
- >
- <veui-icon
- slot="icon"
- name="home"
- />
- </veui-menu>
+ <h3>更多demo展示</h3>
+ <veui-form>
+ <veui-field label="自定义 icon slot" ui="multi">
+ <veui-sidenav ui="s" :collapsed.sync="collapsed" :items="items">
+ <veui-icon slot="icon" name="baidu"/>
+ </veui-sidenav>
+ </veui-field>
+ </veui-form>
  </section>
  <section>
- <h2>自定义 s型号 icon slot</h2>
- <veui-menu
- ui="s"
- collapsible
- :items="items"
- >
- <veui-icon
- slot="icon"
- name="home"
- />
- </veui-menu>
+ <router-view/>
  </section>
  </article>
 </template>
 
 <script>
-import {Menu, Icon} from 'veui';
+import {Sidenav, Button, Icon, Form, Field} from 'veui';
 import {omit} from 'lodash';
-import 'veui-theme-blue-icons/trophy';
-import 'veui-theme-blue-icons/cloud';
-import 'veui-theme-blue-icons/home';
 import 'veui-theme-blue-icons/gear';
+import 'veui-theme-blue-icons/screen-board';
+import 'veui-theme-blue-icons/flag';
+import 'veui-theme-blue-icons/bill';
+import 'veui-theme-blue-icons/mail';
 
 export default {
- name: 'veui-menu-demo',
+ name: 'veui-sidenav-demo',
  components: {
- 'veui-menu': Menu,
- 'veui-icon': Icon
+ 'veui-sidenav': Sidenav,
+ 'veui-icon': Icon,
+ 'veui-button': Button,
+ 'veui-form': Form,
+ 'veui-field': Field,
  },
  data() {
  let items = [
  {
  label: 'Group One',
  name: 'group-one',
- icon: 'trophy',
+ icon: 'gear',
+ position: 'card',
  children: [
  {
  label: 'Sub One',
  name: 'sub-one',
+ icon: 'flag',
  children: [
  {
  label: 'Input',
- to: '/menu/input'
+ to: '/sidenav/input'
  }
  ]
  },
  {
  label: 'Loading',
  name: 'Loading',
- to: '/menu/loading',
- children: [
- {
- label: 'Switch',
- to: '/menu/switch'
- }
- ]
+ to: '/sidenav/loading'
  }
  ]
  },
  {
  label: 'Button',
  name: 'Button',
- to: '/menu/button',
- icon: 'cloud',
+ to: '/sidenav/button',
+ icon: 'screen-board',
  children: [
  {
  label: 'Disabled',
@@ -104,7 +119,7 @@ export default {
  {
  label: 'Link',
  name: 'Link',
- to: '/menu/link'
+ to: '/sidenav/link'
  }
  ]
  }
@@ -113,25 +128,63 @@ export default {
  {
  label: 'Navigation Three',
  name: 'nav-three',
- icon: 'home',
+ icon: 'flag',
  disabled: true
  },
  {
  label: 'Navigation Four',
  name: 'nav-four',
- icon: 'gear',
+ icon: 'bill',
+ children: [
+ {
+ label: 'Four Sub One',
+ name: 'four-sub-one',
+ children: [
+ {
+ label: 'Switch',
+ to: '/sidenav/switch'
+ }
+ ]
+ },
+ {
+ label: 'Number Input Sub',
+ name: 'number-input-sub',
+ children: [
+ {
+ label: 'NumberInput',
+ name: 'menu-number-input',
+ to: '/sidenav/number-input',
+ children: [
+ {
+ label: 'Schedule',
+ to: '/sidenav/schedule'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: 'Navigation Five',
+ name: 'nav-five',
+ icon: 'mail',
  children: [
  {
  label: 'Progress',
- to: '/menu/progress'
+ to: '/sidenav/progress'
+ },
+ {
+ label: 'Radio',
+ to: '/sidenav/radio'
  }
  ]
  }
  ];
- let items2 = items.map(i => omit(i, 'icon'));
+ let items2 = items.map((i) => omit(i, 'icon'));
  return {
  expanded: [],
- active1: '一级导航',
+ active1: null,
  active2: undefined,
  collapsed: undefined,
  items,
@@ -141,10 +194,14 @@ export default {
 };
 </script>
 
-<style lang="less">
-.veui-menu-demo {
- .small-menu {
+<style lang="less" scoped>
+.veui-sidenav-demo {
+ .small-sidenav {
  height: 300px;
  }
+
+ .veui-button + .veui-button {
+ margin-left: 8px;
+ }
 }
 </style>

demo/cases/index.js

@@ -223,8 +223,8 @@ export default [
  component: Loading
  },
  {
- path: '/menu',
- name: 'Menu',
+ path: '/sidenav',
+ name: 'Sidenav(Menu)',
  component: Menu,
  children: [
  {

src/build/theme.js

@@ -0,0 +1,47 @@
+import {resolve} from 'path';
+import {existsSync, writeFileSync} from 'fs';
+import components from 'veui/components.json';
+
+const themeDir = resolve(__dirname, '..');
+
+// 简单实现
+function kebabCase(str) {
+ return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`).replace(/^-/, '');
+}
+
+function getSortedComponents() {
+ let result = [];
+ components.forEach(({name}) => {
+ if (result.indexOf(name) === -1) {
+ result.push(name);
+ }
+ });
+ return result;
+}
+
+function genThemeIndex(sortedComponents) {
+ const theme = sortedComponents.reduce(
+ (acc, name) => {
+ if (existsSync(`${themeDir}/components/${name}.js`)) {
+ acc.js.push(`import './components/${name}'`);
+ }
+ if (existsSync(`${themeDir}/components/${kebabCase(name)}.less`)) {
+ acc.less.push(`import './components/${kebabCase(name)}.less'`);
+ }
+ return acc;
+ },
+ {js: [], less: []}
+ );
+
+ const content
+ = '// This file is generated automatically by `npm run theme`\n'
+ + theme.js.join('\n')
+ + '\n\n'
+ + `import './common.less'\n`
+ + theme.less.join('\n')
+ + '\n';
+
+ writeFileSync(`${themeDir}/index.js`, content, {encoding: 'utf-8'});
+}
+
+genThemeIndex(getSortedComponents());

src/components/Menu.js → src/components/Sidenav.js

@@ -9,13 +9,14 @@ ui.defaults(
  },
  ui: {
  size: {
- default: 'm',
- inherit: true
+ values: ['s', 'm', 'l'],
+ inherit: true,
+ default: 'm'
  }
  },
  parts: {
  toggle: 'icon'
  }
  },
- 'menu'
+ 'sidenav'
 );