menu.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  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 = 84);
  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. /***/ 3:
  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. /***/ 84:
  288. /***/ (function(module, exports, __webpack_require__) {
  289. "use strict";
  290. exports.__esModule = true;
  291. var _menu = __webpack_require__(85);
  292. var _menu2 = _interopRequireDefault(_menu);
  293. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  294. /* istanbul ignore next */
  295. _menu2.default.install = function (Vue) {
  296. Vue.component(_menu2.default.name, _menu2.default);
  297. };
  298. exports.default = _menu2.default;
  299. /***/ }),
  300. /***/ 85:
  301. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  302. "use strict";
  303. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  304. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__ = __webpack_require__(86);
  305. /* 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__);
  306. var normalizeComponent = __webpack_require__(0)
  307. /* script */
  308. /* template */
  309. var __vue_template__ = null
  310. /* template functional */
  311. var __vue_template_functional__ = false
  312. /* styles */
  313. var __vue_styles__ = null
  314. /* scopeId */
  315. var __vue_scopeId__ = null
  316. /* moduleIdentifier (server only) */
  317. var __vue_module_identifier__ = null
  318. var Component = normalizeComponent(
  319. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default.a,
  320. __vue_template__,
  321. __vue_template_functional__,
  322. __vue_styles__,
  323. __vue_scopeId__,
  324. __vue_module_identifier__
  325. )
  326. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  327. /***/ }),
  328. /***/ 86:
  329. /***/ (function(module, exports, __webpack_require__) {
  330. "use strict";
  331. exports.__esModule = true;
  332. var _emitter = __webpack_require__(1);
  333. var _emitter2 = _interopRequireDefault(_emitter);
  334. var _migrating = __webpack_require__(8);
  335. var _migrating2 = _interopRequireDefault(_migrating);
  336. var _ariaMenubar = __webpack_require__(87);
  337. var _ariaMenubar2 = _interopRequireDefault(_ariaMenubar);
  338. var _dom = __webpack_require__(3);
  339. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  340. exports.default = {
  341. name: 'ElMenu',
  342. render: function render(h) {
  343. var component = h(
  344. 'ul',
  345. {
  346. attrs: {
  347. role: 'menubar'
  348. },
  349. key: +this.collapse,
  350. style: { backgroundColor: this.backgroundColor || '' },
  351. 'class': {
  352. 'el-menu--horizontal': this.mode === 'horizontal',
  353. 'el-menu--collapse': this.collapse,
  354. "el-menu": true
  355. }
  356. },
  357. [this.$slots.default]
  358. );
  359. if (this.collapseTransition) {
  360. return h(
  361. 'el-menu-collapse-transition',
  362. null,
  363. [component]
  364. );
  365. } else {
  366. return component;
  367. }
  368. },
  369. componentName: 'ElMenu',
  370. mixins: [_emitter2.default, _migrating2.default],
  371. provide: function provide() {
  372. return {
  373. rootMenu: this
  374. };
  375. },
  376. components: {
  377. 'el-menu-collapse-transition': {
  378. functional: true,
  379. render: function render(createElement, context) {
  380. var data = {
  381. props: {
  382. mode: 'out-in'
  383. },
  384. on: {
  385. beforeEnter: function beforeEnter(el) {
  386. el.style.opacity = 0.2;
  387. },
  388. enter: function enter(el) {
  389. (0, _dom.addClass)(el, 'el-opacity-transition');
  390. el.style.opacity = 1;
  391. },
  392. afterEnter: function afterEnter(el) {
  393. (0, _dom.removeClass)(el, 'el-opacity-transition');
  394. el.style.opacity = '';
  395. },
  396. beforeLeave: function beforeLeave(el) {
  397. if (!el.dataset) el.dataset = {};
  398. if ((0, _dom.hasClass)(el, 'el-menu--collapse')) {
  399. (0, _dom.removeClass)(el, 'el-menu--collapse');
  400. el.dataset.oldOverflow = el.style.overflow;
  401. el.dataset.scrollWidth = el.clientWidth;
  402. (0, _dom.addClass)(el, 'el-menu--collapse');
  403. } else {
  404. (0, _dom.addClass)(el, 'el-menu--collapse');
  405. el.dataset.oldOverflow = el.style.overflow;
  406. el.dataset.scrollWidth = el.clientWidth;
  407. (0, _dom.removeClass)(el, 'el-menu--collapse');
  408. }
  409. el.style.width = el.scrollWidth + 'px';
  410. el.style.overflow = 'hidden';
  411. },
  412. leave: function leave(el) {
  413. (0, _dom.addClass)(el, 'horizontal-collapse-transition');
  414. el.style.width = el.dataset.scrollWidth + 'px';
  415. }
  416. }
  417. };
  418. return createElement('transition', data, context.children);
  419. }
  420. }
  421. },
  422. props: {
  423. mode: {
  424. type: String,
  425. default: 'vertical'
  426. },
  427. defaultActive: {
  428. type: String,
  429. default: ''
  430. },
  431. defaultOpeneds: Array,
  432. uniqueOpened: Boolean,
  433. router: Boolean,
  434. menuTrigger: {
  435. type: String,
  436. default: 'hover'
  437. },
  438. collapse: Boolean,
  439. backgroundColor: String,
  440. textColor: String,
  441. activeTextColor: String,
  442. collapseTransition: {
  443. type: Boolean,
  444. default: true
  445. }
  446. },
  447. data: function data() {
  448. return {
  449. activeIndex: this.defaultActive,
  450. openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
  451. items: {},
  452. submenus: {}
  453. };
  454. },
  455. computed: {
  456. hoverBackground: function hoverBackground() {
  457. return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
  458. },
  459. isMenuPopup: function isMenuPopup() {
  460. return this.mode === 'horizontal' || this.mode === 'vertical' && this.collapse;
  461. }
  462. },
  463. watch: {
  464. defaultActive: 'updateActiveIndex',
  465. defaultOpeneds: function defaultOpeneds(value) {
  466. if (!this.collapse) {
  467. this.openedMenus = value;
  468. }
  469. },
  470. collapse: function collapse(value) {
  471. if (value) this.openedMenus = [];
  472. this.broadcast('ElSubmenu', 'toggle-collapse', value);
  473. }
  474. },
  475. methods: {
  476. updateActiveIndex: function updateActiveIndex(val) {
  477. var item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
  478. if (item) {
  479. this.activeIndex = item.index;
  480. this.initOpenedMenu();
  481. } else {
  482. this.activeIndex = null;
  483. }
  484. },
  485. getMigratingConfig: function getMigratingConfig() {
  486. return {
  487. props: {
  488. 'theme': 'theme is removed.'
  489. }
  490. };
  491. },
  492. getColorChannels: function getColorChannels(color) {
  493. color = color.replace('#', '');
  494. if (/^[0-9a-fA-F]{3}$/.test(color)) {
  495. color = color.split('');
  496. for (var i = 2; i >= 0; i--) {
  497. color.splice(i, 0, color[i]);
  498. }
  499. color = color.join('');
  500. }
  501. if (/^[0-9a-fA-F]{6}$/.test(color)) {
  502. return {
  503. red: parseInt(color.slice(0, 2), 16),
  504. green: parseInt(color.slice(2, 4), 16),
  505. blue: parseInt(color.slice(4, 6), 16)
  506. };
  507. } else {
  508. return {
  509. red: 255,
  510. green: 255,
  511. blue: 255
  512. };
  513. }
  514. },
  515. mixColor: function mixColor(color, percent) {
  516. var _getColorChannels = this.getColorChannels(color),
  517. red = _getColorChannels.red,
  518. green = _getColorChannels.green,
  519. blue = _getColorChannels.blue;
  520. if (percent > 0) {
  521. // shade given color
  522. red *= 1 - percent;
  523. green *= 1 - percent;
  524. blue *= 1 - percent;
  525. } else {
  526. // tint given color
  527. red += (255 - red) * percent;
  528. green += (255 - green) * percent;
  529. blue += (255 - blue) * percent;
  530. }
  531. return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
  532. },
  533. addItem: function addItem(item) {
  534. this.$set(this.items, item.index, item);
  535. },
  536. removeItem: function removeItem(item) {
  537. delete this.items[item.index];
  538. },
  539. addSubmenu: function addSubmenu(item) {
  540. this.$set(this.submenus, item.index, item);
  541. },
  542. removeSubmenu: function removeSubmenu(item) {
  543. delete this.submenus[item.index];
  544. },
  545. openMenu: function openMenu(index, indexPath) {
  546. var openedMenus = this.openedMenus;
  547. if (openedMenus.indexOf(index) !== -1) return;
  548. // 将不在该菜单路径下的其余菜单收起
  549. // collapse all menu that are not under current menu item
  550. if (this.uniqueOpened) {
  551. this.openedMenus = openedMenus.filter(function (index) {
  552. return indexPath.indexOf(index) !== -1;
  553. });
  554. }
  555. this.openedMenus.push(index);
  556. },
  557. closeMenu: function closeMenu(index) {
  558. var i = this.openedMenus.indexOf(index);
  559. if (i !== -1) {
  560. this.openedMenus.splice(i, 1);
  561. }
  562. },
  563. handleSubmenuClick: function handleSubmenuClick(submenu) {
  564. var index = submenu.index,
  565. indexPath = submenu.indexPath;
  566. var isOpened = this.openedMenus.indexOf(index) !== -1;
  567. if (isOpened) {
  568. this.closeMenu(index);
  569. this.$emit('close', index, indexPath);
  570. } else {
  571. this.openMenu(index, indexPath);
  572. this.$emit('open', index, indexPath);
  573. }
  574. },
  575. handleItemClick: function handleItemClick(item) {
  576. var _this = this;
  577. var index = item.index,
  578. indexPath = item.indexPath;
  579. var oldActiveIndex = this.activeIndex;
  580. this.activeIndex = item.index;
  581. this.$emit('select', index, indexPath, item);
  582. if (this.mode === 'horizontal' || this.collapse) {
  583. this.openedMenus = [];
  584. }
  585. if (this.router) {
  586. this.routeToItem(item, function (error) {
  587. _this.activeIndex = oldActiveIndex;
  588. if (error) console.error(error);
  589. });
  590. }
  591. },
  592. // 初始化展开菜单
  593. // initialize opened menu
  594. initOpenedMenu: function initOpenedMenu() {
  595. var _this2 = this;
  596. var index = this.activeIndex;
  597. var activeItem = this.items[index];
  598. if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
  599. var indexPath = activeItem.indexPath;
  600. // 展开该菜单项的路径上所有子菜单
  601. // expand all submenus of the menu item
  602. indexPath.forEach(function (index) {
  603. var submenu = _this2.submenus[index];
  604. submenu && _this2.openMenu(index, submenu.indexPath);
  605. });
  606. },
  607. routeToItem: function routeToItem(item, onError) {
  608. var route = item.route || item.index;
  609. try {
  610. this.$router.push(route, function () {}, onError);
  611. } catch (e) {
  612. console.error(e);
  613. }
  614. },
  615. open: function open(index) {
  616. var _this3 = this;
  617. var indexPath = this.submenus[index.toString()].indexPath;
  618. indexPath.forEach(function (i) {
  619. return _this3.openMenu(i, indexPath);
  620. });
  621. },
  622. close: function close(index) {
  623. this.closeMenu(index);
  624. }
  625. },
  626. mounted: function mounted() {
  627. this.initOpenedMenu();
  628. this.$on('item-click', this.handleItemClick);
  629. this.$on('submenu-click', this.handleSubmenuClick);
  630. if (this.mode === 'horizontal') {
  631. new _ariaMenubar2.default(this.$el); // eslint-disable-line
  632. }
  633. this.$watch('items', this.updateActiveIndex);
  634. }
  635. };
  636. /***/ }),
  637. /***/ 87:
  638. /***/ (function(module, exports, __webpack_require__) {
  639. "use strict";
  640. exports.__esModule = true;
  641. var _ariaMenuitem = __webpack_require__(88);
  642. var _ariaMenuitem2 = _interopRequireDefault(_ariaMenuitem);
  643. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  644. var Menu = function Menu(domNode) {
  645. this.domNode = domNode;
  646. this.init();
  647. };
  648. Menu.prototype.init = function () {
  649. var menuChildren = this.domNode.childNodes;
  650. [].filter.call(menuChildren, function (child) {
  651. return child.nodeType === 1;
  652. }).forEach(function (child) {
  653. new _ariaMenuitem2.default(child); // eslint-disable-line
  654. });
  655. };
  656. exports.default = Menu;
  657. /***/ }),
  658. /***/ 88:
  659. /***/ (function(module, exports, __webpack_require__) {
  660. "use strict";
  661. exports.__esModule = true;
  662. var _ariaUtils = __webpack_require__(47);
  663. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  664. var _ariaSubmenu = __webpack_require__(89);
  665. var _ariaSubmenu2 = _interopRequireDefault(_ariaSubmenu);
  666. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  667. var MenuItem = function MenuItem(domNode) {
  668. this.domNode = domNode;
  669. this.submenu = null;
  670. this.init();
  671. };
  672. MenuItem.prototype.init = function () {
  673. this.domNode.setAttribute('tabindex', '0');
  674. var menuChild = this.domNode.querySelector('.el-menu');
  675. if (menuChild) {
  676. this.submenu = new _ariaSubmenu2.default(this, menuChild);
  677. }
  678. this.addListeners();
  679. };
  680. MenuItem.prototype.addListeners = function () {
  681. var _this = this;
  682. var keys = _ariaUtils2.default.keys;
  683. this.domNode.addEventListener('keydown', function (event) {
  684. var prevDef = false;
  685. switch (event.keyCode) {
  686. case keys.down:
  687. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  688. _this.submenu && _this.submenu.gotoSubIndex(0);
  689. prevDef = true;
  690. break;
  691. case keys.up:
  692. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  693. _this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
  694. prevDef = true;
  695. break;
  696. case keys.tab:
  697. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseleave');
  698. break;
  699. case keys.enter:
  700. case keys.space:
  701. prevDef = true;
  702. event.currentTarget.click();
  703. break;
  704. }
  705. if (prevDef) {
  706. event.preventDefault();
  707. }
  708. });
  709. };
  710. exports.default = MenuItem;
  711. /***/ }),
  712. /***/ 89:
  713. /***/ (function(module, exports, __webpack_require__) {
  714. "use strict";
  715. exports.__esModule = true;
  716. var _ariaUtils = __webpack_require__(47);
  717. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  718. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  719. var SubMenu = function SubMenu(parent, domNode) {
  720. this.domNode = domNode;
  721. this.parent = parent;
  722. this.subMenuItems = [];
  723. this.subIndex = 0;
  724. this.init();
  725. };
  726. SubMenu.prototype.init = function () {
  727. this.subMenuItems = this.domNode.querySelectorAll('li');
  728. this.addListeners();
  729. };
  730. SubMenu.prototype.gotoSubIndex = function (idx) {
  731. if (idx === this.subMenuItems.length) {
  732. idx = 0;
  733. } else if (idx < 0) {
  734. idx = this.subMenuItems.length - 1;
  735. }
  736. this.subMenuItems[idx].focus();
  737. this.subIndex = idx;
  738. };
  739. SubMenu.prototype.addListeners = function () {
  740. var _this = this;
  741. var keys = _ariaUtils2.default.keys;
  742. var parentNode = this.parent.domNode;
  743. Array.prototype.forEach.call(this.subMenuItems, function (el) {
  744. el.addEventListener('keydown', function (event) {
  745. var prevDef = false;
  746. switch (event.keyCode) {
  747. case keys.down:
  748. _this.gotoSubIndex(_this.subIndex + 1);
  749. prevDef = true;
  750. break;
  751. case keys.up:
  752. _this.gotoSubIndex(_this.subIndex - 1);
  753. prevDef = true;
  754. break;
  755. case keys.tab:
  756. _ariaUtils2.default.triggerEvent(parentNode, 'mouseleave');
  757. break;
  758. case keys.enter:
  759. case keys.space:
  760. prevDef = true;
  761. event.currentTarget.click();
  762. break;
  763. }
  764. if (prevDef) {
  765. event.preventDefault();
  766. event.stopPropagation();
  767. }
  768. return false;
  769. });
  770. });
  771. };
  772. exports.default = SubMenu;
  773. /***/ })
  774. /******/ });