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:[Obje
|