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