element-gui/lib/tabs.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=69)}({0:function(t,e,n){"use strict";function i(t,e,n,i,s,a,o,r){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),a&&(c._scopeId="data-v-"+a),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=l):s&&(l=r?function(){s.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,l):[l]}return{exports:t,options:c}}n.d(e,"a",(function(){return i}))},15:function(t,e){t.exports=require("element-gui/lib/utils/resize-event")},2:function(t,e){t.exports=require("element-gui/lib/utils/util")},25:function(t,e){t.exports=require("element-gui/lib/utils/ie")},69:function(t,e,n){"use strict";n.r(e);var i=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"el-tabs__active-bar",class:"is-"+this.rootTabs.tabPosition,style:this.barStyle})};i._withStripped=!0;var s=n(2),a={name:"TabBar",props:{tabs:Array},inject:["rootTabs"],computed:{barStyle:{get:function(){var t=this,e={},n=0,i=0,a=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height",o="width"===a?"x":"y",r=function(t){return t.toLowerCase().replace(/( |^)[a-z]/g,(function(t){return t.toUpperCase()}))};this.tabs.every((function(e,o){var l=Object(s.arrayFind)(t.$parent.$refs.tabs||[],(function(t){return t.id.replace("tab-","")===e.paneName.toString()}));if(!l)return!1;if(e.active){i=l["client"+r(a)];var c=window.getComputedStyle(l);return"width"===a&&t.tabs.length>1&&(i-=parseFloat(c.paddingLeft)+parseFloat(c.paddingRight)),"width"===a&&(n+=parseFloat(c.paddingLeft)),"width"===a&&1===t.tabs.length&&(n=0,i-=16),!1}return n+=l["client"+r(a)],!0}));var l="translate"+r(o)+"("+n+"px)";return e[a]=i+"px",e.transform=l,e.msTransform=l,e.webkitTransform=l,e}}}},o=n(0),r=Object(o.a)(a,i,[],!1,null,null,null).exports,l=n(15);function c(){}var u=function(t){return t.toLowerCase().replace(/( |^)[a-z]/g,(function(t){return t.toUpperCase()}))},f={name:"TabNav",components:{TabBar:r},inject:["rootTabs"],props:{panes:Array,currentName:[String,Number],editable:Boolean,onTabClick:{type:Function,default:c},onTabRemove:{type:Function,default:c},type:String,stretch:Boolean,controllable:Boolean},data:function(){return{scrollable:!1,scrollState:{prev:0,next:!1},navOffset:0,isFocus:!1,focusable:!0,timeOutID:null,timeOutID2:null,timeOutID3:null}},computed:{navStyle:function(){return{transform:"translate"+(-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"X":"Y")+"(-"+this.navOffset+"px)"}},sizeName:function(){return-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"width":"height"}},methods:{scrollPrev:function(){var t=this.$refs.navScroll["offset"+u(this.sizeName)],e=this.navOffset;if(e){var n=e>t?e-t:0;this.navOffset=n}},scrollNext:function(){var t=this.$refs.nav["offset"+u(this.sizeName)],e=this.$refs.navScroll["offset"+u(this.sizeName)],n=this.navOffset;if(!(t-n<=e)){var i=t-n>2*e?n+e:t-e;this.navOffset=i}},scrollToActiveTab:function(){if(this.scrollable){var t=this.$refs.nav,e=this.$el.querySelector(".is-active");if(e){var n=this.$refs.navScroll,i=-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition),s=e.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i?t.offsetWidth-a.width:t.offsetHeight-a.height,r=this.navOffset,l=r;i?(s.left<a.left&&(l=r-(a.left-s.left)),s.right>a.right&&(l=r+s.right-a.right)):(s.top<a.top&&(l=r-(a.top-s.top)),s.bottom>a.bottom&&(l=r+(s.bottom-a.bottom))),l=Math.max(l,0),this.navOffset=Math.min(l,o)}}},update:function(){if(this.$refs.nav){var t=this.sizeName,e=this.$refs.nav["offset"+u(t)],n=this.$refs.navScroll["offset"+u(t)],i=this.navOffset;if(n<e){var s=this.navOffset;this.scrollable=!0,this.scrollState.prev=s,this.scrollState.next=s+n<e,e-s<n&&(this.navOffset=e-n)}else this.scrollable=!1,i>0&&(this.navOffset=0)}},changeTab:function(t){var e=t.keyCode,n=void 0,i=void 0,s=void 0;-1!==[37,38,39,40].indexOf(e)&&(s=t.currentTarget.querySelectorAll("[role=tab]"),i=Array.prototype.indexOf.call(s,t.target),s[n=37===e||38===e?0===i?s.length-1:i-1:i<s.length-1?i+1:0].focus(),s[n].click(),this.setFocus())},setFocus:function(){this.focusable&&(this.isFocus=!0)},removeFocus:function(){this.isFocus=!1},visibilityChangeHandler:function(){var t=this,e=document.visibilityState;"hidden"===e?this.focusable=!1:"visible"===e&&(this.timeOutID=setTimeout((function(){t.focusable=!0}),50))},windowBlurHandler:function(){this.focusable=!1},windowFocusHandler:function(){var t=this;this.timeOutID2=setTimeout((function(){t.focusable=!0}),50)}},updated:function(){this.update()},render:function(t){var e=this,n=this.type,i=this.panes,s=this.editable,a=this.stretch,o=this.controllable,r=this.onTabClick,l=this.onTabRemove,c=this.navStyle,u=this.scrollable,f=this.scrollState,h=this.scrollNext,d=this.scrollPrev,b=this.changeTab,v=this.setFocus,p=this.removeFocus,m=u?[t("span",{class:"el-tabs__nav-btn"},[t("span",{class:["el-tabs__nav-prev",f.prev?"":"is-disabled"],on:{click:d}},[t("i",{class:"el-icon-arrow-left"})]),t("span",{class:["el-tabs__nav-next",f.next?"":"is-disabled"],on:{click:h}},[t("i",{class:"el-icon-arrow-right"})])])]:null,g=this.rootTabs.$slots.append?t("span",{class:"el-tabs__append"},[this.rootTabs.$slots.append]):null,T=this._l(i,(function(n,i){var a,o=0===n.name?0:n.name||n.index||i,c=n.isClosable||s;n.index=""+i;var u=c?t("span",{class:"el-icon-close",on:{click:function(t){l(n,t)}}}):null,f=n.$slots.label||n.label,h=n.active?0:-1;return t("div",{class:(a={"el-tabs__item":!0},a["is-"+e.rootTabs.tabPosition]=!0,a["is-active"]=n.active,a["is-disabled"]=n.disabled,a["is-closable"]=c,a["is-focus"]=e.isFocus,a),attrs:{id:"tab-"+o,"aria-controls":"pane-"+o,"aria-label":f,role:"tab","aria-selected":n.active,tabindex:h},key:"tab-"+o,ref:"tabs",refInFor:!0,on:{focus:function(){v()},blur:function(){p()},click:function(t){p(),r(n,o,t)},keydown:function(t){!c||46!==t.keyCode&&8!==t.keyCode||l(n,t)}}},[f,u])}));return t("div",{class:["el-tabs__nav-wrap",u?"is-scrollable":"","is-"+this.rootTabs.tabPosition]},[t("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[t("div",{class:["el-tabs__nav","is-"+this.rootTabs.tabPosition,a&&-1!==["top","bottom"].indexOf(this.rootTabs.tabPosition)?"is-stretch":""],ref:"nav",style:c,attrs:{role:"tablist"},on:{keydown:function(t){o&&b(t)}}},[n?null:t("tab-bar",{attrs:{tabs:i}}),T])]),t("span",{class:"el-tabs__nav-box"},[m,g])])},mounted:function(){var t=this;Object(l.addResizeListener)(this.$el,this.update),document.addEventListener("visibilitychange",this.visibilityChangeHandler),window.addEventListener("blur",this.windowBlurHandler),window.addEventListener("focus",this.windowFocusHandler),this.timeOutID3=setTimeout((function(){t.scrollToActiveTab()}),0)},beforeDestroy:function(){this.$el&&this.update&&Object(l.removeResizeListener)(this.$el,this.update),document.removeEventListener("visibilitychange",this.visibilityChangeHandler),window.removeEventListener("blur",this.windowBlurHandler),window.removeEventListener("focus",this.windowFocusHandler),clearTimeout(this.timeOutID),clearTimeout(this.timeOutID2),clearTimeout(this.timeOutID3)}},h=Object(o.a)(f,void 0,void 0,!1,null,null,null).exports,d=n(25),b={name:"ElTabs",components:{TabNav:h},props:{type:String,size:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean,tabPosition:{type:String,default:"top"},beforeLeave:Function,stretch:Boolean,controllable:Boolean},provide:function(){return{rootTabs:this}},data:function(){return{currentName:0===this.value?0:this.value||this.activeName,panes:[]}},computed:{tabsSize:function(){return this.size||(this.$ELEMENT||{}).size}},watch:{activeName:function(t){this.setCurrentName(t)},value:function(t){this.setCurrentName(t)},currentName:function(t){var e=this;this.$refs.nav&&this.$nextTick((function(){e.$refs.nav.$nextTick((function(t){e.$refs.nav&&e.$refs.nav.scrollToActiveTab()}))}))}},methods:{calcPaneInstances:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(this.$slots.default){var n=this.$slots.default.filter((function(t){return t.tag&&t.componentOptions&&"ElTabPane"===t.componentOptions.Ctor.options.name})),i=n.map((function(t){return t.componentInstance})),s=!(i.length===this.panes.length&&i.every((function(e,n){return e===t.panes[n]})));if(s)this.panes=i;else if(e){Object(d.isFindIndex)();var a=i.findIndex((function(t){return t===e}));a>-1&&this.$set(this.panes,a,e)}}else 0!==this.panes.length&&(this.panes=[])},handleTabClick:function(t,e,n){t.disabled||(this.setCurrentName(e),this.$emit("tab-click",t,n))},handleTabRemove:function(t,e){t.disabled||(e.stopPropagation(),this.$emit("edit",t.name,"remove"),this.$emit("tab-remove",t.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(t){var e=this,n=function(){e.currentName=t,e.$emit("input",t)};if(this.currentName!==t&&this.beforeLeave){var i=this.beforeLeave(t,this.currentName);i&&i.then?i.then((function(){n(),e.$refs.nav&&e.$refs.nav.removeFocus()}),(function(){})):!1!==i&&n()}else n()}},render:function(t){var e,n=this.type,i=this.handleTabClick,s=this.handleTabRemove,a=this.handleTabAdd,o=this.currentName,r=this.panes,l=this.editable,c=this.addable,u=this.tabPosition,f=this.stretch,h=this.controllable,d=l||c?t("span",{class:"el-tabs__new-tab",on:{click:a,keydown:function(t){13===t.keyCode&&a()}},attrs:{tabindex:"0"}},[t("i",{class:"el-icon-plus"})]):null,b=this.$slots.prepend?t("span",{class:"el-tabs__prepend"},[this.$slots.prepend]):null,v={props:{currentName:o,onTabClick:i,onTabRemove:s,editable:l,type:n,panes:r,stretch:f,controllable:h},ref:"nav"},p=t("div",{class:["el-tabs__header","is-"+u,{"is-prepend":this.$slots.prepend}]},[t("span",{class:"el-tabs__prepend-btn"},[d,b]),t("tab-nav",v)]),m=t("div",{class:"el-tabs__content"},[this.$slots.default]);return t("div",{class:(e={"el-tabs":!0,"el-tabs--card":"card"===n},e["el-tabs--"+u]=!0,e["el-tabs--border-card"]="border-card"===n,e["el-tabs--"+this.tabsSize]=this.tabsSize,e)},["bottom"!==u?[p,m]:[m,p]])},created:function(){var t=this;0===this.currentName||this.currentName||this.setCurrentName("0"),this.$on("tab-nav-update",this.calcPaneInstances),this.$once("hook:beforeDestroy",(function(){t.$off("tab-nav-update",t.calcPaneInstances)}))},mounted:function(){this.calcPaneInstances()},updated:function(){this.calcPaneInstances()}},v=Object(o.a)(b,void 0,void 0,!1,null,null,null).exports;v.install=function(t){t.component(v.name,v)};e.default=v}});