element-ui
Version:
A Component Library for Vue.js.
687 lines (566 loc) • 16.8 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(323);
/***/ },
/***/ 3:
/***/ function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context = context || (this.$vnode && this.$vnode.ssrContext)
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = injectStyles
}
if (hook) {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ },
/***/ 46:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/utils/resize-event");
/***/ },
/***/ 323:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _tabs = __webpack_require__(324);
var _tabs2 = _interopRequireDefault(_tabs);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* istanbul ignore next */
_tabs2.default.install = function (Vue) {
Vue.component(_tabs2.default.name, _tabs2.default);
};
exports.default = _tabs2.default;
/***/ },
/***/ 324:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(325),
/* template */
null,
/* styles */
null,
/* scopeId */
null,
/* moduleIdentifier (server only) */
null
)
module.exports = Component.exports
/***/ },
/***/ 325:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _tabNav = __webpack_require__(326);
var _tabNav2 = _interopRequireDefault(_tabNav);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: 'ElTabs',
components: {
TabNav: _tabNav2.default
},
props: {
type: String,
activeName: String,
closable: Boolean,
addable: Boolean,
value: {},
editable: Boolean
},
data: function data() {
return {
currentName: this.value || this.activeName,
panes: []
};
},
watch: {
activeName: function activeName(value) {
this.setCurrentName(value);
},
value: function value(_value) {
this.setCurrentName(_value);
},
currentName: function currentName(value) {
var _this = this;
if (this.$refs.nav) {
this.$nextTick(function (_) {
_this.$refs.nav.scrollToActiveTab();
});
}
}
},
methods: {
handleTabClick: function handleTabClick(tab, tabName, event) {
if (tab.disabled) return;
this.setCurrentName(tabName);
this.$emit('tab-click', tab, event);
},
handleTabRemove: function handleTabRemove(pane, ev) {
if (pane.disabled) return;
ev.stopPropagation();
this.$emit('edit', pane.name, 'remove');
this.$emit('tab-remove', pane.name);
},
handleTabAdd: function handleTabAdd() {
this.$emit('edit', null, 'add');
this.$emit('tab-add');
},
setCurrentName: function setCurrentName(value) {
this.currentName = value;
this.$emit('input', value);
},
addPanes: function addPanes(item) {
var index = this.$slots.default.filter(function (item) {
return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className);
}).indexOf(item.$vnode);
this.panes.splice(index, 0, item);
},
removePanes: function removePanes(item) {
var panes = this.panes;
var index = panes.indexOf(item);
if (index > -1) {
panes.splice(index, 1);
}
}
},
render: function render(h) {
var type = this.type,
handleTabClick = this.handleTabClick,
handleTabRemove = this.handleTabRemove,
handleTabAdd = this.handleTabAdd,
currentName = this.currentName,
panes = this.panes,
editable = this.editable,
addable = this.addable;
var newButton = editable || addable ? h(
'span',
{
'class': 'el-tabs__new-tab',
on: {
'click': handleTabAdd
}
},
[h(
'i',
{ 'class': 'el-icon-plus' },
[]
)]
) : null;
var navData = {
props: {
currentName: currentName,
onTabClick: handleTabClick,
onTabRemove: handleTabRemove,
editable: editable,
type: type,
panes: panes
},
ref: 'nav'
};
return h(
'div',
{ 'class': {
'el-tabs': true,
'el-tabs--card': type === 'card',
'el-tabs--border-card': type === 'border-card'
} },
[h(
'div',
{ 'class': 'el-tabs__header' },
[newButton, h(
'tab-nav',
navData,
[]
)]
), h(
'div',
{ 'class': 'el-tabs__content' },
[this.$slots.default]
)]
);
},
created: function created() {
if (!this.currentName) {
this.setCurrentName('0');
}
}
};
/***/ },
/***/ 326:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(327),
/* template */
null,
/* styles */
null,
/* scopeId */
null,
/* moduleIdentifier (server only) */
null
)
module.exports = Component.exports
/***/ },
/***/ 327:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _tabBar = __webpack_require__(328);
var _tabBar2 = _interopRequireDefault(_tabBar);
var _resizeEvent = __webpack_require__(46);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function noop() {}
exports.default = {
name: 'TabNav',
components: {
TabBar: _tabBar2.default
},
props: {
panes: Array,
currentName: String,
editable: Boolean,
onTabClick: {
type: Function,
default: noop
},
onTabRemove: {
type: Function,
default: noop
},
type: String
},
data: function data() {
return {
scrollable: false,
navStyle: {
transform: ''
}
};
},
methods: {
scrollPrev: function scrollPrev() {
var containerWidth = this.$refs.navScroll.offsetWidth;
var currentOffset = this.getCurrentScrollOffset();
if (!currentOffset) return;
var newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0;
this.setOffset(newOffset);
},
scrollNext: function scrollNext() {
var navWidth = this.$refs.nav.offsetWidth;
var containerWidth = this.$refs.navScroll.offsetWidth;
var currentOffset = this.getCurrentScrollOffset();
if (navWidth - currentOffset <= containerWidth) return;
var newOffset = navWidth - currentOffset > containerWidth * 2 ? currentOffset + containerWidth : navWidth - containerWidth;
this.setOffset(newOffset);
},
scrollToActiveTab: function scrollToActiveTab() {
if (!this.scrollable) return;
var nav = this.$refs.nav;
var activeTab = this.$el.querySelector('.is-active');
var navScroll = this.$refs.navScroll;
var activeTabBounding = activeTab.getBoundingClientRect();
var navScrollBounding = navScroll.getBoundingClientRect();
var navBounding = nav.getBoundingClientRect();
var currentOffset = this.getCurrentScrollOffset();
var newOffset = currentOffset;
if (activeTabBounding.left < navScrollBounding.left) {
newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
}
if (navBounding.right < navScrollBounding.right) {
newOffset = nav.offsetWidth - navScrollBounding.width;
}
this.setOffset(Math.max(newOffset, 0));
},
getCurrentScrollOffset: function getCurrentScrollOffset() {
var navStyle = this.navStyle;
return navStyle.transform ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0;
},
setOffset: function setOffset(value) {
this.navStyle.transform = 'translateX(-' + value + 'px)';
},
update: function update() {
var navWidth = this.$refs.nav.offsetWidth;
var containerWidth = this.$refs.navScroll.offsetWidth;
var currentOffset = this.getCurrentScrollOffset();
if (containerWidth < navWidth) {
var _currentOffset = this.getCurrentScrollOffset();
this.scrollable = this.scrollable || {};
this.scrollable.prev = _currentOffset;
this.scrollable.next = _currentOffset + containerWidth < navWidth;
if (navWidth - _currentOffset < containerWidth) {
this.setOffset(navWidth - containerWidth);
}
} else {
this.scrollable = false;
if (currentOffset > 0) {
this.setOffset(0);
}
}
}
},
updated: function updated() {
this.update();
},
render: function render(h) {
var type = this.type,
panes = this.panes,
editable = this.editable,
onTabClick = this.onTabClick,
onTabRemove = this.onTabRemove,
navStyle = this.navStyle,
scrollable = this.scrollable,
scrollNext = this.scrollNext,
scrollPrev = this.scrollPrev;
var scrollBtn = scrollable ? [h(
'span',
{ 'class': ['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled'], on: {
'click': scrollPrev
}
},
[h(
'i',
{ 'class': 'el-icon-arrow-left' },
[]
)]
), h(
'span',
{ 'class': ['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled'], on: {
'click': scrollNext
}
},
[h(
'i',
{ 'class': 'el-icon-arrow-right' },
[]
)]
)] : null;
var tabs = this._l(panes, function (pane, index) {
var tabName = pane.name || pane.index || index;
var closable = pane.isClosable || editable;
pane.index = '' + index;
var btnClose = closable ? h(
'span',
{ 'class': 'el-icon-close', on: {
'click': function click(ev) {
onTabRemove(pane, ev);
}
}
},
[]
) : null;
var tabLabelContent = pane.$slots.label || pane.label;
return h(
'div',
{
'class': {
'el-tabs__item': true,
'is-active': pane.active,
'is-disabled': pane.disabled,
'is-closable': closable
},
ref: 'tabs',
refInFor: true,
on: {
'click': function click(ev) {
onTabClick(pane, tabName, ev);
}
}
},
[tabLabelContent, btnClose]
);
});
return h(
'div',
{ 'class': ['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : ''] },
[scrollBtn, h(
'div',
{ 'class': ['el-tabs__nav-scroll'], ref: 'navScroll' },
[h(
'div',
{ 'class': 'el-tabs__nav', ref: 'nav', style: navStyle },
[!type ? h(
'tab-bar',
{
attrs: { tabs: panes }
},
[]
) : null, tabs]
)]
)]
);
},
mounted: function mounted() {
(0, _resizeEvent.addResizeListener)(this.$el, this.update);
},
beforeDestroy: function beforeDestroy() {
if (this.$el && this.update) (0, _resizeEvent.removeResizeListener)(this.$el, this.update);
}
};
/***/ },
/***/ 328:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(329),
/* template */
__webpack_require__(330),
/* styles */
null,
/* scopeId */
null,
/* moduleIdentifier (server only) */
null
)
module.exports = Component.exports
/***/ },
/***/ 329:
/***/ function(module, exports) {
'use strict';
exports.__esModule = true;
//
//
//
exports.default = {
name: 'TabBar',
props: {
tabs: Array
},
computed: {
barStyle: {
cache: false,
get: function get() {
var _this = this;
if (!this.$parent.$refs.tabs) return {};
var style = {};
var offset = 0;
var tabWidth = 0;
this.tabs.every(function (tab, index) {
var $el = _this.$parent.$refs.tabs[index];
if (!$el) {
return false;
}
if (!tab.active) {
offset += $el.clientWidth;
return true;
} else {
tabWidth = $el.clientWidth;
return false;
}
});
var transform = 'translateX(' + offset + 'px)';
style.width = tabWidth + 'px';
style.transform = transform;
style.msTransform = transform;
style.webkitTransform = transform;
return style;
}
}
}
};
/***/ },
/***/ 330:
/***/ function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "el-tabs__active-bar",
style: (_vm.barStyle)
})
},staticRenderFns: []}
/***/ }
/******/ });