add keydown

components/_util/cloneElement.js

@@ -1,8 +0,0 @@
-export default (node, nodeProps) => {
-  const { props, style, class: cls, attrs, key } = nodeProps
-  if (node.componentOptions) {
-    const propsData = node.componentOptions.propsData
-    Object.assign(propsData, nodeProps)
-  }
-  return node
-}

components/_util/vnode.js

@@ -78,11 +78,18 @@ export function cloneElement (n, nodeProps, clone) {
   const { style = data.style,
     class: cls = data.class,
     attrs = data.attrs,
+    ref,
   } = nodeProps
   node.data = Object.assign(data, { style, attrs, class: cls, on: { ...(data.on || {}), ...on }})
   if (key !== undefined) {
     node.key = key
     node.data.key = key
   }
+  if (typeof ref === 'string') {
+    node.data.ref = ref
+  }
   return node
 }
+export function getComponentName (opts) {
+  return opts && (opts.Ctor.options.name || opts.tag)
+}

components/menu/demo/antd.vue

@@ -1,8 +1,6 @@
 <script>
-import { cloneElement } from '../../_util/vnode'
 import Clone from '../../_util/Clone'
 import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
-import { Icon } from 'antd'
 import animate from 'css-animation'
 
 function handleSelect (info) {
@@ -74,17 +72,16 @@ export default {
         </SubMenu>
       </SubMenu>
     </SubMenu>)
-
+    const onOpenChange = (value) => {
-    function onOpenChange (value) {
+      console.log('onOpenChange', value, this.$refs)
-      console.log('onOpenChange', value)
     }
     const commonMenu = () => (
       <Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
-        <SubMenu key='1' title={<span>sub menu</span>}>
+        <SubMenu ref='test' key='1' title={<span>sub menu</span>}>
           <MenuItem key='1-1'>
           0-1
           </MenuItem>
-          <MenuItem key='1-2'>0-2</MenuItem>
+          <MenuItem key='1-2' disabled>0-2</MenuItem>
         </SubMenu>
         {nestSubMenu()}
         <MenuItem key='2'>1</MenuItem>
@@ -130,6 +127,7 @@ export default {
           <div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
             mode: 'inline',
             defaultOpenKeys: ['1'],
+            defaultSelectedKeys: ['1-2', '4-1'],
             openAnimation: animation,
           }} >
             {commonMenu()}

components/menu/src/DOMWrap.vue

@@ -33,6 +33,7 @@ export default {
     const Tag = this.$props.tag
     const tagProps = {
       attr: { ...otherProps, ...this.$attrs },
+      on: this.$listeners,
     }
     return <Tag {...tagProps} class={this.class}>{this.$slots.default}</Tag>
   },

components/menu/src/Menu.vue

@@ -163,7 +163,7 @@ const Menu = {
       const { sOpenKeys } = this.$data
       if (sOpenKeys.length) {
         lastOpen = this.getFlatInstanceArray().filter((c) => {
-          return c && sOpenKeys.indexOf(c.props.eventKey) !== -1
+          return c && sOpenKeys.indexOf(c.eventKey) !== -1
         })
       }
       return lastOpen[0]

components/menu/src/MenuItem.vue

@@ -14,6 +14,7 @@ const MenuItem = {
     selectedKeys: PropTypes.array,
     disabled: PropTypes.bool,
     title: PropTypes.string,
+    index: PropTypes.number,
     inlineIndent: PropTypes.number.def(24),
     level: PropTypes.number.def(1),
     mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),

components/menu/src/MenuMixin.js

@@ -9,10 +9,8 @@ function allDisabled (arr) {
   if (!arr.length) {
     return true
   }
-
   return arr.every(c => {
-    const propsData = c.componentOptions.propsData || {}
+    return !!c.disabled
-    return !!propsData.disabled
   })
 }
 
@@ -53,10 +51,6 @@ export default {
       deep: true,
     },
   },
-
-  created () {
-    this.instanceArray = []
-  },
   methods: {
     getActiveKey (originalActiveKey) {
       let activeKey = originalActiveKey
@@ -86,23 +80,13 @@ export default {
       }
       return activeKey
     },
-    saveRef (index, subIndex, c) {
-      if (c) {
-        if (subIndex !== undefined) {
-          this.instanceArray[index] = this.instanceArray[index] || []
-          this.instanceArray[index][subIndex] = c
-        } else {
-          this.instanceArray[index] = c
-        }
-      }
-    },
     // all keyboard events callbacks run from here at first
-    onKeyDown (e, callback) {
+    onKeyDown (e) {
       const keyCode = e.keyCode
       let handled
       this.getFlatInstanceArray().forEach((obj) => {
-        if (obj && obj.$props.active) {
+        if (obj && obj.active) {
-          handled = this.$emit('keydown', e)
+          handled = obj.onKeyDown(e)
         }
       })
       if (handled) {
@@ -115,15 +99,11 @@ export default {
       if (activeItem) {
         e.preventDefault()
         this.setState({
-          sActiveKey: activeItem.$props.eventKey,
+          sActiveKey: activeItem.eventKey,
         }, () => {
           scrollIntoView(activeItem.$el, this.$el, {
             onlyScrollIfNeeded: true,
           })
-          // https://github.com/react-component/menu/commit/9899a9672f6f028ec3cdf773f1ecea5badd2d33e
-          if (typeof callback === 'function') {
-            callback(activeItem)
-          }
         })
         return 1
       } else if (activeItem === undefined) {
@@ -143,22 +123,13 @@ export default {
     },
 
     getFlatInstanceArray () {
-      let instanceArray = this.instanceArray
+      let instance = []
-      const hasInnerArray = instanceArray.some((a) => {
+      try {
-        return Array.isArray(a)
+        instance = this.$children[0].$children || []
-      })
+      } catch (error) {
-      if (hasInnerArray) {
+
-        instanceArray = []
-        this.instanceArray.forEach((a) => {
-          if (Array.isArray(a)) {
-            instanceArray.push.apply(instanceArray, a)
-          } else {
-            instanceArray.push(a)
-          }
-        })
-        this.instanceArray = instanceArray
       }
-      return instanceArray
+      return instance
     },
 
     renderCommonMenuItem (child, i, subIndex, extraProps) {
@@ -175,7 +146,6 @@ export default {
           renderMenuItem: this.renderMenuItem,
           rootPrefixCls: props.prefixCls,
           index: i,
-          // parentMenu: this,
           eventKey: key,
           active: !childProps.disabled && isActive,
           multiple: props.multiple,
@@ -195,11 +165,7 @@ export default {
           destroy: this.onDestroy,
           select: this.onSelect,
         },
-        // ref: childProps.disabled ? undefined : child.ref,
-        // ref: childProps.disabled ? undefined
-        //  : createChainedFunction(child.ref, saveRef.bind(this, i, subIndex)),
       }
-      // !childProps.disabled && this.saveRef(i, subIndex, child.ref)
       if (props.mode === 'inline') {
         newChildProps.props.triggerSubMenuAction = 'click'
       }
@@ -210,7 +176,6 @@ export default {
     },
 
     renderRoot (props, children = []) {
-      this.instanceArray = []
       const className = {
         [props.prefixCls]: true,
         [props.class]: true,
@@ -236,7 +201,7 @@ export default {
         domProps.attrs.tabIndex = '0'
         domProps.on.keydown = this.onKeyDown
       }
-      const newChildren = children.map(this.renderMenuItem)
+      const newChildren = children.map((c, i) => this.renderMenuItem(c, i))
       return (
         <DOMWrap
           {...domProps}
@@ -259,8 +224,7 @@ export default {
       // find current activeIndex
       let activeIndex = -1
       children.every((c, ci) => {
-        const propsData = c.componentOptions.propsData || {}
+        if (c && c.eventKey === sActiveKey) {
-        if (c && propsData.eventKey === sActiveKey) {
           activeIndex = ci
           return false
         }
@@ -275,8 +239,7 @@ export default {
       let i = start
       for (; ;) {
         const child = children[i]
-        const propsData = child.componentOptions.propsData || {}
+        if (!child || child.disabled) {
-        if (!child || propsData.disabled) {
           i = (i + 1 + len) % len
           // complete a loop
           if (i === start) {

components/menu/src/SubMenu.vue

@@ -31,6 +31,7 @@ export default {
     multiple: PropTypes.bool,
     active: PropTypes.bool, // TODO: remove
     isRootMenu: PropTypes.bool,
+    index: PropTypes.number,
     // onItemHover: PropTypes.func,
     // onSelect: PropTypes.func,
     triggerSubMenuAction: PropTypes.string,
@@ -100,7 +101,7 @@ export default {
 
     onKeyDown (e) {
       const keyCode = e.keyCode
-      const menu = this.menuInstance
+      const menu = this.$refs.menuInstance
       const isOpen = this.isOpen()
 
       if (keyCode === KeyCode.ENTER) {

components/trigger/index.vue

@@ -258,7 +258,6 @@ export default {
     },
 
     getRootDomNode () {
-      console.log('this.$el.children', this.$el.children)
       return this.$el.children ? this.$el.children[0] : this.$el
     },
 

package.json

@@ -67,16 +67,16 @@
     "style-loader": "^0.18.2",
     "stylelint": "^8.1.1",
     "stylelint-config-standard": "^17.0.0",
-    "vue": "^2.4.4",
     "vue-loader": "^13.0.5",
     "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.4.4",
+    "vue-template-compiler": "^2.5.13",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {
     "add-dom-event-listener": "^1.0.2",
     "css-animation": "^1.4.1",
+    "dom-align": "^1.6.6",
     "dom-scroll-into-view": "^1.2.1",
     "eslint-plugin-vue": "^3.13.0",
     "lodash.clonedeep": "^4.5.0",