vxe-pc-ui/lib/tabs/src/tabs.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../..//ui/src/dom"),_utils=require("../..//ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,height:[String,Number],destroyOnClose:Boolean,titleWidth:[String,Number],titleAlign:[String,Number],type:String,showClose:Boolean,padding:{type:Boolean,default:()=>(0,_ui.getConfig)().tabs.padding},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,beforeCloseMethod:Function},emits:["update:modelValue","change","tab-change","tab-change-fail","tab-close","tab-close-fail","tab-click","tab-load"],setup(u,e){const{slots:r,emit:o}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.inject)("$xeTabs",null),v=(0,_vue.ref)(),C=(0,_vue.ref)(),M=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintWidth:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),c={slTimeout:void 0},l={refElem:v},V=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,u.closeConfig)),w=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,u.refreshConfig)),d=(0,_vue.computed)(()=>{var e=u["options"];return(e||[]).filter(e=>i(e))}),h=(0,_vue.computed)(()=>{var e=M["staticTabs"];return e.filter(e=>i(e))}),n={},y={xID:t,props:u,context:e,reactData:M,getRefMaps:()=>l,getComputeMaps:()=>n},i=e=>{e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},E=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=r[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],m=()=>{(0,_vue.nextTick)(()=>{var e=u["type"];const t=M["activeName"];var a,l=d.value,n=h.value,i=C.value;let s=0,o=0,r=!1;i&&(n=_xeUtils.default.findIndexOf(n.length?n:l,e=>e.name===t),{children:l,scrollWidth:i,clientWidth:a}=i,r=i!==a,-1<n)&&(a=(i=l[n]).clientWidth,e?"card"===e?(s=a+2,o=i.offsetLeft):"border-card"===e&&(s=a+2,o=i.offsetLeft-1):(s=Math.max(4,Math.floor(.6*a)),o=i.offsetLeft+Math.floor((a-s)/2))),M.lintLeft=o,M.lintWidth=s,M.isTabOver=r})},_=(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$tabs:y},t))},f=(e,t)=>{var a=M["initNames"];return!(!e||a.includes(e)||(_("tab-load",{name:e},t),a.push(e),0))},s=e=>{let l=null;const n={};if(e&&e.length){let a=!1;l=u.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(n[""+e]={loading:!1},l===e&&(a=!0),t)&&f(e,null)}),a||(l=e[0].name,f(l,null),o("update:modelValue",l))}M.activeName=l,M.cacheTabMaps=n},O=(t,a)=>{var e=u["trigger"],l=u.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod;const n=M["activeName"],i=a["name"],s=i;_("tab-click",{name:i},t),"manual"!==e&&i!==n&&Promise.resolve(!l||l({$tabs:y,name:i,oldName:n,newName:i,option:a})).then(e=>{e?(M.activeName=i,o("update:modelValue",s),f(i,t),_("change",{value:s,name:i,oldName:n,newName:i,option:a},t),_("tab-change",{value:s,name:i,oldName:n,newName:i,option:a},t)):_("tab-change-fail",{value:s,name:i,oldName:n,newName:i,option:a},t)}).catch(()=>{_("tab-change-fail",{value:s,name:i,oldName:n,newName:i,option:a},t)})},L=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=M,l=t["name"],n=w.value["queryMethod"];const i=l?a[""+l]:null;i&&(n?(i.loading=!0,Promise.resolve(n({$tabs:y,value:e,name:l,option:t})).finally(()=>{i.loading=!1})):(0,_log.errLog)("vxe.error.notFunc",["refresh-config.queryMethod"]))},S=(t,e,a,l)=>{t.stopPropagation();var n=M["activeName"],i=V.value.beforeMethod||u.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod;const s=e["name"],o=n;let r=o;n===s&&(n=a<l.length-1?l[a+1]:l[a-1],r=n?n.name:null),Promise.resolve(!i||i({$tabs:y,value:o,name:s,nextName:r,option:e})).then(e=>{e?_("tab-close",{value:o,name:s,nextName:r},t):_("tab-close-fail",{value:o,name:s,nextName:r},t)}).catch(()=>{_("tab-close-fail",{value:o,name:s,nextName:r},t)})},b=e=>{var t=C.value;if(t){t=Math.floor(.75*t.clientWidth);{var o=e,e=t,t=c["slTimeout"];let n=e,i=6,s=35;t&&(clearTimeout(t),c.slTimeout=void 0);const r=()=>{var e,t,a,l=C.value;0<i&&(i--,l)&&({clientWidth:e,scrollWidth:t,scrollLeft:a}=l,n=Math.floor(n/2),0<o?e+a<t&&(l.scrollLeft+=n,s-=4,c.slTimeout=setTimeout(r,s)):0<a&&(l.scrollLeft-=n,s-=4,c.slTimeout=setTimeout(r,s)),m())};r()}}},k=()=>{b(-1)},B=()=>{b(1)},g=i=>{const s=d.value,o=h.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,l,n=C.value;n&&(-1<(a=_xeUtils.default.findIndexOf(o.length?o:s,e=>e.name===i))&&({scrollLeft:e,clientWidth:t,children:l}=n,l=l[a])&&(0<(l=(a=l.offsetLeft)+l.clientWidth-(e+t))&&(n.scrollLeft+=l),a<e)&&(n.scrollLeft=a),m())})},p=t=>{const a=M["activeName"];var l=d.value,n=h.value,n=n.length?n:l,l=_xeUtils.default.findIndexOf(n,e=>e.name===a);if(-1<l){let e=null;t?l<n.length-1&&(e=n[l+1]):0<l&&(e=n[l-1]),e&&(n=t=e.name,M.activeName=t,o("update:modelValue",n),f(t,null))}return(0,_vue.nextTick)()},x={dispatchEvent:_,scrollToTab:g,prev(){return p(!1)},next(){return p(!0)},prevTab(){return"development"===process.env.NODE_ENV&&(0,_log.warnLog)("vxe.error.delFunc",["prevTab","prev"]),x.prev()},nextTab(){return"development"===process.env.NODE_ENV&&(0,_log.warnLog)("vxe.error.delFunc",["nextTab","next"]),x.next()}};Object.assign(y,x,{});const N=e=>{var{initNames:t,activeName:a}=M,{name:e,slots:l}=e,l=l?l.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{key:""+e,class:["vxe-tabs-pane--item",{"is--visible":a===e,"has--content":!!l}]},l?E(l,{name:e}):[]):(0,_vue.createCommentVNode)()};(0,_vue.watch)(()=>u.modelValue,e=>{f(e,null),M.activeName=e}),(0,_vue.watch)(()=>M.activeName,e=>{g(e),(0,_vue.nextTick)(()=>{M.resizeFlag++})});const T=(0,_vue.ref)(0),A=((0,_vue.watch)(()=>u.options?u.options.length:-1,()=>{T.value++}),(0,_vue.watch)(()=>u.options,()=>{T.value++}),(0,_vue.watch)(T,()=>{s(u.options),m()}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>M.staticTabs?M.staticTabs.length:-1,()=>{A.value++}),(0,_vue.watch)(()=>M.staticTabs,()=>{A.value++}),(0,_vue.watch)(A,()=>{s(M.staticTabs),m()}),a&&(0,_vue.watch)(()=>a?a.reactData.resizeFlag:null,()=>{M.resizeFlag++}),(0,_vue.watch)(()=>M.resizeFlag,()=>{(0,_vue.nextTick)(()=>{m()})}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(y,"resize",m),m()}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(y,"resize")}),(0,_vue.provide)("$xeTabs",y),f(u.modelValue,null),s(M.staticTabs.length?M.staticTabs:u.options),y.renderVN=()=>{var{type:e,height:t,padding:a,trigger:l}=u,n=d.value,i=h.value,s=r.default,o=r.footer,i=s?i:n;return(0,_vue.h)("div",{ref:v,class:["vxe-tabs","vxe-tabs--"+(e||"default"),"trigger--"+("manual"===l?"trigger":"default"),{"is--padding":a,"is--height":t}],style:t?{height:(0,_dom.toCssUnit)(t)}:null},[(0,_vue.h)("div",{class:"vxe-tabs-slots"},s?s({}):[]),(c=>{const{type:e,titleWidth:d,titleAlign:h,showClose:m,closeConfig:_,refreshConfig:f}=u,{activeName:b,lintLeft:t,lintWidth:a,isTabOver:l,cacheTabMaps:g}=M;var n=r.extra;const p=V.value,x=p.visibleMethod,N=w.value,T=N.visibleMethod;return(0,_vue.h)("div",{class:"vxe-tabs-header"},[l?(0,_vue.h)("div",{class:"vxe-tabs-header--bar vxe-tabs-header--left-bar",onClick:k},[(0,_vue.h)("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-tabs-header--wrapper"},[(0,_vue.h)("div",{ref:C,class:"vxe-tabs-header--item-wrapper"},c.map((t,a)=>{var{title:e,titleWidth:l,titleAlign:n,icon:i,name:s,slots:o}=t,o=o?o.title||o.tab:null,l=l||d,n=n||h,r={$tabs:y,value:b,name:s,option:t},u=b===s,v=s?g[""+s]:null,v=!!v&&v.loading;return(0,_vue.h)("div",{key:""+s,class:["vxe-tabs-header--item",n?"align--"+n:"",{"is--active":u}],style:l?{width:(0,_dom.toCssUnit)(l)}:null,onClick(e){O(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[i?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:i})]):(0,_vue.createCommentVNode)(),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},o?E(o,{name:s,title:e}):""+e)]),((0,_utils.isEnableConf)(f)||N.enabled)&&(T?T(r):u)?(0,_vue.h)("div",{class:"vxe-tabs-header--refresh-btn",onClick(e){L(e,t)}},[(0,_vue.h)("i",{class:v?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]):(0,_vue.createCommentVNode)(),!(m||(0,_utils.isEnableConf)(_)||p.enabled)||x&&!x(r)?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-tabs-header--close-btn",onClick(e){S(e,t,a,c)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})])])])}).concat([(0,_vue.h)("span",{key:"line",class:"vxe-tabs-header--active-line type--"+(e||"default"),style:{left:t+"px",width:a+"px"}})]))]),l?(0,_vue.h)("div",{class:"vxe-tabs-header--bar vxe-tabs-header--right-bar",onClick:B},[(0,_vue.h)("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_vue.createCommentVNode)(),n?(0,_vue.h)("div",{class:"vxe-tabs-header--extra"},(0,_vn.getSlotVNs)(n({}))):(0,_vue.createCommentVNode)()])})(i),(0,_vue.h)("div",{class:"vxe-tabs-pane"},(e=>{var t=u["destroyOnClose"];const a=M["activeName"];var l=e.find(e=>e.name===a);return t?[l?N(l):(0,_vue.createCommentVNode)()]:e.map(e=>N(e))})(i)),o?(0,_vue.h)("div",{class:"vxe-tabs-footer"},E(o,{})):(0,_ui.renderEmptyElement)(y)])},y},render(){return this.renderVN()}});