2 lines
8.9 KiB
JavaScript
2 lines
8.9 KiB
JavaScript
import{W as e,aX as a,bR as t,b as l,A as s,h as o,_ as n,d as r,j as i,I as u,a as d,r as c,D as v,aW as b,aw as p,c as f,e as m,$ as h,n as y,g,k as $,bS as P,af as x,bT as C,bU as w,F as k,o as T,bV as R,N,E as S,bW as B,L as E,Y as A,ai as F,y as L,x as _,f as W,bX as K,aS as V,U as q,p as X,aq as Y,bY as j,ad as z,bZ as M,R as U,ag as D,S as H,v as I,s as O}from"./index.BE3jgw84.js";const Z=(l,s)=>{const o={},n=e([]);return{children:n,addChild:e=>{o[e.uid]=e,n.value=((e,l,s)=>a(e.subTree).filter((e=>{var a;return t(e)&&(null==(a=e.type)?void 0:a.name)===l&&!!e.component})).map((e=>e.component.uid)).map((e=>s[e])).filter((e=>!!e)))(l,s,o)},removeChild:e=>{delete o[e],n.value=n.value.filter((a=>a.uid!==e))}}},G=Symbol("tabsRootContextKey"),J=l({tabs:{type:o(Array),default:()=>s([])}}),Q="ElTabBar",ee=r({name:Q});var ae=n(r({...ee,props:J,setup(e,{expose:a}){const t=e,l=$(),s=i(G);s||u(Q,"<el-tabs><el-tab-bar /></el-tabs>");const o=d("tabs"),n=c(),r=c(),C=()=>r.value=(()=>{let e=0,a=0;const o=["top","bottom"].includes(s.props.tabPosition)?"width":"height",n="width"===o?"x":"y",r="x"===n?"left":"top";return t.tabs.every((t=>{var s,n;const i=null==(n=null==(s=l.parent)?void 0:s.refs)?void 0:n[`tab-${t.uid}`];if(!i)return!1;if(!t.active)return!0;e=i[`offset${P(r)}`],a=i[`client${P(o)}`];const u=window.getComputedStyle(i);return"width"===o&&(a-=Number.parseFloat(u.paddingLeft)+Number.parseFloat(u.paddingRight),e+=Number.parseFloat(u.paddingLeft)),!1})),{[o]:`${a}px`,transform:`translate${P(n)}(${e}px)`}})(),w=[];v((()=>t.tabs),(async()=>{await x(),C(),(()=>{var e;w.forEach((e=>e.stop())),w.length=0;const a=null==(e=l.parent)?void 0:e.refs;if(a)for(const t in a)if(t.startsWith("tab-")){const e=a[t];e&&w.push(b(e,C))}})()}),{immediate:!0});const k=b(n,(()=>C()));return p((()=>{w.forEach((e=>e.stop())),w.length=0,k.stop()})),a({ref:n,update:C}),(e,a)=>(m(),f("div",{ref_key:"barRef",ref:n,class:y([g(o).e("active-bar"),g(o).is(g(s).props.tabPosition)]),style:h(r.value)},null,6))}}),[["__file","tab-bar.vue"]]);const te=l({panes:{type:o(Array),default:()=>s([])},currentName:{type:[String,Number],default:""},editable:Boolean,type:{type:String,values:["card","border-card",""],default:""},stretch:Boolean}),le="ElTabNav",se=r({name:le,props:te,emits:{tabClick:(e,a,t)=>t instanceof Event,tabRemove:(e,a)=>a instanceof Event},setup(e,{expose:a,emit:t}){const l=i(G);l||u(le,"<el-tabs><tab-nav /></el-tabs>");const s=d("tabs"),o=C(),n=w(),r=c(),p=c(),f=c(),m=c(),h=c(!1),y=c(0),g=c(!1),$=c(!0),L=k((()=>["top","bottom"].includes(l.props.tabPosition)?"width":"height")),_=k((()=>({transform:`translate${"width"===L.value?"X":"Y"}(-${y.value}px)`}))),W=()=>{if(!r.value)return;const e=r.value[`offset${P(L.value)}`],a=y.value;if(!a)return;const t=a>e?a-e:0;y.value=t},K=()=>{if(!r.value||!p.value)return;const e=p.value[`offset${P(L.value)}`],a=r.value[`offset${P(L.value)}`],t=y.value;if(e-t<=a)return;const l=e-t>2*a?t+a:e-a;y.value=l},V=async()=>{const e=p.value;if(!(h.value&&f.value&&r.value&&e))return;await x();const a=f.value.querySelector(".is-active");if(!a)return;const t=r.value,s=["top","bottom"].includes(l.props.tabPosition),o=a.getBoundingClientRect(),n=t.getBoundingClientRect(),i=s?e.offsetWidth-n.width:e.offsetHeight-n.height,u=y.value;let d=u;s?(o.left<n.left&&(d=u-(n.left-o.left)),o.right>n.right&&(d=u+o.right-n.right)):(o.top<n.top&&(d=u-(n.top-o.top)),o.bottom>n.bottom&&(d=u+(o.bottom-n.bottom))),d=Math.max(d,0),y.value=Math.min(d,i)},q=()=>{var a;if(!p.value||!r.value)return;e.stretch&&(null==(a=m.value)||a.update());const t=p.value[`offset${P(L.value)}`],l=r.value[`offset${P(L.value)}`],s=y.value;l<t?(h.value=h.value||{},h.value.prev=s,h.value.next=s+l<t,t-s<l&&(y.value=t-l)):(h.value=!1,s>0&&(y.value=0))},X=e=>{let a=0;switch(e.code){case A.left:case A.up:a=-1;break;case A.right:case A.down:a=1;break;default:return}const t=Array.from(e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)"));let l=t.indexOf(e.target)+a;l<0?l=t.length-1:l>=t.length&&(l=0),t[l].focus({preventScroll:!0}),t[l].click(),Y()},Y=()=>{$.value&&(g.value=!0)},j=()=>g.value=!1;return v(o,(e=>{"hidden"===e?$.value=!1:"visible"===e&&setTimeout((()=>$.value=!0),50)})),v(n,(e=>{e?setTimeout((()=>$.value=!0),50):$.value=!1})),b(f,q),T((()=>setTimeout((()=>V()),0))),R((()=>q())),a({scrollToActiveTab:V,removeFocus:j,tabListRef:p,tabBarRef:m}),()=>{const a=h.value?[N("span",{class:[s.e("nav-prev"),s.is("disabled",!h.value.prev)],onClick:W},[N(S,null,{default:()=>[N(B,null,null)]})]),N("span",{class:[s.e("nav-next"),s.is("disabled",!h.value.next)],onClick:K},[N(S,null,{default:()=>[N(E,null,null)]})])]:null,o=e.panes.map(((a,o)=>{var n,r,i,u;const d=a.uid,c=a.props.disabled,v=null!=(r=null!=(n=a.props.name)?n:a.index)?r:`${o}`,b=!c&&(a.isClosable||e.editable);a.index=`${o}`;const p=b?N(S,{class:"is-icon-close",onClick:e=>t("tabRemove",a,e)},{default:()=>[N(F,null,null)]}):null,f=(null==(u=(i=a.slots).label)?void 0:u.call(i))||a.props.label,m=!c&&a.active?0:-1;return N("div",{ref:`tab-${d}`,class:[s.e("item"),s.is(l.props.tabPosition),s.is("active",a.active),s.is("disabled",c),s.is("closable",b),s.is("focus",g.value)],id:`tab-${v}`,key:`tab-${d}`,"aria-controls":`pane-${v}`,role:"tab","aria-selected":a.active,tabindex:m,onFocus:()=>Y(),onBlur:()=>j(),onClick:e=>{j(),t("tabClick",a,v,e)},onKeydown:e=>{!b||e.code!==A.delete&&e.code!==A.backspace||t("tabRemove",a,e)}},[f,p])}));return N("div",{ref:f,class:[s.e("nav-wrap"),s.is("scrollable",!!h.value),s.is(l.props.tabPosition)]},[a,N("div",{class:s.e("nav-scroll"),ref:r},[N("div",{class:[s.e("nav"),s.is(l.props.tabPosition),s.is("stretch",e.stretch&&["top","bottom"].includes(l.props.tabPosition))],ref:p,style:_.value,role:"tablist",onKeydown:X},[e.type?null:N(ae,{ref:m,tabs:[...e.panes]},null),o])])])}}}),oe=l({type:{type:String,values:["card","border-card",""],default:""},closable:Boolean,addable:Boolean,modelValue:{type:[String,Number]},editable:Boolean,tabPosition:{type:String,values:["top","right","bottom","left"],default:"top"},beforeLeave:{type:o(Function),default:()=>!0},stretch:Boolean}),ne=e=>L(e)||_(e);var re=r({name:"ElTabs",props:oe,emits:{[q]:e=>ne(e),tabClick:(e,a)=>a instanceof Event,tabChange:e=>ne(e),edit:(e,a)=>["remove","add"].includes(a),tabRemove:e=>ne(e),tabAdd:()=>!0},setup(e,{emit:a,slots:t,expose:l}){var s;const o=d("tabs"),n=k((()=>["left","right"].includes(e.tabPosition))),{children:r,addChild:i,removeChild:u}=Z($(),"ElTabPane"),b=c(),p=c(null!=(s=e.modelValue)?s:"0"),f=async(t,l=!1)=>{var s,o;if(p.value!==t&&!V(t))try{let n;if(e.beforeLeave){const a=e.beforeLeave(t,p.value);n=a instanceof Promise?await a:a}else n=!0;!1!==n&&(p.value=t,l&&(a(q,t),a("tabChange",t)),null==(o=null==(s=b.value)?void 0:s.removeFocus)||o.call(s))}catch(n){}},m=(e,t,l)=>{e.props.disabled||(a("tabClick",e,l),f(t,!0))},h=(e,t)=>{e.props.disabled||V(e.props.name)||(t.stopPropagation(),a("edit",e.props.name,"remove"),a("tabRemove",e.props.name))},y=()=>{a("edit",void 0,"add"),a("tabAdd")};v((()=>e.modelValue),(e=>f(e))),v(p,(async()=>{var e;await x(),null==(e=b.value)||e.scrollToActiveTab()})),X(G,{props:e,currentName:p,registerPane:e=>{r.value.push(e)},sortPane:i,unregisterPane:u}),l({currentName:p,tabNavRef:b});const g=({render:e})=>e();return()=>{const a=t["add-icon"],l=e.editable||e.addable?N("div",{class:[o.e("new-tab"),n.value&&o.e("new-tab-vertical")],tabindex:"0",onClick:y,onKeydown:e=>{[A.enter,A.numpadEnter].includes(e.code)&&y()}},[a?W(t,"add-icon"):N(S,{class:o.is("icon-plus")},{default:()=>[N(K,null,null)]})]):null,s=N("div",{class:[o.e("header"),n.value&&o.e("header-vertical"),o.is(e.tabPosition)]},[N(g,{render:()=>{const a=r.value.some((e=>e.slots.label));return N(se,{ref:b,currentName:p.value,editable:e.editable,type:e.type,panes:r.value,stretch:e.stretch,onTabClick:m,onTabRemove:h},{$stable:!a})}},null),l]),i=N("div",{class:o.e("content")},[W(t,"default")]);return N("div",{class:[o.b(),o.m(e.tabPosition),{[o.m("card")]:"card"===e.type,[o.m("border-card")]:"border-card"===e.type}]},[i,s])}}});const ie=l({label:{type:String,default:""},name:{type:[String,Number]},closable:Boolean,disabled:Boolean,lazy:Boolean}),ue="ElTabPane",de=r({name:ue});var ce=n(r({...de,props:ie,setup(e){const a=e,t=$(),l=Y(),s=i(G);s||u(ue,"usage: <el-tabs><el-tab-pane /></el-tabs/>");const o=d("tab-pane"),n=c(),r=k((()=>a.closable||s.props.closable)),b=j((()=>{var e;return s.currentName.value===(null!=(e=a.name)?e:n.value)})),p=c(b.value),h=k((()=>{var e;return null!=(e=a.name)?e:n.value})),P=j((()=>!a.lazy||p.value||b.value));v(b,(e=>{e&&(p.value=!0)}));const x=z({uid:t.uid,slots:l,props:a,paneName:h,active:b,index:n,isClosable:r});return s.registerPane(x),T((()=>{s.sortPane(x)})),M((()=>{s.unregisterPane(x.uid)})),(e,a)=>g(P)?U((m(),f("div",{key:0,id:`pane-${g(h)}`,class:y(g(o).b()),role:"tabpanel","aria-hidden":!g(b),"aria-labelledby":`tab-${g(h)}`},[W(e.$slots,"default")],10,["id","aria-hidden","aria-labelledby"])),[[H,g(b)]]):D("v-if",!0)}}),[["__file","tab-pane.vue"]]);const ve=I(re,{TabPane:ce}),be=O(ce);export{ve as E,be as a};
|