update Menu

update Menu

src/components/menu/menu-group.vue

@@ -1,13 +1,30 @@
 <template>
-
+    <li :class="[prefixCls + '-item-group']">
+        <div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
+        <ul><slot></slot></ul>
+    </li>
 </template>
 <script>
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'MenuGroup',
+        props: {
+            title: {
+                type: String,
+                default: ''
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+
+        }
     }
 </script>

src/components/menu/menu-item.vue

@@ -1,13 +1,42 @@
 <template>
-
+    <li :class="classes" @click.stop="handleClick"><slot></slot></li>
 </template>
 <script>
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'MenuItem',
+        props: {
+            key: {
+                type: [String, Number],
+                required: true
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                active: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`${prefixCls}-item-active`]: this.active,
+                        [`${prefixCls}-item-selected`]: this.active,
+                        [`${prefixCls}-item-disabled`]: this.disabled
+                    }
+                ]
+            }
+        },
+        methods: {
+            handleClick () {
+                this.$dispatch('on-menu-item-select', this.key);
+            }
+        }
     }
 </script>

src/components/menu/menu.vue

@@ -1,13 +1,93 @@
 <template>
-
+    <ul :class="classes"><slot></slot></ul>
 </template>
 <script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        props: {
+            mode: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'vertical'
+            },
+            theme: {
+                validator (value) {
+                    return oneOf(value, ['light', 'dark', 'primary']);
+                },
+                default: 'light'
+            },
+            activeKey: {
+                type: [String, Number]
+            },
+            openKeys: {
+                type: Array
+            },
+            accordion: {
+                type: Boolean,
+                default: false
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.mode}`]: this.mode,
+                        [`${prefixCls}-${this.theme}`]: this.theme
+                    }
+                ]
+            }
+        },
+        methods: {
+            updateActiveKey () {
+                this.$children.forEach((item, index) => {
+                    if (!this.activeKey && index === 0) this.activeKey = item.key;
+
+                    if (item.$options.name === 'Submenu') {
+                        item.active = false;
+                        item.$children.forEach(subitem => {
+                            if (subitem.$options.name === 'MenuGroup') {
+                                subitem.$children.forEach(groupItem => {
+                                    if (groupItem.key === this.activeKey) {
+                                        groupItem.active = true;
+                                        groupItem.$parent.$parent.active = true;
+                                    } else {
+                                        groupItem.active = false;
+                                    }
+                                })
+                            } else {
+                                if (subitem.key === this.activeKey) {
+                                    subitem.active = true;
+                                    subitem.$parent.active = true;
+                                } else {
+                                    subitem.active = false;
+                                }
+                            }
+                        })
+                    } else {
+                        item.active = item.key === this.activeKey;
+                    }
+                })
+            }
+        },
+        compiled () {
+            this.updateActiveKey();
+        },
+        events: {
+            'on-menu-item-select' (key) {
+                this.activeKey = key;
+                this.updateActiveKey();
+                this.$emit('on-select', key);
+            }
+        }
     }
 </script>

src/components/menu/submenu.vue

@@ -1,13 +1,84 @@
 <template>
-
+    <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+        <div :class="[prefixCls + '-title']" v-el:reference>
+            <span><slot name="title"></slot></span>
+            <Icon type="ios-arrow-down"></Icon>
+        </div>
+        <ul :class="[prefixCls]" v-if="mode === 'vertical'"></ul>
+        <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
+    </li>
 </template>
 <script>
+    import Drop from '../select/dropdown.vue';
+    import Icon from '../icon/icon.vue';
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'Submenu',
+        components: { Icon, Drop },
+        props: {
+            key: {
+                type: [String, Number],
+                required: true
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                prefixCls: prefixCls,
+                active: false,
+                opened: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-submenu`,
+                    {
+                        [`${prefixCls}-item-active`]: this.active,
+                        [`${prefixCls}-opened`]: this.opened
+                    }
+                ]
+            },
+            mode () {
+                return this.$parent.mode;
+            }
+        },
+        methods: {
+            handleMouseenter () {
+                if (this.mode === 'vertical') return;
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.opened = true;
+                }, 250);
+            },
+            handleMouseleave () {
+                if (this.mode === 'vertical') return;
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.opened = false;
+                }, 150);
+            }
+        },
+        watch: {
+            mode (val) {
+                if (val === 'horizontal') {
+                    this.$refs.drop.update();
+                }
+            },
+            opened (val) {
+                if (this.mode === 'vertical') return;
+                if (val) {
+                    this.$refs.drop.update();
+                } else {
+                    this.$refs.drop.destroy();
+                }
+            }
+        },
+        events: {
+            'on-menu-item-select' () {
+                this.opened = false;
+                return true;
+            }
+        }
     }
 </script>