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"),_comp=require("../../ui/src/comp"),_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")),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const scrollbarOffsetSize=20;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,width:[String,Number],height:[String,Number],destroyOnClose:Boolean,titleWidth:[String,Number],titleAlign:[String,Number],type:{type:String,default:()=>(0,_ui.getConfig)().tabs.type},position:{type:String,default:()=>(0,_ui.getConfig)().tabs.position},showClose:Boolean,showBody:{type:Boolean,default:!0},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(c,e){const{slots:d,emit:o}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.inject)("$xeTabs",null),v=(0,_vue.ref)(),w=(0,_vue.ref)(),u=(0,_vue.ref)(),B=(0,_vue.ref)(),O=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,scrollbarHeight:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),m={slTimeout:void 0},C={refElem:v},S=(0,_vue.computed)(()=>{var e=c["type"];return e||"default"}),L=(0,_vue.computed)(()=>{var e=c["position"];return e||"top"}),W=(0,_vue.computed)(()=>{var e=L.value;return"left"===e||"right"===e}),U=(0,_vue.computed)(()=>{var{lintLeft:e,lintTop:t,lintWidth:a,lintHeight:i}=O;return W.value?{top:t+"px",height:i+"px"}:{left:e+"px",width:a+"px"}}),M=(0,_vue.computed)(()=>{var{width:e,height:t}=c,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t)),a}),H=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,c.closeConfig)),A=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,c.refreshConfig)),g=(0,_vue.computed)(()=>{var e=c["options"];return(e||[]).filter(e=>i(e))}),b=(0,_vue.computed)(()=>{var e=O["staticTabs"];return e.filter(e=>i(e))});var V=(0,_vue.computed)(()=>a?a.reactData.resizeFlag:null);const z={},k={xID:t,props:c,context:e,reactData:O,getRefMaps:()=>C,getComputeMaps:()=>z},i=e=>{e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},F=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=d[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],q=()=>{var e,t,a,i,l,s=W.value,n=w.value,o=u.value,r=B.value;n&&({scrollLeft:n,scrollTop:e,clientWidth:t,clientHeight:a,scrollWidth:i,scrollHeight:l}=n,o&&(0<(s?e:n)?(0,_dom.addClass):(0,_dom.removeClass))(o,"scrolling--middle"),r)&&((s?a<l-Math.ceil(e):t<i-Math.ceil(n))?(0,_dom.addClass):(0,_dom.removeClass))(r,"scrolling--middle")},p=()=>{var e=()=>{const t=O["activeName"];var e,a,i,l,s,n=S.value,o=g.value,r=b.value,u=w.value,v=W.value;let c=0,d=0,h=0,m=0,p=0,f=0,_=!1;u&&(r=_xeUtils.default.findIndexOf(r.length?r:o,e=>e.name===t),{children:o,offsetWidth:u,scrollWidth:e,offsetHeight:i,scrollHeight:l,clientWidth:a,clientHeight:s}=u,p=u-a,f=i-s,v?(_=l!==s,-1<r&&(u=o[r])&&(i=u.clientHeight,v=u.clientWidth,m="card"===n?(c=v,d=i,u.offsetTop):"border-card"===n?(c=v,d=i,u.offsetTop-1):(d=Math.max(4,Math.floor(.6*i)),u.offsetTop+Math.floor((i-d)/2)))):(_=e!==a,-1<r&&(l=o[r])&&(s=l.clientWidth,h="card"===n?(c=s+1,l.offsetLeft):"border-card"===n?(c=s,l.offsetLeft-1):(c=Math.max(4,Math.floor(.6*s)),l.offsetLeft+Math.floor((s-c)/2))))),O.scrollbarWidth=p,O.scrollbarHeight=f,O.lintLeft=h,O.lintTop=m,O.lintWidth=c,O.lintHeight=d,O.isTabOver=_,q()};e(),(0,_vue.nextTick)(e)},h=(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$tabs:k},t))},r=(e,t)=>{var a=O["initNames"];return!(!e||a.includes(e)||(h("tab-load",{name:e},t),a.push(e),0))},l=e=>{let i=null;const l={};if(e&&e.length){let a=!1;i=c.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(l[""+e]={loading:!1},i===e&&(a=!0),t)&&r(e,null)}),a||(i=e[0].name,r(i,null),o("update:modelValue",i))}O.activeName=i,O.cacheTabMaps=l},I=(t,a)=>{var e=c["trigger"],i=c.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod;const l=O["activeName"],s=a["name"],n=s;h("tab-click",{name:s},t),"manual"!==e&&s!==l&&Promise.resolve(!i||i({$tabs:k,name:s,oldName:l,newName:s,option:a})).then(e=>{e?(O.activeName=s,o("update:modelValue",n),r(s,t),h("change",{value:n,name:s,oldName:l,newName:s,option:a},t),h("tab-change",{value:n,name:s,oldName:l,newName:s,option:a},t)):h("tab-change-fail",{value:n,name:s,oldName:l,newName:s,option:a},t)}).catch(()=>{h("tab-change-fail",{value:n,name:s,oldName:l,newName:s,option:a},t)})},R=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=O,i=t["name"],l=A.value["queryMethod"];const s=i?a[""+i]:null;s&&(l?s.loading||(s.loading=!0,Promise.resolve(l({$tabs:k,value:e,name:i,option:t})).finally(()=>{s.loading=!1})):(0,_log.errLog)("vxe.error.notFunc",["refresh-config.queryMethod"]))},P=(t,e,a,i)=>{t.stopPropagation();var l=O["activeName"],s=H.value.beforeMethod||c.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod;const n=e["name"],o=l;let r=o;l===n&&(l=a<i.length-1?i[a+1]:i[a-1],r=l?l.name:null),Promise.resolve(!s||s({$tabs:k,value:o,name:n,nextName:r,option:e})).then(e=>{e?h("tab-close",{value:o,name:n,nextName:r},t):h("tab-close-fail",{value:o,name:n,nextName:r},t)}).catch(()=>{h("tab-close-fail",{value:o,name:n,nextName:r},t)})},s=e=>{var t=W.value,a=w.value;if(a){var{clientWidth:a,clientHeight:i}=a,t=Math.floor(.75*(t?i:a));{var c=e,i=t,a=m["slTimeout"];const d=W.value;let o=d?0:i,r=d?i:0,u=6,v=35;a&&(clearTimeout(a),m.slTimeout=void 0);const h=()=>{var e,t,a,i,l,s,n=w.value;0<u&&(u--,n)&&({clientWidth:e,clientHeight:t,scrollWidth:a,scrollHeight:i,scrollLeft:l,scrollTop:s}=n,d?(r=Math.floor(r/2),0<c?t+s<i&&(n.scrollTop+=r,v-=4,m.slTimeout=setTimeout(h,v)):0<s&&(n.scrollTop-=r,v-=4,m.slTimeout=setTimeout(h,v))):(o=Math.floor(o/2),0<c?e+l<a&&(n.scrollLeft+=o,v-=4,m.slTimeout=setTimeout(h,v)):0<l&&(n.scrollLeft-=o,v-=4,m.slTimeout=setTimeout(h,v))),p())};h()}}},$=()=>{s(-1)},j=()=>{s(1)},n=o=>{const r=g.value,u=b.value,v=W.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,i,l,s,n=w.value;n&&(-1<(i=_xeUtils.default.findIndexOf(u.length?u:r,e=>e.name===o))&&({scrollLeft:e,scrollTop:s,clientWidth:t,clientHeight:l,children:a}=n,a=a[i])&&(v?(0<(l=(i=a.offsetTop)+a.clientHeight-(s+l))&&(n.scrollTop+=l),i<s&&(n.scrollTop=i)):(0<(s=(l=a.offsetLeft)+a.clientWidth-(e+t))&&(n.scrollLeft+=s),l<e&&(n.scrollLeft=l))),p())})},f=t=>{const a=O["activeName"];var i=g.value,l=b.value,l=l.length?l:i,i=_xeUtils.default.findIndexOf(l,e=>e.name===a);if(-1<i){let e=null;t?i<l.length-1&&(e=l[i+1]):0<i&&(e=l[i-1]),e&&(l=t=e.name,O.activeName=t,o("update:modelValue",l),r(t,null))}return(0,_vue.nextTick)()},_={dispatchEvent:h,scrollToTab:n,prev(){return f(!1)},next(){return f(!0)},prevTab(){return(0,_log.warnLog)("vxe.error.delFunc",["prevTab","prev"]),_.prev()},nextTab(){return(0,_log.warnLog)("vxe.error.delFunc",["nextTab","next"]),_.next()}};Object.assign(k,_,{});const x=h=>{const{titleWidth:m,titleAlign:p,showClose:f,closeConfig:_,refreshConfig:g}=c,{activeName:b,scrollbarWidth:e,scrollbarHeight:t,isTabOver:a,cacheTabMaps:x}=O,T=S.value,y=L.value;var i=W.value,l=U.value,s=d.tabPrefix||d["tab-prefix"]||d.prefix,n=d.tabSuffix||d["tab-suffix"]||d.suffix||d.extra;const N=H.value,E=N.visibleMethod,C=A.value,M=C.visibleMethod;return(0,_vue.h)("div",{key:"th",class:["vxe-tabs-header","type--"+T,"pos--"+y]},[s?(0,_vue.h)("div",{class:["vxe-tabs-header--prefix","type--"+T,"pos--"+y]},F(s,{name:b})):(0,_ui.renderEmptyElement)(k),a?(0,_vue.h)("div",{ref:u,class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--"+T,"pos--"+y],onClick:$},[(0,_vue.h)("span",{class:i?(0,_ui.getIcon)().TABS_TAB_BUTTON_TOP:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("div",{class:["vxe-tabs-header--wrapper","type--"+T,"pos--"+y]},[(0,_vue.h)("div",{ref:w,class:"vxe-tabs-header--item-wrapper",style:i?{marginRight:`-${e+scrollbarOffsetSize}px`,paddingRight:scrollbarOffsetSize+"px"}:{marginBottom:`-${t+scrollbarOffsetSize}px`,paddingBottom:scrollbarOffsetSize+"px"},onScroll:q},h.map((t,a)=>{var{title:e,titleWidth:i,titleAlign:l,icon:s,name:n}=t,o=t.slots||{},r=o.title||o.tab,u=o.titlePrefix||o["title-prefix"],o=o.titleSuffix||o["title-suffix"],i=i||m,l=l||p,v={$tabs:k,value:b,name:n,option:t},c=b===n,d=n?x[""+n]:null,d=!!d&&d.loading;return(0,_vue.h)("div",{key:""+n,class:["vxe-tabs-header--item","type--"+T,"pos--"+y,l?"align--"+l:"",{"is--active":c}],style:i?{width:(0,_dom.toCssUnit)(i)}:void 0,onClick(e){I(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[s?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:s})]):(0,_ui.renderEmptyElement)(k),u?(0,_vue.h)("span",{class:"vxe-tabs-header--item-prefix"},F(u,{name:n,title:e})):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},r?F(r,{name:n,title:e}):""+e),o?(0,_vue.h)("span",{class:"vxe-tabs-header--item-suffix"},F(o,{name:n,title:e})):(0,_ui.renderEmptyElement)(k)]),!(0,_utils.isEnableConf)(g)&&!C.enabled||M&&!M(v)?(0,_ui.renderEmptyElement)(k):(0,_vue.h)("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":c,"is--loading":d,"is--disabled":d}],onClick(e){R(e,t)}},[(0,_vue.h)("i",{class:d?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]),!(f||(0,_utils.isEnableConf)(_)||N.enabled)||E&&!E(v)?(0,_ui.renderEmptyElement)(k):(0,_vue.h)("div",{class:["vxe-tabs-header--close-btn",{"is--active":c}],onClick(e){P(e,t,a,h)}},[(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--"+T,"pos--"+y],style:l})]))]),a?(0,_vue.h)("div",{ref:B,class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--"+T,"pos--"+y],onClick:j},[(0,_vue.h)("span",{class:i?(0,_ui.getIcon)().TABS_TAB_BUTTON_BOTTOM:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(k),n?(0,_vue.h)("div",{class:["vxe-tabs-header--suffix","type--"+T,"pos--"+y]},F(n,{name:b})):(0,_ui.renderEmptyElement)(k)])},T=e=>{var{initNames:t,activeName:a}=O,{name:e,slots:i}=e,i=i?i.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{key:""+e,class:["vxe-tabs-pane--item",{"is--visible":a===e}]},i?F(i,{name:e}):[]):(0,_ui.renderEmptyElement)(k)},D=e=>{var t=c["destroyOnClose"];const a=O["activeName"];return t?[(t=e.find(e=>e.name===a))?T(t):(0,_ui.renderEmptyElement)(k)]:e.map(e=>T(e))},y=e=>{var{height:t,padding:a,showBody:i}=c,{activeName:l,cacheTabMaps:s}=O,n=S.value,o=L.value,r=A.value["showLoading"],u=d.header,v=d.footer;return i?(s=!!(s=l?s[""+l]:null)&&s.loading,l={name:l},(0,_vue.h)("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--"+n,"pos--"+o,{"is--content":i}]},[u?(0,_vue.h)("div",{class:"vxe-tabs-pane--header"},F(u,l)):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("div",{class:["vxe-tabs-pane--body","type--"+n,"pos--"+o,{"is--padding":a,"is--height":t}]},D(e)),v?(0,_vue.h)("div",{class:"vxe-tabs-pane--footer"},F(v,l)):(0,_ui.renderEmptyElement)(k),r&&s?(0,_ui.renderEmptyElement)(k):(0,_vue.h)(_loading.default,{class:"vxe-tabs--loading",modelValue:s})])):(0,_ui.renderEmptyElement)(k)};(0,_vue.watch)(()=>c.position,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>c.modelValue,e=>{r(e,null),O.activeName=e}),(0,_vue.watch)(()=>O.activeName,e=>{n(e)});const N=(0,_vue.ref)(0),E=((0,_vue.watch)(()=>c.options?c.options.length:-1,()=>{N.value++}),(0,_vue.watch)(()=>c.options,()=>{N.value++}),(0,_vue.watch)(N,()=>{l(c.options),O.resizeFlag++}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>O.staticTabs?O.staticTabs.length:-1,()=>{E.value++}),(0,_vue.watch)(()=>O.staticTabs,()=>{E.value++}),(0,_vue.watch)(E,()=>{l(O.staticTabs),O.resizeFlag++}),(0,_vue.watch)(V,()=>{O.resizeFlag++}),(0,_vue.watch)(()=>O.resizeFlag,()=>{(0,_vue.nextTick)(()=>{p()})}),(0,_vue.onMounted)(()=>{p(),_ui.globalEvents.on(k,"resize",p)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(k,"resize")}),(0,_vue.provide)("$xeTabs",k),r(c.modelValue,null),l(O.staticTabs.length?O.staticTabs:c.options),k.renderVN=()=>{var{height:e,padding:t,trigger:a}=c,i=O["activeName"],l=g.value,s=b.value,n=S.value,o=L.value,r=M.value,u=d.default,s=u?s:l,l=[(0,_vue.h)("div",{key:"ts",class:"vxe-tabs-slots"},u?u({name:i}):[])];return"right"===o||"bottom"===o?l.push(y(s),x(s)):l.push(x(s),y(s)),(0,_vue.h)("div",{ref:v,class:["vxe-tabs","pos--"+o,"vxe-tabs--"+n,"trigger--"+("manual"===a?"trigger":"default"),{"is--padding":t,"is--height":e}],style:r},l)},k},render(){return this.renderVN()}});