ll-package
Version:
2 lines (1 loc) • 7.33 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const re=require("../../../../../@babel/runtime/helpers/esm/objectSpread2.js"),ue=require("../../../../../@babel/runtime/helpers/esm/extends.js"),t=require("vue"),Ae=require("../hooks/useRaf.js"),He=require("./TabNode.js"),Me=require("../hooks/useOffsets.js"),ze=require("./OperationNode.js"),Ee=require("../TabContext.js"),Ie=require("../hooks/useTouchMove.js"),Oe=require("./AddButton.js"),H=require("../../../_util/type.js"),_e=require("../../../_util/vue-types/index.js"),fe=require("../hooks/useSyncState.js"),y=require("../../../_util/hooks/useState.js"),ce=require("../../../_util/raf.js"),J=require("../../../_util/classNames.js"),de=require("../../../vc-resize-observer/index.js"),B=require("../../../_util/util.js"),je=require("../../../_util/hooks/useRefs.js"),Ke=require("../../../../../lodash-es/pick.js"),ve={width:0,height:0,left:0,top:0,right:0},he=()=>({id:{type:String},tabPosition:{type:String},activeKey:{type:[String,Number]},rtl:{type:Boolean},animated:H.objectType(),editable:H.objectType(),moreIcon:_e.default.any,moreTransitionName:{type:String},mobile:{type:Boolean},tabBarGutter:{type:Number},renderTabBar:{type:Function},locale:H.objectType(),popupClassName:String,getPopupContainer:H.functionType(),onTabClick:{type:Function},onTabScroll:{type:Function}}),De=t.defineComponent({compatConfig:{MODE:3},name:"TabNavList",inheritAttrs:!1,props:he(),slots:Object,emits:["tabClick","tabScroll"],setup(o,be){let{attrs:pe,slots:W}=be;const{tabs:T,prefixCls:Q}=Ee.useInjectTabs(),S=t.shallowRef(),M=t.shallowRef(),ge=t.shallowRef(),X=t.shallowRef(),[me,we]=je.default(),h=t.computed(()=>o.tabPosition==="top"||o.tabPosition==="bottom"),[c,z]=fe.default(0,(a,e)=>{h.value&&o.onTabScroll&&o.onTabScroll({direction:a>e?"left":"right"})}),[x,E]=fe.default(0,(a,e)=>{!h.value&&o.onTabScroll&&o.onTabScroll({direction:a>e?"top":"bottom"})}),[R,ye]=y.default(0),[I,Te]=y.default(0),[v,Se]=y.default(null),[k,xe]=y.default(null),[Re,Ne]=y.default(0),[ke,Ce]=y.default(0),[qe,We]=Ae.useRafState(new Map),P=Me.default(T,qe),Le=t.computed(()=>`${Q.value}-nav-operations-hidden`),L=t.shallowRef(0),$=t.shallowRef(0);t.watchEffect(()=>{h.value?o.rtl?(L.value=0,$.value=Math.max(0,R.value-v.value)):(L.value=Math.min(0,v.value-R.value),$.value=0):(L.value=Math.min(0,k.value-I.value),$.value=0)});const O=a=>a<L.value?L.value:a>$.value?$.value:a,Y=t.shallowRef(),[_,ee]=y.default(),j=()=>{ee(Date.now())},K=()=>{clearTimeout(Y.value)},te=(a,e)=>{a(l=>O(l+e))};Ie.default(S,(a,e)=>{if(h.value){if(v.value>=R.value)return!1;te(z,a)}else{if(k.value>=I.value)return!1;te(E,e)}return K(),j(),!0}),t.watch(_,()=>{K(),_.value&&(Y.value=setTimeout(()=>{ee(0)},100))});const ae=function(){let a=arguments.length>0&&arguments[0]!==void 0?arguments[0]:o.activeKey;const e=P.value.get(a)||{width:0,height:0,left:0,right:0,top:0};if(h.value){let l=c.value;o.rtl?e.right<c.value?l=e.right:e.right+e.width>c.value+v.value&&(l=e.right+e.width-v.value):e.left<-c.value?l=-e.left:e.left+e.width>-c.value+v.value&&(l=-(e.left+e.width-v.value)),E(0),z(O(l))}else{let l=x.value;e.top<-x.value?l=-e.top:e.top+e.height>-x.value+k.value&&(l=-(e.top+e.height-k.value)),z(0),E(O(l))}},D=t.shallowRef(0),F=t.shallowRef(0);t.watchEffect(()=>{let a,e,l,n,r,u;const N=P.value;["top","bottom"].includes(o.tabPosition)?(a="width",n=v.value,r=R.value,u=Re.value,e=o.rtl?"right":"left",l=Math.abs(c.value)):(a="height",n=k.value,r=R.value,u=ke.value,e="top",l=-x.value);let f=n;r+u>n&&r<n&&(f=n-u);const b=T.value;if(!b.length)return[D.value,F.value]=[0,0];const g=b.length;let C=g;for(let s=0;s<g;s+=1){const d=N.get(b[s].key)||ve;if(d[e]+d[a]>l+f){C=s-1;break}}let i=0;for(let s=g-1;s>=0;s-=1)if((N.get(b[s].key)||ve)[e]<l){i=s+1;break}return[D.value,F.value]=[i,C]});const G=()=>{var a,e,l,n,r;const u=((a=S.value)===null||a===void 0?void 0:a.offsetWidth)||0,N=((e=S.value)===null||e===void 0?void 0:e.offsetHeight)||0,f=((l=X.value)===null||l===void 0?void 0:l.$el)||{},b=f.offsetWidth||0,g=f.offsetHeight||0;Se(u),xe(N),Ne(b),Ce(g);const C=(((n=M.value)===null||n===void 0?void 0:n.offsetWidth)||0)-b,i=(((r=M.value)===null||r===void 0?void 0:r.offsetHeight)||0)-g;ye(C),Te(i),We(()=>{const s=new Map;return T.value.forEach(d=>{let{key:q}=d;const m=we.value.get(q),w=(m==null?void 0:m.$el)||m;w&&s.set(q,{width:w.offsetWidth,height:w.offsetHeight,left:w.offsetLeft,top:w.offsetTop})}),s})},le=t.computed(()=>[...T.value.slice(0,D.value),...T.value.slice(F.value+1)]),[$e,Ve]=y.default(),p=t.computed(()=>P.value.get(o.activeKey)),oe=t.shallowRef(),ne=()=>{ce.default.cancel(oe.value)};t.watch([p,h,()=>o.rtl],()=>{const a={};p.value&&(h.value?(o.rtl?a.right=B.toPx(p.value.right):a.left=B.toPx(p.value.left),a.width=B.toPx(p.value.width)):(a.top=B.toPx(p.value.top),a.height=B.toPx(p.value.height))),ne(),oe.value=ce.default(()=>{Ve(a)})}),t.watch([()=>o.activeKey,p,P,h],()=>{ae()},{flush:"post"}),t.watch([()=>o.rtl,()=>o.tabBarGutter,()=>o.activeKey,()=>T.value],()=>{G()},{flush:"post"});const U=a=>{let{position:e,prefixCls:l,extra:n}=a;if(!n)return null;const r=n==null?void 0:n({position:e});return r?t.createVNode("div",{class:`${l}-extra-content`},[r]):null};return t.onBeforeUnmount(()=>{K(),ne()}),()=>{const{id:a,animated:e,activeKey:l,rtl:n,editable:r,locale:u,tabPosition:N,tabBarGutter:f,onTabClick:b}=o,{class:g,style:C}=pe,i=Q.value,s=!!le.value.length,d=`${i}-nav-wrap`;let q,m,w,ie;h.value?n?(m=c.value>0,q=c.value+v.value<R.value):(q=c.value<0,m=-c.value+v.value<R.value):(w=x.value<0,ie=-x.value+k.value<I.value);const A={};N==="top"||N==="bottom"?A[n?"marginRight":"marginLeft"]=typeof f=="number"?`${f}px`:f:A.marginTop=typeof f=="number"?`${f}px`:f;const se=T.value.map((Z,Be)=>{const{key:V}=Z;return t.createVNode(He.default,{id:a,prefixCls:i,key:V,tab:Z,style:Be===0?void 0:A,closable:Z.closable,editable:r,active:V===l,removeAriaLabel:u==null?void 0:u.removeAriaLabel,ref:me(V),onClick:Pe=>{b(V,Pe)},onFocus:()=>{ae(V),j(),S.value&&(n||(S.value.scrollLeft=0),S.value.scrollTop=0)}},W)});return t.createVNode("div",{role:"tablist",class:J.default(`${i}-nav`,g),style:C,onKeydown:()=>{j()}},[t.createVNode(U,{position:"left",prefixCls:i,extra:W.leftExtra},null),t.createVNode(de.default,{onResize:G},{default:()=>[t.createVNode("div",{class:J.default(d,{[`${d}-ping-left`]:q,[`${d}-ping-right`]:m,[`${d}-ping-top`]:w,[`${d}-ping-bottom`]:ie}),ref:S},[t.createVNode(de.default,{onResize:G},{default:()=>[t.createVNode("div",{ref:M,class:`${i}-nav-list`,style:{transform:`translate(${c.value}px, ${x.value}px)`,transition:_.value?"none":void 0}},[se,t.createVNode(Oe.default,{ref:X,prefixCls:i,locale:u,editable:r,style:ue.default(ue.default({},se.length===0?void 0:A),{visibility:s?"hidden":null})},null),t.createVNode("div",{class:J.default(`${i}-ink-bar`,{[`${i}-ink-bar-animated`]:e.inkBar}),style:$e.value},null)])]})])]}),t.createVNode(ze.default,re.default(re.default({},o),{},{removeAriaLabel:u==null?void 0:u.removeAriaLabel,ref:ge,prefixCls:i,tabs:le.value,class:!s&&Le.value}),Ke.default(W,["moreIcon"])),t.createVNode(U,{position:"right",prefixCls:i,extra:W.rightExtra},null),t.createVNode(U,{position:"right",prefixCls:i,extra:W.tabBarExtraContent},null)])}}});exports.default=De;exports.tabNavListProps=he;