1 line
2.5 KiB
JavaScript
1 line
2.5 KiB
JavaScript
import{At as e,B as t,G as n,H as r,K as i,L as a,Mt as o,Tt as s,Z as c,at as l,b as u,ct as d,dt as f,g as p,kt as m,ot as h,vt as g,xt as _}from"./vue-B11_pI9F.js";import{t as v}from"./_plugin-vue_export-helper-B67ILkmu.js";var[y,b]=u(()=>{let e=s(),t=s([]);return{currentTab:e,tabs:t,setCurrentTab:n=>{e.value=t.value.find(e=>e.name===n)??t.value[0]},registerTab:e=>{t.value.find(t=>t.name===e)||t.value.push({name:e,index:t.value.length})},unregisterTab:e=>{t.value=t.value.filter(t=>t.name!==e)}}}),[x,S]=u(()=>!0),C={class:`tab-list`},w=c({__name:`TabList`,props:{current:{}},emits:[`update:current`],setup(e,{emit:t}){let n=e,r=t,{currentTab:a,setCurrentTab:o}=y();return g(()=>a.value,()=>{r(`update:current`,a.value?.name)}),h(()=>{o(n.current)}),(e,t)=>(d(),i(`div`,C,[f(e.$slots,`default`)]))}}),T=[`data-tab-name`],E=v(c({__name:`TabPane`,props:{name:{},disabled:{type:Boolean},keepAlive:{type:Boolean}},setup(o){let s=o,c=S(),u=b(),p=r(()=>u?.currentTab?.value),m=r(()=>p.value?.name===s.name),h=r(()=>c||m.value);u?.registerTab(s.name);function g(){c&&(s.disabled||u?.setCurrentTab(s.name))}return l(()=>{c&&u?.unregisterTab(s.name)}),(r,o)=>_((d(),i(`div`,{class:e([`tab-pane`,{actived:m.value,disabled:s.disabled,hidden:!h.value}]),"data-tab-name":s.name,onClick:g},[s.keepAlive?f(r.$slots,`default`,{key:0},void 0,!0):(d(),i(t,{key:1},[h.value?f(r.$slots,`default`,{key:0},void 0,!0):n(``,!0)],64))],10,T)),[[a,h.value]])}}),[[`__scopeId`,`data-v-afaa716d`]]);function D(e,t){let n=b(),r=s({});function i(){let e=t.value?.querySelector(`[data-tab-name="${n?.currentTab?.value?.name}"]`);if(!e)return{};let r=e.clientWidth,i=e.clientHeight;return{"--switch-left":`${e.offsetLeft}%`,"--switch-width":`${r}%`,"--tabs-width":`${t.value.clientWidth}%`,"--tabs-switch-width":`${r/t.value.clientWidth*100}%`,"--tabs-switch-height":`${i/t.value.clientHeight*100}%`,"--tabs-switch-left":`calc(${(e.offsetLeft-4)/t.value.clientWidth*100}% + 4px)`,"--tabs-switch-top":`calc(${(e.offsetTop-4)/t.value.clientHeight*100}% + 4px)`}}return e===`switch`&&(g(()=>[n?.currentTab?.value,n?.tabs.value],()=>{r.value=i()},{immediate:!0}),p(t,()=>{r.value=i()})),{switchSelectedStyle:r}}var O=v(c({__name:`Tabs`,props:{tabStyle:{default:`switch`}},setup(t){let n=t,r=s();x();let{switchSelectedStyle:a}=D(n.tabStyle,r);return(t,s)=>(d(),i(`div`,{class:e([`tabs`,{"tabs-switch":n.tabStyle===`switch`}]),ref_key:`$tabs`,ref:r,style:o(m(a))},[f(t.$slots,`default`,{},void 0,!0)],6))}}),[[`__scopeId`,`data-v-c15626a7`]]);export{E as n,w as r,O as t}; |