tabs.js 27 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, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "/dist/";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 54);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 0:
  90. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  91. "use strict";
  92. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
  93. /* globals __VUE_SSR_CONTEXT__ */
  94. // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
  95. // This module is a runtime utility for cleaner component module output and will
  96. // be included in the final webpack user bundle.
  97. function normalizeComponent (
  98. scriptExports,
  99. render,
  100. staticRenderFns,
  101. functionalTemplate,
  102. injectStyles,
  103. scopeId,
  104. moduleIdentifier, /* server only */
  105. shadowMode /* vue-cli only */
  106. ) {
  107. // Vue.extend constructor export interop
  108. var options = typeof scriptExports === 'function'
  109. ? scriptExports.options
  110. : scriptExports
  111. // render functions
  112. if (render) {
  113. options.render = render
  114. options.staticRenderFns = staticRenderFns
  115. options._compiled = true
  116. }
  117. // functional template
  118. if (functionalTemplate) {
  119. options.functional = true
  120. }
  121. // scopedId
  122. if (scopeId) {
  123. options._scopeId = 'data-v-' + scopeId
  124. }
  125. var hook
  126. if (moduleIdentifier) { // server build
  127. hook = function (context) {
  128. // 2.3 injection
  129. context =
  130. context || // cached call
  131. (this.$vnode && this.$vnode.ssrContext) || // stateful
  132. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  133. // 2.2 with runInNewContext: true
  134. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  135. context = __VUE_SSR_CONTEXT__
  136. }
  137. // inject component styles
  138. if (injectStyles) {
  139. injectStyles.call(this, context)
  140. }
  141. // register component module identifier for async chunk inferrence
  142. if (context && context._registeredComponents) {
  143. context._registeredComponents.add(moduleIdentifier)
  144. }
  145. }
  146. // used by ssr in case component is cached and beforeCreate
  147. // never gets called
  148. options._ssrRegister = hook
  149. } else if (injectStyles) {
  150. hook = shadowMode
  151. ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
  152. : injectStyles
  153. }
  154. if (hook) {
  155. if (options.functional) {
  156. // for template-only hot-reload because in that case the render fn doesn't
  157. // go through the normalizer
  158. options._injectStyles = hook
  159. // register for functioal component in vue file
  160. var originalRender = options.render
  161. options.render = function renderWithStyleInjection (h, context) {
  162. hook.call(context)
  163. return originalRender(h, context)
  164. }
  165. } else {
  166. // inject component registration as beforeCreate hook
  167. var existing = options.beforeCreate
  168. options.beforeCreate = existing
  169. ? [].concat(existing, hook)
  170. : [hook]
  171. }
  172. }
  173. return {
  174. exports: scriptExports,
  175. options: options
  176. }
  177. }
  178. /***/ }),
  179. /***/ 14:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/utils/resize-event");
  182. /***/ }),
  183. /***/ 4:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/utils/util");
  186. /***/ }),
  187. /***/ 54:
  188. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  189. "use strict";
  190. __webpack_require__.r(__webpack_exports__);
  191. // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/tabs/src/tab-bar.vue?vue&type=template&id=2031f33a&
  192. var render = function() {
  193. var _vm = this
  194. var _h = _vm.$createElement
  195. var _c = _vm._self._c || _h
  196. return _c("div", {
  197. staticClass: "el-tabs__active-bar",
  198. class: "is-" + _vm.rootTabs.tabPosition,
  199. style: _vm.barStyle
  200. })
  201. }
  202. var staticRenderFns = []
  203. render._withStripped = true
  204. // CONCATENATED MODULE: ./packages/tabs/src/tab-bar.vue?vue&type=template&id=2031f33a&
  205. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  206. var util_ = __webpack_require__(4);
  207. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/tabs/src/tab-bar.vue?vue&type=script&lang=js&
  208. //
  209. //
  210. //
  211. /* harmony default export */ var tab_barvue_type_script_lang_js_ = ({
  212. name: 'TabBar',
  213. props: {
  214. tabs: Array
  215. },
  216. inject: ['rootTabs'],
  217. computed: {
  218. barStyle: {
  219. get: function get() {
  220. var _this = this;
  221. var style = {};
  222. var offset = 0;
  223. var tabSize = 0;
  224. var sizeName = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
  225. var sizeDir = sizeName === 'width' ? 'x' : 'y';
  226. var firstUpperCase = function firstUpperCase(str) {
  227. return str.toLowerCase().replace(/( |^)[a-z]/g, function (L) {
  228. return L.toUpperCase();
  229. });
  230. };
  231. this.tabs.every(function (tab, index) {
  232. var $el = Object(util_["arrayFind"])(_this.$parent.$refs.tabs || [], function (t) {
  233. return t.id.replace('tab-', '') === tab.paneName;
  234. });
  235. if (!$el) {
  236. return false;
  237. }
  238. if (!tab.active) {
  239. offset += $el['client' + firstUpperCase(sizeName)];
  240. return true;
  241. } else {
  242. tabSize = $el['client' + firstUpperCase(sizeName)];
  243. if (sizeName === 'width' && _this.tabs.length > 1) {
  244. tabSize -= index === 0 || index === _this.tabs.length - 1 ? 20 : 40;
  245. }
  246. return false;
  247. }
  248. });
  249. if (sizeName === 'width' && offset !== 0) {
  250. offset += 20;
  251. }
  252. var transform = 'translate' + firstUpperCase(sizeDir) + '(' + offset + 'px)';
  253. style[sizeName] = tabSize + 'px';
  254. style.transform = transform;
  255. style.msTransform = transform;
  256. style.webkitTransform = transform;
  257. return style;
  258. }
  259. }
  260. }
  261. });
  262. // CONCATENATED MODULE: ./packages/tabs/src/tab-bar.vue?vue&type=script&lang=js&
  263. /* harmony default export */ var src_tab_barvue_type_script_lang_js_ = (tab_barvue_type_script_lang_js_);
  264. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  265. var componentNormalizer = __webpack_require__(0);
  266. // CONCATENATED MODULE: ./packages/tabs/src/tab-bar.vue
  267. /* normalize component */
  268. var component = Object(componentNormalizer["a" /* default */])(
  269. src_tab_barvue_type_script_lang_js_,
  270. render,
  271. staticRenderFns,
  272. false,
  273. null,
  274. null,
  275. null
  276. )
  277. /* hot reload */
  278. if (false) { var api; }
  279. component.options.__file = "packages/tabs/src/tab-bar.vue"
  280. /* harmony default export */ var tab_bar = (component.exports);
  281. // EXTERNAL MODULE: external "element-ui/lib/utils/resize-event"
  282. var resize_event_ = __webpack_require__(14);
  283. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/tabs/src/tab-nav.vue?vue&type=script&lang=js&
  284. function noop() {}
  285. var tab_navvue_type_script_lang_js_firstUpperCase = function firstUpperCase(str) {
  286. return str.toLowerCase().replace(/( |^)[a-z]/g, function (L) {
  287. return L.toUpperCase();
  288. });
  289. };
  290. /* harmony default export */ var tab_navvue_type_script_lang_js_ = ({
  291. name: 'TabNav',
  292. components: {
  293. TabBar: tab_bar
  294. },
  295. inject: ['rootTabs'],
  296. props: {
  297. panes: Array,
  298. currentName: String,
  299. editable: Boolean,
  300. onTabClick: {
  301. type: Function,
  302. default: noop
  303. },
  304. onTabRemove: {
  305. type: Function,
  306. default: noop
  307. },
  308. type: String,
  309. stretch: Boolean
  310. },
  311. data: function data() {
  312. return {
  313. scrollable: false,
  314. navOffset: 0,
  315. isFocus: false,
  316. focusable: true
  317. };
  318. },
  319. computed: {
  320. navStyle: function navStyle() {
  321. var dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';
  322. return {
  323. transform: 'translate' + dir + '(-' + this.navOffset + 'px)'
  324. };
  325. },
  326. sizeName: function sizeName() {
  327. return ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
  328. }
  329. },
  330. methods: {
  331. scrollPrev: function scrollPrev() {
  332. var containerSize = this.$refs.navScroll['offset' + tab_navvue_type_script_lang_js_firstUpperCase(this.sizeName)];
  333. var currentOffset = this.navOffset;
  334. if (!currentOffset) return;
  335. var newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
  336. this.navOffset = newOffset;
  337. },
  338. scrollNext: function scrollNext() {
  339. var navSize = this.$refs.nav['offset' + tab_navvue_type_script_lang_js_firstUpperCase(this.sizeName)];
  340. var containerSize = this.$refs.navScroll['offset' + tab_navvue_type_script_lang_js_firstUpperCase(this.sizeName)];
  341. var currentOffset = this.navOffset;
  342. if (navSize - currentOffset <= containerSize) return;
  343. var newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
  344. this.navOffset = newOffset;
  345. },
  346. scrollToActiveTab: function scrollToActiveTab() {
  347. if (!this.scrollable) return;
  348. var nav = this.$refs.nav;
  349. var activeTab = this.$el.querySelector('.is-active');
  350. if (!activeTab) return;
  351. var navScroll = this.$refs.navScroll;
  352. var activeTabBounding = activeTab.getBoundingClientRect();
  353. var navScrollBounding = navScroll.getBoundingClientRect();
  354. var maxOffset = nav.offsetWidth - navScrollBounding.width;
  355. var currentOffset = this.navOffset;
  356. var newOffset = currentOffset;
  357. if (activeTabBounding.left < navScrollBounding.left) {
  358. newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
  359. }
  360. if (activeTabBounding.right > navScrollBounding.right) {
  361. newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
  362. }
  363. newOffset = Math.max(newOffset, 0);
  364. this.navOffset = Math.min(newOffset, maxOffset);
  365. },
  366. update: function update() {
  367. if (!this.$refs.nav) return;
  368. var sizeName = this.sizeName;
  369. var navSize = this.$refs.nav['offset' + tab_navvue_type_script_lang_js_firstUpperCase(sizeName)];
  370. var containerSize = this.$refs.navScroll['offset' + tab_navvue_type_script_lang_js_firstUpperCase(sizeName)];
  371. var currentOffset = this.navOffset;
  372. if (containerSize < navSize) {
  373. var _currentOffset = this.navOffset;
  374. this.scrollable = this.scrollable || {};
  375. this.scrollable.prev = _currentOffset;
  376. this.scrollable.next = _currentOffset + containerSize < navSize;
  377. if (navSize - _currentOffset < containerSize) {
  378. this.navOffset = navSize - containerSize;
  379. }
  380. } else {
  381. this.scrollable = false;
  382. if (currentOffset > 0) {
  383. this.navOffset = 0;
  384. }
  385. }
  386. },
  387. changeTab: function changeTab(e) {
  388. var keyCode = e.keyCode;
  389. var nextIndex = void 0;
  390. var currentIndex = void 0,
  391. tabList = void 0;
  392. if ([37, 38, 39, 40].indexOf(keyCode) !== -1) {
  393. // 左右上下键更换tab
  394. tabList = e.currentTarget.querySelectorAll('[role=tab]');
  395. currentIndex = Array.prototype.indexOf.call(tabList, e.target);
  396. } else {
  397. return;
  398. }
  399. if (keyCode === 37 || keyCode === 38) {
  400. // left
  401. if (currentIndex === 0) {
  402. // first
  403. nextIndex = tabList.length - 1;
  404. } else {
  405. nextIndex = currentIndex - 1;
  406. }
  407. } else {
  408. // right
  409. if (currentIndex < tabList.length - 1) {
  410. // not last
  411. nextIndex = currentIndex + 1;
  412. } else {
  413. nextIndex = 0;
  414. }
  415. }
  416. tabList[nextIndex].focus(); // 改变焦点元素
  417. tabList[nextIndex].click(); // 选中下一个tab
  418. this.setFocus();
  419. },
  420. setFocus: function setFocus() {
  421. if (this.focusable) {
  422. this.isFocus = true;
  423. }
  424. },
  425. removeFocus: function removeFocus() {
  426. this.isFocus = false;
  427. },
  428. visibilityChangeHandler: function visibilityChangeHandler() {
  429. var _this = this;
  430. var visibility = document.visibilityState;
  431. if (visibility === 'hidden') {
  432. this.focusable = false;
  433. } else if (visibility === 'visible') {
  434. setTimeout(function () {
  435. _this.focusable = true;
  436. }, 50);
  437. }
  438. },
  439. windowBlurHandler: function windowBlurHandler() {
  440. this.focusable = false;
  441. },
  442. windowFocusHandler: function windowFocusHandler() {
  443. var _this2 = this;
  444. setTimeout(function () {
  445. _this2.focusable = true;
  446. }, 50);
  447. }
  448. },
  449. updated: function updated() {
  450. this.update();
  451. },
  452. render: function render(h) {
  453. var _this3 = this;
  454. var type = this.type,
  455. panes = this.panes,
  456. editable = this.editable,
  457. stretch = this.stretch,
  458. onTabClick = this.onTabClick,
  459. onTabRemove = this.onTabRemove,
  460. navStyle = this.navStyle,
  461. scrollable = this.scrollable,
  462. scrollNext = this.scrollNext,
  463. scrollPrev = this.scrollPrev,
  464. changeTab = this.changeTab,
  465. setFocus = this.setFocus,
  466. removeFocus = this.removeFocus;
  467. var scrollBtn = scrollable ? [h(
  468. 'span',
  469. { 'class': ['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled'], on: {
  470. 'click': scrollPrev
  471. }
  472. },
  473. [h('i', { 'class': 'el-icon-arrow-left' })]
  474. ), h(
  475. 'span',
  476. { 'class': ['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled'], on: {
  477. 'click': scrollNext
  478. }
  479. },
  480. [h('i', { 'class': 'el-icon-arrow-right' })]
  481. )] : null;
  482. var tabs = this._l(panes, function (pane, index) {
  483. var _ref;
  484. var tabName = pane.name || pane.index || index;
  485. var closable = pane.isClosable || editable;
  486. pane.index = '' + index;
  487. var btnClose = closable ? h('span', { 'class': 'el-icon-close', on: {
  488. 'click': function click(ev) {
  489. onTabRemove(pane, ev);
  490. }
  491. }
  492. }) : null;
  493. var tabLabelContent = pane.$slots.label || pane.label;
  494. var tabindex = pane.active ? 0 : -1;
  495. return h(
  496. 'div',
  497. {
  498. 'class': (_ref = {
  499. 'el-tabs__item': true
  500. }, _ref['is-' + _this3.rootTabs.tabPosition] = true, _ref['is-active'] = pane.active, _ref['is-disabled'] = pane.disabled, _ref['is-closable'] = closable, _ref['is-focus'] = _this3.isFocus, _ref),
  501. attrs: { id: 'tab-' + tabName,
  502. 'aria-controls': 'pane-' + tabName,
  503. role: 'tab',
  504. 'aria-selected': pane.active,
  505. tabindex: tabindex
  506. },
  507. key: 'tab-' + tabName, ref: 'tabs', refInFor: true,
  508. on: {
  509. 'focus': function focus() {
  510. setFocus();
  511. },
  512. 'blur': function blur() {
  513. removeFocus();
  514. },
  515. 'click': function click(ev) {
  516. removeFocus();onTabClick(pane, tabName, ev);
  517. },
  518. 'keydown': function keydown(ev) {
  519. if (closable && (ev.keyCode === 46 || ev.keyCode === 8)) {
  520. onTabRemove(pane, ev);
  521. }
  522. }
  523. }
  524. },
  525. [tabLabelContent, btnClose]
  526. );
  527. });
  528. return h(
  529. 'div',
  530. { 'class': ['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', 'is-' + this.rootTabs.tabPosition] },
  531. [scrollBtn, h(
  532. 'div',
  533. { 'class': ['el-tabs__nav-scroll'], ref: 'navScroll' },
  534. [h(
  535. 'div',
  536. {
  537. 'class': ['el-tabs__nav', 'is-' + this.rootTabs.tabPosition, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : ''],
  538. ref: 'nav',
  539. style: navStyle,
  540. attrs: { role: 'tablist'
  541. },
  542. on: {
  543. 'keydown': changeTab
  544. }
  545. },
  546. [!type ? h('tab-bar', {
  547. attrs: { tabs: panes }
  548. }) : null, tabs]
  549. )]
  550. )]
  551. );
  552. },
  553. mounted: function mounted() {
  554. var _this4 = this;
  555. Object(resize_event_["addResizeListener"])(this.$el, this.update);
  556. document.addEventListener('visibilitychange', this.visibilityChangeHandler);
  557. window.addEventListener('blur', this.windowBlurHandler);
  558. window.addEventListener('focus', this.windowFocusHandler);
  559. setTimeout(function () {
  560. _this4.scrollToActiveTab();
  561. }, 0);
  562. },
  563. beforeDestroy: function beforeDestroy() {
  564. if (this.$el && this.update) Object(resize_event_["removeResizeListener"])(this.$el, this.update);
  565. document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
  566. window.removeEventListener('blur', this.windowBlurHandler);
  567. window.removeEventListener('focus', this.windowFocusHandler);
  568. }
  569. });
  570. // CONCATENATED MODULE: ./packages/tabs/src/tab-nav.vue?vue&type=script&lang=js&
  571. /* harmony default export */ var src_tab_navvue_type_script_lang_js_ = (tab_navvue_type_script_lang_js_);
  572. // CONCATENATED MODULE: ./packages/tabs/src/tab-nav.vue
  573. var tab_nav_render, tab_nav_staticRenderFns
  574. /* normalize component */
  575. var tab_nav_component = Object(componentNormalizer["a" /* default */])(
  576. src_tab_navvue_type_script_lang_js_,
  577. tab_nav_render,
  578. tab_nav_staticRenderFns,
  579. false,
  580. null,
  581. null,
  582. null
  583. )
  584. /* hot reload */
  585. if (false) { var tab_nav_api; }
  586. tab_nav_component.options.__file = "packages/tabs/src/tab-nav.vue"
  587. /* harmony default export */ var tab_nav = (tab_nav_component.exports);
  588. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/tabs/src/tabs.vue?vue&type=script&lang=js&
  589. /* harmony default export */ var tabsvue_type_script_lang_js_ = ({
  590. name: 'ElTabs',
  591. components: {
  592. TabNav: tab_nav
  593. },
  594. props: {
  595. type: String,
  596. activeName: String,
  597. closable: Boolean,
  598. addable: Boolean,
  599. value: {},
  600. editable: Boolean,
  601. tabPosition: {
  602. type: String,
  603. default: 'top'
  604. },
  605. beforeLeave: Function,
  606. stretch: Boolean
  607. },
  608. provide: function provide() {
  609. return {
  610. rootTabs: this
  611. };
  612. },
  613. data: function data() {
  614. return {
  615. currentName: this.value || this.activeName,
  616. panes: []
  617. };
  618. },
  619. watch: {
  620. activeName: function activeName(value) {
  621. this.setCurrentName(value);
  622. },
  623. value: function value(_value) {
  624. this.setCurrentName(_value);
  625. },
  626. currentName: function currentName(value) {
  627. var _this = this;
  628. if (this.$refs.nav) {
  629. this.$nextTick(function () {
  630. _this.$refs.nav.$nextTick(function (_) {
  631. _this.$refs.nav.scrollToActiveTab();
  632. });
  633. });
  634. }
  635. }
  636. },
  637. methods: {
  638. calcPaneInstances: function calcPaneInstances() {
  639. var _this2 = this;
  640. var isForceUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  641. if (this.$slots.default) {
  642. var paneSlots = this.$slots.default.filter(function (vnode) {
  643. return vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane';
  644. });
  645. // update indeed
  646. var panes = paneSlots.map(function (_ref) {
  647. var componentInstance = _ref.componentInstance;
  648. return componentInstance;
  649. });
  650. var panesChanged = !(panes.length === this.panes.length && panes.every(function (pane, index) {
  651. return pane === _this2.panes[index];
  652. }));
  653. if (isForceUpdate || panesChanged) {
  654. this.panes = panes;
  655. }
  656. } else if (this.panes.length !== 0) {
  657. this.panes = [];
  658. }
  659. },
  660. handleTabClick: function handleTabClick(tab, tabName, event) {
  661. if (tab.disabled) return;
  662. this.setCurrentName(tabName);
  663. this.$emit('tab-click', tab, event);
  664. },
  665. handleTabRemove: function handleTabRemove(pane, ev) {
  666. if (pane.disabled) return;
  667. ev.stopPropagation();
  668. this.$emit('edit', pane.name, 'remove');
  669. this.$emit('tab-remove', pane.name);
  670. },
  671. handleTabAdd: function handleTabAdd() {
  672. this.$emit('edit', null, 'add');
  673. this.$emit('tab-add');
  674. },
  675. setCurrentName: function setCurrentName(value) {
  676. var _this3 = this;
  677. var changeCurrentName = function changeCurrentName() {
  678. _this3.currentName = value;
  679. _this3.$emit('input', value);
  680. };
  681. if (this.currentName !== value && this.beforeLeave) {
  682. var before = this.beforeLeave(value, this.currentName);
  683. if (before && before.then) {
  684. before.then(function () {
  685. changeCurrentName();
  686. _this3.$refs.nav && _this3.$refs.nav.removeFocus();
  687. }, function () {
  688. // https://github.com/ElemeFE/element/pull/14816
  689. // ignore promise rejection in `before-leave` hook
  690. });
  691. } else if (before !== false) {
  692. changeCurrentName();
  693. }
  694. } else {
  695. changeCurrentName();
  696. }
  697. }
  698. },
  699. render: function render(h) {
  700. var _ref2;
  701. var type = this.type,
  702. handleTabClick = this.handleTabClick,
  703. handleTabRemove = this.handleTabRemove,
  704. handleTabAdd = this.handleTabAdd,
  705. currentName = this.currentName,
  706. panes = this.panes,
  707. editable = this.editable,
  708. addable = this.addable,
  709. tabPosition = this.tabPosition,
  710. stretch = this.stretch;
  711. var newButton = editable || addable ? h(
  712. 'span',
  713. {
  714. 'class': 'el-tabs__new-tab',
  715. on: {
  716. 'click': handleTabAdd,
  717. 'keydown': function keydown(ev) {
  718. if (ev.keyCode === 13) {
  719. handleTabAdd();
  720. }
  721. }
  722. },
  723. attrs: {
  724. tabindex: '0'
  725. }
  726. },
  727. [h('i', { 'class': 'el-icon-plus' })]
  728. ) : null;
  729. var navData = {
  730. props: {
  731. currentName: currentName,
  732. onTabClick: handleTabClick,
  733. onTabRemove: handleTabRemove,
  734. editable: editable,
  735. type: type,
  736. panes: panes,
  737. stretch: stretch
  738. },
  739. ref: 'nav'
  740. };
  741. var header = h(
  742. 'div',
  743. { 'class': ['el-tabs__header', 'is-' + tabPosition] },
  744. [newButton, h('tab-nav', navData)]
  745. );
  746. var panels = h(
  747. 'div',
  748. { 'class': 'el-tabs__content' },
  749. [this.$slots.default]
  750. );
  751. return h(
  752. 'div',
  753. { 'class': (_ref2 = {
  754. 'el-tabs': true,
  755. 'el-tabs--card': type === 'card'
  756. }, _ref2['el-tabs--' + tabPosition] = true, _ref2['el-tabs--border-card'] = type === 'border-card', _ref2) },
  757. [tabPosition !== 'bottom' ? [header, panels] : [panels, header]]
  758. );
  759. },
  760. created: function created() {
  761. if (!this.currentName) {
  762. this.setCurrentName('0');
  763. }
  764. this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
  765. },
  766. mounted: function mounted() {
  767. this.calcPaneInstances();
  768. },
  769. updated: function updated() {
  770. this.calcPaneInstances();
  771. }
  772. });
  773. // CONCATENATED MODULE: ./packages/tabs/src/tabs.vue?vue&type=script&lang=js&
  774. /* harmony default export */ var src_tabsvue_type_script_lang_js_ = (tabsvue_type_script_lang_js_);
  775. // CONCATENATED MODULE: ./packages/tabs/src/tabs.vue
  776. var tabs_render, tabs_staticRenderFns
  777. /* normalize component */
  778. var tabs_component = Object(componentNormalizer["a" /* default */])(
  779. src_tabsvue_type_script_lang_js_,
  780. tabs_render,
  781. tabs_staticRenderFns,
  782. false,
  783. null,
  784. null,
  785. null
  786. )
  787. /* hot reload */
  788. if (false) { var tabs_api; }
  789. tabs_component.options.__file = "packages/tabs/src/tabs.vue"
  790. /* harmony default export */ var tabs = (tabs_component.exports);
  791. // CONCATENATED MODULE: ./packages/tabs/index.js
  792. /* istanbul ignore next */
  793. tabs.install = function (Vue) {
  794. Vue.component(tabs.name, tabs);
  795. };
  796. /* harmony default export */ var packages_tabs = __webpack_exports__["default"] = (tabs);
  797. /***/ })
  798. /******/ });