| 1 |
- import{_ as G,I as J,f as ge,h as I,W as $e,ai as pe,aj as Ce,A as oe,o as ke,U as _e,a0 as Se,v as Be,w as xe}from"./index-DnTunbJs.js";import{d as K,i as se,c as v,m as te,o as H,a as W,e as ze,k as ue,n as j,p as Te,y as Pe,B as r,E as we,q as re,A as Oe,a9 as Ie,l as M,r as C,u as ce,I as Q,ae as de,b as Ke,w as X,f as Y,s as Re,v as Ae,g as He}from"./vue-vendor-B2yM2jt_.js";import{I as je}from"./index-CPr5VJXZ.js";import{R as ae}from"./resize-observer-DkVUjRMr.js";import{u as Ne}from"./index-DNH0kuFI.js";const Le=({direction:e,type:a,offset:t})=>e==="vertical"?{transform:`translateY(${-t}px)`}:{transform:`translateX(${-t}px)`},De=(e,a)=>{const{scrollTop:t,scrollLeft:d}=e;a==="horizontal"&&d&&e.scrollTo({left:-1*d}),a==="vertical"&&t&&e.scrollTo({top:-1*t})},Z=Symbol("ArcoTabs"),We=K({name:"TabsTab",components:{IconHover:J,IconClose:ge},props:{tab:{type:Object,required:!0},active:Boolean,editable:Boolean},emits:["click","delete"],setup(e,{emit:a}){const t=I("tabs-tab"),d=se(Z,{}),c=n=>{e.tab.disabled||a("click",e.tab.key,n)},h=n=>{n.key==="Enter"&&c(n)},i=v(()=>Object.assign(d.trigger==="click"?{onClick:c}:{onMouseover:c},{onKeydown:h})),o=n=>{e.tab.disabled||a("delete",e.tab.key,n)},s=v(()=>[t,{[`${t}-active`]:e.active,[`${t}-closable`]:e.editable&&e.tab.closable,[`${t}-disabled`]:e.tab.disabled}]);return{prefixCls:t,cls:s,eventHandlers:i,handleDelete:o}}});function Me(e,a,t,d,c,h){const i=te("icon-close"),o=te("icon-hover");return H(),W("div",Oe({tabindex:"0",class:e.cls},e.eventHandlers),[ze("span",{class:j(`${e.prefixCls}-title`)},[ue(e.$slots,"default")],2),e.editable&&e.tab.closable?(H(),Te(o,{key:0,class:j(`${e.prefixCls}-close-btn`),onClick:we(e.handleDelete,["stop"])},{default:Pe(()=>[r(i)]),_:1},8,["class","onClick"])):re("v-if",!0)],16)}var qe=G(We,[["render",Me]]);function Ee(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!Ie(e)}var ne=K({name:"TabsButton",props:{type:{type:String,default:"next"},direction:{type:String,default:"horizontal"},disabled:{type:Boolean,default:!1},onClick:{type:Function}},emits:["click"],setup(e,{emit:a}){const t=I("tabs-nav-button"),d=i=>{e.disabled||a("click",e.type,i)},c=()=>e.direction==="horizontal"?e.type==="next"?r(je,null,null):r($e,null,null):e.type==="next"?r(pe,null,null):r(Ce,null,null),h=v(()=>[t,{[`${t}-disabled`]:e.disabled,[`${t}-left`]:e.direction==="horizontal"&&e.type==="previous",[`${t}-right`]:e.direction==="horizontal"&&e.type==="next",[`${t}-up`]:e.direction==="vertical"&&e.type==="previous",[`${t}-down`]:e.direction==="vertical"&&e.type==="next"}]);return()=>{let i;return r("div",{class:h.value,onClick:d},[r(J,{disabled:e.disabled},Ee(i=c())?i:{default:()=>[i]})])}}});const Ue=K({name:"TabsNavInk",props:{activeTabRef:{type:Object},direction:{type:String},disabled:Boolean,animation:Boolean},setup(e){const{activeTabRef:a}=M(e),t=I("tabs-nav-ink"),d=C(0),c=C(0),h=v(()=>e.direction==="vertical"?{top:`${d.value}px`,height:`${c.value}px`}:{left:`${d.value}px`,width:`${c.value}px`}),i=()=>{if(a.value){const s=e.direction==="vertical"?a.value.offsetTop:a.value.offsetLeft,n=e.direction==="vertical"?a.value.offsetHeight:a.value.offsetWidth;(s!==d.value||n!==c.value)&&(d.value=s,c.value=n)}};ce(()=>{Q(()=>i())}),de(()=>{i()});const o=v(()=>[t,{[`${t}-animation`]:e.animation,[`${t}-disabled`]:e.disabled}]);return{prefixCls:t,cls:o,style:h}}});function Ve(e,a,t,d,c,h){return H(),W("div",{class:j(e.cls),style:Ke(e.style)},null,6)}var Fe=G(Ue,[["render",Ve]]),Xe=K({name:"TabsNav",props:{tabs:{type:Array,required:!0},direction:{type:String,required:!0},type:{type:String,required:!0},activeKey:{type:[String,Number]},activeIndex:{type:Number,required:!0},position:{type:String,required:!0},size:{type:String,required:!0},showAddButton:{type:Boolean,default:!1},editable:{type:Boolean,default:!1},animation:{type:Boolean,required:!0},headerPadding:{type:Boolean,default:!0},scrollPosition:{type:String,default:"auto"}},emits:["click","add","delete"],setup(e,{emit:a,slots:t}){const{tabs:d,activeKey:c,activeIndex:h,direction:i,scrollPosition:o}=M(e),s=I("tabs-nav"),n=C(),g=C(),S=C({}),p=v(()=>{if(!oe(c.value))return S.value[c.value]}),_=C(),B=v(()=>e.editable&&["line","card","card-gutter"].includes(e.type)),$=C(!1),R=C(0),z=C(0),y=C(0),O=()=>{var u,f,x;return(x=i.value==="vertical"?(u=n.value)==null?void 0:u.offsetHeight:(f=n.value)==null?void 0:f.offsetWidth)!=null?x:0},N=()=>!g.value||!n.value?0:i.value==="vertical"?g.value.offsetHeight-n.value.offsetHeight:g.value.offsetWidth-n.value.offsetWidth,T=()=>{$.value=q(),$.value?(R.value=O(),z.value=N(),y.value>z.value&&(y.value=z.value)):y.value=0},q=()=>n.value&&g.value?e.direction==="vertical"?g.value.offsetHeight>n.value.offsetHeight:g.value.offsetWidth>n.value.offsetWidth:!1,k=u=>{(!n.value||!g.value||u<0)&&(u=0),y.value=Math.min(u,z.value)},E=()=>{if(!p.value||!n.value||!$.value)return;De(n.value,i.value);const u=i.value==="horizontal",f=u?"offsetLeft":"offsetTop",x=u?"offsetWidth":"offsetHeight",m=p.value[f],P=p.value[x],w=n.value[x],me=window.getComputedStyle(p.value),he=u?o.value==="end"?"marginRight":"marginLeft":o.value==="end"?"marginBottom":"marginTop",A=parseFloat(me[he])||0;o.value==="auto"?m<y.value?k(m-A):m+P>y.value+w&&k(m+P-w+A):o.value==="center"?k(m+(P-w+A)/2):o.value==="start"?k(m-A):o.value==="end"?k(m+P-w+A):ke(o.value)&&k(m-o.value)},L=u=>{if(!$.value)return;u.preventDefault();const{deltaX:f,deltaY:x}=u;Math.abs(f)>Math.abs(x)?k(y.value+f):k(y.value+x)},U=(u,f)=>{a("click",u,f)},l=(u,f)=>{a("delete",u,f)},b=u=>{const f=u==="previous"?y.value-R.value:y.value+R.value;k(f)},D=()=>{T(),_.value&&_.value.$forceUpdate()};X(d,()=>{Q(()=>{T()})}),X([h,o],()=>{setTimeout(()=>{E()},0)}),ce(()=>{T()});const ee=()=>!B.value||!e.showAddButton?null:r("div",{class:`${s}-add-btn`,onClick:u=>a("add",u)},[r(J,null,{default:()=>[r(_e,null,null)]})]),fe=v(()=>[s,`${s}-${e.direction}`,`${s}-${e.position}`,`${s}-size-${e.size}`,`${s}-type-${e.type}`]),ve=v(()=>[`${s}-tab-list`,{[`${s}-tab-list-no-padding`]:!e.headerPadding&&["line","text"].includes(e.type)&&e.direction==="horizontal"}]),ye=v(()=>Le({direction:e.direction,type:e.type,offset:y.value})),be=v(()=>[`${s}-tab`,{[`${s}-tab-scroll`]:$.value}]);return()=>{var u;return r("div",{class:fe.value},[$.value&&r(ne,{type:"previous",direction:e.direction,disabled:y.value<=0,onClick:b},null),r(ae,{onResize:()=>T()},{default:()=>[r("div",{class:be.value,ref:n,onWheel:L},[r(ae,{onResize:D},{default:()=>[r("div",{ref:g,class:ve.value,style:ye.value},[e.tabs.map((f,x)=>r(qe,{key:f.key,ref:m=>{m!=null&&m.$el&&(S.value[f.key]=m.$el)},active:f.key===c.value,tab:f,editable:e.editable,onClick:U,onDelete:l},{default:()=>{var m,P,w;return[(w=(P=(m=f.slots).title)==null?void 0:P.call(m))!=null?w:f.title]}})),e.type==="line"&&p.value&&r(Fe,{ref:_,activeTabRef:p.value,direction:e.direction,disabled:!1,animation:e.animation},null)])]}),!$.value&&ee()])]}),$.value&&r(ne,{type:"next",direction:e.direction,disabled:y.value>=z.value,onClick:b},null),r("div",{class:`${s}-extra`},[$.value&&ee(),(u=t.extra)==null?void 0:u.call(t)])])}}}),V=K({name:"Tabs",props:{activeKey:{type:[String,Number],default:void 0},defaultActiveKey:{type:[String,Number],default:void 0},position:{type:String,default:"top"},size:{type:String},type:{type:String,default:"line"},direction:{type:String,default:"horizontal"},editable:{type:Boolean,default:!1},showAddButton:{type:Boolean,default:!1},destroyOnHide:{type:Boolean,default:!1},lazyLoad:{type:Boolean,default:!1},justify:{type:Boolean,default:!1},animation:{type:Boolean,default:!1},headerPadding:{type:Boolean,default:!0},autoSwitch:{type:Boolean,default:!1},hideContent:{type:Boolean,default:!1},trigger:{type:String,default:"click"},scrollPosition:{type:[String,Number],default:"auto"}},emits:{"update:activeKey":e=>!0,change:e=>!0,tabClick:(e,a)=>!0,add:e=>!0,delete:(e,a)=>!0},setup(e,{emit:a,slots:t}){const{size:d,lazyLoad:c,destroyOnHide:h,trigger:i}=M(e),o=I("tabs"),{mergedSize:s}=Se(d),n=v(()=>e.direction==="vertical"?"left":e.position),g=v(()=>["left","right"].includes(n.value)?"vertical":"horizontal"),{children:S,components:p}=Ne("TabPane"),_=Y(new Map),B=v(()=>{const l=[];return p.value.forEach(b=>{const D=_.get(b);D&&l.push(D)}),l}),$=v(()=>B.value.map(l=>l.key)),R=(l,b)=>{_.set(l,b)},z=l=>{_.delete(l)},y=C(e.defaultActiveKey),O=v(()=>{var l;const b=(l=e.activeKey)!=null?l:y.value;return oe(b)?$.value[0]:b}),N=v(()=>{const l=$.value.indexOf(O.value);return l===-1?0:l});Re(Z,Y({lazyLoad:c,destroyOnHide:h,activeKey:O,addItem:R,removeItem:z,trigger:i}));const T=l=>{l!==O.value&&(y.value=l,a("update:activeKey",l),a("change",l))},q=(l,b)=>{T(l),a("tabClick",l,b)},k=l=>{a("add",l),e.autoSwitch&&Q(()=>{const b=$.value[$.value.length-1];T(b)})},E=(l,b)=>{a("delete",l,b)},L=()=>r("div",{class:[`${o}-content`,{[`${o}-content-hide`]:e.hideContent}]},[r("div",{class:[`${o}-content-list`,{[`${o}-content-animation`]:e.animation}],style:{marginLeft:`-${N.value*100}%`}},[S.value])]),U=v(()=>[o,`${o}-${g.value}`,`${o}-${n.value}`,`${o}-type-${e.type}`,`${o}-size-${s.value}`,{[`${o}-justify`]:e.justify}]);return()=>{var l;return S.value=(l=t.default)==null?void 0:l.call(t),r("div",{class:U.value},[n.value==="bottom"&&L(),r(Xe,{tabs:B.value,activeKey:O.value,activeIndex:N.value,direction:g.value,position:n.value,editable:e.editable,animation:e.animation,showAddButton:e.showAddButton,headerPadding:e.headerPadding,scrollPosition:e.scrollPosition,size:s.value,type:e.type,onClick:q,onAdd:k,onDelete:E},{extra:t.extra}),n.value!=="bottom"&&L()])}}}),Ye=Object.defineProperty,le=Object.getOwnPropertySymbols,Ge=Object.prototype.hasOwnProperty,Je=Object.prototype.propertyIsEnumerable,ie=(e,a,t)=>a in e?Ye(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,Qe=(e,a)=>{for(var t in a||(a={}))Ge.call(a,t)&&ie(e,t,a[t]);if(le)for(var t of le(a))Je.call(a,t)&&ie(e,t,a[t]);return e};const Ze=K({name:"TabPane",props:{title:String,disabled:{type:Boolean,default:!1},closable:{type:Boolean,default:!0},destroyOnHide:{type:Boolean,default:!1}},setup(e,{slots:a}){var t;const{title:d,disabled:c,closable:h}=M(e),i=He(),o=I("tabs"),s=se(Z,{}),n=C(),g=v(()=>i==null?void 0:i.vnode.key),S=v(()=>g.value===s.activeKey),p=C(s.lazyLoad?S.value:!0),_=Y({key:g,title:d,disabled:c,closable:h,slots:a});return i!=null&&i.uid&&((t=s.addItem)==null||t.call(s,i.uid,_)),Ae(()=>{var B;i!=null&&i.uid&&((B=s.removeItem)==null||B.call(s,i.uid))}),X(S,B=>{B?p.value||(p.value=!0):(e.destroyOnHide||s.destroyOnHide)&&(p.value=!1)}),de(()=>{_.slots=Qe({},a)}),{prefixCls:o,active:S,itemRef:n,mounted:p}}});function et(e,a,t,d,c,h){return H(),W("div",{ref:"itemRef",class:j([`${e.prefixCls}-content-item`,{[`${e.prefixCls}-content-item-active`]:e.active}])},[e.mounted?(H(),W("div",{key:0,class:j(`${e.prefixCls}-pane`)},[ue(e.$slots,"default")],2)):re("v-if",!0)],2)}var F=G(Ze,[["render",et]]);const ot=Object.assign(V,{TabPane:F,install:(e,a)=>{Be(e,a);const t=xe(a);e.component(t+V.name,V),e.component(t+F.name,F)}});export{F as T,ot as a};
|
