1 line
6.7 KiB
JavaScript
1 line
6.7 KiB
JavaScript
import{A as e,C as t,Ct as n,I as r,M as i,N as a,Q as o,St as s,_ as c,b as l,g as u,gt as d,m as f,o as p,pt as m,s as h,ut as g,x as _,yt as v,z as y}from"./vue.runtime.esm-bundler-DS0mm12S.js";import{b,p as x}from"./dist-3yfE1dPa.js";import{R as S}from"./index-axPHP3AB.js";import{O as C,_ as w,b as T,g as E,y as D}from"./Teleport-f0-_cFyq.js";import{i as O}from"./button-xrpYa8G4.js";import{u as k}from"./PopperContent-Wu1vPEc9.js";import{t as A}from"./useForwardExpose-B8uiQ7xX.js";import{t as j}from"./RovingFocusGroup-CoCJohzY.js";import{t as M}from"./RovingFocusItem-D7JDj4yQ.js";var[N,P]=C(`TabsRoot`),F=_({__name:`TabsRoot`,props:{defaultValue:{type:null,required:!1},orientation:{type:String,required:!1,default:`horizontal`},dir:{type:String,required:!1},activationMode:{type:String,required:!1,default:`automatic`},modelValue:{type:null,required:!1},unmountOnHide:{type:Boolean,required:!1,default:!0},asChild:{type:Boolean,required:!1},as:{type:null,required:!1}},emits:[`update:modelValue`],setup(e,{emit:t}){let n=e,i=t,{orientation:a,unmountOnHide:s,dir:c}=d(n),l=k(c);A();let f=x(n,`modelValue`,i,{defaultValue:n.defaultValue,passive:n.modelValue===void 0}),p=g(),h=m(new Set);return P({modelValue:f,changeModelValue:e=>{f.value=e},orientation:a,dir:l,unmountOnHide:s,activationMode:n.activationMode,baseId:w(void 0,`reka-tabs`),tabsList:p,contentIds:h,registerContent:e=>{h.value=new Set([...h.value,e])},unregisterContent:e=>{let t=new Set(h.value);t.delete(e),h.value=t}}),(e,t)=>(r(),u(v(O),{dir:v(l),"data-orientation":v(a),"as-child":e.asChild,as:e.as},{default:o(()=>[y(e.$slots,`default`,{modelValue:v(f)})]),_:3},8,[`dir`,`data-orientation`,`as-child`,`as`]))}});function I(e,t){return`${e}-trigger-${t}`}function L(e,t){return`${e}-content-${t}`}var R=_({__name:`TabsContent`,props:{value:{type:[String,Number],required:!0},forceMount:{type:Boolean,required:!1},asChild:{type:Boolean,required:!1},as:{type:null,required:!1}},setup(e){let t=e,{forwardRef:s}=A(),d=N(),p=f(()=>I(d.baseId,t.value)),m=f(()=>L(d.baseId,t.value)),h=f(()=>t.value===d.modelValue.value),_=g(h.value);return a(()=>{d.registerContent(t.value),requestAnimationFrame(()=>{_.value=!1})}),i(()=>{d.unregisterContent(t.value)}),(e,t)=>(r(),u(v(E),{present:e.forceMount||h.value,"force-mount":``},{default:o(({present:t})=>[l(v(O),{id:m.value,ref:v(s),"as-child":e.asChild,as:e.as,role:`tabpanel`,"data-state":h.value?`active`:`inactive`,"data-orientation":v(d).orientation.value,"aria-labelledby":p.value,hidden:!t,tabindex:`0`,style:n({animationDuration:_.value?`0s`:void 0})},{default:o(()=>[!v(d).unmountOnHide.value||t?y(e.$slots,`default`,{key:0}):c(`v-if`,!0)]),_:2},1032,[`id`,`as-child`,`as`,`data-state`,`data-orientation`,`aria-labelledby`,`hidden`,`style`])]),_:3},8,[`present`]))}}),z=_({__name:`TabsList`,props:{loop:{type:Boolean,required:!1,default:!0},asChild:{type:Boolean,required:!1},as:{type:null,required:!1}},setup(e){let{loop:t}=d(e),{forwardRef:n,currentElement:i}=A(),a=N();return a.tabsList=i,(e,i)=>(r(),u(v(j),{"as-child":``,orientation:v(a).orientation.value,dir:v(a).dir.value,loop:v(t)},{default:o(()=>[l(v(O),{ref:v(n),role:`tablist`,"as-child":e.asChild,as:e.as,"aria-orientation":v(a).orientation.value},{default:o(()=>[y(e.$slots,`default`)]),_:3},8,[`as-child`,`as`,`aria-orientation`])]),_:3},8,[`orientation`,`dir`,`loop`]))}}),B=_({__name:`TabsTrigger`,props:{value:{type:[String,Number],required:!0},disabled:{type:Boolean,required:!1,default:!1},asChild:{type:Boolean,required:!1},as:{type:null,required:!1,default:`button`}},setup(e){let t=e,{forwardRef:n}=A(),i=N(),a=f(()=>I(i.baseId,t.value)),s=f(()=>i.contentIds.value.has(t.value)?L(i.baseId,t.value):void 0),c=f(()=>t.value===i.modelValue.value);return(e,t)=>(r(),u(v(M),{"as-child":``,focusable:!e.disabled,active:c.value},{default:o(()=>[l(v(O),{id:a.value,ref:v(n),role:`tab`,type:e.as===`button`?`button`:void 0,as:e.as,"as-child":e.asChild,"aria-selected":c.value?`true`:`false`,"aria-controls":s.value,"data-state":c.value?`active`:`inactive`,disabled:e.disabled,"data-disabled":e.disabled?``:void 0,"data-orientation":v(i).orientation.value,onMousedown:t[0]||=h(t=>{!e.disabled&&t.ctrlKey===!1?v(i).changeModelValue(e.value):t.preventDefault()},[`left`]),onKeydown:t[1]||=p(t=>v(i).changeModelValue(e.value),[`enter`,`space`]),onFocus:t[2]||=()=>{let t=v(i).activationMode!==`manual`;!c.value&&!e.disabled&&t&&v(i).changeModelValue(e.value)}},{default:o(()=>[y(e.$slots,`default`)]),_:3},8,[`id`,`type`,`as`,`as-child`,`aria-selected`,`aria-controls`,`data-state`,`disabled`,`data-disabled`,`data-orientation`])]),_:3},8,[`focusable`,`active`]))}}),V=_({__name:`Tabs`,props:{defaultValue:{},orientation:{},dir:{},activationMode:{},modelValue:{},unmountOnHide:{type:Boolean},asChild:{type:Boolean},as:{},class:{type:[Boolean,null,String,Object,Array]}},emits:[`update:modelValue`],setup(n,{emit:i}){let a=n,c=i,l=D(b(a,`class`),c);return(n,i)=>(r(),u(v(F),e({"data-slot":`tabs`},v(l),{class:v(S)(`flex flex-col gap-2`,a.class)}),{default:o(e=>[y(n.$slots,`default`,s(t(e)))]),_:3},16,[`class`]))}}),H=_({__name:`TabsContent`,props:{value:{},forceMount:{type:Boolean},asChild:{type:Boolean},as:{},class:{type:[Boolean,null,String,Object,Array]}},setup(t){let n=t,i=b(n,`class`);return(t,a)=>(r(),u(v(R),e({"data-slot":`tabs-content`,class:v(S)(`flex-1 outline-none`,n.class)},v(i)),{default:o(()=>[y(t.$slots,`default`)]),_:3},16,[`class`]))}}),U=_({__name:`TabsList`,props:{loop:{type:Boolean},asChild:{type:Boolean},as:{},class:{type:[Boolean,null,String,Object,Array]}},setup(t){let n=t,i=b(n,`class`);return(t,a)=>(r(),u(v(z),e({"data-slot":`tabs-list`},v(i),{class:v(S)(`bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]`,n.class)}),{default:o(()=>[y(t.$slots,`default`)]),_:3},16,[`class`]))}}),W=_({__name:`TabsTrigger`,props:{value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{},class:{type:[Boolean,null,String,Object,Array]}},setup(t){let n=t,i=T(b(n,`class`));return(t,a)=>(r(),u(v(B),e({"data-slot":`tabs-trigger`,class:v(S)(`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,n.class)},v(i)),{default:o(()=>[y(t.$slots,`default`)]),_:3},16,[`class`]))}});export{V as i,U as n,H as r,W as t}; |