menu.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, {
  41. /******/ configurable: false,
  42. /******/ enumerable: true,
  43. /******/ get: getter
  44. /******/ });
  45. /******/ }
  46. /******/ };
  47. /******/
  48. /******/ // getDefaultExport function for compatibility with non-harmony modules
  49. /******/ __webpack_require__.n = function(module) {
  50. /******/ var getter = module && module.__esModule ?
  51. /******/ function getDefault() { return module['default']; } :
  52. /******/ function getModuleExports() { return module; };
  53. /******/ __webpack_require__.d(getter, 'a', getter);
  54. /******/ return getter;
  55. /******/ };
  56. /******/
  57. /******/ // Object.prototype.hasOwnProperty.call
  58. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  59. /******/
  60. /******/ // __webpack_public_path__
  61. /******/ __webpack_require__.p = "/dist/";
  62. /******/
  63. /******/ // Load entry module and return exports
  64. /******/ return __webpack_require__(__webpack_require__.s = 91);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 0:
  69. /***/ (function(module, exports) {
  70. /* globals __VUE_SSR_CONTEXT__ */
  71. // IMPORTANT: Do NOT use ES2015 features in this file.
  72. // This module is a runtime utility for cleaner component module output and will
  73. // be included in the final webpack user bundle.
  74. module.exports = function normalizeComponent (
  75. rawScriptExports,
  76. compiledTemplate,
  77. functionalTemplate,
  78. injectStyles,
  79. scopeId,
  80. moduleIdentifier /* server only */
  81. ) {
  82. var esModule
  83. var scriptExports = rawScriptExports = rawScriptExports || {}
  84. // ES6 modules interop
  85. var type = typeof rawScriptExports.default
  86. if (type === 'object' || type === 'function') {
  87. esModule = rawScriptExports
  88. scriptExports = rawScriptExports.default
  89. }
  90. // Vue.extend constructor export interop
  91. var options = typeof scriptExports === 'function'
  92. ? scriptExports.options
  93. : scriptExports
  94. // render functions
  95. if (compiledTemplate) {
  96. options.render = compiledTemplate.render
  97. options.staticRenderFns = compiledTemplate.staticRenderFns
  98. options._compiled = true
  99. }
  100. // functional template
  101. if (functionalTemplate) {
  102. options.functional = true
  103. }
  104. // scopedId
  105. if (scopeId) {
  106. options._scopeId = scopeId
  107. }
  108. var hook
  109. if (moduleIdentifier) { // server build
  110. hook = function (context) {
  111. // 2.3 injection
  112. context =
  113. context || // cached call
  114. (this.$vnode && this.$vnode.ssrContext) || // stateful
  115. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  116. // 2.2 with runInNewContext: true
  117. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  118. context = __VUE_SSR_CONTEXT__
  119. }
  120. // inject component styles
  121. if (injectStyles) {
  122. injectStyles.call(this, context)
  123. }
  124. // register component module identifier for async chunk inferrence
  125. if (context && context._registeredComponents) {
  126. context._registeredComponents.add(moduleIdentifier)
  127. }
  128. }
  129. // used by ssr in case component is cached and beforeCreate
  130. // never gets called
  131. options._ssrRegister = hook
  132. } else if (injectStyles) {
  133. hook = injectStyles
  134. }
  135. if (hook) {
  136. var functional = options.functional
  137. var existing = functional
  138. ? options.render
  139. : options.beforeCreate
  140. if (!functional) {
  141. // inject component registration as beforeCreate hook
  142. options.beforeCreate = existing
  143. ? [].concat(existing, hook)
  144. : [hook]
  145. } else {
  146. // for template-only hot-reload because in that case the render fn doesn't
  147. // go through the normalizer
  148. options._injectStyles = hook
  149. // register for functioal component in vue file
  150. options.render = function renderWithStyleInjection (h, context) {
  151. hook.call(context)
  152. return existing(h, context)
  153. }
  154. }
  155. }
  156. return {
  157. esModule: esModule,
  158. exports: scriptExports,
  159. options: options
  160. }
  161. }
  162. /***/ }),
  163. /***/ 1:
  164. /***/ (function(module, exports) {
  165. module.exports = require("element-ui/lib/mixins/emitter");
  166. /***/ }),
  167. /***/ 2:
  168. /***/ (function(module, exports) {
  169. module.exports = require("element-ui/lib/utils/dom");
  170. /***/ }),
  171. /***/ 47:
  172. /***/ (function(module, exports, __webpack_require__) {
  173. "use strict";
  174. exports.__esModule = true;
  175. var aria = aria || {};
  176. aria.Utils = aria.Utils || {};
  177. /**
  178. * @desc Set focus on descendant nodes until the first focusable element is
  179. * found.
  180. * @param element
  181. * DOM node for which to find the first focusable descendant.
  182. * @returns
  183. * true if a focusable element is found and focus is set.
  184. */
  185. aria.Utils.focusFirstDescendant = function (element) {
  186. for (var i = 0; i < element.childNodes.length; i++) {
  187. var child = element.childNodes[i];
  188. if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
  189. return true;
  190. }
  191. }
  192. return false;
  193. };
  194. /**
  195. * @desc Find the last descendant node that is focusable.
  196. * @param element
  197. * DOM node for which to find the last focusable descendant.
  198. * @returns
  199. * true if a focusable element is found and focus is set.
  200. */
  201. aria.Utils.focusLastDescendant = function (element) {
  202. for (var i = element.childNodes.length - 1; i >= 0; i--) {
  203. var child = element.childNodes[i];
  204. if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
  205. return true;
  206. }
  207. }
  208. return false;
  209. };
  210. /**
  211. * @desc Set Attempt to set focus on the current node.
  212. * @param element
  213. * The node to attempt to focus on.
  214. * @returns
  215. * true if element is focused.
  216. */
  217. aria.Utils.attemptFocus = function (element) {
  218. if (!aria.Utils.isFocusable(element)) {
  219. return false;
  220. }
  221. aria.Utils.IgnoreUtilFocusChanges = true;
  222. try {
  223. element.focus();
  224. } catch (e) {}
  225. aria.Utils.IgnoreUtilFocusChanges = false;
  226. return document.activeElement === element;
  227. };
  228. aria.Utils.isFocusable = function (element) {
  229. if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
  230. return true;
  231. }
  232. if (element.disabled) {
  233. return false;
  234. }
  235. switch (element.nodeName) {
  236. case 'A':
  237. return !!element.href && element.rel !== 'ignore';
  238. case 'INPUT':
  239. return element.type !== 'hidden' && element.type !== 'file';
  240. case 'BUTTON':
  241. case 'SELECT':
  242. case 'TEXTAREA':
  243. return true;
  244. default:
  245. return false;
  246. }
  247. };
  248. /**
  249. * 触发一个事件
  250. * mouseenter, mouseleave, mouseover, keyup, change, click 等
  251. * @param {Element} elm
  252. * @param {String} name
  253. * @param {*} opts
  254. */
  255. aria.Utils.triggerEvent = function (elm, name) {
  256. var eventName = void 0;
  257. if (/^mouse|click/.test(name)) {
  258. eventName = 'MouseEvents';
  259. } else if (/^key/.test(name)) {
  260. eventName = 'KeyboardEvent';
  261. } else {
  262. eventName = 'HTMLEvents';
  263. }
  264. var evt = document.createEvent(eventName);
  265. for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
  266. opts[_key - 2] = arguments[_key];
  267. }
  268. evt.initEvent.apply(evt, [name].concat(opts));
  269. elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt);
  270. return elm;
  271. };
  272. aria.Utils.keys = {
  273. tab: 9,
  274. enter: 13,
  275. space: 32,
  276. left: 37,
  277. up: 38,
  278. right: 39,
  279. down: 40
  280. };
  281. exports.default = aria.Utils;
  282. /***/ }),
  283. /***/ 8:
  284. /***/ (function(module, exports) {
  285. module.exports = require("element-ui/lib/mixins/migrating");
  286. /***/ }),
  287. /***/ 91:
  288. /***/ (function(module, exports, __webpack_require__) {
  289. module.exports = __webpack_require__(92);
  290. /***/ }),
  291. /***/ 92:
  292. /***/ (function(module, exports, __webpack_require__) {
  293. "use strict";
  294. exports.__esModule = true;
  295. var _menu = __webpack_require__(93);
  296. var _menu2 = _interopRequireDefault(_menu);
  297. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  298. /* istanbul ignore next */
  299. _menu2.default.install = function (Vue) {
  300. Vue.component(_menu2.default.name, _menu2.default);
  301. };
  302. exports.default = _menu2.default;
  303. /***/ }),
  304. /***/ 93:
  305. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  306. "use strict";
  307. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  308. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__ = __webpack_require__(94);
  309. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__);
  310. var normalizeComponent = __webpack_require__(0)
  311. /* script */
  312. /* template */
  313. var __vue_template__ = null
  314. /* template functional */
  315. var __vue_template_functional__ = false
  316. /* styles */
  317. var __vue_styles__ = null
  318. /* scopeId */
  319. var __vue_scopeId__ = null
  320. /* moduleIdentifier (server only) */
  321. var __vue_module_identifier__ = null
  322. var Component = normalizeComponent(
  323. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default.a,
  324. __vue_template__,
  325. __vue_template_functional__,
  326. __vue_styles__,
  327. __vue_scopeId__,
  328. __vue_module_identifier__
  329. )
  330. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  331. /***/ }),
  332. /***/ 94:
  333. /***/ (function(module, exports, __webpack_require__) {
  334. "use strict";
  335. exports.__esModule = true;
  336. var _emitter = __webpack_require__(1);
  337. var _emitter2 = _interopRequireDefault(_emitter);
  338. var _migrating = __webpack_require__(8);
  339. var _migrating2 = _interopRequireDefault(_migrating);
  340. var _ariaMenubar = __webpack_require__(95);
  341. var _ariaMenubar2 = _interopRequireDefault(_ariaMenubar);
  342. var _dom = __webpack_require__(2);
  343. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  344. exports.default = {
  345. name: 'ElMenu',
  346. render: function render(h) {
  347. var component = h(
  348. 'ul',
  349. {
  350. attrs: {
  351. role: 'menubar'
  352. },
  353. key: +this.collapse,
  354. style: { backgroundColor: this.backgroundColor || '' },
  355. 'class': {
  356. 'el-menu--horizontal': this.mode === 'horizontal',
  357. 'el-menu--collapse': this.collapse,
  358. "el-menu": true
  359. }
  360. },
  361. [this.$slots.default]
  362. );
  363. if (this.collapseTransition) {
  364. return h(
  365. 'el-menu-collapse-transition',
  366. null,
  367. [component]
  368. );
  369. } else {
  370. return component;
  371. }
  372. },
  373. componentName: 'ElMenu',
  374. mixins: [_emitter2.default, _migrating2.default],
  375. provide: function provide() {
  376. return {
  377. rootMenu: this
  378. };
  379. },
  380. components: {
  381. 'el-menu-collapse-transition': {
  382. functional: true,
  383. render: function render(createElement, context) {
  384. var data = {
  385. props: {
  386. mode: 'out-in'
  387. },
  388. on: {
  389. beforeEnter: function beforeEnter(el) {
  390. el.style.opacity = 0.2;
  391. },
  392. enter: function enter(el) {
  393. (0, _dom.addClass)(el, 'el-opacity-transition');
  394. el.style.opacity = 1;
  395. },
  396. afterEnter: function afterEnter(el) {
  397. (0, _dom.removeClass)(el, 'el-opacity-transition');
  398. el.style.opacity = '';
  399. },
  400. beforeLeave: function beforeLeave(el) {
  401. if (!el.dataset) el.dataset = {};
  402. if ((0, _dom.hasClass)(el, 'el-menu--collapse')) {
  403. (0, _dom.removeClass)(el, 'el-menu--collapse');
  404. el.dataset.oldOverflow = el.style.overflow;
  405. el.dataset.scrollWidth = el.clientWidth;
  406. (0, _dom.addClass)(el, 'el-menu--collapse');
  407. } else {
  408. (0, _dom.addClass)(el, 'el-menu--collapse');
  409. el.dataset.oldOverflow = el.style.overflow;
  410. el.dataset.scrollWidth = el.clientWidth;
  411. (0, _dom.removeClass)(el, 'el-menu--collapse');
  412. }
  413. el.style.width = el.scrollWidth + 'px';
  414. el.style.overflow = 'hidden';
  415. },
  416. leave: function leave(el) {
  417. (0, _dom.addClass)(el, 'horizontal-collapse-transition');
  418. el.style.width = el.dataset.scrollWidth + 'px';
  419. }
  420. }
  421. };
  422. return createElement('transition', data, context.children);
  423. }
  424. }
  425. },
  426. props: {
  427. mode: {
  428. type: String,
  429. default: 'vertical'
  430. },
  431. defaultActive: {
  432. type: String,
  433. default: ''
  434. },
  435. defaultOpeneds: Array,
  436. uniqueOpened: Boolean,
  437. router: Boolean,
  438. menuTrigger: {
  439. type: String,
  440. default: 'hover'
  441. },
  442. collapse: Boolean,
  443. backgroundColor: String,
  444. textColor: String,
  445. activeTextColor: String,
  446. collapseTransition: {
  447. type: Boolean,
  448. default: true
  449. }
  450. },
  451. data: function data() {
  452. return {
  453. activeIndex: this.defaultActive,
  454. openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
  455. items: {},
  456. submenus: {}
  457. };
  458. },
  459. computed: {
  460. hoverBackground: function hoverBackground() {
  461. return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
  462. },
  463. isMenuPopup: function isMenuPopup() {
  464. return this.mode === 'horizontal' || this.mode === 'vertical' && this.collapse;
  465. }
  466. },
  467. watch: {
  468. defaultActive: 'updateActiveIndex',
  469. defaultOpeneds: function defaultOpeneds(value) {
  470. if (!this.collapse) {
  471. this.openedMenus = value;
  472. }
  473. },
  474. collapse: function collapse(value) {
  475. if (value) this.openedMenus = [];
  476. this.broadcast('ElSubmenu', 'toggle-collapse', value);
  477. }
  478. },
  479. methods: {
  480. updateActiveIndex: function updateActiveIndex() {
  481. var item = this.items[this.defaultActive];
  482. if (item) {
  483. this.activeIndex = item.index;
  484. this.initOpenedMenu();
  485. } else {
  486. this.activeIndex = null;
  487. }
  488. },
  489. getMigratingConfig: function getMigratingConfig() {
  490. return {
  491. props: {
  492. 'theme': 'theme is removed.'
  493. }
  494. };
  495. },
  496. getColorChannels: function getColorChannels(color) {
  497. color = color.replace('#', '');
  498. if (/^[0-9a-fA-F]{3}$/.test(color)) {
  499. color = color.split('');
  500. for (var i = 2; i >= 0; i--) {
  501. color.splice(i, 0, color[i]);
  502. }
  503. color = color.join('');
  504. }
  505. if (/^[0-9a-fA-F]{6}$/.test(color)) {
  506. return {
  507. red: parseInt(color.slice(0, 2), 16),
  508. green: parseInt(color.slice(2, 4), 16),
  509. blue: parseInt(color.slice(4, 6), 16)
  510. };
  511. } else {
  512. return {
  513. red: 255,
  514. green: 255,
  515. blue: 255
  516. };
  517. }
  518. },
  519. mixColor: function mixColor(color, percent) {
  520. var _getColorChannels = this.getColorChannels(color),
  521. red = _getColorChannels.red,
  522. green = _getColorChannels.green,
  523. blue = _getColorChannels.blue;
  524. if (percent > 0) {
  525. // shade given color
  526. red *= 1 - percent;
  527. green *= 1 - percent;
  528. blue *= 1 - percent;
  529. } else {
  530. // tint given color
  531. red += (255 - red) * percent;
  532. green += (255 - green) * percent;
  533. blue += (255 - blue) * percent;
  534. }
  535. return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
  536. },
  537. addItem: function addItem(item) {
  538. this.$set(this.items, item.index, item);
  539. },
  540. removeItem: function removeItem(item) {
  541. delete this.items[item.index];
  542. },
  543. addSubmenu: function addSubmenu(item) {
  544. this.$set(this.submenus, item.index, item);
  545. },
  546. removeSubmenu: function removeSubmenu(item) {
  547. delete this.submenus[item.index];
  548. },
  549. openMenu: function openMenu(index, indexPath) {
  550. var openedMenus = this.openedMenus;
  551. if (openedMenus.indexOf(index) !== -1) return;
  552. // 将不在该菜单路径下的其余菜单收起
  553. // collapse all menu that are not under current menu item
  554. if (this.uniqueOpened) {
  555. this.openedMenus = openedMenus.filter(function (index) {
  556. return indexPath.indexOf(index) !== -1;
  557. });
  558. }
  559. this.openedMenus.push(index);
  560. },
  561. closeMenu: function closeMenu(index) {
  562. var i = this.openedMenus.indexOf(index);
  563. if (i !== -1) {
  564. this.openedMenus.splice(i, 1);
  565. }
  566. },
  567. handleSubmenuClick: function handleSubmenuClick(submenu) {
  568. var index = submenu.index,
  569. indexPath = submenu.indexPath;
  570. var isOpened = this.openedMenus.indexOf(index) !== -1;
  571. if (isOpened) {
  572. this.closeMenu(index);
  573. this.$emit('close', index, indexPath);
  574. } else {
  575. this.openMenu(index, indexPath);
  576. this.$emit('open', index, indexPath);
  577. }
  578. },
  579. handleItemClick: function handleItemClick(item) {
  580. var _this = this;
  581. var index = item.index,
  582. indexPath = item.indexPath;
  583. var oldActiveIndex = this.activeIndex;
  584. this.activeIndex = item.index;
  585. this.$emit('select', index, indexPath, item);
  586. if (this.mode === 'horizontal' || this.collapse) {
  587. this.openedMenus = [];
  588. }
  589. if (this.router) {
  590. this.routeToItem(item, function (error) {
  591. _this.activeIndex = oldActiveIndex;
  592. if (error) console.error(error);
  593. });
  594. }
  595. },
  596. // 初始化展开菜单
  597. // initialize opened menu
  598. initOpenedMenu: function initOpenedMenu() {
  599. var _this2 = this;
  600. var index = this.activeIndex;
  601. var activeItem = this.items[index];
  602. if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
  603. var indexPath = activeItem.indexPath;
  604. // 展开该菜单项的路径上所有子菜单
  605. // expand all submenus of the menu item
  606. indexPath.forEach(function (index) {
  607. var submenu = _this2.submenus[index];
  608. submenu && _this2.openMenu(index, submenu.indexPath);
  609. });
  610. },
  611. routeToItem: function routeToItem(item, onError) {
  612. var route = item.route || item.index;
  613. try {
  614. this.$router.push(route, function () {}, onError);
  615. } catch (e) {
  616. console.error(e);
  617. }
  618. },
  619. open: function open(index) {
  620. var _this3 = this;
  621. var indexPath = this.submenus[index.toString()].indexPath;
  622. indexPath.forEach(function (i) {
  623. return _this3.openMenu(i, indexPath);
  624. });
  625. },
  626. close: function close(index) {
  627. this.closeMenu(index);
  628. }
  629. },
  630. mounted: function mounted() {
  631. this.initOpenedMenu();
  632. this.$on('item-click', this.handleItemClick);
  633. this.$on('submenu-click', this.handleSubmenuClick);
  634. if (this.mode === 'horizontal') {
  635. new _ariaMenubar2.default(this.$el); // eslint-disable-line
  636. }
  637. this.$watch('items', this.updateActiveIndex);
  638. }
  639. };
  640. /***/ }),
  641. /***/ 95:
  642. /***/ (function(module, exports, __webpack_require__) {
  643. "use strict";
  644. exports.__esModule = true;
  645. var _ariaMenuitem = __webpack_require__(96);
  646. var _ariaMenuitem2 = _interopRequireDefault(_ariaMenuitem);
  647. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  648. var Menu = function Menu(domNode) {
  649. this.domNode = domNode;
  650. this.init();
  651. };
  652. Menu.prototype.init = function () {
  653. var menuChildren = this.domNode.childNodes;
  654. [].filter.call(menuChildren, function (child) {
  655. return child.nodeType === 1;
  656. }).forEach(function (child) {
  657. new _ariaMenuitem2.default(child); // eslint-disable-line
  658. });
  659. };
  660. exports.default = Menu;
  661. /***/ }),
  662. /***/ 96:
  663. /***/ (function(module, exports, __webpack_require__) {
  664. "use strict";
  665. exports.__esModule = true;
  666. var _ariaUtils = __webpack_require__(47);
  667. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  668. var _ariaSubmenu = __webpack_require__(97);
  669. var _ariaSubmenu2 = _interopRequireDefault(_ariaSubmenu);
  670. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  671. var MenuItem = function MenuItem(domNode) {
  672. this.domNode = domNode;
  673. this.submenu = null;
  674. this.init();
  675. };
  676. MenuItem.prototype.init = function () {
  677. this.domNode.setAttribute('tabindex', '0');
  678. var menuChild = this.domNode.querySelector('.el-menu');
  679. if (menuChild) {
  680. this.submenu = new _ariaSubmenu2.default(this, menuChild);
  681. }
  682. this.addListeners();
  683. };
  684. MenuItem.prototype.addListeners = function () {
  685. var _this = this;
  686. var keys = _ariaUtils2.default.keys;
  687. this.domNode.addEventListener('keydown', function (event) {
  688. var prevDef = false;
  689. switch (event.keyCode) {
  690. case keys.down:
  691. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  692. _this.submenu && _this.submenu.gotoSubIndex(0);
  693. prevDef = true;
  694. break;
  695. case keys.up:
  696. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  697. _this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
  698. prevDef = true;
  699. break;
  700. case keys.tab:
  701. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseleave');
  702. break;
  703. case keys.enter:
  704. case keys.space:
  705. prevDef = true;
  706. event.currentTarget.click();
  707. break;
  708. }
  709. if (prevDef) {
  710. event.preventDefault();
  711. }
  712. });
  713. };
  714. exports.default = MenuItem;
  715. /***/ }),
  716. /***/ 97:
  717. /***/ (function(module, exports, __webpack_require__) {
  718. "use strict";
  719. exports.__esModule = true;
  720. var _ariaUtils = __webpack_require__(47);
  721. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  722. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  723. var SubMenu = function SubMenu(parent, domNode) {
  724. this.domNode = domNode;
  725. this.parent = parent;
  726. this.subMenuItems = [];
  727. this.subIndex = 0;
  728. this.init();
  729. };
  730. SubMenu.prototype.init = function () {
  731. this.subMenuItems = this.domNode.querySelectorAll('li');
  732. this.addListeners();
  733. };
  734. SubMenu.prototype.gotoSubIndex = function (idx) {
  735. if (idx === this.subMenuItems.length) {
  736. idx = 0;
  737. } else if (idx < 0) {
  738. idx = this.subMenuItems.length - 1;
  739. }
  740. this.subMenuItems[idx].focus();
  741. this.subIndex = idx;
  742. };
  743. SubMenu.prototype.addListeners = function () {
  744. var _this = this;
  745. var keys = _ariaUtils2.default.keys;
  746. var parentNode = this.parent.domNode;
  747. Array.prototype.forEach.call(this.subMenuItems, function (el) {
  748. el.addEventListener('keydown', function (event) {
  749. var prevDef = false;
  750. switch (event.keyCode) {
  751. case keys.down:
  752. _this.gotoSubIndex(_this.subIndex + 1);
  753. prevDef = true;
  754. break;
  755. case keys.up:
  756. _this.gotoSubIndex(_this.subIndex - 1);
  757. prevDef = true;
  758. break;
  759. case keys.tab:
  760. _ariaUtils2.default.triggerEvent(parentNode, 'mouseleave');
  761. break;
  762. case keys.enter:
  763. case keys.space:
  764. prevDef = true;
  765. event.currentTarget.click();
  766. break;
  767. }
  768. if (prevDef) {
  769. event.preventDefault();
  770. event.stopPropagation();
  771. }
  772. return false;
  773. });
  774. });
  775. };
  776. exports.default = SubMenu;
  777. /***/ })
  778. /******/ });