add menu

components/menu/src/Menu.vue

@@ -31,10 +31,10 @@ const Menu = {
     let openKeys = props.defaultOpenKeys
     selectedKeys = props.selectedKeys || []
     openKeys = props.openKeys || []
+    this.isRootMenu = true
     return {
       selectedKeys,
       openKeys,
-      isRootMenu: true,
     }
   },
   watch: {

components/menu/src/MenuItem.vue

@@ -1,5 +1,5 @@
 <script>
-import PropTypes from 'vue-types'
+import PropTypes from '../../_util/vue-types'
 import KeyCode from '../../_util/KeyCode'
 
 const MenuItem = {
@@ -136,7 +136,7 @@ const MenuItem = {
     const liProps = {
       attrs,
       on: {
-        mouseEvent,
+        ...mouseEvent,
       },
     }
     return (

components/menu/src/MenuItemGroup.vue

@@ -1,5 +1,5 @@
 <script>
-import PropTypes from 'vue-types'
+import PropTypes from '../../_util/vue-types'
 
 const MenuItemGroup = {
   name: 'MenuItemGroup',

components/menu/src/SubMenu.vue

@@ -1,10 +1,7 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-import createReactClass from 'create-react-class'
-import Trigger from 'rc-trigger'
-import KeyCode from 'rc-util/lib/KeyCode'
-import classNames from 'classnames'
+<script>
+import PropTypes from '../../_util/vue-types'
+import Trigger from '../../trigger'
+import KeyCode from '../../_util/KeyCode'
 import SubPopupMenu from './SubPopupMenu'
 import placements from './placements'
 import { noop, loopMenuItemRecusively } from './util'
@@ -18,10 +15,10 @@ const popupPlacementMap = {
   'vertical-right': 'leftTop',
 }
 
-const SubMenu = createReactClass({
-  displayName: 'SubMenu',
+const SubMenu = {
+  name: 'SubMenu',
 
-  propTypes: {
+  props: {
     parentMenu: PropTypes.object,
     title: PropTypes.node,
     children: PropTypes.any,
@@ -78,7 +75,7 @@ const SubMenu = createReactClass({
       if (!this.subMenuTitle || !this.menuInstance) {
         return
       }
-      const popupMenu = ReactDOM.findDOMNode(this.menuInstance)
+      const popupMenu = this.$refs.menuInstance.$el
       if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
         return
       }
@@ -311,7 +308,7 @@ const SubMenu = createReactClass({
   },
 
   renderChildren (children) {
-    const props = this.props
+    const props = this.$props
     const baseProps = {
       mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
       visible: this.isOpen(),
@@ -346,17 +343,18 @@ const SubMenu = createReactClass({
   },
 
   render () {
-    const props = this.props
+    const props = this.$props
     const isOpen = this.isOpen()
     const prefixCls = this.getPrefixCls()
     const isInlineMode = props.mode === 'inline'
-    const className = classNames(prefixCls, `${prefixCls}-${props.mode}`, {
-      [props.className]: !!props.className,
+    const className = {
+      prefixCls: true,
+      [`${prefixCls}-${props.mode}`]: true,
       [this.getOpenClassName()]: isOpen,
       [this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
       [this.getDisabledClassName()]: props.disabled,
       [this.getSelectedClassName()]: this.isChildrenSelected(),
-    })
+    }
 
     if (!this._menuId) {
       if (props.eventKey) {
@@ -391,9 +389,9 @@ const SubMenu = createReactClass({
     }
     const title = (
       <div
-        ref={this.saveSubMenuTitle}
+        ref='subMenuTitle'
         style={style}
-        className={`${prefixCls}-title`}
+        class={`${prefixCls}-title`}
         {...titleMouseEvents}
         {...titleClickEvents}
         aria-expanded={isOpen}
@@ -402,7 +400,7 @@ const SubMenu = createReactClass({
         title={typeof props.title === 'string' ? props.title : undefined}
       >
         {props.title}
-        <i className={`${prefixCls}-arrow`} />
+        <i class={`${prefixCls}-arrow`} />
       </div>
     )
     const children = this.renderChildren(props.children)
@@ -412,7 +410,7 @@ const SubMenu = createReactClass({
     const popupPlacement = popupPlacementMap[props.mode]
     const popupClassName = props.mode === 'inline' ? '' : props.popupClassName
     return (
-      <li {...mouseEvents} className={className} style={props.style}>
+      <li {...mouseEvents} class={className}>
         {isInlineMode && title}
         {isInlineMode && children}
         {!isInlineMode && (
@@ -436,8 +434,9 @@ const SubMenu = createReactClass({
       </li>
     )
   },
-})
+}
 
 SubMenu.isSubMenu = 1
 
 export default SubMenu
+</script>

components/menu/src/SubPopupMenu.vue

@@ -1,12 +1,10 @@
-import PropTypes from 'vue-types'
-import createReactClass from 'create-react-class'
-import Animate from 'rc-animate'
+<script>
+import PropTypes from '../../_util/vue-types'
 import MenuMixin from './MenuMixin'
 
-const SubPopupMenu = createReactClass({
-  displayName: 'SubPopupMenu',
-
-  propTypes: {
+export default {
+  name: 'SubPopupMenu',
+  props: {
     onSelect: PropTypes.func,
     onClick: PropTypes.func,
     onDeselect: PropTypes.func,
@@ -22,34 +20,34 @@ const SubPopupMenu = createReactClass({
   mixins: [MenuMixin],
 
   onDeselect (selectInfo) {
-    this.props.onDeselect(selectInfo)
+    this.$emit('deselect', selectInfo)
   },
 
   onSelect (selectInfo) {
-    this.props.onSelect(selectInfo)
+    this.$emit('select', selectInfo)
   },
 
   onClick (e) {
-    this.props.onClick(e)
+    this.$emit('click', e)
   },
 
   onOpenChange (e) {
-    this.props.onOpenChange(e)
+    this.$emit('openChange', e)
   },
 
   onDestroy (key) {
-    this.props.onDestroy(key)
+    this.$$emit('destroy', key)
   },
 
   getOpenTransitionName () {
-    return this.props.openTransitionName
+    return this.$props.openTransitionName
   },
 
   renderMenuItem (c, i, subIndex) {
     if (!c) {
       return null
     }
-    const props = this.props
+    const props = this.$props
     const extraProps = {
       openKeys: props.openKeys,
       selectedKeys: props.selectedKeys,
@@ -59,7 +57,7 @@ const SubPopupMenu = createReactClass({
   },
 
   render () {
-    const props = { ...this.props }
+    const props = { ...this.$props }
 
     const haveRendered = this.haveRendered
     this.haveRendered = true
@@ -93,6 +91,5 @@ const SubPopupMenu = createReactClass({
       </Animate>
     )
   },
-})
-
-export default SubPopupMenu
+}
+</script>