2 lines
7.2 KiB
JavaScript
2 lines
7.2 KiB
JavaScript
import{computed as v,defineComponent as L,Fragment as z,h as A,inject as j,onMounted as F,onUnmounted as K,provide as N,ref as P,watch as _,watchEffect as J}from"vue";import{useId as $}from'../../hooks/use-id.js';import{useResolveButtonType as Q}from'../../hooks/use-resolve-button-type.js';import{FocusSentinel as V}from'../../internal/focus-sentinel.js';import{Hidden as X}from'../../internal/hidden.js';import{Keys as S}from'../../keyboard.js';import{dom as f}from'../../utils/dom.js';import{Focus as g,focusIn as D,FocusResult as B,sortByDomNode as k}from'../../utils/focus-management.js';import{match as H}from'../../utils/match.js';import{microTask as Y}from'../../utils/micro-task.js';import{getOwnerDocument as Z}from'../../utils/owner.js';import{Features as q,omit as ee,render as M}from'../../utils/render.js';var te=(s=>(s[s.Forwards=0]="Forwards",s[s.Backwards=1]="Backwards",s))(te||{}),le=(d=>(d[d.Less=-1]="Less",d[d.Equal=0]="Equal",d[d.Greater=1]="Greater",d))(le||{});let U=Symbol("TabsContext");function C(a){let b=j(U,null);if(b===null){let s=new Error(`<${a} /> is missing a parent <TabGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(s,C),s}return b}let G=Symbol("TabsSSRContext"),me=L({name:"TabGroup",emits:{change:a=>!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(a,{slots:b,attrs:s,emit:d}){var E;let i=P((E=a.selectedIndex)!=null?E:a.defaultIndex),l=P([]),r=P([]),p=v(()=>a.selectedIndex!==null),R=v(()=>p.value?a.selectedIndex:i.value);function y(t){var c;let n=k(u.tabs.value,f),o=k(u.panels.value,f),e=n.filter(I=>{var m;return!((m=f(I))!=null&&m.hasAttribute("disabled"))});if(t<0||t>n.length-1){let I=H(i.value===null?0:Math.sign(t-i.value),{[-1]:()=>1,[0]:()=>H(Math.sign(t),{[-1]:()=>0,[0]:()=>0,[1]:()=>1}),[1]:()=>0}),m=H(I,{[0]:()=>n.indexOf(e[0]),[1]:()=>n.indexOf(e[e.length-1])});m!==-1&&(i.value=m),u.tabs.value=n,u.panels.value=o}else{let I=n.slice(0,t),h=[...n.slice(t),...I].find(W=>e.includes(W));if(!h)return;let O=(c=n.indexOf(h))!=null?c:u.selectedIndex.value;O===-1&&(O=u.selectedIndex.value),i.value=O,u.tabs.value=n,u.panels.value=o}}let u={selectedIndex:v(()=>{var t,n;return(n=(t=i.value)!=null?t:a.defaultIndex)!=null?n:null}),orientation:v(()=>a.vertical?"vertical":"horizontal"),activation:v(()=>a.manual?"manual":"auto"),tabs:l,panels:r,setSelectedIndex(t){R.value!==t&&d("change",t),p.value||y(t)},registerTab(t){var o;if(l.value.includes(t))return;let n=l.value[i.value];if(l.value.push(t),l.value=k(l.value,f),!p.value){let e=(o=l.value.indexOf(n))!=null?o:i.value;e!==-1&&(i.value=e)}},unregisterTab(t){let n=l.value.indexOf(t);n!==-1&&l.value.splice(n,1)},registerPanel(t){r.value.includes(t)||(r.value.push(t),r.value=k(r.value,f))},unregisterPanel(t){let n=r.value.indexOf(t);n!==-1&&r.value.splice(n,1)}};N(U,u);let T=P({tabs:[],panels:[]}),x=P(!1);F(()=>{x.value=!0}),N(G,v(()=>x.value?null:T.value));let w=v(()=>a.selectedIndex);return F(()=>{_([w],()=>{var t;return y((t=a.selectedIndex)!=null?t:a.defaultIndex)},{immediate:!0})}),J(()=>{if(!p.value||R.value==null||u.tabs.value.length<=0)return;let t=k(u.tabs.value,f);t.some((o,e)=>f(u.tabs.value[e])!==f(o))&&u.setSelectedIndex(t.findIndex(o=>f(o)===f(u.tabs.value[R.value])))}),()=>{let t={selectedIndex:i.value};return A(z,[l.value.length<=0&&A(V,{onFocus:()=>{for(let n of l.value){let o=f(n);if((o==null?void 0:o.tabIndex)===0)return o.focus(),!0}return!1}}),M({theirProps:{...s,...ee(a,["selectedIndex","defaultIndex","manual","vertical","onChange"])},ourProps:{},slot:t,slots:b,attrs:s,name:"TabGroup"})])}}}),pe=L({name:"TabList",props:{as:{type:[Object,String],default:"div"}},setup(a,{attrs:b,slots:s}){let d=C("TabList");return()=>{let i={selectedIndex:d.selectedIndex.value},l={role:"tablist","aria-orientation":d.orientation.value};return M({ourProps:l,theirProps:a,slot:i,attrs:b,slots:s,name:"TabList"})}}}),xe=L({name:"Tab",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},setup(a,{attrs:b,slots:s,expose:d}){var o;let i=(o=a.id)!=null?o:`headlessui-tabs-tab-${$()}`,l=C("Tab"),r=P(null);d({el:r,$el:r}),F(()=>l.registerTab(r)),K(()=>l.unregisterTab(r));let p=j(G),R=v(()=>{if(p.value){let e=p.value.tabs.indexOf(i);return e===-1?p.value.tabs.push(i)-1:e}return-1}),y=v(()=>{let e=l.tabs.value.indexOf(r);return e===-1?R.value:e}),u=v(()=>y.value===l.selectedIndex.value);function T(e){var I;let c=e();if(c===B.Success&&l.activation.value==="auto"){let m=(I=Z(r))==null?void 0:I.activeElement,h=l.tabs.value.findIndex(O=>f(O)===m);h!==-1&&l.setSelectedIndex(h)}return c}function x(e){let c=l.tabs.value.map(m=>f(m)).filter(Boolean);if(e.key===S.Space||e.key===S.Enter){e.preventDefault(),e.stopPropagation(),l.setSelectedIndex(y.value);return}switch(e.key){case S.Home:case S.PageUp:return e.preventDefault(),e.stopPropagation(),T(()=>D(c,g.First));case S.End:case S.PageDown:return e.preventDefault(),e.stopPropagation(),T(()=>D(c,g.Last))}if(T(()=>H(l.orientation.value,{vertical(){return e.key===S.ArrowUp?D(c,g.Previous|g.WrapAround):e.key===S.ArrowDown?D(c,g.Next|g.WrapAround):B.Error},horizontal(){return e.key===S.ArrowLeft?D(c,g.Previous|g.WrapAround):e.key===S.ArrowRight?D(c,g.Next|g.WrapAround):B.Error}}))===B.Success)return e.preventDefault()}let w=P(!1);function E(){var e;w.value||(w.value=!0,!a.disabled&&((e=f(r))==null||e.focus({preventScroll:!0}),l.setSelectedIndex(y.value),Y(()=>{w.value=!1})))}function t(e){e.preventDefault()}let n=Q(v(()=>({as:a.as,type:b.type})),r);return()=>{var m,h;let e={selected:u.value,disabled:(m=a.disabled)!=null?m:!1},{...c}=a,I={ref:r,onKeydown:x,onMousedown:t,onClick:E,id:i,role:"tab",type:n.value,"aria-controls":(h=f(l.panels.value[y.value]))==null?void 0:h.id,"aria-selected":u.value,tabIndex:u.value?0:-1,disabled:a.disabled?!0:void 0};return M({ourProps:I,theirProps:c,slot:e,attrs:b,slots:s,name:"Tab"})}}}),Ie=L({name:"TabPanels",props:{as:{type:[Object,String],default:"div"}},setup(a,{slots:b,attrs:s}){let d=C("TabPanels");return()=>{let i={selectedIndex:d.selectedIndex.value};return M({theirProps:a,ourProps:{},slot:i,attrs:s,slots:b,name:"TabPanels"})}}}),ye=L({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(a,{attrs:b,slots:s,expose:d}){var T;let i=(T=a.id)!=null?T:`headlessui-tabs-panel-${$()}`,l=C("TabPanel"),r=P(null);d({el:r,$el:r}),F(()=>l.registerPanel(r)),K(()=>l.unregisterPanel(r));let p=j(G),R=v(()=>{if(p.value){let x=p.value.panels.indexOf(i);return x===-1?p.value.panels.push(i)-1:x}return-1}),y=v(()=>{let x=l.panels.value.indexOf(r);return x===-1?R.value:x}),u=v(()=>y.value===l.selectedIndex.value);return()=>{var n;let x={selected:u.value},{tabIndex:w,...E}=a,t={ref:r,id:i,role:"tabpanel","aria-labelledby":(n=f(l.tabs.value[y.value]))==null?void 0:n.id,tabIndex:u.value?w:-1};return!u.value&&a.unmount&&!a.static?A(X,{as:"span","aria-hidden":!0,...t}):M({ourProps:t,theirProps:E,slot:x,attrs:b,slots:s,features:q.Static|q.RenderStrategy,visible:u.value,name:"TabPanel"})}}});export{xe as Tab,me as TabGroup,pe as TabList,ye as TabPanel,Ie as TabPanels};
|