fix

components/_util/hasProp.js

@@ -1,5 +0,0 @@
-export default (instance, prop) => {
-  const $options = instance.$options || {}
-  const propsData = $options.propsData || {}
-  return prop in propsData
-}

components/_util/openAnimation.js

@@ -44,9 +44,9 @@ const animation = {
   leave (node, done) {
     return animate(node, false, done)
   },
-  appear (node, done) {
+  // appear (node, done) {
-    return animate(node, true, done)
+  //   return animate(node, true, done)
-  },
+  // },
 }
 
 export default animation

components/align/Align.vue

@@ -39,8 +39,8 @@ export default {
     disabled: PropTypes.bool.def(false),
   },
   data () {
+    this.aligned = false
     return {
-      aligned: false,
     }
   },
   mounted () {
@@ -103,7 +103,6 @@ export default {
       if (!props.disabled) {
         const source = this.$el
         this.aligned = true
-        // this.$emit('align', source, align(source, props.target(), props.align))
         this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align))
       }
     },

components/checkbox/Checkbox.vue

@@ -1,17 +1,3 @@
-<template>
-  <label :class="classes">
-    <span :class="checkboxClass">
-      <input :name="name" type="checkbox" :disabled="disabled"
-        :class="`${prefixCls}-input`" :checked="stateChecked"
-        @change="handleChange"
-        />
-      <span :class="`${prefixCls}-inner`" />
-    </span>
-    <span v-if="hasDefaultSlot">
-      <slot></slot>
-    </span>
-  </label>
-</template>
 <script>
 import hasProp from '../_util/props-util'
 export default {
@@ -33,77 +19,106 @@ export default {
     prop: 'checked',
   },
   inject: {
-    checkboxGroupContext: { default: undefined },
+    checkboxGroupContext: { default: null },
   },
   data () {
     const { checkboxGroupContext, checked, defaultChecked, value } = this
-    let stateChecked
+    let sChecked
-    if (checkboxGroupContext && checkboxGroupContext.checkedStatus) {
+    if (checkboxGroupContext) {
-      stateChecked = checkboxGroupContext.checkedStatus.has(value)
+      sChecked = checkboxGroupContext.sValue.indexOf(value) !== -1
+    } else {
+      sChecked = !hasProp(this, 'checked') ? defaultChecked : checked
     }
     return {
-      stateChecked: stateChecked === undefined
+      sChecked,
-        ? !hasProp(this, 'checked') ? defaultChecked : checked
-        : stateChecked,
     }
   },
   computed: {
-    hasDefaultSlot () {
-      return !!this.$slots.default
-    },
-    classes () {
-      const { prefixCls } = this
-      return {
-        [`${prefixCls}-wrapper`]: true,
-      }
-    },
     checkboxClass () {
-      const { prefixCls, indeterminate, stateChecked, disabled } = this
+      const { prefixCls, indeterminate, sChecked, $props, checkboxGroupContext } = this
+      let disabled = $props.disabled
+      if (checkboxGroupContext) {
+        disabled = disabled || checkboxGroupContext.disabled
+      }
       return {
         [`${prefixCls}`]: true,
-        [`${prefixCls}-checked`]: stateChecked,
+        [`${prefixCls}-checked`]: sChecked,
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-indeterminate`]: indeterminate,
       }
     },
   },
-  mounted () {
-  },
   methods: {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked, checkboxGroupContext, stateChecked } = this
+      const { name, value, checked, checkboxGroupContext, sChecked } = this
-      if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.value === undefined)) {
+      if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.sValue === undefined)) {
-        this.stateChecked = targetChecked
+        this.sChecked = targetChecked
       }
       const target = {
         name,
         value,
-        checked: !stateChecked,
+        checked: !sChecked,
-      }
-      if (this.checkboxGroupContext) {
-        this.checkboxGroupContext.handleChange({ target })
-      } else {
-        this.$emit('change', {
-          target,
-          stopPropagation () {
-            event.stopPropagation()
-          },
-          preventDefault () {
-            event.preventDefault()
-          },
-        })
       }
+      this.$emit('change', {
+        target,
+        stopPropagation () {
+          event.stopPropagation()
+        },
+        preventDefault () {
+          event.preventDefault()
+        },
+      })
+    },
+    onMouseEnter (e) {
+      this.$emit('mouseenter', e)
+    },
+    onMouseLeave (e) {
+      this.$emit('mouseleave', e)
+    },
+    focus () {
+      this.$refs.input.focus()
+    },
+    blur () {
+      this.$refs.input.blur()
     },
   },
   watch: {
     checked (val) {
-      this.stateChecked = val
+      this.sChecked = val
     },
-    'checkboxGroupContext.checkedStatus': function (checkedStatus) {
+    'checkboxGroupContext.sValue': function (val) {
-      this.stateChecked = checkedStatus.has(this.value)
+      this.sChecked = val.indexOf(this.value) !== -1
     },
   },
+  render () {
+    const { $props: props, checkboxGroupContext, checkboxClass, name, $slots, sChecked } = this
+    const {
+      prefixCls,
+    } = props
+    let disabled = props.disabled
+    let onChange = this.handleChange
+    if (checkboxGroupContext) {
+      onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
+      disabled = props.disabled || checkboxGroupContext.disabled
+    }
+    return (
+      <label
+        class={`${prefixCls}-wrapper`}
+        onMouseenter={this.onMouseEnter}
+        onMouseleave={this.onMouseLeave}
+      >
+        <span class={checkboxClass}>
+          <input name={name} type='checkbox' disabled={disabled}
+            class={`${prefixCls}-input`} checked={sChecked}
+            onChange={onChange} ref='input'
+          />
+          <span class={`${prefixCls}-inner`} />
+        </span>
+        {$slots.default ? <span>{$slots.default}</span> : null}
+      </label>
+    )
+  },
 }
 </script>

components/checkbox/Group.vue

@@ -1,11 +1,3 @@
-<template>
-  <div :class="`${prefixCls}`">
-    <Checkbox v-for="item in checkOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
-      {{item.label}}
-    </Checkbox>
-    <slot v-if="checkOptions.length === 0"></slot>
-  </div>
-</template>
 <script>
 import Checkbox from './Checkbox.vue'
 import hasProp from '../_util/props-util'
@@ -41,52 +33,84 @@ export default {
   data () {
     const { value, defaultValue } = this
     return {
-      stateValue: value || defaultValue,
+      sValue: value || defaultValue,
     }
   },
-  computed: {
-    checkedStatus () {
-      return new Set(this.stateValue)
-    },
-    checkOptions () {
-      const { disabled } = this
-      return this.options.map(option => {
-        return typeof option === 'string'
-          ? { label: option, value: option }
-          : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
-      })
-    },
-  },
   methods: {
     handleChange (event) {
       const target = event.target
       const { value: targetValue, checked } = target
-      const { stateValue } = this
+      const { sValue } = this
       let newVal = []
       if (checked) {
-        newVal = [...stateValue, targetValue]
+        newVal = [...sValue, targetValue]
       } else {
-        newVal = [...stateValue]
+        newVal = [...sValue]
         const index = newVal.indexOf(targetValue)
         index >= 0 && newVal.splice(index, 1)
       }
       newVal = [...new Set(newVal)]
       if (!hasProp(this, 'value')) {
-        this.stateValue = newVal
+        this.sValue = newVal
       }
       this.$emit('input', newVal)
       this.$emit('change', newVal)
     },
+    getOptions () {
+      const { options } = this.$props
+      return options.map(option => {
+        if (typeof option === 'string') {
+          return {
+            label: option,
+            value: option,
+          }
+        }
+        return option
+      })
+    },
+    toggleOption (option) {
+      const optionIndex = this.sValue.indexOf(option.value)
+      const value = [...this.sValue]
+      if (optionIndex === -1) {
+        value.push(option.value)
+      } else {
+        value.splice(optionIndex, 1)
+      }
+      if (!hasProp(this, 'value')) {
+        this.sValue = value
+      }
+      this.$emit('input', value)
+      this.$emit('change', value)
+    },
   },
-  mounted () {
+  render () {
+    const { $props: props, $data: state, $slots } = this
+    const { prefixCls, options } = props
+    let children = $slots.default
+    if (options && options.length > 0) {
+      children = this.getOptions().map(option => (
+        <Checkbox
+          key={option.value}
+          disabled={'disabled' in option ? option.disabled : props.disabled}
+          value={option.value}
+          checked={state.sValue.indexOf(option.value) !== -1}
+          onChange={() => this.toggleOption(option)}
+          class={`${prefixCls}-item`}
+        >
+          {option.label}
+        </Checkbox>
+      ))
+    }
+    return (
+      <div class={prefixCls}>
+        {children}
+      </div>
+    )
   },
   watch: {
     value (val) {
-      this.stateValue = val
+      this.sValue = val
     },
   },
-  components: {
-    Checkbox,
-  },
 }
 </script>

components/menu/MenuItem.vue

@@ -0,0 +1,40 @@
+<script>
+import { Item, itemProps } from './src/index'
+import { getClass, getStyle } from '../_util/vnode'
+import Tooltip from '../tooltip'
+
+export default {
+  props: itemProps,
+  inject: {
+    inlineCollapsed: { default: false },
+  },
+  isMenuItem: 1,
+  methods: {
+    onKeyDown (e) {
+      this.$refs.menuItem.onKeyDown(e)
+    },
+  },
+  render () {
+    const { inlineCollapsed, $props: props, $slots, $attrs: attrs, $listeners } = this
+    const itemProps = {
+      props,
+      attrs,
+      on: $listeners,
+      class: getClass(this),
+      style: getStyle(this),
+    }
+    return <Tooltip
+      placement='right'
+      overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`}
+    >
+      <template slot='title'>
+        {inlineCollapsed && props.level === 1 ? $slots.default : ''}
+      </template>
+      <Item {...itemProps} ref='menuItem'>
+        {$slots.default}
+      </Item>
+    </Tooltip>
+  },
+}
+
+</script>

components/menu/index.vue

@@ -0,0 +1,208 @@
+<script>
+import RcMenu, { Divider, ItemGroup, SubMenu } from '../src'
+import PropTypes from '../util/vue-types'
+import animation from '../_util/openAnimation'
+import warning from '../_util/warning'
+import Item from './MenuItem'
+import { hasProp } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
+
+export const MenuMode = PropTypes.oneOf(['vertical', 'vertical-left', 'vertical-right', 'horizontal', 'inline'])
+
+export const menuProps = {
+  theme: PropTypes.oneOf(['light', 'dark']).def('light'),
+  mode: MenuMode,
+  selectable: PropTypes.bool,
+  selectedKeys: PropTypes.array,
+  defaultSelectedKeys: PropTypes.array,
+  openKeys: PropTypes.array,
+  defaultOpenKeys: PropTypes.array,
+  // onOpenChange: (openKeys: string[]) => void;
+  // onSelect: (param: SelectParam) => void;
+  // onDeselect: (param: SelectParam) => void;
+  // onClick: (param: ClickParam) => void;
+  openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  openTransitionName: PropTypes.string,
+  prefixCls: PropTypes.string.def('ant-menu'),
+  multiple: PropTypes.bool,
+  inlineIndent: PropTypes.number.def(24),
+  inlineCollapsed: PropTypes.bool,
+}
+
+export default {
+  props: menuProps,
+  Divider,
+  Item,
+  SubMenu,
+  ItemGroup,
+  provide () {
+    return {
+      inlineCollapsed: this.getInlineCollapsed(),
+      antdMenuTheme: this.$props.theme,
+    }
+  },
+  mixins: [BaseMixin],
+  inject: {
+    siderCollapsed: { default: undefined },
+    collapsedWidth: { default: undefined },
+  },
+  data () {
+    const props = this.$props
+    warning(
+      !(hasProp(this, 'inlineCollapsed') && props.mode !== 'inline'),
+      '`inlineCollapsed` should only be used when Menu\'s `mode` is inline.',
+    )
+    this.switchModeFromInline = false
+    this.leaveAnimationExecutedWhenInlineCollapsed = false
+    this.inlineOpenKeys = []
+    let sOpenKeys
+    if (hasProp(this, 'defaultOpenKeys')) {
+      sOpenKeys = props.defaultOpenKeys
+    } else if (hasProp(this, 'openKeys')) {
+      sOpenKeys = props.openKeys
+    }
+    return {
+      sOpenKeys,
+    }
+  },
+  methods: {
+    handleClick (e) {
+      this.handleOpenChange([])
+      const { onClick } = this.props
+      if (onClick) {
+        onClick(e)
+      }
+    },
+    handleOpenChange (openKeys) {
+      this.setOpenKeys(openKeys)
+
+      const { onOpenChange } = this.props
+      if (onOpenChange) {
+        onOpenChange(openKeys)
+      }
+    },
+    setOpenKeys (openKeys) {
+      if (!('openKeys' in this.props)) {
+        this.setState({ openKeys })
+      }
+    },
+    getRealMenuMode () {
+      const inlineCollapsed = this.getInlineCollapsed()
+      if (this.switchModeFromInline && inlineCollapsed) {
+        return 'inline'
+      }
+      const { mode } = this.props
+      return inlineCollapsed ? 'vertical' : mode
+    },
+    getInlineCollapsed () {
+      const { inlineCollapsed } = this.props
+      if (this.context.siderCollapsed !== undefined) {
+        return this.context.siderCollapsed
+      }
+      return inlineCollapsed
+    },
+    getMenuOpenAnimation (menuMode) {
+      const { openAnimation, openTransitionName } = this.props
+      let menuOpenAnimation = openAnimation || openTransitionName
+      if (openAnimation === undefined && openTransitionName === undefined) {
+        switch (menuMode) {
+          case 'horizontal':
+            menuOpenAnimation = 'slide-up'
+            break
+          case 'vertical':
+          case 'vertical-left':
+          case 'vertical-right':
+          // When mode switch from inline
+          // submenu should hide without animation
+            if (this.switchModeFromInline) {
+              menuOpenAnimation = ''
+              this.switchModeFromInline = false
+            } else {
+              menuOpenAnimation = 'zoom-big'
+            }
+            break
+          case 'inline':
+            menuOpenAnimation = {
+              ...animation,
+              leave: (node, done: () => void) => animation.leave(node, () => {
+              // Make sure inline menu leave animation finished before mode is switched
+                this.switchModeFromInline = false
+                this.setState({})
+                // when inlineCollapsed change false to true, all submenu will be unmounted,
+                // so that we don't need handle animation leaving.
+                if (this.getRealMenuMode() === 'vertical') {
+                  return
+                }
+                done()
+              }),
+            }
+            break
+          default:
+        }
+      }
+      return menuOpenAnimation
+    },
+  },
+
+  componentWillReceiveProps (nextProps, nextContext) {
+    const { prefixCls } = this.props
+    if (this.props.mode === 'inline' &&
+        nextProps.mode !== 'inline') {
+      this.switchModeFromInline = true
+    }
+    if ('openKeys' in nextProps) {
+      this.setState({ openKeys: nextProps.openKeys })
+      return
+    }
+    if ((nextProps.inlineCollapsed && !this.props.inlineCollapsed) ||
+        (nextContext.siderCollapsed && !this.context.siderCollapsed)) {
+      this.switchModeFromInline =
+        !!this.state.openKeys.length && !!this.$el.querySelectorAll(`.${prefixCls}-submenu-open`).length
+      this.inlineOpenKeys = this.state.openKeys
+      this.setState({ openKeys: [] })
+    }
+    if ((!nextProps.inlineCollapsed && this.props.inlineCollapsed) ||
+        (!nextContext.siderCollapsed && this.context.siderCollapsed)) {
+      this.setState({ openKeys: this.inlineOpenKeys })
+      this.inlineOpenKeys = []
+    }
+  },
+  render () {
+    const { prefixCls, className, theme } = this.props
+    const menuMode = this.getRealMenuMode()
+    const menuOpenAnimation = this.getMenuOpenAnimation(menuMode)
+
+    const menuClassName = {
+      [`${prefixCls}-${theme}`]: true,
+      [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
+    }
+
+    const menuProps = {
+      openKeys: this.state.openKeys,
+      onOpenChange: this.handleOpenChange,
+      className: menuClassName,
+      mode: menuMode,
+    }
+
+    if (menuMode !== 'inline') {
+      // closing vertical popup submenu after click it
+      menuProps.onClick = this.handleClick
+      menuProps.openTransitionName = menuOpenAnimation
+    } else {
+      menuProps.openAnimation = menuOpenAnimation
+    }
+
+    // https://github.com/ant-design/ant-design/issues/8587
+    const { collapsedWidth } = this.context
+    if (
+      this.getInlineCollapsed() &&
+      (collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px')
+    ) {
+      return null
+    }
+
+    return <RcMenu {...this.props} {...menuProps} />
+  },
+}
+
+</script>

components/menu/src/MenuItem.vue

@@ -3,24 +3,23 @@ import PropTypes from '../../_util/vue-types'
 import KeyCode from '../../_util/KeyCode'
 import { noop } from './util'
 import BaseMixin from '../../_util/BaseMixin'
-
+const props = {
+  rootPrefixCls: PropTypes.string,
+  eventKey: PropTypes.string,
+  active: PropTypes.bool,
+  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'),
+  parentMenu: PropTypes.object,
+  clearSubMenuTimers: PropTypes.func.def(noop),
+}
 const MenuItem = {
   name: 'MenuItem',
-
+  props,
-  props: {
-    rootPrefixCls: PropTypes.string,
-    eventKey: PropTypes.string,
-    active: PropTypes.bool,
-    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'),
-    parentMenu: PropTypes.object,
-    clearSubMenuTimers: PropTypes.func.def(noop),
-  },
   inject: {
     parentMenuContext: { default: undefined },
   },
@@ -162,4 +161,5 @@ const MenuItem = {
 }
 
 export default MenuItem
+export { props as menuItemProps }
 </script>

components/menu/src/SubMenu.vue

@@ -18,13 +18,11 @@ const popupPlacementMap = {
 
 export default {
   name: 'SubMenu',
-
   props: {
     mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
     title: PropTypes.any.def(''),
     selectedKeys: PropTypes.array.def([]),
     openKeys: PropTypes.array.def([]),
-    // onClick: PropTypes.func,
     openChange: PropTypes.func.def(noop),
     rootPrefixCls: PropTypes.string,
     eventKey: PropTypes.string,
@@ -32,8 +30,6 @@ export default {
     active: PropTypes.bool, // TODO: remove
     isRootMenu: PropTypes.bool,
     index: PropTypes.number,
-    // onItemHover: PropTypes.func,
-    // onSelect: PropTypes.func,
     triggerSubMenuAction: PropTypes.string,
     popupClassName: PropTypes.string,
     getPopupContainer: PropTypes.func,
@@ -48,6 +44,7 @@ export default {
   },
   inject: {
     parentMenuContext: { default: undefined },
+    antdMenuTheme: { default: 'light' },
   },
   mixins: [BaseMixin],
   isSubMenu: true,
@@ -324,6 +321,7 @@ export default {
 
   render (h) {
     const props = this.$props
+    const { rootPrefixCls, antdMenuTheme } = this
     const isOpen = this.isOpen()
     const prefixCls = this.getPrefixCls()
     const isInlineMode = props.mode === 'inline'
@@ -440,7 +438,7 @@ export default {
         {!isInlineMode && (
           <Trigger
             prefixCls={prefixCls}
-            popupClassName={`${prefixCls}-popup ${popupClassName || ''}`}
+            popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${antdMenuTheme} ${popupClassName || ''}`}
             getPopupContainer={getPopupContainer}
             builtinPlacements={placements}
             popupPlacement={popupPlacement}

components/menu/src/commonPropsType.js

@@ -1,6 +1,6 @@
 import PropTypes from '../../_util/vue-types'
 export default {
-  prefixCls: PropTypes.string.def('rc-menu'),
+  prefixCls: PropTypes.string.def('ant-menu'),
   focusable: PropTypes.bool.def(true),
   multiple: PropTypes.bool,
   defaultActiveFirst: PropTypes.bool,

components/menu/src/index.js

@@ -1,9 +1,9 @@
 import Menu from './Menu'
 import SubMenu from './SubMenu'
-import MenuItem from './MenuItem'
+import MenuItem, { menuItemProps } from './MenuItem'
 import MenuItemGroup from './MenuItemGroup'
 import Divider from './Divider'
 
-export { SubMenu, MenuItem as Item, MenuItem, MenuItemGroup, MenuItemGroup as ItemGroup, Divider }
+export { SubMenu, MenuItem as Item, menuItemProps as itemProps, MenuItem, MenuItemGroup, MenuItemGroup as ItemGroup, Divider }
 
 export default Menu

components/menu/style/dark.less

@@ -0,0 +1,118 @@
+.@{menu-prefix-cls} {
+  // dark theme
+  &-dark,
+  &-dark &-sub {
+    color: @text-color-secondary-dark;
+    background: @menu-dark-bg;
+    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+      opacity: .45;
+      transition: all .3s;
+      &:after,
+      &:before {
+        background: #fff;
+      }
+    }
+  }
+
+  &-dark&-submenu-popup {
+    background: transparent;
+  }
+
+  &-dark &-inline&-sub {
+    background: @menu-dark-submenu-bg;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
+  }
+
+  &-dark&-horizontal {
+    border-bottom-color: @menu-dark-bg;
+  }
+
+  &-dark&-horizontal > &-item,
+  &-dark&-horizontal > &-submenu {
+    border-color: @menu-dark-bg;
+    border-bottom: 0;
+  }
+
+  &-dark &-item,
+  &-dark &-item-group-title,
+  &-dark &-item > a {
+    color: @text-color-secondary-dark;
+  }
+
+  &-dark&-inline,
+  &-dark&-vertical,
+  &-dark&-vertical-left,
+  &-dark&-vertical-right {
+    border-right: 0;
+  }
+
+  &-dark&-inline &-item,
+  &-dark&-vertical &-item,
+  &-dark&-vertical-left &-item,
+  &-dark&-vertical-right &-item {
+    border-right: 0;
+    margin-left: 0;
+    left: 0;
+    &:after {
+      border-right: 0;
+    }
+  }
+
+  &-dark&-inline &-item,
+  &-dark&-inline &-submenu-title {
+    width: 100%;
+  }
+
+  &-dark &-item:hover,
+  &-dark &-item-active,
+  &-dark &-submenu-active,
+  &-dark &-submenu-open,
+  &-dark &-submenu-selected,
+  &-dark &-submenu-title:hover {
+    background-color: transparent;
+    color: #fff;
+    > a {
+      color: #fff;
+    }
+    > .@{menu-prefix-cls}-submenu-title,
+    > .@{menu-prefix-cls}-submenu-title:hover {
+      > .@{menu-prefix-cls}-submenu-arrow {
+        opacity: 1;
+        &:after,
+        &:before {
+          background: #fff;
+        }
+      }
+    }
+  }
+
+  &-dark &-item-selected {
+    border-right: 0;
+    color: #fff;
+    &:after {
+      border-right: 0;
+    }
+    > a,
+    > a:hover {
+      color: #fff;
+    }
+  }
+
+  &&-dark &-item-selected,
+  &-submenu-popup&-dark &-item-selected {
+    background-color: @primary-color;
+  }
+
+  // Disabled state sets text to dark gray and nukes hover/tab effects
+  &-dark &-item-disabled,
+  &-dark &-submenu-disabled {
+    &,
+    > a {
+      opacity: 0.8;
+      color: @disabled-color-dark !important;
+    }
+    > .@{menu-prefix-cls}-submenu-title {
+      color: @disabled-color-dark !important;
+    }
+  }
+}

components/menu/style/index.js

@@ -1,2 +1,5 @@
 import '../../style/index.less'
 import './index.less'
+
+// style dependencies
+import '../../tooltip/style'

components/menu/style/index.less

@@ -1,64 +1,144 @@
-@menuPrefixCls: rc-menu;
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
 
-@font-face {
+@menu-prefix-cls: ~"@{ant-prefix}-menu";
-  font-family: 'FontAwesome';
+@menu-inline-toplevel-item-height: 40px;
-  src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
+@menu-item-height: 40px;
-  src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
 
-.@{menuPrefixCls} {
+// default theme
+.@{menu-prefix-cls} {
+  .reset-component;
   outline: none;
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
-  border: 1px solid #d9d9d9;
+  box-shadow: @box-shadow-base;
-  box-shadow: 0 0 4px #d9d9d9;
+  background: @component-background;
-  border-radius: 3px;
+  line-height: 0; // Fix display inline-block gap
-  color: #666;
+  transition: background .3s, width .2s;
+  .clearfix;
+
+  ul,
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 
   &-hidden {
     display: none;
   }
 
-  &-collapse {
+  &-item-group-title {
-    overflow: hidden;
+    color: @text-color-secondary;
-    &-active {
+    font-size: @font-size-base;
-      overflow: hidden;
+    line-height: @line-height-base;
-      transition: height .3s ease-out;
+    padding: 8px 16px;
+    transition: all .3s;
+  }
+
+  &-submenu,
+  &-submenu-inline {
+    transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
+  }
+
+  &-item:active,
+  &-submenu-title:active {
+    background: @item-active-bg;
+  }
+
+  &-submenu &-sub {
+    cursor: initial;
+    transition: background .3s @ease-in-out, padding .3s @ease-in-out;
+  }
+
+  &-item > a {
+    display: block;
+    color: @text-color;
+    &:hover {
+      color: @primary-color;
+    }
+    &:focus {
+      text-decoration: none;
+    }
+    &:before {
+      position: absolute;
+      background-color: transparent;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      content: '';
     }
   }
 
-  &-item-group-list {
+  &-item-divider {
-    margin: 0;
+    height: 1px;
-    padding: 0;
+    overflow: hidden;
-  }
+    background-color: @border-color-split;
-
+    line-height: 0;
-  &-item-group-title {
-    color: #999;
-    line-height: 1.5;
-    padding: 8px 10px;
-    border-bottom: 1px solid #dedede;
   }
 
+  &-item:hover,
   &-item-active,
-  &-submenu-active > span > &-submenu-title {
+  &:not(&-inline) &-submenu-open,
-    background-color: #eaf8fe;
+  &-submenu-active,
+  &-submenu-title:hover {
+    color: @primary-color;
+  }
+
+  &-horizontal &-item,
+  &-horizontal &-submenu {
+    margin-top: -1px;
+  }
+
+  &-horizontal > &-item:hover,
+  &-horizontal > &-item-active,
+  &-horizontal > &-submenu &-submenu-title:hover {
+    background-color: transparent;
   }
 
   &-item-selected {
-    background-color: #eaf8fe;
+    color: @primary-color;
-    // fix chrome render bug
+    > a,
-    transform: translateZ(0);
+    > a:hover {
+      color: @primary-color;
+    }
   }
 
-  &-submenu-selected {
+  &:not(&-horizontal) &-item-selected {
-    background-color: #eaf8fe;
+    background-color: @item-active-bg;
   }
 
-  & > li&-submenu {
+  &-inline,
+  &-vertical,
+  &-vertical-left {
+    border-right: @border-width-base @border-style-base @border-color-split;
+  }
+  &-vertical-right {
+    border-left: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &-vertical&-sub,
+  &-vertical-left&-sub,
+  &-vertical-right&-sub {
+    border-right: 0;
     padding: 0;
+    transform-origin: 0 0;
+    .@{menu-prefix-cls}-item {
+      border-right: 0;
+      margin-left: 0;
+      left: 0;
+      &:after {
+        border-right: 0;
+      }
+    }
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu {
+      transform-origin: 0 0;
+    }
   }
 
   &-horizontal&-sub,
@@ -66,67 +146,147 @@
   &-vertical-left&-sub,
   &-vertical-right&-sub {
     min-width: 160px;
-    margin-top: 0;
   }
 
-  &-item, &-submenu-title {
+  &-item,
+  &-submenu-title {
+    cursor: pointer;
     margin: 0;
+    padding: 0 20px;
     position: relative;
     display: block;
-    padding: 7px 7px 7px 16px;
     white-space: nowrap;
-
+    transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
-    // Disabled state sets text to gray and nukes hover/tab effects
+    .@{iconfont-css-prefix} {
-    &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
+      min-width: 14px;
-      color: #777 !important;
+      margin-right: 10px;
+      transition: font-size .15s @ease-out, margin .3s @ease-in-out;
+      + span {
+        transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
+        opacity: 1;
+      }
     }
   }
+
   & > &-item-divider {
     height: 1px;
     margin: 1px 0;
     overflow: hidden;
     padding: 0;
     line-height: 0;
-    background-color: #e5e5e5;
+    background-color: @border-color-split;
   }
 
   &-submenu {
     &-popup {
       position: absolute;
+      border-radius: @border-radius-base;
+      z-index: @zindex-dropdown;
     }
-    > .@{menuPrefixCls} {
+
-      background-color: #fff;
+    > .@{menu-prefix-cls} {
+      background-color: @component-background;
+      border-radius: @border-radius-base;
+      &-submenu-title:after {
+        transition: transform .3s @ease-in-out;
+      }
+    }
+
+    &-vertical,
+    &-vertical-left,
+    &-vertical-right,
+    &-inline {
+      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+        transition: transform .3s @ease-in-out;
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        width: 10px;
+        &:before,
+        &:after {
+          content: '';
+          position: absolute;
+          vertical-align: baseline;
+          background: #fff;
+          background-image: linear-gradient(to right, @text-color, @text-color);
+          width: 6px;
+          height: 1.5px;
+          border-radius: 2px;
+          transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
+        }
+        &:before {
+          transform: rotate(45deg) translateY(-2px);
+        }
+        &:after {
+          transform: rotate(-45deg) translateY(2px);
+        }
+      }
+      > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
+        &:after,
+        &:before {
+          background: linear-gradient(to right, @primary-color, @primary-color);
+        }
+      }
+    }
+
+    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+      &:before {
+        transform: rotate(-45deg) translateX(2px);
+      }
+      &:after {
+        transform: rotate(45deg) translateX(-2px);
+      }
+    }
+
+    &-open {
+      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+        transform: translateY(-2px);
+        &:after {
+          transform: rotate(-45deg) translateX(-2px);
+        }
+        &:before {
+          transform: rotate(45deg) translateX(2px);
+        }
+      }
     }
   }
 
-  .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
+  &-vertical &-submenu-selected,
-    .anticon {
+  &-vertical-left &-submenu-selected,
-      width: 14px;
+  &-vertical-right &-submenu-selected {
-      height: 14px;
+    color: @primary-color;
-      margin-right: 8px;
+    > a {
-      top: -1px;
+      color: @primary-color;
     }
   }
 
   &-horizontal {
-    background-color: #F3F5F7;
+    border: 0;
-    border: none;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
-    border-bottom: 1px solid transparent;
-    border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
+    line-height: 46px;
 
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
+    > .@{menu-prefix-cls}-item,
-      padding: 15px 20px;
+    > .@{menu-prefix-cls}-submenu {
-    }
+      position: relative;
-
+      top: 1px;
-    & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
       float: left;
       border-bottom: 2px solid transparent;
 
-      &-active {
+      &:hover,
-        border-bottom: 2px solid #2db7f5;
+      &-active,
-        background-color: #F3F5F7;
+      &-open,
-        color: #2baee9;
+      &-selected {
+        border-bottom: 2px solid @primary-color;
+        color: @primary-color;
+      }
+
+      > a {
+        display: block;
+        color: @text-color;
+        &:hover {
+          color: @primary-color;
+        }
       }
     }
 
@@ -137,169 +297,162 @@
       clear: both;
     }
   }
-  &-inline {
+
-    overflow: hidden;
-  }
   &-vertical,
   &-vertical-left,
   &-vertical-right,
   &-inline {
-    padding: 12px 0;
+    .@{menu-prefix-cls}-item {
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
+      position: relative;
-      padding: 12px 8px 12px 24px;
+      &:after {
-    }
+        content: "";
-    .@{menuPrefixCls}-submenu-arrow {
+        position: absolute;
-      display: inline-block;
+        right: 0;
-      font: normal normal normal 14px/1 FontAwesome;
+        top: 0;
-      font-size: inherit;
+        bottom: 0;
-      vertical-align: baseline;
+        border-right: 3px solid @primary-color;
-      text-align: center;
+        transform: scaleY(.0001);
-      text-transform: none;
+        opacity: 0;
-      text-rendering: auto;
+        transition: transform .15s @ease-out, opacity .15s @ease-out;
-      position: absolute;
-      right: 16px;
-      line-height: 1.5em;
-      &:before {
-        content: "\f0da";
       }
     }
-  }
+
-  &-inline {
+    .@{menu-prefix-cls}-item,
-    .@{menuPrefixCls}-submenu-arrow {
+    .@{menu-prefix-cls}-submenu-title {
-      transform: rotate(90deg);
+      padding: 0 16px;
-      transition: transform .3s;
+      font-size: @font-size-base;
+      line-height: @menu-item-height;
+      height: @menu-item-height;
+      margin-top: 4px;
+      margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
+
-      .@{menuPrefixCls}-submenu-arrow {
+    // disable margin collapsed
-        transform: rotate(-90deg);
+    .@{menu-prefix-cls}-submenu {
-      }
+      padding-bottom: 0.01px;
+    }
+
+    .@{menu-prefix-cls}-item:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      line-height: @menu-inline-toplevel-item-height;
+      height: @menu-inline-toplevel-item-height;
     }
   }
 
-  &-vertical&-sub,
+  &-inline {
-  &-vertical-left&-sub,
+    width: 100%;
-  &-vertical-right&-sub {
+    .@{menu-prefix-cls}-selected,
+    .@{menu-prefix-cls}-item-selected {
+      &:after {
+        transition: transform .15s @ease-in-out, opacity .15s @ease-in-out;
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu-title {
+      width: ~"calc(100% + 1px)";
+    }
+  }
+
+  &-inline-collapsed {
+    width: @menu-collapsed-width;
+    > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      left: 0;
+      text-overflow: clip;
+      padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
+      .@{menu-prefix-cls}-submenu-arrow {
+        display: none;
+      }
+      .@{iconfont-css-prefix} {
+        font-size: 16px;
+        line-height: @menu-item-height;
+        margin: 0;
+        + span {
+          max-width: 0;
+          display: inline-block;
+          opacity: 0;
+        }
+      }
+    }
+    &-tooltip {
+      pointer-events: none;
+      .@{iconfont-css-prefix} {
+        display: none;
+      }
+      a {
+        color: @text-color-dark;
+      }
+    }
+
+    .@{menu-prefix-cls}-item-group-title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+
+  &-item-group-list {
+    margin: 0;
     padding: 0;
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu-title {
+      padding: 0 16px 0 28px;
+    }
+  }
+
+  &-root&-vertical,
+  &-root&-vertical-left,
+  &-root&-vertical-right,
+  &-root&-inline {
+    box-shadow: none;
   }
 
   &-sub&-inline {
     padding: 0;
-    border: none;
+    border: 0;
-    border-radius: 0;
     box-shadow: none;
+    border-radius: 0;
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      line-height: @menu-item-height;
+      height: @menu-item-height;
+      list-style-type: disc;
+      list-style-position: inside;
+    }
 
-    & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
+    & .@{menu-prefix-cls}-item-group-title {
-      padding-top: 8px;
+      padding-left: 32px;
-      padding-bottom: 8px;
-      padding-right: 0;
     }
   }
 
-  .effect() {
+  // Disabled state sets text to gray and nukes hover/tab effects
-    animation-duration: .3s;
+  &-item-disabled,
-    animation-fill-mode: both;
+  &-submenu-disabled {
-    transform-origin: 0 0;
+    color: @disabled-color !important;
-  }
+    cursor: not-allowed;
-
+    background: none;
-  &-open {
+    border-color: transparent !important;
-
+    > a {
-    &-slide-up-enter, &-slide-up-appear {
+      color: @disabled-color !important;
-      .effect();
+      pointer-events: none;
-      opacity: 0;
-      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-      animation-play-state: paused;
     }
-
+    > .@{menu-prefix-cls}-submenu-title {
-    &-slide-up-leave {
+      color: @disabled-color !important;
-      .effect();
+      cursor: not-allowed;
-      opacity: 1;
-      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-      animation-play-state: paused;
-    }
-
-    &-slide-up-enter-active, &-slide-up-appear-active {
-      .effect();
-      animation-name: rcMenuOpenSlideUpIn;
-      animation-play-state: running;
-    }
-
-    &-slide-up-leave-active {
-      .effect();
-      animation-name: rcMenuOpenSlideUpOut;
-      animation-play-state: running;
-    }
-
-    @keyframes rcMenuOpenSlideUpIn {
-      0% {
-        opacity: 0;
-        transform-origin: 0% 0%;
-        transform: scaleY(0);
-      }
-      100% {
-        opacity: 1;
-        transform-origin: 0% 0%;
-        transform: scaleY(1);
-      }
-    }
-
-    @keyframes rcMenuOpenSlideUpOut {
-      0% {
-        opacity: 1;
-        transform-origin: 0% 0%;
-        transform: scaleY(1);
-      }
-      100% {
-        opacity: 0;
-        transform-origin: 0% 0%;
-        transform: scaleY(0);
-      }
-    }
-
-    &-zoom-enter, &-zoom-appear {
-      opacity: 0;
-      .effect();
-      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-      animation-play-state: paused;
-    }
-
-    &-zoom-leave {
-      .effect();
-      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-      animation-play-state: paused;
-    }
-
-    &-zoom-enter-active, &-zoom-appear-active {
-      .effect();
-      animation-name: rcMenuOpenZoomIn;
-      animation-play-state: running;
-    }
-
-    &-zoom-leave-active {
-      .effect();
-      animation-name: rcMenuOpenZoomOut;
-      animation-play-state: running;
-    }
-
-    @keyframes rcMenuOpenZoomIn {
-      0% {
-        opacity: 0;
-        transform: scale(0, 0);
-      }
-      100% {
-        opacity: 1;
-        transform: scale(1, 1);
-      }
-    }
-
-    @keyframes rcMenuOpenZoomOut {
-      0% {
-        transform: scale(1, 1);
-      }
-      100% {
-        opacity: 0;
-        transform: scale(0, 0);
-      }
     }
   }
 }
 
+@import './dark';

components/trigger/Popup.vue

@@ -24,8 +24,8 @@ export default {
     popupClassName: PropTypes.any,
   },
   data () {
+    this.aligned = false
     return {
-      aligned: false,
       destroyPopup: false,
       initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
     }

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const com = pathnameArr[1] || 'button'
   const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/tooltip/demo/${demo}.vue`),
+    component: import(`../components/checkbox/demo/${demo}.vue`),
   }
 }
 export default [