tabs-B62quFeA.js 7.4 KB

1
  1. import{o as p,u as Y,f as U,O as F,A as L,g as J,I as z,b as q,a as C,d as h,T as D,t as Q,i as V,P as $,N as T}from"./keyboard-B3KSsbAZ.js";import{e as P,z as k,W as H,d as E,h as N,C as x,X as M,L as Z,F as _,Y as K,D as G}from"./index-TyuCIC8S.js";function W(e,r){if(e)return e;let s=r??"button";if(typeof s=="string"&&s.toLowerCase()==="button")return"button"}function ee(e,r){let s=P(W(e.value.type,e.value.as));return k(()=>{s.value=W(e.value.type,e.value.as)}),H(()=>{var d;s.value||p(r)&&p(r)instanceof HTMLButtonElement&&!((d=p(r))!=null&&d.hasAttribute("type"))&&(s.value="button")}),s}let te=E({props:{onFocus:{type:Function,required:!0}},setup(e){let r=P(!0);return()=>r.value?N(U,{as:"button",type:"button",features:Y.Focusable,onFocus(s){s.preventDefault();let d,f=50;function o(){var l;if(f--<=0){d&&cancelAnimationFrame(d);return}if((l=e.onFocus)!=null&&l.call(e)){r.value=!1,cancelAnimationFrame(d);return}d=requestAnimationFrame(o)}d=requestAnimationFrame(o)}}):null}});var ae=(e=>(e[e.Forwards=0]="Forwards",e[e.Backwards=1]="Backwards",e))(ae||{}),le=(e=>(e[e.Less=-1]="Less",e[e.Equal=0]="Equal",e[e.Greater=1]="Greater",e))(le||{});let X=Symbol("TabsContext");function B(e){let r=G(X,null);if(r===null){let s=new Error(`<${e} /> is missing a parent <TabGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(s,B),s}return r}let R=Symbol("TabsSSRContext"),re=E({name:"TabGroup",emits:{change:e=>!0},props:{as:{type:[Object,String],default:"template"},selectedIndex:{type:[Number],default:null},defaultIndex:{type:[Number],default:0},vertical:{type:[Boolean],default:!1},manual:{type:[Boolean],default:!1}},inheritAttrs:!1,setup(e,{slots:r,attrs:s,emit:d}){var f;let o=P((f=e.selectedIndex)!=null?f:e.defaultIndex),l=P([]),u=P([]),m=x(()=>e.selectedIndex!==null),w=x(()=>m.value?e.selectedIndex:o.value);function g(a){var n;let v=F(i.tabs.value,p),t=F(i.panels.value,p),c=v.filter(y=>{var I;return!((I=p(y))!=null&&I.hasAttribute("disabled"))});if(a<0||a>v.length-1){let y=C(o.value===null?0:Math.sign(a-o.value),{[-1]:()=>1,0:()=>C(Math.sign(a),{[-1]:()=>0,0:()=>0,1:()=>1}),1:()=>0}),I=C(y,{0:()=>v.indexOf(c[0]),1:()=>v.indexOf(c[c.length-1])});I!==-1&&(o.value=I),i.tabs.value=v,i.panels.value=t}else{let y=v.slice(0,a),I=[...v.slice(a),...y].find(j=>c.includes(j));if(!I)return;let S=(n=v.indexOf(I))!=null?n:i.selectedIndex.value;S===-1&&(S=i.selectedIndex.value),o.value=S,i.tabs.value=v,i.panels.value=t}}let i={selectedIndex:x(()=>{var a,n;return(n=(a=o.value)!=null?a:e.defaultIndex)!=null?n:null}),orientation:x(()=>e.vertical?"vertical":"horizontal"),activation:x(()=>e.manual?"manual":"auto"),tabs:l,panels:u,setSelectedIndex(a){w.value!==a&&d("change",a),m.value||g(a)},registerTab(a){var n;if(l.value.includes(a))return;let v=l.value[o.value];if(l.value.push(a),l.value=F(l.value,p),!m.value){let t=(n=l.value.indexOf(v))!=null?n:o.value;t!==-1&&(o.value=t)}},unregisterTab(a){let n=l.value.indexOf(a);n!==-1&&l.value.splice(n,1)},registerPanel(a){u.value.includes(a)||(u.value.push(a),u.value=F(u.value,p))},unregisterPanel(a){let n=u.value.indexOf(a);n!==-1&&u.value.splice(n,1)}};M(X,i);let b=P({tabs:[],panels:[]}),A=P(!1);k(()=>{A.value=!0}),M(R,x(()=>A.value?null:b.value));let O=x(()=>e.selectedIndex);return k(()=>{Z([O],()=>{var a;return g((a=e.selectedIndex)!=null?a:e.defaultIndex)},{immediate:!0})}),H(()=>{if(!m.value||w.value==null||i.tabs.value.length<=0)return;let a=F(i.tabs.value,p);a.some((n,v)=>p(i.tabs.value[v])!==p(n))&&i.setSelectedIndex(a.findIndex(n=>p(n)===p(i.tabs.value[w.value])))}),()=>{let a={selectedIndex:o.value};return N(_,[l.value.length<=0&&N(te,{onFocus:()=>{for(let n of l.value){let v=p(n);if((v==null?void 0:v.tabIndex)===0)return v.focus(),!0}return!1}}),L({theirProps:{...s,...J(e,["selectedIndex","defaultIndex","manual","vertical","onChange"])},ourProps:{},slot:a,slots:r,attrs:s,name:"TabGroup"})])}}}),se=E({name:"TabList",props:{as:{type:[Object,String],default:"div"}},setup(e,{attrs:r,slots:s}){let d=B("TabList");return()=>{let f={selectedIndex:d.selectedIndex.value},o={role:"tablist","aria-orientation":d.orientation.value};return L({ourProps:o,theirProps:e,slot:f,attrs:r,slots:s,name:"TabList"})}}}),oe=E({name:"Tab",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},setup(e,{attrs:r,slots:s,expose:d}){var f;let o=(f=e.id)!=null?f:`headlessui-tabs-tab-${z()}`,l=B("Tab"),u=P(null);d({el:u,$el:u}),k(()=>l.registerTab(u)),K(()=>l.unregisterTab(u));let m=G(R),w=x(()=>{if(m.value){let t=m.value.tabs.indexOf(o);return t===-1?m.value.tabs.push(o)-1:t}return-1}),g=x(()=>{let t=l.tabs.value.indexOf(u);return t===-1?w.value:t}),i=x(()=>g.value===l.selectedIndex.value);function b(t){var c;let y=t();if(y===D.Success&&l.activation.value==="auto"){let I=(c=V(u))==null?void 0:c.activeElement,S=l.tabs.value.findIndex(j=>p(j)===I);S!==-1&&l.setSelectedIndex(S)}return y}function A(t){let c=l.tabs.value.map(y=>p(y)).filter(Boolean);if(t.key===h.Space||t.key===h.Enter){t.preventDefault(),t.stopPropagation(),l.setSelectedIndex(g.value);return}switch(t.key){case h.Home:case h.PageUp:return t.preventDefault(),t.stopPropagation(),b(()=>$(c,T.First));case h.End:case h.PageDown:return t.preventDefault(),t.stopPropagation(),b(()=>$(c,T.Last))}if(b(()=>C(l.orientation.value,{vertical(){return t.key===h.ArrowUp?$(c,T.Previous|T.WrapAround):t.key===h.ArrowDown?$(c,T.Next|T.WrapAround):D.Error},horizontal(){return t.key===h.ArrowLeft?$(c,T.Previous|T.WrapAround):t.key===h.ArrowRight?$(c,T.Next|T.WrapAround):D.Error}}))===D.Success)return t.preventDefault()}let O=P(!1);function a(){var t;O.value||(O.value=!0,!e.disabled&&((t=p(u))==null||t.focus({preventScroll:!0}),l.setSelectedIndex(g.value),Q(()=>{O.value=!1})))}function n(t){t.preventDefault()}let v=ee(x(()=>({as:e.as,type:r.type})),u);return()=>{var t,c;let y={selected:i.value,disabled:(t=e.disabled)!=null?t:!1},{...I}=e,S={ref:u,onKeydown:A,onMousedown:n,onClick:a,id:o,role:"tab",type:v.value,"aria-controls":(c=p(l.panels.value[g.value]))==null?void 0:c.id,"aria-selected":i.value,tabIndex:i.value?0:-1,disabled:e.disabled?!0:void 0};return L({ourProps:S,theirProps:I,slot:y,attrs:r,slots:s,name:"Tab"})}}}),ie=E({name:"TabPanels",props:{as:{type:[Object,String],default:"div"}},setup(e,{slots:r,attrs:s}){let d=B("TabPanels");return()=>{let f={selectedIndex:d.selectedIndex.value};return L({theirProps:e,ourProps:{},slot:f,attrs:s,slots:r,name:"TabPanels"})}}}),de=E({name:"TabPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:null},tabIndex:{type:Number,default:0}},setup(e,{attrs:r,slots:s,expose:d}){var f;let o=(f=e.id)!=null?f:`headlessui-tabs-panel-${z()}`,l=B("TabPanel"),u=P(null);d({el:u,$el:u}),k(()=>l.registerPanel(u)),K(()=>l.unregisterPanel(u));let m=G(R),w=x(()=>{if(m.value){let b=m.value.panels.indexOf(o);return b===-1?m.value.panels.push(o)-1:b}return-1}),g=x(()=>{let b=l.panels.value.indexOf(u);return b===-1?w.value:b}),i=x(()=>g.value===l.selectedIndex.value);return()=>{var b;let A={selected:i.value},{tabIndex:O,...a}=e,n={ref:u,id:o,role:"tabpanel","aria-labelledby":(b=p(l.tabs.value[g.value]))==null?void 0:b.id,tabIndex:i.value?O:-1};return!i.value&&e.unmount&&!e.static?N(U,{as:"span","aria-hidden":!0,...n}):L({ourProps:n,theirProps:a,slot:A,attrs:r,slots:s,features:q.Static|q.RenderStrategy,visible:i.value,name:"TabPanel"})}}});export{ie as I,re as m,se as p,oe as x,de as y};