cy-element-ui 1.1.14 → 1.1.16

package/lib/menu.js

@@ -242,13 +242,13 @@ aria.Utils = aria.Utils || {};
  *  true if a focusable element is found and focus is set.
  */
 aria.Utils.focusFirstDescendant = function (element) {
-  for (var i = 0; i < element.childNodes.length; i++) {
-    var child = element.childNodes[i];
-    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
-      return true;
-    }
-  }
-  return false;
+	for (var i = 0; i < element.childNodes.length; i++) {
+		var child = element.childNodes[i];
+		if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
+			return true;
+		}
+	}
+	return false;
 };
 
 /**
@@ -260,13 +260,13 @@ aria.Utils.focusFirstDescendant = function (element) {
  */
 
 aria.Utils.focusLastDescendant = function (element) {
-  for (var i = element.childNodes.length - 1; i >= 0; i--) {
-    var child = element.childNodes[i];
-    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
-      return true;
-    }
-  }
-  return false;
+	for (var i = element.childNodes.length - 1; i >= 0; i--) {
+		var child = element.childNodes[i];
+		if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
+			return true;
+		}
+	}
+	return false;
 };
 
 /**
@@ -277,38 +277,38 @@ aria.Utils.focusLastDescendant = function (element) {
  *  true if element is focused.
  */
 aria.Utils.attemptFocus = function (element) {
-  if (!aria.Utils.isFocusable(element)) {
-    return false;
-  }
-  aria.Utils.IgnoreUtilFocusChanges = true;
-  try {
-    element.focus();
-  } catch (e) {}
-  aria.Utils.IgnoreUtilFocusChanges = false;
-  return document.activeElement === element;
+	if (!aria.Utils.isFocusable(element)) {
+		return false;
+	}
+	aria.Utils.IgnoreUtilFocusChanges = true;
+	try {
+		element.focus();
+	} catch (e) {}
+	aria.Utils.IgnoreUtilFocusChanges = false;
+	return document.activeElement === element;
 };
 
 aria.Utils.isFocusable = function (element) {
-  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
-    return true;
-  }
-
-  if (element.disabled) {
-    return false;
-  }
-
-  switch (element.nodeName) {
-    case 'A':
-      return !!element.href && element.rel !== 'ignore';
-    case 'INPUT':
-      return element.type !== 'hidden' && element.type !== 'file';
-    case 'BUTTON':
-    case 'SELECT':
-    case 'TEXTAREA':
-      return true;
-    default:
-      return false;
-  }
+	if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
+		return true;
+	}
+
+	if (element.disabled) {
+		return false;
+	}
+
+	switch (element.nodeName) {
+		case 'A':
+			return !!element.href && element.rel !== 'ignore';
+		case 'INPUT':
+			return element.type !== 'hidden' && element.type !== 'file';
+		case 'BUTTON':
+		case 'SELECT':
+		case 'TEXTAREA':
+			return true;
+		default:
+			return false;
+	}
 };
 
 /**
@@ -319,36 +319,36 @@ aria.Utils.isFocusable = function (element) {
  * @param  {*} opts
  */
 aria.Utils.triggerEvent = function (elm, name) {
-  var eventName = void 0;
-
-  if (/^mouse|click/.test(name)) {
-    eventName = 'MouseEvents';
-  } else if (/^key/.test(name)) {
-    eventName = 'KeyboardEvent';
-  } else {
-    eventName = 'HTMLEvents';
-  }
-  var evt = document.createEvent(eventName);
+	var eventName = void 0;
 
-  for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    opts[_key - 2] = arguments[_key];
-  }
+	if (/^mouse|click/.test(name)) {
+		eventName = 'MouseEvents';
+	} else if (/^key/.test(name)) {
+		eventName = 'KeyboardEvent';
+	} else {
+		eventName = 'HTMLEvents';
+	}
+	var evt = document.createEvent(eventName);
+
+	for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+		opts[_key - 2] = arguments[_key];
+	}
 
