gg-y-ui/lib/tabs/index.js

An enterprise-class UI design language and Vue-based implementation for web

/*!
 * 
 * y-ui v0.1.0
 * 
 * Copyright 2021-present, Y-UI-Design.
 * All rights reserved.
 * 
 */
module.exports=function(t){var e={};function r(a){if(e[a])return e[a].exports;var i=e[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=t,r.c=e,r.d=function(t,e,a){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(a,i,function(e){return t[e]}.bind(null,i));return a},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=121)}({0:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.getPrefixCls=function(t){return"y-"+t}},1:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a,i=r(2),n=(a=i)&&a.__esModule?a:{default:a};n.default.install=function(t){t.component(n.default.name,n.default)},e.default=n.default},121:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a,i=r(122),n=(a=i)&&a.__esModule?a:{default:a};n.default.install=function(t){t.component(n.default.name,n.default)},e.default=n.default},122:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a,i=r(0),n=r(1),s=(a=n)&&a.__esModule?a:{default:a};function o(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var h={name:"YTabs",props:{type:{type:String,default:"normal"},activeName:String,value:{},center:{type:Boolean,default:!1},border:{type:Boolean,default:!1}},data:function(){return{currentName:this.value||this.activeName,panes:[],barStyle:{},tabWidthArr:[],containerWidth:0,tempTabs:[],moreTabs:[],revealTab:!1,moveSpace:0,currentMoveSpace:0,showPrevBtn:!1,showNextBtn:!1,showLeftMask:!1,showRightMask:!1}},computed:{showMore:function(){return("normal"===this.type||"title"===this.type)&&this.tabWidthArr[this.tabWidthArr.length-1]>this.containerWidth}},watch:{activeName:function(t){this.setCurrentName(t)},currentMoveSpace:{handler:function(){this.showMore&&0!==this.currentMoveSpace?(this.tabWidthArr[this.tabWidthArr.length-1]===this.containerWidth-this.currentMoveSpace?this.showRightMask=!1:this.showRightMask=!0,this.showLeftMask=!0):(this.showLeftMask=!1,0===this.currentMoveSpace&&(this.showPrevBtn=!1))},immediate:!0},showMore:function(){var t=this;this.showMore&&this.$nextTick((function(){t.containerWidth=t.$refs["tabs-list"].clientWidth,t.showRightMask=!0;for(var e=0;e<t.tabWidthArr.length;e++)t.tabWidthArr[e]>t.containerWidth&&t.moreTabs.push({index:e,label:t.tempTabs[e].label,width:t.tempTabs[e].width})}))},containerWidth:function(){this.showMore&&this.recalculate(),this.tabWidthArr[this.tabWidthArr.length-1]<=this.containerWidth&&(this.showNextBtn=!1,this.showPrevBtn=!1,this.$refs["tabs-nav"].style.transform="",this.currentMoveSpace=0)}},methods:{calcPaneInstances:function(){var t=this;if(this.$slots.default){var e=this.$slots.default.filter((function(t){return t.tag&&t.componentOptions&&"YTabPane"===t.componentOptions.Ctor.options.name})).map((function(t){return t.componentInstance}));this.panes=e,this.$nextTick((function(){t.setBarStyle(!0)}))}},handleTabClick:function(t,e,r){if(this.showMore){var a=this.$refs["tabs-nav"];if(this.tabWidthArr[t.index]+this.currentMoveSpace>=this.containerWidth)this.currentMoveSpace=-(this.tabWidthArr[t.index]-this.containerWidth),a.style.transform="translateX("+this.currentMoveSpace+"px)";else if(this.tabWidthArr[t.index]+this.currentMoveSpace+16<this.tempTabs[t.index].width){var i=-this.currentMoveSpace-this.tabWidthArr[t.index]+this.tempTabs[t.index].width;"0"!==t.index&&(i-=16),this.currentMoveSpace+=i,a.style.transform="translateX("+this.currentMoveSpace+"px)"}this.recalculate()}this.setCurrentName(e),this.$emit("tab-click",t,r)},recalculate:function(){for(var t=[],e=0;e<this.tabWidthArr.length;e++)(this.tabWidthArr[e]+this.currentMoveSpace<this.tempTabs[e].width-16||this.tabWidthArr[e]+this.currentMoveSpace>this.containerWidth)&&t.push(this.tempTabs[e]);this.moreTabs=t,this.revealTab=!1},setBarStyle:function(t){var e=this,r={},a=0,i=0;this.$refs.tabs&&this.panes.every((function(t){for(var r=void 0,n=0;n<e.$refs.tabs.length;n++)if(e.$refs.tabs[n].id.replace("tab-","")===t.paneName){r=e.$refs.tabs[n];break}if(!r)return!1;if(t.active){i=r.clientWidth;var s=window.getComputedStyle(r);return e.panes.length>1&&(i-=parseFloat(s.paddingLeft)+parseFloat(s.paddingRight)),a+=parseFloat(s.paddingLeft),!1}return a+=r.clientWidth,!0}));var n="translateX("+a+"px)";r.width=i+"px",r.transform=n,r.msTransform=n,r.webkitTransform=n,t&&(r.transitionDuration="0s"),this.barStyle=r},initScrollBtn:function(){var t=this;this.$nextTick((function(){var e=t.$refs.tabs;if(e&&e.length>2){var r=0;t.containerWidth=t.$refs["tabs-list"].clientWidth;for(var a=0;a<e.length;a++)r+=e[a].clientWidth,t.tabWidthArr.push(r),t.tempTabs.push({index:a,label:e[a].id.replace("tab-",""),width:e[a].clientWidth});var i=window.getComputedStyle(t.$refs["tabs-list"]);t.moveSpace=t.containerWidth-parseFloat(i.paddingLeft)-parseFloat(i.paddingRight)-2*("small"===t.type?32:48),"small"===t.type&&(t.tabWidthArr[t.tabWidthArr.length-1]>t.containerWidth||!t.containerWidth)&&(t.showNextBtn=!0)}}))},prev:function(){var t=this;this.$nextTick((function(){var e=t.$refs["tabs-nav"];Math.abs(t.currentMoveSpace)<t.moveSpace?(t.currentMoveSpace=0,e.style.transform="translateX(0px)",t.showPrevBtn=!1):(t.currentMoveSpace+=t.moveSpace,e.style.transform="translateX("+t.currentMoveSpace+"px)"),t.showNextBtn=!0}))},next:function(){var t=this;this.$nextTick((function(){var e=t.$refs["tabs-nav"];Math.abs(t.currentMoveSpace)+t.moveSpace+t.containerWidth>t.tabWidthArr[t.tabWidthArr.length-1]?(t.currentMoveSpace=-(t.tabWidthArr[t.tabWidthArr.length-1]-t.moveSpace-64),e.style.transform="translateX("+t.currentMoveSpace+"px)",t.showNextBtn=!1):(t.currentMoveSpace-=t.moveSpace,e.style.transform="translateX("+t.currentMoveSpace+"px)"),t.showPrevBtn=!0}))},moveNav:function(t){var e=this.$refs["tabs-nav"],r=this.tabWidthArr[this.tabWidthArr.length-1]-this.containerWidth;this.tabWidthArr[t.index]-t.width<=r?this.currentMoveSpace=-(this.tabWidthArr[t.index]===t.width?0:this.tabWidthArr[t.index]-t.width+16):this.currentMoveSpace=-r,e.style.transform="translateX("+this.currentMoveSpace+"px)",this.setCurrentName(t.label),this.revealTab=!1;for(var a=[],i=0;i<this.tabWidthArr.length;i++)(this.tabWidthArr[i]+this.currentMoveSpace<this.tempTabs[i].width-16||this.tabWidthArr[i]+this.currentMoveSpace>this.containerWidth)&&a.push(this.tempTabs[i]);this.moreTabs=a},more:function(){this.revealTab=!this.revealTab},setCurrentName:function(t){var e=this;this.currentName!==t&&(e.currentName=t,e.$emit("input",t),this.setBarStyle(!1))},resizeTabs:function(){var t=this;(window.requestAnimationFrame||function(t){return setTimeout(t,1e3/60)})((function(){if(t.containerWidth!==t.$refs["tabs-list"].clientWidth){t.containerWidth=t.$refs["tabs-list"].clientWidth;var e=window.getComputedStyle(t.$refs["tabs-list"]);t.moveSpace=t.containerWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight)-2*("small"===t.type?32:48),t.tabWidthArr[t.tabWidthArr.length-1]+t.currentMoveSpace>t.containerWidth?t.showNextBtn=!0:t.showNextBtn=!1;var r=t.tabWidthArr[t.tabWidthArr.length-1]-t.containerWidth;Math.abs(t.currentMoveSpace)>r&&(t.currentMoveSpace=-r,t.$refs["tabs-nav"].style.transform="translateX("+t.currentMoveSpace+"px)")}}))},handleScroll:function(t){if(this.showMore){t.stopPropagation(),t.preventDefault();var e=t.wheelDelta,r=this.tabWidthArr[this.tabWidthArr.length-1]-this.containerWidth,a=this.$refs["tabs-nav"];this.currentMoveSpace+e>=0?(a.style.transform="translateX(0px)",this.currentMoveSpace=0):this.currentMoveSpace+e<-r?(this.currentMoveSpace=-r,a.style.transform="translateX("+this.currentMoveSpace+"px)"):(this.currentMoveSpace+=e,a.style.transform="translateX("+this.currentMoveSpace+"px)"),this.recalculate()}}},render:function(){var t,e,r,a,n=arguments[0],h=this.handleTabClick,l=this.handleScroll,c=this.showMore,u=this.showLeftMask,d=this.showRightMask,f=this.revealTab,p=this.type,v=this.more,b=this.moreTabs,m=this.moveNav,w=this.prev,M=this.next,S=this.panes,W=this.currentName,y=this.barStyle,g=this.showPrevBtn,x=this.showNextBtn,A=this.center,T=this.border,_=this.$slots,$=(0,i.getPrefixCls)("tabs"),k=this._l(S,(function(t,e){var r=t.name||t.index||e;t.index=""+e;var a=t.$slots.label||t.label;return n("li",{attrs:{id:"tab-"+r},key:"tab-"+r,ref:"tabs",refInFor:!0,class:{"tab-item":!0,"is-active":W===a},on:{click:function(e){return h(t,r,e)}}},[a])})),P=!c&&g?n("span",{on:{click:w},class:$+"-prev"},[n(s.default,{attrs:{name:"arrow1_left_wide_linear"}})]):null,N=!c&&x?n("span",{on:{click:M},class:$+"-next"},[n(s.default,{attrs:{name:"arrow1_right_wide_linear"}})]):null,B=c?n("span",{class:(t={},o(t,$+"-more",!0),o(t,$+"-more-title","title"===p),t),on:{click:v}},["更多",n(s.default,{attrs:{name:f?"arrow2_down_filled":"arrow2_up_filled"}})]):null,O=c?n("div",{directives:[{name:"show",value:u}],class:$+"-left-mask"}):null,j=c?n("div",{directives:[{name:"show",value:d}],class:$+"-right-mask"}):null,C=c?n("ul",{class:$+"-more-list",directives:[{name:"show",value:f}]},[b.map((function(t,e){return n("li",{attrs:{id:"more-"+t.label},key:e+t.label,on:{click:function(){return m(t)}}},[t.label])}))]):null;return n("div",{class:(e={},o(e,$+"-wrapper",!0),o(e,"position-center",A),o(e,"border-bottom-"+p,T),e)},[C,n("div",{class:{"tabs-list":!0,small:"small"===p}},[P,N,n("div",{class:$+"-nav-scroll",on:{mousewheel:l},ref:"tabs-list"},[O,j,n("div",{class:$+"-nav",ref:"tabs-nav"},[n("div",{class:$+"-active-bar",style:y}),n("ul",{class:(r={},o(r,$,!0),o(r,$+"-small","small"===p),o(r,$+"-title","title"===p),r)},[k])])]),B]),n("div",{class:(a={},o(a,$+"-content",!0),o(a,"small","small"===p),a)},[_.default])])},mounted:function(){this.calcPaneInstances(),this.initScrollBtn(),window.addEventListener("resize",this.resizeTabs)},beforeDestroy:function(){window.removeEventListener("resize",this.resizeTabs)}};e.default=h},2:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=r(0);function i(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var n={name:"YIcon",props:{name:String,sizes:{type:Number,default:4}},render:function(){var t,e=arguments[0],r=this.name,n=this.sizes;console.log(n);var s=(0,a.getPrefixCls)("icon"),o={class:(t={},i(t,""+s,!0),i(t,s+"-"+r,!!r),t),style:{fontSize:4*n+"px"}};return e("i",o)}};e.default=n}});