-  evt.initEvent.apply(evt, [name].concat(opts));
-  elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt);
+	evt.initEvent.apply(evt, [name].concat(opts));
+	elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt);
 
-  return elm;
+	return elm;
 };
 
 aria.Utils.keys = {
-  tab: 9,
-  enter: 13,
-  space: 32,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  esc: 27
+	tab: 9,
+	enter: 13,
+	space: 32,
+	left: 37,
+	up: 38,
+	right: 39,
+	down: 40,
+	esc: 27
 };
 
 /* harmony default export */ var aria_utils = (aria.Utils);
@@ -356,61 +356,61 @@ aria.Utils.keys = {
 
 
 var SubMenu = function SubMenu(parent, domNode) {
-  this.domNode = domNode;
-  this.parent = parent;
-  this.subMenuItems = [];
-  this.subIndex = 0;
-  this.init();
+	this.domNode = domNode;
+	this.parent = parent;
+	this.subMenuItems = [];
+	this.subIndex = 0;
+	this.init();
 };
 
 SubMenu.prototype.init = function () {
-  this.subMenuItems = this.domNode.querySelectorAll('li');
-  this.addListeners();
+	this.subMenuItems = this.domNode.querySelectorAll('li');
+	this.addListeners();
 };
 
 SubMenu.prototype.gotoSubIndex = function (idx) {
-  if (idx === this.subMenuItems.length) {
-    idx = 0;
-  } else if (idx < 0) {
-    idx = this.subMenuItems.length - 1;
-  }
-  this.subMenuItems[idx].focus();
-  this.subIndex = idx;
+	if (idx === this.subMenuItems.length) {
+		idx = 0;
+	} else if (idx < 0) {
+		idx = this.subMenuItems.length - 1;
+	}
+	this.subMenuItems[idx].focus();
+	this.subIndex = idx;
 };
 
 SubMenu.prototype.addListeners = function () {
-  var _this = this;
-
-  var keys = aria_utils.keys;
-  var parentNode = this.parent.domNode;
-  Array.prototype.forEach.call(this.subMenuItems, function (el) {
-    el.addEventListener('keydown', function (event) {
-      var prevDef = false;
-      switch (event.keyCode) {
-        case keys.down:
-          _this.gotoSubIndex(_this.subIndex + 1);
-          prevDef = true;
-          break;
-        case keys.up:
-          _this.gotoSubIndex(_this.subIndex - 1);
-          prevDef = true;
-          break;
-        case keys.tab:
-          aria_utils.triggerEvent(parentNode, 'mouseleave');
-          break;
-        case keys.enter:
-        case keys.space:
-          prevDef = true;
-          event.currentTarget.click();
-          break;
-      }
-      if (prevDef) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      return false;
-    });
-  });
+	var _this = this;
+
+	var keys = aria_utils.keys;
+	var parentNode = this.parent.domNode;
+	Array.prototype.forEach.call(this.subMenuItems, function (el) {
+		el.addEventListener('keydown', function (event) {
+			var prevDef = false;
+			switch (event.keyCode) {
+				case keys.down:
+					_this.gotoSubIndex(_this.subIndex + 1);
+					prevDef = true;
+					break;
+				case keys.up:
+					_this.gotoSubIndex(_this.subIndex - 1);
+					prevDef = true;
+					break;
+				case keys.tab:
+					aria_utils.triggerEvent(parentNode, 'mouseleave');
+					break;
+				case keys.enter:
+				case keys.space:
+					prevDef = true;
+					event.currentTarget.click();
+					break;
+			}
+			if (prevDef) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return false;
+		});
+	});
 };
 
 /* harmony default export */ var aria_submenu = (SubMenu);
@@ -419,50 +419,50 @@ SubMenu.prototype.addListeners = function () {
 
 
 var MenuItem = function MenuItem(domNode) {
-  this.domNode = domNode;
-  this.submenu = null;
-  this.init();
+	this.domNode = domNode;
+	this.submenu = null;
+	this.init();
 };
 
 MenuItem.prototype.init = function () {
-  this.domNode.setAttribute('tabindex', '0');
-  var menuChild = this.domNode.querySelector('.el-menu');
-  if (menuChild) {
-    this.submenu = new aria_submenu(this, menuChild);
-  }
-  this.addListeners();
+	this.domNode.setAttribute('tabindex', '0');
+	var menuChild = this.domNode.querySelector('.el-menu');
+	if (menuChild) {
+		this.submenu = new aria_submenu(this, menuChild);
+	}
+	this.addListeners();
 };
 
 MenuItem.prototype.addListeners = function () {
-  var _this = this;
-
-  var keys = aria_utils.keys;
-  this.domNode.addEventListener('keydown', function (event) {
-    var prevDef = false;
-    switch (event.keyCode) {
-      case keys.down:
-        aria_utils.triggerEvent(event.currentTarget, 'mouseenter');
-        _this.submenu && _this.submenu.gotoSubIndex(0);
-        prevDef = true;
-        break;
-      case keys.up:
-        aria_utils.triggerEvent(event.currentTarget, 'mouseenter');
-        _this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
-        prevDef = true;
-        break;
-      case keys.tab:
-        aria_utils.triggerEvent(event.currentTarget, 'mouseleave');
-        break;
-      case keys.enter:
-      case keys.space:
-        prevDef = true;
-        event.currentTarget.click();
-        break;
-    }
-    if (prevDef) {
-      event.preventDefault();
-    }
-  });
+	var _this = this;
+
+	var keys = aria_utils.keys;
+	this.domNode.addEventListener('keydown', function (event) {
+		var prevDef = false;
+		switch (event.keyCode) {
+			case keys.down:
+				aria_utils.triggerEvent(event.currentTarget, 'mouseenter');
+				_this.submenu && _this.submenu.gotoSubIndex(0);
+				prevDef = true;
+				break;
+			case keys.up:
+				aria_utils.triggerEvent(event.currentTarget, 'mouseenter');
+				_this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
+				prevDef = true;
+				break;
+			case keys.tab:
+				aria_utils.triggerEvent(event.currentTarget, 'mouseleave');
+				break;
+			case keys.enter:
+			case keys.space:
+				prevDef = true;
+				event.currentTarget.click();
+				break;
+		}
+		if (prevDef) {
+			event.preventDefault();
+		}
+	});
 };
 
 /* harmony default export */ var aria_menuitem = (MenuItem);
@@ -470,17 +470,17 @@ MenuItem.prototype.addListeners = function () {
 
 
 var Menu = function Menu(domNode) {
-  this.domNode = domNode;
-  this.init();
+	this.domNode = domNode;
+	this.init();
 };
 
 Menu.prototype.init = function () {
-  var menuChildren = this.domNode.childNodes;
-  [].filter.call(menuChildren, function (child) {
-    return child.nodeType === 1;
-  }).forEach(function (child) {
-    new aria_menuitem(child); // eslint-disable-line
-  });
+	var menuChildren = this.domNode.childNodes;
+	[].filter.call(menuChildren, function (child) {
+		return child.nodeType === 1;
+	}).forEach(function (child) {
+		new aria_menuitem(child); // eslint-disable-line
+	});
 };
 /* harmony default export */ var aria_menubar = (Menu);
 // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
@@ -494,336 +494,336 @@ var dom_ = __webpack_require__(2);
 
 
 /* harmony default export */ var menuvue_type_script_lang_js = ({
-  name: 'ElMenu',
-
-  render: function render(h) {
-    var component = h(
-      'ul',
-      {
-        attrs: {
-          role: 'menubar'
-        },
-        key: +this.collapse,
-        style: { backgroundColor: this.backgroundColor || '' },
-        'class': {
-          'el-menu--horizontal': this.mode === 'horizontal',
-          'el-menu--collapse': this.collapse,
-          "el-menu": true
-        }
-      },
-      [this.$slots.default]
-    );
-
-    if (this.collapseTransition) {
-      return h('el-menu-collapse-transition', [component]);
-    } else {
-      return component;
-    }
-  },
-
-
-  componentName: 'ElMenu',
-
-  mixins: [emitter_default.a, migrating_default.a],
-
-  provide: function provide() {
-    return {
-      rootMenu: this
-    };
-  },
-
-
-  components: {
-    'el-menu-collapse-transition': {
-      functional: true,
-      render: function render(createElement, context) {
-        var data = {
-          props: {
-            mode: 'out-in'
-          },
-          on: {
-            beforeEnter: function beforeEnter(el) {
-              el.style.opacity = 0.2;
-            },
-            enter: function enter(el) {
-              Object(dom_["addClass"])(el, 'el-opacity-transition');
-              el.style.opacity = 1;
-            },
-            afterEnter: function afterEnter(el) {
-              Object(dom_["removeClass"])(el, 'el-opacity-transition');
-              el.style.opacity = '';
-            },
-            beforeLeave: function beforeLeave(el) {
-              if (!el.dataset) el.dataset = {};
-
-              if (Object(dom_["hasClass"])(el, 'el-menu--collapse')) {
-                Object(dom_["removeClass"])(el, 'el-menu--collapse');
-                el.dataset.oldOverflow = el.style.overflow;
-                el.dataset.scrollWidth = el.clientWidth;
-                Object(dom_["addClass"])(el, 'el-menu--collapse');
-              } else {
-                Object(dom_["addClass"])(el, 'el-menu--collapse');
-                el.dataset.oldOverflow = el.style.overflow;
-                el.dataset.scrollWidth = el.clientWidth;
-                Object(dom_["removeClass"])(el, 'el-menu--collapse');
-              }
-
-              el.style.width = el.scrollWidth + 'px';
-              el.style.overflow = 'hidden';
-            },
-            leave: function leave(el) {
-              Object(dom_["addClass"])(el, 'horizontal-collapse-transition');
-              el.style.width = el.dataset.scrollWidth + 'px';
-            }
-          }
-        };
-        return createElement('transition', data, context.children);
-      }
-    }
-  },
-
-  props: {
-    mode: {
-      type: String,
-      default: 'vertical'
-    },
-    defaultActive: {
-      type: String,
-      default: ''
-    },
-    defaultOpeneds: Array,
-    uniqueOpened: Boolean,
-    router: Boolean,
-    menuTrigger: {
-      type: String,
-      default: 'hover'
-    },
-    collapse: Boolean,
-    backgroundColor: String,
-    textColor: String,
-    activeTextColor: String,
-    collapseTransition: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data: function data() {
-    return {
-      activeIndex: this.defaultActive,
-      openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
-      items: {},
-      submenus: {}
-    };
-  },
-
-  computed: {
-    hoverBackground: function hoverBackground() {
-      return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
-    },
-    isMenuPopup: function isMenuPopup() {
-      return this.mode === 'horizontal' || this.mode === 'vertical' && this.collapse;
-    }
-  },
-  watch: {
-    defaultActive: function defaultActive(value) {
-      if (!this.items[value]) {
-        this.activeIndex = null;
-      }
-      this.updateActiveIndex(value);
-    },
-    defaultOpeneds: function defaultOpeneds(value) {
-      if (!this.collapse) {
-        this.openedMenus = value;
-      }
-    },
-    collapse: function collapse(value) {
-      if (value) this.openedMenus = [];
-      this.broadcast('ElSubmenu', 'toggle-collapse', value);
-    }
-  },
-  methods: {
-    updateActiveIndex: function updateActiveIndex(val) {
-      var item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
-      if (item) {
-        this.activeIndex = item.index;
-        this.initOpenedMenu();
-      } else {
-        this.activeIndex = null;
-      }
-    },
-    getMigratingConfig: function getMigratingConfig() {
-      return {
-        props: {
-          'theme': 'theme is removed.'
-        }
-      };
-    },
-    getColorChannels: function getColorChannels(color) {
-      color = color.replace('#', '');
-      if (/^[0-9a-fA-F]{3}$/.test(color)) {
-        color = color.split('');
-        for (var i = 2; i >= 0; i--) {
-          color.splice(i, 0, color[i]);
-        }
-        color = color.join('');
-      }
-      if (/^[0-9a-fA-F]{6}$/.test(color)) {
-        return {
-          red: parseInt(color.slice(0, 2), 16),
-          green: parseInt(color.slice(2, 4), 16),
-          blue: parseInt(color.slice(4, 6), 16)
-        };
-      } else {
-        return {
-          red: 255,
-          green: 255,
-          blue: 255
-        };
-      }
-    },
-    mixColor: function mixColor(color, percent) {
-      var _getColorChannels = this.getColorChannels(color),
-          red = _getColorChannels.red,
-          green = _getColorChannels.green,
-          blue = _getColorChannels.blue;
-
-      if (percent > 0) {
-        // shade given color
-        red *= 1 - percent;
-        green *= 1 - percent;
-        blue *= 1 - percent;
-      } else {
-        // tint given color
-        red += (255 - red) * percent;
-        green += (255 - green) * percent;
-        blue += (255 - blue) * percent;
-      }
-      return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
-    },
-    addItem: function addItem(item) {
-      this.$set(this.items, item.index, item);
-    },
-    removeItem: function removeItem(item) {
-      delete this.items[item.index];
-    },
-    addSubmenu: function addSubmenu(item) {
-      this.$set(this.submenus, item.index, item);
-    },
-    removeSubmenu: function removeSubmenu(item) {
-      delete this.submenus[item.index];
-    },
-    openMenu: function openMenu(index, indexPath) {
-      var openedMenus = this.openedMenus;
-      if (openedMenus.indexOf(index) !== -1) return;
-      // 将不在该菜单路径下的其余菜单收起
-      // collapse all menu that are not under current menu item
-      if (this.uniqueOpened) {
-        this.openedMenus = openedMenus.filter(function (index) {
-          return indexPath.indexOf(index) !== -1;
-        });
-      }
-      this.openedMenus.push(index);
-    },
-    closeMenu: function closeMenu(index) {
-      var i = this.openedMenus.indexOf(index);
-      if (i !== -1) {
-        this.openedMenus.splice(i, 1);
-      }
-    },
-    handleSubmenuClick: function handleSubmenuClick(submenu) {
-      var index = submenu.index,
-          indexPath = submenu.indexPath;
-
-      var isOpened = this.openedMenus.indexOf(index) !== -1;
-
-      if (isOpened) {
-        this.closeMenu(index);
-        this.$emit('close', index, indexPath);
-      } else {
-        this.openMenu(index, indexPath);
-        this.$emit('open', index, indexPath);
-      }
-    },
-    handleItemClick: function handleItemClick(item) {
-      var _this = this;
-
-      var index = item.index,
-          indexPath = item.indexPath;
-
-      var oldActiveIndex = this.activeIndex;
-      var hasIndex = item.index !== null;
-
-      if (hasIndex) {
-        this.activeIndex = item.index;
-      }
-
-      this.$emit('select', index, indexPath, item);
-
-      if (this.mode === 'horizontal' || this.collapse) {
-        this.openedMenus = [];
-      }
-
-      if (this.router && hasIndex) {
-        this.routeToItem(item, function (error) {
-          _this.activeIndex = oldActiveIndex;
-          if (error) {
-            // vue-router 3.1.0+ push/replace cause NavigationDuplicated error 
-            // https://github.com/ElemeFE/element/issues/17044
-            if (error.name === 'NavigationDuplicated') return;
-            console.error(error);
-          }
-        });
-      }
-    },
-
-    // 初始化展开菜单
-    // initialize opened menu
-    initOpenedMenu: function initOpenedMenu() {
-      var _this2 = this;
-
-      var index = this.activeIndex;
-      var activeItem = this.items[index];
-      if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
-
-      var indexPath = activeItem.indexPath;
-
-      // 展开该菜单项的路径上所有子菜单
-      // expand all submenus of the menu item
-      indexPath.forEach(function (index) {
-        var submenu = _this2.submenus[index];
-        submenu && _this2.openMenu(index, submenu.indexPath);
-      });
-    },
-    routeToItem: function routeToItem(item, onError) {
-      var route = item.route || item.index;
-      try {
-        this.$router.push(route, function () {}, onError);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    open: function open(index) {
-      var _this3 = this;
-
-      var indexPath = this.submenus[index.toString()].indexPath;
-
-      indexPath.forEach(function (i) {
-        return _this3.openMenu(i, indexPath);
-      });
-    },
-    close: function close(index) {
-      this.closeMenu(index);
-    }
-  },
-  mounted: function mounted() {
-    this.initOpenedMenu();
-    this.$on('item-click', this.handleItemClick);
-    this.$on('submenu-click', this.handleSubmenuClick);
-    if (this.mode === 'horizontal') {
-      new aria_menubar(this.$el); // eslint-disable-line
-    }
-    this.$watch('items', this.updateActiveIndex);
-  }
+	name: 'ElMenu',
+
+	render: function render(h) {
+		var component = h(
+			'ul',
+			{
+				attrs: {
+					role: 'menubar'
+				},
+				key: +this.collapse,
+				style: { backgroundColor: this.backgroundColor || '' },
+				'class': {
+					'el-menu--horizontal': this.mode === 'horizontal',
+					'el-menu--collapse': this.collapse,
+					'el-menu': true
+				}
+			},
+			[this.$slots.default]
+		);
+
+		if (this.collapseTransition) {
+			return h('el-menu-collapse-transition', [component]);
+		} else {
+			return component;
+		}
+	},
+
+
+	componentName: 'ElMenu',
+
+	mixins: [emitter_default.a, migrating_default.a],
+
+	provide: function provide() {
+		return {
+			rootMenu: this
+		};
+	},
+
+
+	components: {
+		'el-menu-collapse-transition': {
+			functional: true,
+			render: function render(createElement, context) {
+				var data = {
+					props: {
+						mode: 'out-in'
+					},
+					on: {
+						beforeEnter: function beforeEnter(el) {
+							el.style.opacity = 0.2;
+						},
+						enter: function enter(el) {
+							Object(dom_["addClass"])(el, 'el-opacity-transition');
+							el.style.opacity = 1;
+						},
+						afterEnter: function afterEnter(el) {
+							Object(dom_["removeClass"])(el, 'el-opacity-transition');
+							el.style.opacity = '';
+						},
+						beforeLeave: function beforeLeave(el) {
+							if (!el.dataset) el.dataset = {};
+
+							if (Object(dom_["hasClass"])(el, 'el-menu--collapse')) {
+								Object(dom_["removeClass"])(el, 'el-menu--collapse');
+								el.dataset.oldOverflow = el.style.overflow;
+								el.dataset.scrollWidth = el.clientWidth;
+								Object(dom_["addClass"])(el, 'el-menu--collapse');
+							} else {
+								Object(dom_["addClass"])(el, 'el-menu--collapse');
+								el.dataset.oldOverflow = el.style.overflow;
+								el.dataset.scrollWidth = el.clientWidth;
+								Object(dom_["removeClass"])(el, 'el-menu--collapse');
+							}
+
+							el.style.width = el.scrollWidth + 'px';
+							el.style.overflow = 'hidden';
+						},
+						leave: function leave(el) {
+							Object(dom_["addClass"])(el, 'horizontal-collapse-transition');
+							el.style.width = el.dataset.scrollWidth + 'px';
+						}
+					}
+				};
+				return createElement('transition', data, context.children);
+			}
+		}
+	},
+
+	props: {
+		mode: {
+			type: String,
+			default: 'vertical'
+		},
+		defaultActive: {
+			type: String,
+			default: ''
+		},
+		defaultOpeneds: Array,
+		uniqueOpened: Boolean,
+		router: Boolean,
+		menuTrigger: {
+			type: String,
+			default: 'hover'
+		},
+		collapse: Boolean,
+		backgroundColor: String,
+		textColor: String,
+		activeTextColor: String,
+		collapseTransition: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data: function data() {
+		return {
+			activeIndex: this.defaultActive,
+			openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
+			items: {},
+			submenus: {}
+		};
+	},
+
+	computed: {
+		hoverBackground: function hoverBackground() {
+			return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
+		},
+		isMenuPopup: function isMenuPopup() {
+			return this.mode === 'horizontal' || this.mode === 'vertical' && this.collapse;
+		}
+	},
+	watch: {
+		defaultActive: function defaultActive(value) {
+			if (!this.items[value]) {
+				this.activeIndex = null;
+			}
+			this.updateActiveIndex(value);
+		},
+		defaultOpeneds: function defaultOpeneds(value) {
+			if (!this.collapse) {
+				this.openedMenus = value;
+			}
+		},
+		collapse: function collapse(value) {
+			if (value) this.openedMenus = [];
+			this.broadcast('ElSubmenu', 'toggle-collapse', value);
+		}
+	},
+	methods: {
+		updateActiveIndex: function updateActiveIndex(val) {
+			var item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
+			if (item) {
+				this.activeIndex = item.index;
+				this.initOpenedMenu();
+			} else {
+				this.activeIndex = null;
+			}
+		},
+		getMigratingConfig: function getMigratingConfig() {
+			return {
+				props: {
+					'theme': 'theme is removed.'
+				}
+			};
+		},
+		getColorChannels: function getColorChannels(color) {
+			color = color.replace('#', '');
+			if (/^[0-9a-fA-F]{3}$/.test(color)) {
+				color = color.split('');
+				for (var i = 2; i >= 0; i--) {
+					color.splice(i, 0, color[i]);
+				}
+				color = color.join('');
+			}
+			if (/^[0-9a-fA-F]{6}$/.test(color)) {
+				return {
+					red: parseInt(color.slice(0, 2), 16),
+					green: parseInt(color.slice(2, 4), 16),
+					blue: parseInt(color.slice(4, 6), 16)
+				};
+			} else {
+				return {
+					red: 255,
+					green: 255,
+					blue: 255
+				};
+			}
+		},
+		mixColor: function mixColor(color, percent) {
+			var _getColorChannels = this.getColorChannels(color),
+			    red = _getColorChannels.red,
+			    green = _getColorChannels.green,
+			    blue = _getColorChannels.blue;
+
+			if (percent > 0) {
+				// shade given color
+				red *= 1 - percent;
+				green *= 1 - percent;
+				blue *= 1 - percent;
+			} else {
+				// tint given color
+				red += (255 - red) * percent;
+				green += (255 - green) * percent;
+				blue += (255 - blue) * percent;
+			}
+			return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
+		},
+		addItem: function addItem(item) {
+			this.$set(this.items, item.index, item);
+		},
+		removeItem: function removeItem(item) {
+			delete this.items[item.index];
+		},
+		addSubmenu: function addSubmenu(item) {
+			this.$set(this.submenus, item.index, item);
+		},
+		removeSubmenu: function removeSubmenu(item) {
+			delete this.submenus[item.index];
+		},
+		openMenu: function openMenu(index, indexPath) {
+			var openedMenus = this.openedMenus;
+			if (openedMenus.indexOf(index) !== -1) return;
+			// 将不在该菜单路径下的其余菜单收起
+			// collapse all menu that are not under current menu item
+			if (this.uniqueOpened) {
+				this.openedMenus = openedMenus.filter(function (index) {
+					return indexPath.indexOf(index) !== -1;
+				});
+			}
+			this.openedMenus.push(index);
+		},
+		closeMenu: function closeMenu(index) {
+			var i = this.openedMenus.indexOf(index);
+			if (i !== -1) {
+				this.openedMenus.splice(i, 1);
+			}
+		},
+		handleSubmenuClick: function handleSubmenuClick(submenu) {
+			var index = submenu.index,
+			    indexPath = submenu.indexPath;
+
+			var isOpened = this.openedMenus.indexOf(index) !== -1;
+
+			if (isOpened) {
+				this.closeMenu(index);
+				this.$emit('close', index, indexPath);
+			} else {
+				this.openMenu(index, indexPath);
+				this.$emit('open', index, indexPath);
+			}
+		},
+		handleItemClick: function handleItemClick(item) {
+			var _this = this;
+
+			var index = item.index,
+			    indexPath = item.indexPath;
+
+			var oldActiveIndex = this.activeIndex;
+			var hasIndex = item.index !== null;
+
+			if (hasIndex) {
+				this.activeIndex = item.index;
+			}
+
+			this.$emit('select', index, indexPath, item);
+
+			if (this.mode === 'horizontal' || this.collapse) {
+				this.openedMenus = [];
+			}
+
+			if (this.router && hasIndex) {
+				this.routeToItem(item, function (error) {
+					_this.activeIndex = oldActiveIndex;
+					if (error) {
+						// vue-router 3.1.0+ push/replace cause NavigationDuplicated error 
+						// https://github.com/ElemeFE/element/issues/17044
+						if (error.name === 'NavigationDuplicated') return;
+						console.error(error);
+					}
+				});
+			}
+		},
+
+		// 初始化展开菜单
+		// initialize opened menu
+		initOpenedMenu: function initOpenedMenu() {
+			var _this2 = this;
+
+			var index = this.activeIndex;
+			var activeItem = this.items[index];
+			if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
+
+			var indexPath = activeItem.indexPath;
+
+			// 展开该菜单项的路径上所有子菜单
+			// expand all submenus of the menu item
+			indexPath.forEach(function (index) {
+				var submenu = _this2.submenus[index];
+				submenu && _this2.openMenu(index, submenu.indexPath);
+			});
+		},
+		routeToItem: function routeToItem(item, onError) {
+			var route = item.route || item.index;
+			try {
+				this.$router.push(route, function () {}, onError);
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		open: function open(index) {
+			var _this3 = this;
+
+			var indexPath = this.submenus[index.toString()].indexPath;
+
+			indexPath.forEach(function (i) {
+				return _this3.openMenu(i, indexPath);
+			});
+		},
+		close: function close(index) {
+			this.closeMenu(index);
+		}
+	},
+	mounted: function mounted() {
+		this.initOpenedMenu();
+		this.$on('item-click', this.handleItemClick);
+		this.$on('submenu-click', this.handleSubmenuClick);
+		if (this.mode === 'horizontal') {
+			new aria_menubar(this.$el); // eslint-disable-line
+		}
+		this.$watch('items', this.updateActiveIndex);
+	}
 });
 // CONCATENATED MODULE: ./packages/menu/src/menu.vue?vue&type=script&lang=js
  /* harmony default export */ var src_menuvue_type_script_lang_js = (menuvue_type_script_lang_js); 
@@ -855,7 +855,7 @@ var component = Object(componentNormalizer["a" /* default */])(
 
 /* istanbul ignore next */
 menu.install = function (Vue) {
-  Vue.component(menu.name, menu);
+	Vue.component(menu.name, menu);
 };
 
 /* harmony default export */ var packages_menu = __webpack_exports__["default"] = (menu);