@headlessui/vue - npm Package Compare versions

Comparing version 0.0.0-insiders.cb7a969 to 0.0.0-insiders.cb86665

dist/components/combobox/combobox.d.ts

@@ -1,2 +0,2 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 export declare let Combobox: import("vue").DefineComponent<{
@@ -11,7 +11,22 @@ as: {
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        nullable: boolean;
+        default: null;
+    };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
     };
+    defaultValue: {
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
         type: StringConstructor;
+        optional: boolean;
     };
@@ -26,2 +41,13 @@ nullable: {
     };
+    immediate: {
+        type: BooleanConstructor[];
+        default: boolean;
+    };
+    virtual: {
+        type: PropType<{
+            options: unknown[];
+            disabled?: ((value: unknown) => boolean) | undefined;
+        } | null>;
+        default: null;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -40,7 +66,22 @@ [key: string]: any;
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        nullable: boolean;
+        default: null;
+    };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
     };
+    defaultValue: {
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
         type: StringConstructor;
+        optional: boolean;
     };
@@ -55,2 +96,13 @@ nullable: {
     };
+    immediate: {
+        type: BooleanConstructor[];
+        default: boolean;
+    };
+    virtual: {
+        type: PropType<{
+            options: unknown[];
+            disabled?: ((value: unknown) => boolean) | undefined;
+        } | null>;
+        default: null;
+    };
 }>> & {
@@ -61,4 +113,12 @@ "onUpdate:modelValue"?: ((_value: any) => any) | undefined;
     disabled: boolean;
+    by: string | Function;
+    modelValue: string | number | boolean | object | null;
+    defaultValue: string | number | boolean | object | null;
     nullable: boolean;
     multiple: boolean;
+    immediate: boolean;
+    virtual: {
+        options: unknown[];
+        disabled?: ((value: unknown) => boolean) | undefined;
+    } | null;
 }>;
@@ -70,2 +130,6 @@ export declare let ComboboxLabel: import("vue").DefineComponent<{
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -75,3 +139,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -81,3 +145,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -90,2 +159,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -95,3 +168,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -101,3 +174,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -121,2 +199,10 @@ }>;
     };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -126,3 +212,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (_value: Event & {
@@ -147,2 +233,10 @@ target: HTMLInputElement;
     };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>> & {
@@ -153,5 +247,7 @@ onChange?: ((_value: Event & {
 }, {
+    id: string;
     as: string | Record<string, any>;
     unmount: boolean;
     static: boolean;
+    defaultValue: string;
 }>;
@@ -179,3 +275,3 @@ export declare let ComboboxOptions: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -209,3 +305,3 @@ type: (ObjectConstructor | StringConstructor)[];
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
     };
@@ -216,2 +312,6 @@ disabled: {
     };
+    order: {
+        type: NumberConstructor[];
+        default: null;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -221,3 +321,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -228,3 +328,3 @@ type: (ObjectConstructor | StringConstructor)[];
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
     };
@@ -235,5 +335,10 @@ disabled: {
     };
+    order: {
+        type: NumberConstructor[];
+        default: null;
+    };
 }>>, {
     as: string | Record<string, any>;
     disabled: boolean;
+    order: number;
 }>;

dist/components/combobox/combobox.js

@@ -1,1 +0,1 @@
-import{Fragment as J,computed as g,defineComponent as k,h as $,inject as W,nextTick as M,onMounted as z,onUnmounted as G,provide as Q,ref as D,toRaw as x,watch as U,watchEffect as N}from"vue";import{Features as B,render as E,omit as H,compact as X}from"../../utils/render.js";import{useId as F}from"../../hooks/use-id.js";import{Keys as y}from"../../keyboard.js";import{calculateActiveIndex as Y,Focus as R}from"../../utils/calculate-active-index.js";import{dom as I}from"../../utils/dom.js";import{useOpenClosed as Z,State as K,useOpenClosedProvider as ee}from"../../internal/open-closed.js";import{match as V}from"../../utils/match.js";import{useResolveButtonType as te}from"../../hooks/use-resolve-button-type.js";import{useTreeWalker as oe}from"../../hooks/use-tree-walker.js";import{sortByDomNode as ne}from"../../utils/focus-management.js";import{useOutsideClick as le}from"../../hooks/use-outside-click.js";import{VisuallyHidden as ae}from"../../internal/visually-hidden.js";import{objectToFormEntries as ie}from"../../utils/form.js";var ue=(i=>(i[i.Open=0]="Open",i[i.Closed=1]="Closed",i))(ue||{}),re=(i=>(i[i.Single=0]="Single",i[i.Multi=1]="Multi",i))(re||{}),se=(i=>(i[i.Pointer=0]="Pointer",i[i.Other=1]="Other",i))(se||{});let _=Symbol("ComboboxContext");function A(n){let O=W(_,null);if(O===null){let i=new Error(`<${n} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,A),i}return O}let we=k({name:"Combobox",emits:{"update:modelValue":n=>!0},props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean]},name:{type:String},nullable:{type:Boolean,default:!1},multiple:{type:[Boolean],default:!1}},setup(n,{slots:O,attrs:i,emit:C}){let e=D(1),t=D(null),d=D(null),S=D(null),c=D(null),b=D({static:!1,hold:!1}),o=D([]),p=D(null),v=D(1),h=D(!1);function f(a=s=>s){let s=p.value!==null?o.value[p.value]:null,u=ne(a(o.value.slice()),m=>I(m.dataRef.domRef)),l=s?u.indexOf(s):null;return l===-1&&(l=null),{options:u,activeOptionIndex:l}}let P=g(()=>n.modelValue),w=g(()=>n.multiple?1:0),L=g(()=>n.nullable),r={comboboxState:e,value:P,mode:w,nullable:L,inputRef:d,labelRef:t,buttonRef:S,optionsRef:c,disabled:g(()=>n.disabled),options:o,change(a){C("update:modelValue",a)},activeOptionIndex:g(()=>{if(h.value&&p.value===null&&o.value.length>0){let a=o.value.findIndex(s=>!s.dataRef.disabled);if(a!==-1)return a}return p.value}),activationTrigger:v,inputPropsRef:D({displayValue:void 0}),optionsPropsRef:b,closeCombobox(){h.value=!1,!n.disabled&&e.value!==1&&(e.value=1,p.value=null)},openCombobox(){if(h.value=!0,n.disabled||e.value===0)return;let a=o.value.findIndex(s=>{let u=x(s.dataRef.value);return V(w.value,{[0]:()=>x(r.value.value)===x(u),[1]:()=>x(r.value.value).includes(x(u))})});a!==-1&&(p.value=a),e.value=0},goToOption(a,s,u){if(h.value=!1,n.disabled||c.value&&!b.value.static&&e.value===1)return;let l=f();if(l.activeOptionIndex===null){let T=l.options.findIndex(j=>!j.dataRef.disabled);T!==-1&&(l.activeOptionIndex=T)}let m=Y(a===R.Specific?{focus:R.Specific,id:s}:{focus:a},{resolveItems:()=>l.options,resolveActiveIndex:()=>l.activeOptionIndex,resolveId:T=>T.id,resolveDisabled:T=>T.dataRef.disabled});p.value=m,v.value=u!=null?u:1,o.value=l.options},syncInputValue(){var u;let a=r.value.value;if(!I(r.inputRef))return;let s=r.inputPropsRef.value.displayValue;typeof s=="function"?r.inputRef.value.value=(u=s(a))!=null?u:"":typeof a=="string"?r.inputRef.value.value=a:r.inputRef.value.value=""},selectOption(a){let s=o.value.find(l=>l.id===a);if(!s)return;let{dataRef:u}=s;C("update:modelValue",V(w.value,{[0]:()=>u.value,[1]:()=>{let l=x(r.value.value).slice(),m=x(u.value),T=l.indexOf(m);return T===-1?l.push(m):l.splice(T,1),l}})),r.syncInputValue()},selectActiveOption(){if(r.activeOptionIndex.value===null)return;let{dataRef:a,id:s}=o.value[r.activeOptionIndex.value];C("update:modelValue",V(w.value,{[0]:()=>a.value,[1]:()=>{let u=x(r.value.value).slice(),l=x(a.value),m=u.indexOf(l);return m===-1?u.push(l):u.splice(m,1),u}})),r.syncInputValue(),r.goToOption(R.Specific,s)},registerOption(a,s){let u={id:a,dataRef:s},l=f(m=>[...m,u]);if(p.value===null){let m=s.value.value;V(w.value,{[0]:()=>x(r.value.value)===x(m),[1]:()=>x(r.value.value).includes(x(m))})&&(l.activeOptionIndex=l.options.indexOf(u))}o.value=l.options,p.value=l.activeOptionIndex,v.value=1},unregisterOption(a){let s=f(u=>{let l=u.findIndex(m=>m.id===a);return l!==-1&&u.splice(l,1),u});o.value=s.options,p.value=s.activeOptionIndex,v.value=1}};le([d,S,c],()=>{e.value===0&&r.closeCombobox()}),U([r.value,r.inputRef],()=>r.syncInputValue(),{immediate:!0}),U(r.comboboxState,a=>{a===1&&r.syncInputValue()},{immediate:!0}),Q(_,r),ee(g(()=>V(e.value,{[0]:K.Open,[1]:K.Closed})));let q=g(()=>r.activeOptionIndex.value===null?null:o.value[r.activeOptionIndex.value].dataRef.value);return()=>{let{name:a,modelValue:s,disabled:u,...l}=n,m={open:e.value===0,disabled:u,activeIndex:r.activeOptionIndex.value,activeOption:q.value};return $(J,[...a!=null&&s!=null?ie({[a]:s}).map(([T,j])=>$(ae,X({key:T,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:T,value:j}))):[],E({props:H(l,["nullable","multiple","onUpdate:modelValue"]),slot:m,slots:O,attrs:i,name:"Combobox"})])}}}),Me=k({name:"ComboboxLabel",props:{as:{type:[Object,String],default:"label"}},setup(n,{attrs:O,slots:i}){let C=A("ComboboxLabel"),e=`headlessui-combobox-label-${F()}`;function t(){var d;(d=I(C.inputRef))==null||d.focus({preventScroll:!0})}return()=>{let d={open:C.comboboxState.value===0,disabled:C.disabled.value},S={id:e,ref:C.labelRef,onClick:t};return E({props:{...n,...S},slot:d,attrs:O,slots:i,name:"ComboboxLabel"})}}}),Ve=k({name:"ComboboxButton",props:{as:{type:[Object,String],default:"button"}},setup(n,{attrs:O,slots:i,expose:C}){let e=A("ComboboxButton"),t=`headlessui-combobox-button-${F()}`;C({el:e.buttonRef,$el:e.buttonRef});function d(b){e.disabled.value||(e.comboboxState.value===0?e.closeCombobox():(b.preventDefault(),e.openCombobox()),M(()=>{var o;return(o=I(e.inputRef))==null?void 0:o.focus({preventScroll:!0})}))}function S(b){switch(b.key){case y.ArrowDown:b.preventDefault(),b.stopPropagation(),e.comboboxState.value===1&&(e.openCombobox(),M(()=>{e.value.value||e.goToOption(R.First)})),M(()=>{var o;return(o=e.inputRef.value)==null?void 0:o.focus({preventScroll:!0})});return;case y.ArrowUp:b.preventDefault(),b.stopPropagation(),e.comboboxState.value===1&&(e.openCombobox(),M(()=>{e.value.value||e.goToOption(R.Last)})),M(()=>{var o;return(o=e.inputRef.value)==null?void 0:o.focus({preventScroll:!0})});return;case y.Escape:b.preventDefault(),e.optionsRef.value&&!e.optionsPropsRef.value.static&&b.stopPropagation(),e.closeCombobox(),M(()=>{var o;return(o=e.inputRef.value)==null?void 0:o.focus({preventScroll:!0})});return}}let c=te(g(()=>({as:n.as,type:O.type})),e.buttonRef);return()=>{var p,v;let b={open:e.comboboxState.value===0,disabled:e.disabled.value},o={ref:e.buttonRef,id:t,type:c.value,tabindex:"-1","aria-haspopup":!0,"aria-controls":(p=I(e.optionsRef))==null?void 0:p.id,"aria-expanded":e.disabled.value?void 0:e.comboboxState.value===0,"aria-labelledby":e.labelRef.value?[(v=I(e.labelRef))==null?void 0:v.id,t].join(" "):void 0,disabled:e.disabled.value===!0?!0:void 0,onKeydown:S,onClick:d};return E({props:{...n,...o},slot:b,attrs:O,slots:i,name:"ComboboxButton"})}}}),ke=k({name:"ComboboxInput",props:{as:{type:[Object,String],default:"input"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},displayValue:{type:Function}},emits:{change:n=>!0},setup(n,{emit:O,attrs:i,slots:C,expose:e}){let t=A("ComboboxInput"),d=`headlessui-combobox-input-${F()}`;t.inputPropsRef=g(()=>n),e({el:t.inputRef,$el:t.inputRef});function S(o){switch(o.key){case y.Backspace:case y.Delete:if(t.mode.value!==0||!t.nullable.value)return;let p=o.currentTarget;requestAnimationFrame(()=>{if(p.value===""){t.change(null);let v=I(t.optionsRef);v&&(v.scrollTop=0),t.goToOption(R.Nothing)}});break;case y.Enter:if(t.comboboxState.value!==0)return;if(o.preventDefault(),o.stopPropagation(),t.activeOptionIndex.value===null){t.closeCombobox();return}t.selectActiveOption(),t.mode.value===0&&t.closeCombobox();break;case y.ArrowDown:return o.preventDefault(),o.stopPropagation(),V(t.comboboxState.value,{[0]:()=>t.goToOption(R.Next),[1]:()=>{t.openCombobox(),M(()=>{t.value.value||t.goToOption(R.First)})}});case y.ArrowUp:return o.preventDefault(),o.stopPropagation(),V(t.comboboxState.value,{[0]:()=>t.goToOption(R.Previous),[1]:()=>{t.openCombobox(),M(()=>{t.value.value||t.goToOption(R.Last)})}});case y.Home:case y.PageUp:return o.preventDefault(),o.stopPropagation(),t.goToOption(R.First);case y.End:case y.PageDown:return o.preventDefault(),o.stopPropagation(),t.goToOption(R.Last);case y.Escape:o.preventDefault(),t.optionsRef.value&&!t.optionsPropsRef.value.static&&o.stopPropagation(),t.closeCombobox();break;case y.Tab:t.selectActiveOption(),t.closeCombobox();break}}function c(o){O("change",o)}function b(o){t.openCombobox(),O("change",o)}return()=>{var h,f,P,w,L;let o={open:t.comboboxState.value===0},p={"aria-controls":(h=t.optionsRef.value)==null?void 0:h.id,"aria-expanded":t.disabled?void 0:t.comboboxState.value===0,"aria-activedescendant":t.activeOptionIndex.value===null||(f=t.options.value[t.activeOptionIndex.value])==null?void 0:f.id,"aria-multiselectable":t.mode.value===1?!0:void 0,"aria-labelledby":(L=(P=I(t.labelRef))==null?void 0:P.id)!=null?L:(w=I(t.buttonRef))==null?void 0:w.id,id:d,onKeydown:S,onChange:c,onInput:b,role:"combobox",type:"text",tabIndex:0,ref:t.inputRef},v=H(n,["displayValue"]);return E({props:{...v,...p},slot:o,attrs:i,slots:C,features:B.RenderStrategy|B.Static,name:"ComboboxInput"})}}}),Ee=k({name:"ComboboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},hold:{type:[Boolean],default:!1}},setup(n,{attrs:O,slots:i,expose:C}){let e=A("ComboboxOptions"),t=`headlessui-combobox-options-${F()}`;C({el:e.optionsRef,$el:e.optionsRef}),N(()=>{e.optionsPropsRef.value.static=n.static}),N(()=>{e.optionsPropsRef.value.hold=n.hold});let d=Z(),S=g(()=>d!==null?d.value===K.Open:e.comboboxState.value===0);return oe({container:g(()=>I(e.optionsRef)),enabled:g(()=>e.comboboxState.value===0),accept(c){return c.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:c.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(c){c.setAttribute("role","none")}}),()=>{var p,v,h,f;let c={open:e.comboboxState.value===0},b={"aria-activedescendant":e.activeOptionIndex.value===null||(p=e.options.value[e.activeOptionIndex.value])==null?void 0:p.id,"aria-labelledby":(f=(v=I(e.labelRef))==null?void 0:v.id)!=null?f:(h=I(e.buttonRef))==null?void 0:h.id,id:t,ref:e.optionsRef,role:"listbox"},o=H(n,["hold"]);return E({props:{...o,...b},slot:c,attrs:O,slots:i,features:B.RenderStrategy|B.Static,visible:S.value,name:"ComboboxOptions"})}}}),Ae=k({name:"ComboboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1}},setup(n,{slots:O,attrs:i,expose:C}){let e=A("ComboboxOption"),t=`headlessui-combobox-option-${F()}`,d=D(null);C({el:d,$el:d});let S=g(()=>e.activeOptionIndex.value!==null?e.options.value[e.activeOptionIndex.value].id===t:!1),c=g(()=>V(e.mode.value,{[0]:()=>x(e.value.value)===x(n.value),[1]:()=>x(e.value.value).includes(x(n.value))})),b=g(()=>({disabled:n.disabled,value:n.value,domRef:d}));z(()=>e.registerOption(t,b)),G(()=>e.unregisterOption(t)),N(()=>{e.comboboxState.value===0&&(!S.value||e.activationTrigger.value!==0&&M(()=>{var f,P;return(P=(f=I(d))==null?void 0:f.scrollIntoView)==null?void 0:P.call(f,{block:"nearest"})}))});function o(f){if(n.disabled)return f.preventDefault();e.selectOption(t),e.mode.value===0&&(e.closeCombobox(),M(()=>{var P;return(P=I(e.inputRef))==null?void 0:P.focus({preventScroll:!0})}))}function p(){if(n.disabled)return e.goToOption(R.Nothing);e.goToOption(R.Specific,t)}function v(){n.disabled||S.value||e.goToOption(R.Specific,t,0)}function h(){n.disabled||!S.value||e.optionsPropsRef.value.hold||e.goToOption(R.Nothing)}return()=>{let{disabled:f}=n,P={active:S.value,selected:c.value,disabled:f},w={id:t,ref:d,role:"option",tabIndex:f===!0?void 0:-1,"aria-disabled":f===!0?!0:void 0,"aria-selected":c.value===!0?c.value:void 0,disabled:void 0,onClick:o,onFocus:p,onPointermove:v,onMousemove:v,onPointerleave:h,onMouseleave:h};return E({props:{...n,...w},slot:P,attrs:i,slots:O,name:"ComboboxOption"})}}});export{we as Combobox,Ve as ComboboxButton,ke as ComboboxInput,Me as ComboboxLabel,Ae as ComboboxOption,Ee as ComboboxOptions};
+import{useVirtualizer as re}from"@tanstack/vue-virtual";import{Fragment as de,cloneVNode as se,computed as b,defineComponent as j,h as z,inject as ee,nextTick as H,onMounted as X,onUnmounted as fe,provide as te,reactive as ve,ref as A,toRaw as L,watch as q,watchEffect as Y}from"vue";import{useControllable as pe}from'../../hooks/use-controllable.js';import{useFrameDebounce as be}from'../../hooks/use-frame-debounce.js';import{useId as J}from'../../hooks/use-id.js';import{useOutsideClick as ce}from'../../hooks/use-outside-click.js';import{useResolveButtonType as me}from'../../hooks/use-resolve-button-type.js';import{useTrackedPointer as xe}from'../../hooks/use-tracked-pointer.js';import{useTreeWalker as ge}from'../../hooks/use-tree-walker.js';import{Hidden as Se,Features as Oe}from'../../internal/hidden.js';import{State as G,useOpenClosed as Ce,useOpenClosedProvider as Re}from'../../internal/open-closed.js';import{Keys as k}from'../../keyboard.js';import{MouseButton as ye}from'../../mouse.js';import{history as oe}from'../../utils/active-element-history.js';import{Focus as w,calculateActiveIndex as le}from'../../utils/calculate-active-index.js';import{disposables as ae}from'../../utils/disposables.js';import{dom as x}from'../../utils/dom.js';import{sortByDomNode as Te}from'../../utils/focus-management.js';import{objectToFormEntries as Ie}from'../../utils/form.js';import{match as $}from'../../utils/match.js';import{getOwnerDocument as he}from'../../utils/owner.js';import{isMobile as Pe}from'../../utils/platform.js';import{Features as Q,compact as we,omit as Z,render as _}from'../../utils/render.js';function De(a,I){return a===I}var Ee=(u=>(u[u.Open=0]="Open",u[u.Closed=1]="Closed",u))(Ee||{}),Ve=(u=>(u[u.Single=0]="Single",u[u.Multi=1]="Multi",u))(Ve||{}),Ae=(O=>(O[O.Pointer=0]="Pointer",O[O.Focus=1]="Focus",O[O.Other=2]="Other",O))(Ae||{});let ne=Symbol("ComboboxContext");function N(a){let I=ee(ne,null);if(I===null){let u=new Error(`<${a} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,N),u}return I}let ie=Symbol("VirtualContext"),Fe=j({name:"VirtualProvider",setup(a,{slots:I}){let u=N("VirtualProvider"),O=b(()=>{let r=x(u.optionsRef);if(!r)return{start:0,end:0};let f=window.getComputedStyle(r);return{start:parseFloat(f.paddingBlockStart||f.paddingTop),end:parseFloat(f.paddingBlockEnd||f.paddingBottom)}}),t=re(b(()=>({scrollPaddingStart:O.value.start,scrollPaddingEnd:O.value.end,count:u.virtual.value.options.length,estimateSize(){return 40},getScrollElement(){return x(u.optionsRef)},overscan:12}))),e=b(()=>{var r;return(r=u.virtual.value)==null?void 0:r.options}),C=A(0);return q([e],()=>{C.value+=1}),te(ie,u.virtual.value?t:null),()=>[z("div",{style:{position:"relative",width:"100%",height:`${t.value.getTotalSize()}px`},ref:r=>{if(r){if(typeof process!="undefined"&&process.env.JEST_WORKER_ID!==void 0||u.activationTrigger.value===0)return;u.activeOptionIndex.value!==null&&u.virtual.value.options.length>u.activeOptionIndex.value&&t.value.scrollToIndex(u.activeOptionIndex.value)}}},t.value.getVirtualItems().map(r=>se(I.default({option:u.virtual.value.options[r.index],open:u.comboboxState.value===0})[0],{key:`${C.value}-${r.index}`,"data-index":r.index,"aria-setsize":u.virtual.value.options.length,"aria-posinset":r.index+1,style:{position:"absolute",top:0,left:0,transform:`translateY(${r.start}px)`,overflowAnchor:"none"}})))]}}),lt=j({name:"Combobox",emits:{"update:modelValue":a=>!0},props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},by:{type:[String,Function],nullable:!0,default:null},modelValue:{type:[Object,String,Number,Boolean],default:void 0},defaultValue:{type:[Object,String,Number,Boolean],default:void 0},form:{type:String,optional:!0},name:{type:String,optional:!0},nullable:{type:Boolean,default:!1},multiple:{type:[Boolean],default:!1},immediate:{type:[Boolean],default:!1},virtual:{type:Object,default:null}},inheritAttrs:!1,setup(a,{slots:I,attrs:u,emit:O}){let t=A(1),e=A(null),C=A(null),r=A(null),f=A(null),p=A({static:!1,hold:!1}),c=A([]),g=A(null),P=A(2),D=A(!1);function V(l=i=>i){let i=g.value!==null?c.value[g.value]:null,s=l(c.value.slice()),v=s.length>0&&s[0].dataRef.order.value!==null?s.sort((y,F)=>y.dataRef.order.value-F.dataRef.order.value):Te(s,y=>x(y.dataRef.domRef)),R=i?v.indexOf(i):null;return R===-1&&(R=null),{options:v,activeOptionIndex:R}}let M=b(()=>a.multiple?1:0),K=b(()=>a.nullable),[B,d]=pe(b(()=>a.modelValue),l=>O("update:modelValue",l),b(()=>a.defaultValue)),o=b(()=>B.value===void 0?$(M.value,{[1]:[],[0]:void 0}):B.value),m=null,S=null;function h(l){return $(M.value,{[0](){return d==null?void 0:d(l)},[1]:()=>{let i=L(n.value.value).slice(),s=L(l),v=i.findIndex(R=>n.compare(s,L(R)));return v===-1?i.push(s):i.splice(v,1),d==null?void 0:d(i)}})}let T=b(()=>{var l;return(l=a.virtual)==null?void 0:l.options});q([T],([l],[i])=>{if(n.virtual.value&&l&&i&&g.value!==null){let s=l.indexOf(i[g.value]);s!==-1?g.value=s:g.value=null}});let n={comboboxState:t,value:o,mode:M,compare(l,i){if(typeof a.by=="string"){let s=a.by;return(l==null?void 0:l[s])===(i==null?void 0:i[s])}return a.by===null?De(l,i):a.by(l,i)},calculateIndex(l){return n.virtual.value?a.by===null?n.virtual.value.options.indexOf(l):n.virtual.value.options.findIndex(i=>n.compare(i,l)):c.value.findIndex(i=>n.compare(i.dataRef.value,l))},defaultValue:b(()=>a.defaultValue),nullable:K,immediate:b(()=>a.immediate),virtual:b(()=>{var l;return a.virtual?{options:a.virtual.options,disabled:(l=a.virtual.disabled)!=null?l:()=>!1}:null}),inputRef:C,labelRef:e,buttonRef:r,optionsRef:f,disabled:b(()=>a.disabled),options:c,change(l){d(l)},activeOptionIndex:b(()=>{if(D.value&&g.value===null&&(n.virtual.value?n.virtual.value.options.length>0:c.value.length>0)){if(n.virtual.value){let i=n.virtual.value.options.findIndex(s=>{var v;return!((v=n.virtual.value)!=null&&v.disabled(s))});if(i!==-1)return i}let l=c.value.findIndex(i=>!i.dataRef.disabled);if(l!==-1)return l}return g.value}),activationTrigger:P,optionsPropsRef:p,closeCombobox(){D.value=!1,!a.disabled&&t.value!==1&&(t.value=1,g.value=null)},openCombobox(){if(D.value=!0,!a.disabled&&t.value!==0){if(n.value.value){let l=n.calculateIndex(n.value.value);l!==-1&&(g.value=l)}t.value=0}},setActivationTrigger(l){P.value=l},goToOption(l,i,s){D.value=!1,m!==null&&cancelAnimationFrame(m),m=requestAnimationFrame(()=>{if(a.disabled||f.value&&!p.value.static&&t.value===1)return;if(n.virtual.value){g.value=l===w.Specific?i:le({focus:l},{resolveItems:()=>n.virtual.value.options,resolveActiveIndex:()=>{var y,F;return(F=(y=n.activeOptionIndex.value)!=null?y:n.virtual.value.options.findIndex(W=>{var U;return!((U=n.virtual.value)!=null&&U.disabled(W))}))!=null?F:null},resolveDisabled:y=>n.virtual.value.disabled(y),resolveId(){throw new Error("Function not implemented.")}}),P.value=s!=null?s:2;return}let v=V();if(v.activeOptionIndex===null){let y=v.options.findIndex(F=>!F.dataRef.disabled);y!==-1&&(v.activeOptionIndex=y)}let R=l===w.Specific?i:le({focus:l},{resolveItems:()=>v.options,resolveActiveIndex:()=>v.activeOptionIndex,resolveId:y=>y.id,resolveDisabled:y=>y.dataRef.disabled});g.value=R,P.value=s!=null?s:2,c.value=v.options})},selectOption(l){let i=c.value.find(v=>v.id===l);if(!i)return;let{dataRef:s}=i;h(s.value)},selectActiveOption(){if(n.activeOptionIndex.value!==null){if(n.virtual.value)h(n.virtual.value.options[n.activeOptionIndex.value]);else{let{dataRef:l}=c.value[n.activeOptionIndex.value];h(l.value)}n.goToOption(w.Specific,n.activeOptionIndex.value)}},registerOption(l,i){let s=ve({id:l,dataRef:i});if(n.virtual.value){c.value.push(s);return}S&&cancelAnimationFrame(S);let v=V(R=>(R.push(s),R));g.value===null&&n.isSelected(i.value.value)&&(v.activeOptionIndex=v.options.indexOf(s)),c.value=v.options,g.value=v.activeOptionIndex,P.value=2,v.options.some(R=>!x(R.dataRef.domRef))&&(S=requestAnimationFrame(()=>{let R=V();c.value=R.options,g.value=R.activeOptionIndex}))},unregisterOption(l,i){if(m!==null&&cancelAnimationFrame(m),i&&(D.value=!0),n.virtual.value){c.value=c.value.filter(v=>v.id!==l);return}let s=V(v=>{let R=v.findIndex(y=>y.id===l);return R!==-1&&v.splice(R,1),v});c.value=s.options,g.value=s.activeOptionIndex,P.value=2},isSelected(l){return $(M.value,{[0]:()=>n.compare(L(n.value.value),L(l)),[1]:()=>L(n.value.value).some(i=>n.compare(L(i),L(l)))})},isActive(l){return g.value===n.calculateIndex(l)}};ce([C,r,f],()=>n.closeCombobox(),b(()=>t.value===0)),te(ne,n),Re(b(()=>$(t.value,{[0]:G.Open,[1]:G.Closed})));let E=b(()=>{var l;return(l=x(C))==null?void 0:l.closest("form")});return X(()=>{q([E],()=>{if(!E.value||a.defaultValue===void 0)return;function l(){n.change(a.defaultValue)}return E.value.addEventListener("reset",l),()=>{var i;(i=E.value)==null||i.removeEventListener("reset",l)}},{immediate:!0})}),()=>{var y,F,W;let{name:l,disabled:i,form:s,...v}=a,R={open:t.value===0,disabled:i,activeIndex:n.activeOptionIndex.value,activeOption:n.activeOptionIndex.value===null?null:n.virtual.value?n.virtual.value.options[(y=n.activeOptionIndex.value)!=null?y:0]:(W=(F=n.options.value[n.activeOptionIndex.value])==null?void 0:F.dataRef.value)!=null?W:null,value:o.value};return z(de,[...l!=null&&o.value!=null?Ie({[l]:o.value}).map(([U,ue])=>z(Se,we({features:Oe.Hidden,key:U,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:s,disabled:i,name:U,value:ue}))):[],_({theirProps:{...u,...Z(v,["by","defaultValue","immediate","modelValue","multiple","nullable","onUpdate:modelValue","virtual"])},ourProps:{},slot:R,slots:I,attrs:u,name:"Combobox"})])}}}),at=j({name:"ComboboxLabel",props:{as:{type:[Object,String],default:"label"},id:{type:String,default:()=>`headlessui-combobox-label-${J()}`}},setup(a,{attrs:I,slots:u}){let O=N("ComboboxLabel");function t(){var e;(e=x(O.inputRef))==null||e.focus({preventScroll:!0})}return()=>{let e={open:O.comboboxState.value===0,disabled:O.disabled.value},{id:C,...r}=a,f={id:C,ref:O.labelRef,onClick:t};return _({ourProps:f,theirProps:r,slot:e,attrs:I,slots:u,name:"ComboboxLabel"})}}}),nt=j({name:"ComboboxButton",props:{as:{type:[Object,String],default:"button"},id:{type:String,default:()=>`headlessui-combobox-button-${J()}`}},setup(a,{attrs:I,slots:u,expose:O}){let t=N("ComboboxButton");O({el:t.buttonRef,$el:t.buttonRef});function e(f){t.disabled.value||(t.comboboxState.value===0?t.closeCombobox():(f.preventDefault(),t.openCombobox()),H(()=>{var p;return(p=x(t.inputRef))==null?void 0:p.focus({preventScroll:!0})}))}function C(f){switch(f.key){case k.ArrowDown:f.preventDefault(),f.stopPropagation(),t.comboboxState.value===1&&t.openCombobox(),H(()=>{var p;return(p=t.inputRef.value)==null?void 0:p.focus({preventScroll:!0})});return;case k.ArrowUp:f.preventDefault(),f.stopPropagation(),t.comboboxState.value===1&&(t.openCombobox(),H(()=>{t.value.value||t.goToOption(w.Last)})),H(()=>{var p;return(p=t.inputRef.value)==null?void 0:p.focus({preventScroll:!0})});return;case k.Escape:if(t.comboboxState.value!==0)return;f.preventDefault(),t.optionsRef.value&&!t.optionsPropsRef.value.static&&f.stopPropagation(),t.closeCombobox(),H(()=>{var p;return(p=t.inputRef.value)==null?void 0:p.focus({preventScroll:!0})});return}}let r=me(b(()=>({as:a.as,type:I.type})),t.buttonRef);return()=>{var P,D;let f={open:t.comboboxState.value===0,disabled:t.disabled.value,value:t.value.value},{id:p,...c}=a,g={ref:t.buttonRef,id:p,type:r.value,tabindex:"-1","aria-haspopup":"listbox","aria-controls":(P=x(t.optionsRef))==null?void 0:P.id,"aria-expanded":t.comboboxState.value===0,"aria-labelledby":t.labelRef.value?[(D=x(t.labelRef))==null?void 0:D.id,p].join(" "):void 0,disabled:t.disabled.value===!0?!0:void 0,onKeydown:C,onClick:e};return _({ourProps:g,theirProps:c,slot:f,attrs:I,slots:u,name:"ComboboxButton"})}}}),it=j({name:"ComboboxInput",props:{as:{type:[Object,String],default:"input"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},displayValue:{type:Function},defaultValue:{type:String,default:void 0},id:{type:String,default:()=>`headlessui-combobox-input-${J()}`}},emits:{change:a=>!0},setup(a,{emit:I,attrs:u,slots:O,expose:t}){let e=N("ComboboxInput"),C=b(()=>he(x(e.inputRef))),r={value:!1};t({el:e.inputRef,$el:e.inputRef});function f(){e.change(null);let o=x(e.optionsRef);o&&(o.scrollTop=0),e.goToOption(w.Nothing)}let p=b(()=>{var m;let o=e.value.value;return x(e.inputRef)?typeof a.displayValue!="undefined"&&o!==void 0?(m=a.displayValue(o))!=null?m:"":typeof o=="string"?o:"":""});X(()=>{q([p,e.comboboxState,C],([o,m],[S,h])=>{if(r.value)return;let T=x(e.inputRef);T&&((h===0&&m===1||o!==S)&&(T.value=o),requestAnimationFrame(()=>{var l;if(r.value||!T||((l=C.value)==null?void 0:l.activeElement)!==T)return;let{selectionStart:n,selectionEnd:E}=T;Math.abs((E!=null?E:0)-(n!=null?n:0))===0&&n===0&&T.setSelectionRange(T.value.length,T.value.length)}))},{immediate:!0}),q([e.comboboxState],([o],[m])=>{if(o===0&&m===1){if(r.value)return;let S=x(e.inputRef);if(!S)return;let h=S.value,{selectionStart:T,selectionEnd:n,selectionDirection:E}=S;S.value="",S.value=h,E!==null?S.setSelectionRange(T,n,E):S.setSelectionRange(T,n)}})});let c=A(!1);function g(){c.value=!0}function P(){ae().nextFrame(()=>{c.value=!1})}let D=be();function V(o){switch(r.value=!0,D(()=>{c.value||(r.value=!1)}),o.key){case k.Enter:if(r.value=!1,e.comboboxState.value!==0||c.value)return;if(o.preventDefault(),o.stopPropagation(),e.activeOptionIndex.value===null){e.closeCombobox();return}e.selectActiveOption(),e.mode.value===0&&e.closeCombobox();break;case k.ArrowDown:return r.value=!1,o.preventDefault(),o.stopPropagation(),$(e.comboboxState.value,{[0]:()=>e.goToOption(w.Next),[1]:()=>e.openCombobox()});case k.ArrowUp:return r.value=!1,o.preventDefault(),o.stopPropagation(),$(e.comboboxState.value,{[0]:()=>e.goToOption(w.Previous),[1]:()=>{e.openCombobox(),H(()=>{e.value.value||e.goToOption(w.Last)})}});case k.Home:if(o.shiftKey)break;return r.value=!1,o.preventDefault(),o.stopPropagation(),e.goToOption(w.First);case k.PageUp:return r.value=!1,o.preventDefault(),o.stopPropagation(),e.goToOption(w.First);case k.End:if(o.shiftKey)break;return r.value=!1,o.preventDefault(),o.stopPropagation(),e.goToOption(w.Last);case k.PageDown:return r.value=!1,o.preventDefault(),o.stopPropagation(),e.goToOption(w.Last);case k.Escape:if(r.value=!1,e.comboboxState.value!==0)return;o.preventDefault(),e.optionsRef.value&&!e.optionsPropsRef.value.static&&o.stopPropagation(),e.nullable.value&&e.mode.value===0&&e.value.value===null&&f(),e.closeCombobox();break;case k.Tab:if(r.value=!1,e.comboboxState.value!==0)return;e.mode.value===0&&e.activationTrigger.value!==1&&e.selectActiveOption(),e.closeCombobox();break}}function M(o){I("change",o),e.nullable.value&&e.mode.value===0&&o.target.value===""&&f(),e.openCombobox()}function K(o){var S,h,T;let m=(S=o.relatedTarget)!=null?S:oe.find(n=>n!==o.currentTarget);if(r.value=!1,!((h=x(e.optionsRef))!=null&&h.contains(m))&&!((T=x(e.buttonRef))!=null&&T.contains(m))&&e.comboboxState.value===0)return o.preventDefault(),e.mode.value===0&&(e.nullable.value&&e.value.value===null?f():e.activationTrigger.value!==1&&e.selectActiveOption()),e.closeCombobox()}function B(o){var S,h,T;let m=(S=o.relatedTarget)!=null?S:oe.find(n=>n!==o.currentTarget);(h=x(e.buttonRef))!=null&&h.contains(m)||(T=x(e.optionsRef))!=null&&T.contains(m)||e.disabled.value||e.immediate.value&&e.comboboxState.value!==0&&(e.openCombobox(),ae().nextFrame(()=>{e.setActivationTrigger(1)}))}let d=b(()=>{var o,m,S,h;return(h=(S=(m=a.defaultValue)!=null?m:e.defaultValue.value!==void 0?(o=a.displayValue)==null?void 0:o.call(a,e.defaultValue.value):null)!=null?S:e.defaultValue.value)!=null?h:""});return()=>{var E,l,i,s,v,R,y;let o={open:e.comboboxState.value===0},{id:m,displayValue:S,onChange:h,...T}=a,n={"aria-controls":(E=e.optionsRef.value)==null?void 0:E.id,"aria-expanded":e.comboboxState.value===0,"aria-activedescendant":e.activeOptionIndex.value===null?void 0:e.virtual.value?(l=e.options.value.find(F=>!e.virtual.value.disabled(F.dataRef.value)&&e.compare(F.dataRef.value,e.virtual.value.options[e.activeOptionIndex.value])))==null?void 0:l.id:(i=e.options.value[e.activeOptionIndex.value])==null?void 0:i.id,"aria-labelledby":(R=(s=x(e.labelRef))==null?void 0:s.id)!=null?R:(v=x(e.buttonRef))==null?void 0:v.id,"aria-autocomplete":"list",id:m,onCompositionstart:g,onCompositionend:P,onKeydown:V,onInput:M,onFocus:B,onBlur:K,role:"combobox",type:(y=u.type)!=null?y:"text",tabIndex:0,ref:e.inputRef,defaultValue:d.value,disabled:e.disabled.value===!0?!0:void 0};return _({ourProps:n,theirProps:T,slot:o,attrs:u,slots:O,features:Q.RenderStrategy|Q.Static,name:"ComboboxInput"})}}}),ut=j({name:"ComboboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},hold:{type:[Boolean],default:!1}},setup(a,{attrs:I,slots:u,expose:O}){let t=N("ComboboxOptions"),e=`headlessui-combobox-options-${J()}`;O({el:t.optionsRef,$el:t.optionsRef}),Y(()=>{t.optionsPropsRef.value.static=a.static}),Y(()=>{t.optionsPropsRef.value.hold=a.hold});let C=Ce(),r=b(()=>C!==null?(C.value&G.Open)===G.Open:t.comboboxState.value===0);ge({container:b(()=>x(t.optionsRef)),enabled:b(()=>t.comboboxState.value===0),accept(p){return p.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:p.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(p){p.setAttribute("role","none")}});function f(p){p.preventDefault()}return()=>{var P,D,V;let p={open:t.comboboxState.value===0},c={"aria-labelledby":(V=(P=x(t.labelRef))==null?void 0:P.id)!=null?V:(D=x(t.buttonRef))==null?void 0:D.id,id:e,ref:t.optionsRef,role:"listbox","aria-multiselectable":t.mode.value===1?!0:void 0,onMousedown:f},g=Z(a,["hold"]);return _({ourProps:c,theirProps:g,slot:p,attrs:I,slots:t.virtual.value&&t.comboboxState.value===0?{...u,default:()=>[z(Fe,{},u.default)]}:u,features:Q.RenderStrategy|Q.Static,visible:r.value,name:"ComboboxOptions"})}}}),rt=j({name:"ComboboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1},order:{type:[Number],default:null}},setup(a,{slots:I,attrs:u,expose:O}){let t=N("ComboboxOption"),e=`headlessui-combobox-option-${J()}`,C=A(null),r=b(()=>{var d;return a.disabled||((d=t.virtual.value)==null?void 0:d.disabled(a.value))});O({el:C,$el:C});let f=b(()=>{var d;return t.virtual.value?t.activeOptionIndex.value===t.calculateIndex(a.value):t.activeOptionIndex.value===null?!1:((d=t.options.value[t.activeOptionIndex.value])==null?void 0:d.id)===e}),p=b(()=>t.isSelected(a.value)),c=ee(ie,null),g=b(()=>({disabled:a.disabled,value:a.value,domRef:C,order:b(()=>a.order)}));X(()=>t.registerOption(e,g)),fe(()=>t.unregisterOption(e,f.value)),Y(()=>{let d=x(C);d&&(c==null||c.value.measureElement(d))}),Y(()=>{t.comboboxState.value===0&&f.value&&(t.virtual.value||t.activationTrigger.value!==0&&H(()=>{var d,o;return(o=(d=x(C))==null?void 0:d.scrollIntoView)==null?void 0:o.call(d,{block:"nearest"})}))});function P(d){d.preventDefault(),d.button===ye.Left&&(r.value||(t.selectOption(e),Pe()||requestAnimationFrame(()=>{var o;return(o=x(t.inputRef))==null?void 0:o.focus({preventScroll:!0})}),t.mode.value===0&&t.closeCombobox()))}function D(){var o;if(a.disabled||(o=t.virtual.value)!=null&&o.disabled(a.value))return t.goToOption(w.Nothing);let d=t.calculateIndex(a.value);t.goToOption(w.Specific,d)}let V=xe();function M(d){V.update(d)}function K(d){var m;if(!V.wasMoved(d)||a.disabled||(m=t.virtual.value)!=null&&m.disabled(a.value)||f.value)return;let o=t.calculateIndex(a.value);t.goToOption(w.Specific,o,0)}function B(d){var o;V.wasMoved(d)&&(a.disabled||(o=t.virtual.value)!=null&&o.disabled(a.value)||f.value&&(t.optionsPropsRef.value.hold||t.goToOption(w.Nothing)))}return()=>{let{disabled:d}=a,o={active:f.value,selected:p.value,disabled:d},m={id:e,ref:C,role:"option",tabIndex:d===!0?void 0:-1,"aria-disabled":d===!0?!0:void 0,"aria-selected":p.value,disabled:void 0,onMousedown:P,onFocus:D,onPointerenter:M,onMouseenter:M,onPointermove:K,onMousemove:K,onPointerleave:B,onMouseleave:B},S=Z(a,["order","value"]);return _({ourProps:m,theirProps:S,slot:o,attrs:u,slots:I,name:"ComboboxOption"})}}});export{lt as Combobox,nt as ComboboxButton,it as ComboboxInput,at as ComboboxLabel,rt as ComboboxOption,ut as ComboboxOptions};

dist/components/description/description.d.ts

@@ -1,2 +0,2 @@
-import { ComputedRef, Ref } from 'vue';
+import { type ComputedRef, type Ref } from 'vue';
 export declare function useDescriptions({ slot, name, props, }?: {
@@ -12,2 +12,6 @@ slot?: Ref<Record<string, unknown>>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -17,3 +21,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -23,4 +27,9 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
 }>;

dist/components/description/description.js

@@ -1,1 +0,1 @@
-import{computed as m,defineComponent as x,inject as R,onMounted as v,onUnmounted as D,provide as j,ref as p,unref as y}from"vue";import{useId as C}from"../../hooks/use-id.js";import{render as b}from"../../utils/render.js";let u=Symbol("DescriptionContext");function h(){let n=R(u,null);if(n===null)throw new Error("Missing parent");return n}function P({slot:n=p({}),name:o="Description",props:s={}}={}){let e=p([]);function t(r){return e.value.push(r),()=>{let i=e.value.indexOf(r);i!==-1&&e.value.splice(i,1)}}return j(u,{register:t,slot:n,name:o,props:s}),m(()=>e.value.length>0?e.value.join(" "):void 0)}let S=x({name:"Description",props:{as:{type:[Object,String],default:"p"}},setup(n,{attrs:o,slots:s}){let e=h(),t=`headlessui-description-${C()}`;return v(()=>D(e.register(t))),()=>{let{name:r="Description",slot:i=p({}),props:c={}}=e,l=n,d={...Object.entries(c).reduce((f,[a,g])=>Object.assign(f,{[a]:y(g)}),{}),id:t};return b({props:{...l,...d},slot:i.value,attrs:o,slots:s,name:r})}}});export{S as Description,P as useDescriptions};
+import{computed as m,defineComponent as x,inject as y,onMounted as R,onUnmounted as v,provide as D,ref as p,unref as j}from"vue";import{useId as C}from'../../hooks/use-id.js';import{render as h}from'../../utils/render.js';let u=Symbol("DescriptionContext");function b(){let t=y(u,null);if(t===null)throw new Error("Missing parent");return t}function S({slot:t=p({}),name:i="Description",props:o={}}={}){let e=p([]);function s(n){return e.value.push(n),()=>{let r=e.value.indexOf(n);r!==-1&&e.value.splice(r,1)}}return D(u,{register:s,slot:t,name:i,props:o}),m(()=>e.value.length>0?e.value.join(" "):void 0)}let k=x({name:"Description",props:{as:{type:[Object,String],default:"p"},id:{type:String,default:()=>`headlessui-description-${C()}`}},setup(t,{attrs:i,slots:o}){let e=b();return R(()=>v(e.register(t.id))),()=>{let{name:s="Description",slot:n=p({}),props:r={}}=e,{id:d,...l}=t,c={...Object.entries(r).reduce((f,[a,g])=>Object.assign(f,{[a]:j(g)}),{}),id:d};return h({ourProps:c,theirProps:l,slot:n.value,attrs:i,slots:o,name:s})}}});export{k as Description,S as useDescriptions};

dist/components/dialog/dialog.d.ts

@@ -1,2 +0,2 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 export declare let Dialog: import("vue").DefineComponent<{
@@ -23,2 +23,10 @@ as: {
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    role: {
+        type: PropType<"dialog" | "alertdialog">;
+        default: string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -49,5 +57,15 @@ [key: string]: any;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    role: {
+        type: PropType<"dialog" | "alertdialog">;
+        default: string;
+    };
 }>> & {
     onClose?: ((_close: boolean) => any) | undefined;
 }, {
+    id: string;
+    role: "dialog" | "alertdialog";
     as: string | Record<string, any>;
@@ -64,2 +82,6 @@ unmount: boolean;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -69,3 +91,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -75,3 +97,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -84,2 +111,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -92,3 +123,8 @@ [key: string]: any;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -101,2 +137,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -106,3 +146,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -112,3 +152,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -121,2 +166,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -126,3 +175,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -132,3 +181,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -141,2 +195,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -146,3 +204,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -152,4 +210,9 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
 }>;

dist/components/dialog/dialog.js

@@ -1,1 +0,1 @@
-import{computed as f,defineComponent as h,h as y,inject as $,nextTick as J,onMounted as j,onUnmounted as Q,provide as X,ref as D,watchEffect as A}from"vue";import{render as O,Features as L}from"../../utils/render.js";import{Keys as Z}from"../../keyboard.js";import{useId as b}from"../../hooks/use-id.js";import{useFocusTrap as ee,Features as w}from"../../hooks/use-focus-trap.js";import{useInertOthers as te}from"../../hooks/use-inert-others.js";import{Portal as H,PortalGroup as le}from"../portal/portal.js";import{StackMessage as W,useStackProvider as oe}from"../../internal/stack-context.js";import{match as E}from"../../utils/match.js";import{ForcePortalRoot as F}from"../../internal/portal-force-root.js";import{Description as ne,useDescriptions as ae}from"../description/description.js";import{dom as re}from"../../utils/dom.js";import{useOpenClosed as ie,State as K}from"../../internal/open-closed.js";import{useOutsideClick as ue,Features as se}from"../../hooks/use-outside-click.js";import{getOwnerDocument as pe}from"../../utils/owner.js";import{useEventListener as de}from"../../hooks/use-event-listener.js";var fe=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(fe||{});let x=Symbol("DialogContext");function P(o){let r=$(x,null);if(r===null){let e=new Error(`<${o} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,P),e}return r}let T="DC8F892D-2EBD-447C-A4C8-A03058436FF4",Me=h({name:"Dialog",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},open:{type:[Boolean,String],default:T},initialFocus:{type:Object,default:null}},emits:{close:o=>!0},setup(o,{emit:r,attrs:e,slots:i,expose:s}){var M;let p=D(0),a=ie(),m=f(()=>o.open===T&&a!==null?E(a.value,{[K.Open]:!0,[K.Closed]:!1}):o.open),S=D(new Set),d=D(null),k=f(()=>pe(d));if(s({el:d,$el:d}),!(o.open!==T||a!==null))throw new Error("You forgot to provide an `open` prop to the `Dialog`.");if(typeof m.value!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${m.value===T?void 0:o.open}`);let c=f(()=>m.value?0:1),I=f(()=>c.value===0),R=f(()=>p.value>1),_=$(x,null)!==null,N=f(()=>R.value?"parent":"leaf"),U=ee(d,f(()=>I.value?E(N.value,{parent:w.RestoreFocus,leaf:w.All&~w.FocusLock}):w.None),f(()=>({initialFocus:D(o.initialFocus),containers:S})));te(d,f(()=>R.value?I.value:!1)),oe({type:"Dialog",element:d,onUpdate:(t,l,n)=>{if(l==="Dialog")return E(t,{[W.Add](){S.value.add(n),p.value+=1},[W.Remove](){S.value.delete(n),p.value-=1}})}});let V=ae({name:"DialogDescription",slot:f(()=>({open:m.value}))}),Y=`headlessui-dialog-${b()}`,C=D(null),v={titleId:C,panelRef:D(null),dialogState:c,setTitleId(t){C.value!==t&&(C.value=t)},close(){r("close",!1)}};X(x,v),ue(()=>{var l,n,g;return[...Array.from((n=(l=k.value)==null?void 0:l.querySelectorAll("body > *"))!=null?n:[]).filter(u=>!(!(u instanceof HTMLElement)||u.contains(U.value)||v.panelRef.value&&u.contains(v.panelRef.value))),(g=v.panelRef.value)!=null?g:d.value]},(t,l)=>{c.value===0&&(R.value||(v.close(),J(()=>l==null?void 0:l.focus())))},se.IgnoreScrollbars),de((M=k.value)==null?void 0:M.defaultView,"keydown",t=>{t.key===Z.Escape&&c.value===0&&(R.value||(t.preventDefault(),t.stopPropagation(),v.close()))}),A(t=>{var B;if(c.value!==0||_)return;let l=k.value;if(!l)return;let n=l==null?void 0:l.documentElement,g=(B=l.defaultView)!=null?B:window,u=n.style.overflow,G=n.style.paddingRight,z=g.innerWidth-n.clientWidth;n.style.overflow="hidden",n.style.paddingRight=`${z}px`,t(()=>{n.style.overflow=u,n.style.paddingRight=G})}),A(t=>{if(c.value!==0)return;let l=re(d);if(!l)return;let n=new IntersectionObserver(g=>{for(let u of g)u.boundingClientRect.x===0&&u.boundingClientRect.y===0&&u.boundingClientRect.width===0&&u.boundingClientRect.height===0&&v.close()});n.observe(l),t(()=>n.disconnect())});function q(t){t.stopPropagation()}return()=>{let t={...e,ref:d,id:Y,role:"dialog","aria-modal":c.value===0?!0:void 0,"aria-labelledby":C.value,"aria-describedby":V.value,onClick:q},{open:l,initialFocus:n,...g}=o,u={open:c.value===0};return y(F,{force:!0},()=>y(H,()=>y(le,{target:d.value},()=>y(F,{force:!1},()=>O({props:{...g,...t},slot:u,attrs:e,slots:i,visible:c.value===0,features:L.RenderStrategy|L.Static,name:"Dialog"})))))}}}),Be=h({name:"DialogOverlay",props:{as:{type:[Object,String],default:"div"}},setup(o,{attrs:r,slots:e}){let i=P("DialogOverlay"),s=`headlessui-dialog-overlay-${b()}`;function p(a){a.target===a.currentTarget&&(a.preventDefault(),a.stopPropagation(),i.close())}return()=>O({props:{...o,...{id:s,"aria-hidden":!0,onClick:p}},slot:{open:i.dialogState.value===0},attrs:r,slots:e,name:"DialogOverlay"})}}),$e=h({name:"DialogBackdrop",props:{as:{type:[Object,String],default:"div"}},inheritAttrs:!1,setup(o,{attrs:r,slots:e,expose:i}){let s=P("DialogBackdrop"),p=`headlessui-dialog-backdrop-${b()}`,a=D(null);return i({el:a,$el:a}),j(()=>{if(s.panelRef.value===null)throw new Error("A <DialogBackdrop /> component is being used, but a <DialogPanel /> component is missing.")}),()=>{let m=o,S={id:p,ref:a,"aria-hidden":!0};return y(F,{force:!0},()=>y(H,()=>O({props:{...r,...m,...S},slot:{open:s.dialogState.value===0},attrs:r,slots:e,name:"DialogBackdrop"})))}}}),je=h({name:"DialogPanel",props:{as:{type:[Object,String],default:"div"}},setup(o,{attrs:r,slots:e}){let i=P("DialogPanel"),s=`headlessui-dialog-panel-${b()}`;return()=>{let p={id:s,ref:i.panelRef};return O({props:{...o,...p},slot:{open:i.dialogState.value===0},attrs:r,slots:e,name:"DialogPanel"})}}}),Ae=h({name:"DialogTitle",props:{as:{type:[Object,String],default:"h2"}},setup(o,{attrs:r,slots:e}){let i=P("DialogTitle"),s=`headlessui-dialog-title-${b()}`;return j(()=>{i.setTitleId(s),Q(()=>i.setTitleId(null))}),()=>O({props:{...o,...{id:s}},slot:{open:i.dialogState.value===0},attrs:r,slots:e,name:"DialogTitle"})}}),Le=ne;export{Me as Dialog,$e as DialogBackdrop,Le as DialogDescription,Be as DialogOverlay,je as DialogPanel,Ae as DialogTitle};
+import{computed as o,defineComponent as O,h as g,inject as q,nextTick as ie,onMounted as L,onUnmounted as ue,provide as se,ref as y,watchEffect as pe}from"vue";import{FocusTrap as P}from'../../components/focus-trap/focus-trap.js';import{useDocumentOverflowLockedEffect as de}from'../../hooks/document-overflow/use-document-overflow.js';import{useEventListener as fe}from'../../hooks/use-event-listener.js';import{useId as b}from'../../hooks/use-id.js';import{useInert as W}from'../../hooks/use-inert.js';import{useOutsideClick as ge}from'../../hooks/use-outside-click.js';import{useRootContainers as ce}from'../../hooks/use-root-containers.js';import{State as x,useOpenClosed as ve}from'../../internal/open-closed.js';import{ForcePortalRoot as $}from'../../internal/portal-force-root.js';import{StackMessage as Y,useStackProvider as me}from'../../internal/stack-context.js';import{Keys as De}from'../../keyboard.js';import{dom as F}from'../../utils/dom.js';import{match as _}from'../../utils/match.js';import{getOwnerDocument as ye}from'../../utils/owner.js';import{Features as z,render as C}from'../../utils/render.js';import{Description as Se,useDescriptions as he}from'../description/description.js';import{Portal as G,PortalGroup as Oe,useNestedPortals as Pe}from'../portal/portal.js';var be=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(be||{});let j=Symbol("DialogContext");function T(t){let n=q(j,null);if(n===null){let l=new Error(`<${t} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,T),l}return n}let I="DC8F892D-2EBD-447C-A4C8-A03058436FF4",qe=O({name:"Dialog",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},open:{type:[Boolean,String],default:I},initialFocus:{type:Object,default:null},id:{type:String,default:()=>`headlessui-dialog-${b()}`},role:{type:String,default:"dialog"}},emits:{close:t=>!0},setup(t,{emit:n,attrs:l,slots:u,expose:i}){var U;let r=y(!1);L(()=>{r.value=!0});let s=!1,v=o(()=>t.role==="dialog"||t.role==="alertdialog"?t.role:(s||(s=!0,console.warn(`Invalid role [${v}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")),m=y(0),S=ve(),R=o(()=>t.open===I&&S!==null?(S.value&x.Open)===x.Open:t.open),c=y(null),E=o(()=>ye(c));if(i({el:c,$el:c}),!(t.open!==I||S!==null))throw new Error("You forgot to provide an `open` prop to the `Dialog`.");if(typeof R.value!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${R.value===I?void 0:t.open}`);let f=o(()=>r.value&&R.value?0:1),k=o(()=>f.value===0),w=o(()=>m.value>1),H=q(j,null)!==null,[V,J]=Pe(),{resolveContainers:A,mainTreeNodeRef:N,MainTreeNode:Q}=ce({portals:V,defaultContainers:[o(()=>{var e;return(e=h.panelRef.value)!=null?e:c.value})]}),X=o(()=>w.value?"parent":"leaf"),K=o(()=>S!==null?(S.value&x.Closing)===x.Closing:!1),Z=o(()=>H||K.value?!1:k.value),ee=o(()=>{var e,a,p;return(p=Array.from((a=(e=E.value)==null?void 0:e.querySelectorAll("body > *"))!=null?a:[]).find(d=>d.id==="headlessui-portal-root"?!1:d.contains(F(N))&&d instanceof HTMLElement))!=null?p:null});W(ee,Z);let te=o(()=>w.value?!0:k.value),le=o(()=>{var e,a,p;return(p=Array.from((a=(e=E.value)==null?void 0:e.querySelectorAll("[data-headlessui-portal]"))!=null?a:[]).find(d=>d.contains(F(N))&&d instanceof HTMLElement))!=null?p:null});W(le,te),me({type:"Dialog",enabled:o(()=>f.value===0),element:c,onUpdate:(e,a)=>{if(a==="Dialog")return _(e,{[Y.Add]:()=>m.value+=1,[Y.Remove]:()=>m.value-=1})}});let ae=he({name:"DialogDescription",slot:o(()=>({open:R.value}))}),M=y(null),h={titleId:M,panelRef:y(null),dialogState:f,setTitleId(e){M.value!==e&&(M.value=e)},close(){n("close",!1)}};se(j,h);let oe=o(()=>!(!k.value||w.value));ge(A,(e,a)=>{e.preventDefault(),h.close(),ie(()=>a==null?void 0:a.focus())},oe);let re=o(()=>!(w.value||f.value!==0));fe((U=E.value)==null?void 0:U.defaultView,"keydown",e=>{re.value&&(e.defaultPrevented||e.key===De.Escape&&(e.preventDefault(),e.stopPropagation(),h.close()))});let ne=o(()=>!(K.value||f.value!==0||H));return de(E,ne,e=>{var a;return{containers:[...(a=e.containers)!=null?a:[],A]}}),pe(e=>{if(f.value!==0)return;let a=F(c);if(!a)return;let p=new ResizeObserver(d=>{for(let B of d){let D=B.target.getBoundingClientRect();D.x===0&&D.y===0&&D.width===0&&D.height===0&&h.close()}});p.observe(a),e(()=>p.disconnect())}),()=>{let{id:e,open:a,initialFocus:p,...d}=t,B={...l,ref:c,id:e,role:v.value,"aria-modal":f.value===0?!0:void 0,"aria-labelledby":M.value,"aria-describedby":ae.value},D={open:f.value===0};return g($,{force:!0},()=>[g(G,()=>g(Oe,{target:c.value},()=>g($,{force:!1},()=>g(P,{initialFocus:p,containers:A,features:k.value?_(X.value,{parent:P.features.RestoreFocus,leaf:P.features.All&~P.features.FocusLock}):P.features.None},()=>g(J,{},()=>C({ourProps:B,theirProps:{...d,...l},slot:D,attrs:l,slots:u,visible:f.value===0,features:z.RenderStrategy|z.Static,name:"Dialog"})))))),g(Q)])}}}),We=O({name:"DialogOverlay",props:{as:{type:[Object,String],default:"div"},id:{type:String,default:()=>`headlessui-dialog-overlay-${b()}`}},setup(t,{attrs:n,slots:l}){let u=T("DialogOverlay");function i(r){r.target===r.currentTarget&&(r.preventDefault(),r.stopPropagation(),u.close())}return()=>{let{id:r,...s}=t;return C({ourProps:{id:r,"aria-hidden":!0,onClick:i},theirProps:s,slot:{open:u.dialogState.value===0},attrs:n,slots:l,name:"DialogOverlay"})}}}),Ye=O({name:"DialogBackdrop",props:{as:{type:[Object,String],default:"div"},id:{type:String,default:()=>`headlessui-dialog-backdrop-${b()}`}},inheritAttrs:!1,setup(t,{attrs:n,slots:l,expose:u}){let i=T("DialogBackdrop"),r=y(null);return u({el:r,$el:r}),L(()=>{if(i.panelRef.value===null)throw new Error("A <DialogBackdrop /> component is being used, but a <DialogPanel /> component is missing.")}),()=>{let{id:s,...v}=t,m={id:s,ref:r,"aria-hidden":!0};return g($,{force:!0},()=>g(G,()=>C({ourProps:m,theirProps:{...n,...v},slot:{open:i.dialogState.value===0},attrs:n,slots:l,name:"DialogBackdrop"})))}}}),_e=O({name:"DialogPanel",props:{as:{type:[Object,String],default:"div"},id:{type:String,default:()=>`headlessui-dialog-panel-${b()}`}},setup(t,{attrs:n,slots:l,expose:u}){let i=T("DialogPanel");u({el:i.panelRef,$el:i.panelRef});function r(s){s.stopPropagation()}return()=>{let{id:s,...v}=t,m={id:s,ref:i.panelRef,onClick:r};return C({ourProps:m,theirProps:v,slot:{open:i.dialogState.value===0},attrs:n,slots:l,name:"DialogPanel"})}}}),ze=O({name:"DialogTitle",props:{as:{type:[Object,String],default:"h2"},id:{type:String,default:()=>`headlessui-dialog-title-${b()}`}},setup(t,{attrs:n,slots:l}){let u=T("DialogTitle");return L(()=>{u.setTitleId(t.id),ue(()=>u.setTitleId(null))}),()=>{let{id:i,...r}=t;return C({ourProps:{id:i},theirProps:r,slot:{open:u.dialogState.value===0},attrs:n,slots:l,name:"DialogTitle"})}}}),Ge=Se;export{qe as Dialog,Ye as DialogBackdrop,Ge as DialogDescription,We as DialogOverlay,_e as DialogPanel,ze as DialogTitle};

dist/components/disclosure/disclosure.d.ts

@@ -14,3 +14,3 @@ export declare let Disclosure: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -37,2 +37,6 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -42,3 +46,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -52,3 +56,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -70,2 +79,6 @@ disabled: boolean;
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -75,3 +88,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -89,3 +102,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -92,0 +110,0 @@ unmount: boolean;

dist/components/disclosure/disclosure.js

@@ -1,1 +0,1 @@
-import{defineComponent as y,ref as m,provide as O,inject as P,computed as b,watchEffect as T}from"vue";import{Keys as f}from"../../keyboard.js";import{match as E}from"../../utils/match.js";import{render as v,Features as I}from"../../utils/render.js";import{useId as h}from"../../hooks/use-id.js";import{dom as p}from"../../utils/dom.js";import{useOpenClosedProvider as k,State as g,useOpenClosed as K}from"../../internal/open-closed.js";import{useResolveButtonType as R}from"../../hooks/use-resolve-button-type.js";var w=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(w||{});let x=Symbol("DisclosureContext");function C(l){let r=P(x,null);if(r===null){let n=new Error(`<${l} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,C),n}return r}let B=Symbol("DisclosurePanelContext");function H(){return P(B,null)}let A=y({name:"Disclosure",props:{as:{type:[Object,String],default:"template"},defaultOpen:{type:[Boolean],default:!1}},setup(l,{slots:r,attrs:n}){let d=`headlessui-disclosure-button-${h()}`,e=`headlessui-disclosure-panel-${h()}`,o=m(l.defaultOpen?0:1),i=m(null),s=m(null),u={buttonId:d,panelId:e,disclosureState:o,panel:i,button:s,toggleDisclosure(){o.value=E(o.value,{[0]:1,[1]:0})},closeDisclosure(){o.value!==1&&(o.value=1)},close(a){u.closeDisclosure();let c=(()=>a?a instanceof HTMLElement?a:a.value instanceof HTMLElement?p(a):p(u.button):p(u.button))();c==null||c.focus()}};return O(x,u),k(b(()=>E(o.value,{[0]:g.Open,[1]:g.Closed}))),()=>{let{defaultOpen:a,...c}=l,S={open:o.value===0,close:u.close};return v({props:c,slot:S,slots:r,attrs:n,name:"Disclosure"})}}}),G=y({name:"DisclosureButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},setup(l,{attrs:r,slots:n,expose:d}){let e=C("DisclosureButton"),o=H(),i=o===null?!1:o===e.panelId,s=m(null);d({el:s,$el:s}),i||T(()=>{e.button.value=s.value});let u=R(b(()=>({as:l.as,type:r.type})),s);function a(){var t;l.disabled||(i?(e.toggleDisclosure(),(t=p(e.button))==null||t.focus()):e.toggleDisclosure())}function c(t){var D;if(!l.disabled)if(i)switch(t.key){case f.Space:case f.Enter:t.preventDefault(),t.stopPropagation(),e.toggleDisclosure(),(D=p(e.button))==null||D.focus();break}else switch(t.key){case f.Space:case f.Enter:t.preventDefault(),t.stopPropagation(),e.toggleDisclosure();break}}function S(t){switch(t.key){case f.Space:t.preventDefault();break}}return()=>{let t={open:e.disclosureState.value===0},D=i?{ref:s,type:u.value,onClick:a,onKeydown:c}:{id:e.buttonId,ref:s,type:u.value,"aria-expanded":l.disabled?void 0:e.disclosureState.value===0,"aria-controls":p(e.panel)?e.panelId:void 0,disabled:l.disabled?!0:void 0,onClick:a,onKeydown:c,onKeyup:S};return v({props:{...l,...D},slot:t,attrs:r,slots:n,name:"DisclosureButton"})}}}),J=y({name:"DisclosurePanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(l,{attrs:r,slots:n,expose:d}){let e=C("DisclosurePanel");d({el:e.panel,$el:e.panel}),O(B,e.panelId);let o=K(),i=b(()=>o!==null?o.value===g.Open:e.disclosureState.value===0);return()=>{let s={open:e.disclosureState.value===0,close:e.close},u={id:e.panelId,ref:e.panel};return v({props:{...l,...u},slot:s,attrs:r,slots:n,features:I.RenderStrategy|I.Static,visible:i.value,name:"DisclosurePanel"})}}});export{A as Disclosure,G as DisclosureButton,J as DisclosurePanel};
+import{computed as m,defineComponent as b,inject as I,onMounted as P,onUnmounted as h,provide as R,ref as d,watchEffect as w}from"vue";import{useId as E}from'../../hooks/use-id.js';import{useResolveButtonType as H}from'../../hooks/use-resolve-button-type.js';import{State as y,useOpenClosed as L,useOpenClosedProvider as j}from'../../internal/open-closed.js';import{Keys as f}from'../../keyboard.js';import{dom as p}from'../../utils/dom.js';import{match as x}from'../../utils/match.js';import{Features as B,render as g}from'../../utils/render.js';var $=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))($||{});let T=Symbol("DisclosureContext");function O(t){let r=I(T,null);if(r===null){let o=new Error(`<${t} /> is missing a parent <Disclosure /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,O),o}return r}let k=Symbol("DisclosurePanelContext");function U(){return I(k,null)}let N=b({name:"Disclosure",props:{as:{type:[Object,String],default:"template"},defaultOpen:{type:[Boolean],default:!1}},setup(t,{slots:r,attrs:o}){let s=d(t.defaultOpen?0:1),e=d(null),i=d(null),n={buttonId:d(`headlessui-disclosure-button-${E()}`),panelId:d(`headlessui-disclosure-panel-${E()}`),disclosureState:s,panel:e,button:i,toggleDisclosure(){s.value=x(s.value,{[0]:1,[1]:0})},closeDisclosure(){s.value!==1&&(s.value=1)},close(l){n.closeDisclosure();let a=(()=>l?l instanceof HTMLElement?l:l.value instanceof HTMLElement?p(l):p(n.button):p(n.button))();a==null||a.focus()}};return R(T,n),j(m(()=>x(s.value,{[0]:y.Open,[1]:y.Closed}))),()=>{let{defaultOpen:l,...a}=t,c={open:s.value===0,close:n.close};return g({theirProps:a,ourProps:{},slot:c,slots:r,attrs:o,name:"Disclosure"})}}}),Q=b({name:"DisclosureButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:null}},setup(t,{attrs:r,slots:o,expose:s}){let e=O("DisclosureButton"),i=U(),n=m(()=>i===null?!1:i.value===e.panelId.value);P(()=>{n.value||t.id!==null&&(e.buttonId.value=t.id)}),h(()=>{n.value||(e.buttonId.value=null)});let l=d(null);s({el:l,$el:l}),n.value||w(()=>{e.button.value=l.value});let a=H(m(()=>({as:t.as,type:r.type})),l);function c(){var u;t.disabled||(n.value?(e.toggleDisclosure(),(u=p(e.button))==null||u.focus()):e.toggleDisclosure())}function D(u){var S;if(!t.disabled)if(n.value)switch(u.key){case f.Space:case f.Enter:u.preventDefault(),u.stopPropagation(),e.toggleDisclosure(),(S=p(e.button))==null||S.focus();break}else switch(u.key){case f.Space:case f.Enter:u.preventDefault(),u.stopPropagation(),e.toggleDisclosure();break}}function v(u){switch(u.key){case f.Space:u.preventDefault();break}}return()=>{var C;let u={open:e.disclosureState.value===0},{id:S,...K}=t,M=n.value?{ref:l,type:a.value,onClick:c,onKeydown:D}:{id:(C=e.buttonId.value)!=null?C:S,ref:l,type:a.value,"aria-expanded":e.disclosureState.value===0,"aria-controls":e.disclosureState.value===0||p(e.panel)?e.panelId.value:void 0,disabled:t.disabled?!0:void 0,onClick:c,onKeydown:D,onKeyup:v};return g({ourProps:M,theirProps:K,slot:u,attrs:r,slots:o,name:"DisclosureButton"})}}}),V=b({name:"DisclosurePanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:null}},setup(t,{attrs:r,slots:o,expose:s}){let e=O("DisclosurePanel");P(()=>{t.id!==null&&(e.panelId.value=t.id)}),h(()=>{e.panelId.value=null}),s({el:e.panel,$el:e.panel}),R(k,e.panelId);let i=L(),n=m(()=>i!==null?(i.value&y.Open)===y.Open:e.disclosureState.value===0);return()=>{var v;let l={open:e.disclosureState.value===0,close:e.close},{id:a,...c}=t,D={id:(v=e.panelId.value)!=null?v:a,ref:e.panel};return g({ourProps:D,theirProps:c,slot:l,attrs:r,slots:o,features:B.RenderStrategy|B.Static,visible:n.value,name:"DisclosurePanel"})}}});export{N as Disclosure,Q as DisclosureButton,V as DisclosurePanel};

dist/components/focus-trap/focus-trap.d.ts

@@ -1,3 +0,125 @@
-import { PropType } from 'vue';
-export declare let FocusTrap: import("vue").DefineComponent<{
+import { type PropType, type Ref } from 'vue';
+type Containers = (() => Iterable<HTMLElement>) | Ref<Set<Ref<HTMLElement | null>>>;
+declare enum Features {
+    /** No features enabled for the focus trap. */
+    None = 1,
+    /** Ensure that we move focus initially into the container. */
+    InitialFocus = 2,
+    /** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
+    TabLock = 4,
+    /** Ensure that programmatically moving focus outside of the container is disallowed. */
+    FocusLock = 8,
+    /** Ensure that we restore the focus when unmounting the focus trap. */
+    RestoreFocus = 16,
+    /** Enable all features. */
+    All = 30
+}
+export declare let FocusTrap: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            features: Features;
+            as: string | Record<string, any>;
+            initialFocus: HTMLElement | null;
+            containers: Containers;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            as: {
+                type: (ObjectConstructor | StringConstructor)[];
+                default: string;
+            };
+            initialFocus: {
+                type: PropType<HTMLElement | null>;
+                default: null;
+            };
+            features: {
+                type: PropType<Features>;
+                default: Features;
+            };
+            containers: {
+                type: PropType<Containers>;
+                default: Ref<Set<unknown>>;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "features" | "as" | "initialFocus" | "containers">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            as: {
+                type: (ObjectConstructor | StringConstructor)[];
+                default: string;
+            };
+            initialFocus: {
+                type: PropType<HTMLElement | null>;
+                default: null;
+            };
+            features: {
+                type: PropType<Features>;
+                default: Features;
+            };
+            containers: {
+                type: PropType<Containers>;
+                default: Ref<Set<unknown>>;
+            };
+        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            features: Features;
+            as: string | Record<string, any>;
+            initialFocus: HTMLElement | null;
+            containers: Containers;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        as: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        initialFocus: {
+            type: PropType<HTMLElement | null>;
+            default: null;
+        };
+        features: {
+            type: PropType<Features>;
+            default: Features;
+        };
+        containers: {
+            type: PropType<Containers>;
+            default: Ref<Set<unknown>>;
+        };
+    }>> & import("vue").ShallowUnwrapRef<() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -11,18 +133,20 @@ type: (ObjectConstructor | StringConstructor)[];
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: string;
+    features: {
+        type: PropType<Features>;
+        default: Features;
     };
-    initialFocus: {
-        type: PropType<HTMLElement | null>;
-        default: null;
+    containers: {
+        type: PropType<Containers>;
+        default: Ref<Set<unknown>>;
     };
-}>>, {
+}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    features: Features;
     as: string | Record<string, any>;
     initialFocus: HTMLElement | null;
-}>;
+    containers: Containers;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    features: typeof Features;
+};
+export {};

dist/components/focus-trap/focus-trap.js

@@ -1,1 +0,1 @@
-import{computed as a,defineComponent as c,ref as o}from"vue";import{render as m}from"../../utils/render.js";import{useFocusTrap as f}from"../../hooks/use-focus-trap.js";let T=c({name:"FocusTrap",props:{as:{type:[Object,String],default:"div"},initialFocus:{type:Object,default:null}},setup(t,{attrs:r,slots:l,expose:n}){let e=o(null);n({el:e,$el:e});let p=a(()=>({initialFocus:o(t.initialFocus)}));return f(e,T.All,p),()=>{let i={},u={ref:e},{initialFocus:F,...s}=t;return m({props:{...s,...u},slot:i,attrs:r,slots:l,name:"FocusTrap"})}}});export{T as FocusTrap};
+import{Fragment as I,computed as L,defineComponent as j,h as R,onMounted as M,onUnmounted as h,ref as E,watch as g,watchEffect as K}from"vue";import{useEventListener as U}from'../../hooks/use-event-listener.js';import{Direction as y,useTabDirection as _}from'../../hooks/use-tab-direction.js';import{Hidden as k,Features as D}from'../../internal/hidden.js';import{history as C}from'../../utils/active-element-history.js';import{dom as c}from'../../utils/dom.js';import{Focus as v,FocusResult as q,focusElement as p,focusIn as b}from'../../utils/focus-management.js';import{match as P}from'../../utils/match.js';import{microTask as S}from'../../utils/micro-task.js';import{getOwnerDocument as x}from'../../utils/owner.js';import{render as G}from'../../utils/render.js';function B(t){if(!t)return new Set;if(typeof t=="function")return new Set(t());let n=new Set;for(let r of t.value){let l=c(r);l instanceof HTMLElement&&n.add(l)}return n}var A=(e=>(e[e.None=1]="None",e[e.InitialFocus=2]="InitialFocus",e[e.TabLock=4]="TabLock",e[e.FocusLock=8]="FocusLock",e[e.RestoreFocus=16]="RestoreFocus",e[e.All=30]="All",e))(A||{});let ue=Object.assign(j({name:"FocusTrap",props:{as:{type:[Object,String],default:"div"},initialFocus:{type:Object,default:null},features:{type:Number,default:30},containers:{type:[Object,Function],default:E(new Set)}},inheritAttrs:!1,setup(t,{attrs:n,slots:r,expose:l}){let o=E(null);l({el:o,$el:o});let i=L(()=>x(o)),e=E(!1);M(()=>e.value=!0),h(()=>e.value=!1),$({ownerDocument:i},L(()=>e.value&&!!(t.features&16)));let m=z({ownerDocument:i,container:o,initialFocus:L(()=>t.initialFocus)},L(()=>e.value&&!!(t.features&2)));J({ownerDocument:i,container:o,containers:t.containers,previousActiveElement:m},L(()=>e.value&&!!(t.features&8)));let f=_();function a(u){let T=c(o);if(!T)return;(w=>w())(()=>{P(f.value,{[y.Forwards]:()=>{b(T,v.First,{skipElements:[u.relatedTarget]})},[y.Backwards]:()=>{b(T,v.Last,{skipElements:[u.relatedTarget]})}})})}let s=E(!1);function F(u){u.key==="Tab"&&(s.value=!0,requestAnimationFrame(()=>{s.value=!1}))}function H(u){if(!e.value)return;let T=B(t.containers);c(o)instanceof HTMLElement&&T.add(c(o));let d=u.relatedTarget;d instanceof HTMLElement&&d.dataset.headlessuiFocusGuard!=="true"&&(N(T,d)||(s.value?b(c(o),P(f.value,{[y.Forwards]:()=>v.Next,[y.Backwards]:()=>v.Previous})|v.WrapAround,{relativeTo:u.target}):u.target instanceof HTMLElement&&p(u.target)))}return()=>{let u={},T={ref:o,onKeydown:F,onFocusout:H},{features:d,initialFocus:w,containers:Q,...O}=t;return R(I,[!!(d&4)&&R(k,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:a,features:D.Focusable}),G({ourProps:T,theirProps:{...n,...O},slot:u,attrs:n,slots:r,name:"FocusTrap"}),!!(d&4)&&R(k,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:a,features:D.Focusable})])}}}),{features:A});function W(t){let n=E(C.slice());return g([t],([r],[l])=>{l===!0&&r===!1?S(()=>{n.value.splice(0)}):l===!1&&r===!0&&(n.value=C.slice())},{flush:"post"}),()=>{var r;return(r=n.value.find(l=>l!=null&&l.isConnected))!=null?r:null}}function $({ownerDocument:t},n){let r=W(n);M(()=>{K(()=>{var l,o;n.value||((l=t.value)==null?void 0:l.activeElement)===((o=t.value)==null?void 0:o.body)&&p(r())},{flush:"post"})}),h(()=>{n.value&&p(r())})}function z({ownerDocument:t,container:n,initialFocus:r},l){let o=E(null),i=E(!1);return M(()=>i.value=!0),h(()=>i.value=!1),M(()=>{g([n,r,l],(e,m)=>{if(e.every((a,s)=>(m==null?void 0:m[s])===a)||!l.value)return;let f=c(n);f&&S(()=>{var F,H;if(!i.value)return;let a=c(r),s=(F=t.value)==null?void 0:F.activeElement;if(a){if(a===s){o.value=s;return}}else if(f.contains(s)){o.value=s;return}a?p(a):b(f,v.First|v.NoScroll)===q.Error&&console.warn("There are no focusable elements inside the <FocusTrap />"),o.value=(H=t.value)==null?void 0:H.activeElement})},{immediate:!0,flush:"post"})}),o}function J({ownerDocument:t,container:n,containers:r,previousActiveElement:l},o){var i;U((i=t.value)==null?void 0:i.defaultView,"focus",e=>{if(!o.value)return;let m=B(r);c(n)instanceof HTMLElement&&m.add(c(n));let f=l.value;if(!f)return;let a=e.target;a&&a instanceof HTMLElement?N(m,a)?(l.value=a,p(a)):(e.preventDefault(),e.stopPropagation(),p(f)):p(l.value)},!0)}function N(t,n){for(let r of t)if(r.contains(n))return!0;return!1}export{ue as FocusTrap};

dist/components/label/label.d.ts

@@ -1,2 +0,2 @@
-import { ComputedRef } from 'vue';
+import { type ComputedRef } from 'vue';
 export declare function useLabels({ slot, name, props, }?: {
@@ -16,2 +16,6 @@ slot?: Record<string, unknown>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -21,3 +25,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -31,5 +35,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    passive: boolean;
+    id: string;
     as: string | Record<string, any>;
-    passive: boolean;
 }>;

dist/components/label/label.js

@@ -1,1 +0,1 @@
-import{computed as v,defineComponent as x,inject as L,onMounted as j,onUnmounted as k,provide as C,ref as w,unref as R}from"vue";import{useId as y}from"../../hooks/use-id.js";import{render as h}from"../../utils/render.js";let u=Symbol("LabelContext");function a(){let t=L(u,null);if(t===null){let n=new Error("You used a <Label /> component, but it is not inside a parent.");throw Error.captureStackTrace&&Error.captureStackTrace(n,a),n}return t}function K({slot:t={},name:n="Label",props:i={}}={}){let e=w([]);function r(o){return e.value.push(o),()=>{let l=e.value.indexOf(o);l!==-1&&e.value.splice(l,1)}}return C(u,{register:r,slot:t,name:n,props:i}),v(()=>e.value.length>0?e.value.join(" "):void 0)}let T=x({name:"Label",props:{as:{type:[Object,String],default:"label"},passive:{type:[Boolean],default:!1}},setup(t,{slots:n,attrs:i}){let e=a(),r=`headlessui-label-${y()}`;return j(()=>k(e.register(r))),()=>{let{name:o="Label",slot:l={},props:p={}}=e,{passive:d,...c}=t,f={...Object.entries(p).reduce((m,[b,g])=>Object.assign(m,{[b]:R(g)}),{}),id:r},s={...c,...f};return d&&delete s.onClick,h({props:s,slot:l,attrs:i,slots:n,name:o})}}});export{T as Label,K as useLabels};
+import{computed as m,defineComponent as v,inject as x,onMounted as L,onUnmounted as k,provide as C,ref as j,unref as y}from"vue";import{useId as h}from'../../hooks/use-id.js';import{render as w}from'../../utils/render.js';let a=Symbol("LabelContext");function d(){let t=x(a,null);if(t===null){let n=new Error("You used a <Label /> component, but it is not inside a parent.");throw Error.captureStackTrace&&Error.captureStackTrace(n,d),n}return t}function O({slot:t={},name:n="Label",props:i={}}={}){let e=j([]);function l(r){return e.value.push(r),()=>{let o=e.value.indexOf(r);o!==-1&&e.value.splice(o,1)}}return C(a,{register:l,slot:t,name:n,props:i}),m(()=>e.value.length>0?e.value.join(" "):void 0)}let E=v({name:"Label",props:{as:{type:[Object,String],default:"label"},passive:{type:[Boolean],default:!1},id:{type:String,default:()=>`headlessui-label-${h()}`}},setup(t,{slots:n,attrs:i}){let e=d();return L(()=>k(e.register(t.id))),()=>{let{name:l="Label",slot:r={},props:o={}}=e,{id:p,passive:c,...u}=t,s={...Object.entries(o).reduce((f,[b,g])=>Object.assign(f,{[b]:y(g)}),{}),id:p};return c&&(delete s.onClick,delete s.htmlFor,delete u.onClick),w({ourProps:s,theirProps:u,slot:r,attrs:i,slots:n,name:l})}}});export{E as Label,O as useLabels};

dist/components/listbox/listbox.d.ts

@@ -0,1 +1,3 @@
+import { type PropType } from 'vue';
+declare function defaultComparator<T>(a: T, z: T): boolean;
 export declare let Listbox: import("vue").DefineComponent<{
@@ -10,2 +12,6 @@ as: {
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
     horizontal: {
@@ -16,4 +22,13 @@ type: BooleanConstructor[];
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
     };
+    defaultValue: {
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -40,2 +55,6 @@ type: StringConstructor;
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
     horizontal: {
@@ -46,4 +65,13 @@ type: BooleanConstructor[];
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
     };
+    defaultValue: {
+        type: PropType<string | number | boolean | object | null>;
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -62,4 +90,7 @@ type: StringConstructor;
     disabled: boolean;
+    horizontal: boolean;
+    by: string | Function;
+    modelValue: string | number | boolean | object | null;
+    defaultValue: string | number | boolean | object | null;
     multiple: boolean;
-    horizontal: boolean;
 }>;
@@ -71,2 +102,6 @@ export declare let ListboxLabel: import("vue").DefineComponent<{
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -76,3 +111,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -82,3 +117,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -91,2 +131,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -96,3 +140,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -102,3 +146,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -119,2 +168,6 @@ }>;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -124,3 +177,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -138,3 +191,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -150,3 +208,3 @@ unmount: boolean;
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
     };
@@ -157,2 +215,6 @@ disabled: {
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -162,3 +224,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -169,3 +231,3 @@ type: (ObjectConstructor | StringConstructor)[];
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: PropType<string | number | boolean | object | null>;
     };
@@ -176,5 +238,11 @@ disabled: {
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
     disabled: boolean;
 }>;
+export {};

dist/components/listbox/listbox.js

@@ -1,1 +0,1 @@
-import{Fragment as U,computed as g,defineComponent as M,h as j,inject as $,nextTick as w,onMounted as A,onUnmounted as z,provide as H,ref as y,toRaw as k,watch as Q,watchEffect as q}from"vue";import{Features as B,render as I,omit as K,compact as W}from"../../utils/render.js";import{useId as E}from"../../hooks/use-id.js";import{Keys as c}from"../../keyboard.js";import{calculateActiveIndex as _,Focus as b}from"../../utils/calculate-active-index.js";import{dom as v}from"../../utils/dom.js";import{useOpenClosed as G,State as F,useOpenClosedProvider as J}from"../../internal/open-closed.js";import{match as C}from"../../utils/match.js";import{useResolveButtonType as X}from"../../hooks/use-resolve-button-type.js";import{FocusableMode as Y,isFocusableElement as Z,sortByDomNode as ee}from"../../utils/focus-management.js";import{useOutsideClick as te}from"../../hooks/use-outside-click.js";import{VisuallyHidden as oe}from"../../internal/visually-hidden.js";import{objectToFormEntries as ie}from"../../utils/form.js";var ae=(n=>(n[n.Open=0]="Open",n[n.Closed=1]="Closed",n))(ae||{}),le=(n=>(n[n.Single=0]="Single",n[n.Multi=1]="Multi",n))(le||{}),ne=(n=>(n[n.Pointer=0]="Pointer",n[n.Other=1]="Other",n))(ne||{});function ue(o){requestAnimationFrame(()=>requestAnimationFrame(o))}let N=Symbol("ListboxContext");function P(o){let x=$(N,null);if(x===null){let n=new Error(`<${o} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,P),n}return x}let De=M({name:"Listbox",emits:{"update:modelValue":o=>!0},props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},horizontal:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean]},name:{type:String,optional:!0},multiple:{type:[Boolean],default:!1}},setup(o,{slots:x,attrs:n,emit:S}){let e=y(1),p=y(null),d=y(null),m=y(null),r=y([]),O=y(""),t=y(null),a=y(1);function D(i=l=>l){let l=t.value!==null?r.value[t.value]:null,u=ee(i(r.value.slice()),R=>v(R.dataRef.domRef)),f=l?u.indexOf(l):null;return f===-1&&(f=null),{options:u,activeOptionIndex:f}}let L=g(()=>o.modelValue),T=g(()=>o.multiple?1:0),s={listboxState:e,value:L,mode:T,orientation:g(()=>o.horizontal?"horizontal":"vertical"),labelRef:p,buttonRef:d,optionsRef:m,disabled:g(()=>o.disabled),options:r,searchQuery:O,activeOptionIndex:t,activationTrigger:a,closeListbox(){o.disabled||e.value!==1&&(e.value=1,t.value=null)},openListbox(){o.disabled||e.value!==0&&(e.value=0)},goToOption(i,l,u){if(o.disabled||e.value===1)return;let f=D(),R=_(i===b.Specific?{focus:b.Specific,id:l}:{focus:i},{resolveItems:()=>f.options,resolveActiveIndex:()=>f.activeOptionIndex,resolveId:h=>h.id,resolveDisabled:h=>h.dataRef.disabled});O.value="",t.value=R,a.value=u!=null?u:1,r.value=f.options},search(i){if(o.disabled||e.value===1)return;let u=O.value!==""?0:1;O.value+=i.toLowerCase();let R=(t.value!==null?r.value.slice(t.value+u).concat(r.value.slice(0,t.value+u)):r.value).find(V=>V.dataRef.textValue.startsWith(O.value)&&!V.dataRef.disabled),h=R?r.value.indexOf(R):-1;h===-1||h===t.value||(t.value=h,a.value=1)},clearSearch(){o.disabled||e.value!==1&&O.value!==""&&(O.value="")},registerOption(i,l){let u=D(f=>[...f,{id:i,dataRef:l}]);r.value=u.options,t.value=u.activeOptionIndex},unregisterOption(i){let l=D(u=>{let f=u.findIndex(R=>R.id===i);return f!==-1&&u.splice(f,1),u});r.value=l.options,t.value=l.activeOptionIndex,a.value=1},select(i){o.disabled||S("update:modelValue",C(T.value,{[0]:()=>i,[1]:()=>{let l=k(s.value.value).slice(),u=k(i),f=l.indexOf(u);return f===-1?l.push(u):l.splice(f,1),l}}))}};return te([d,m],(i,l)=>{var u;e.value===0&&(s.closeListbox(),Z(l,Y.Loose)||(i.preventDefault(),(u=v(d))==null||u.focus()))}),H(N,s),J(g(()=>C(e.value,{[0]:F.Open,[1]:F.Closed}))),()=>{let{name:i,modelValue:l,disabled:u,...f}=o,R={open:e.value===0,disabled:u};return j(U,[...i!=null&&l!=null?ie({[i]:l}).map(([h,V])=>j(oe,W({key:h,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:h,value:V}))):[],I({props:K(f,["onUpdate:modelValue","horizontal","multiple"]),slot:R,slots:x,attrs:n,name:"Listbox"})])}}}),Te=M({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},setup(o,{attrs:x,slots:n}){let S=P("ListboxLabel"),e=`headlessui-listbox-label-${E()}`;function p(){var d;(d=v(S.buttonRef))==null||d.focus({preventScroll:!0})}return()=>{let d={open:S.listboxState.value===0,disabled:S.disabled.value},m={id:e,ref:S.labelRef,onClick:p};return I({props:{...o,...m},slot:d,attrs:x,slots:n,name:"ListboxLabel"})}}}),we=M({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},setup(o,{attrs:x,slots:n,expose:S}){let e=P("ListboxButton"),p=`headlessui-listbox-button-${E()}`;S({el:e.buttonRef,$el:e.buttonRef});function d(t){switch(t.key){case c.Space:case c.Enter:case c.ArrowDown:t.preventDefault(),e.openListbox(),w(()=>{var a;(a=v(e.optionsRef))==null||a.focus({preventScroll:!0}),e.value.value||e.goToOption(b.First)});break;case c.ArrowUp:t.preventDefault(),e.openListbox(),w(()=>{var a;(a=v(e.optionsRef))==null||a.focus({preventScroll:!0}),e.value.value||e.goToOption(b.Last)});break}}function m(t){switch(t.key){case c.Space:t.preventDefault();break}}function r(t){e.disabled.value||(e.listboxState.value===0?(e.closeListbox(),w(()=>{var a;return(a=v(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})})):(t.preventDefault(),e.openListbox(),ue(()=>{var a;return(a=v(e.optionsRef))==null?void 0:a.focus({preventScroll:!0})})))}let O=X(g(()=>({as:o.as,type:x.type})),e.buttonRef);return()=>{var D,L;let t={open:e.listboxState.value===0,disabled:e.disabled.value},a={ref:e.buttonRef,id:p,type:O.value,"aria-haspopup":!0,"aria-controls":(D=v(e.optionsRef))==null?void 0:D.id,"aria-expanded":e.disabled.value?void 0:e.listboxState.value===0,"aria-labelledby":e.labelRef.value?[(L=v(e.labelRef))==null?void 0:L.id,p].join(" "):void 0,disabled:e.disabled.value===!0?!0:void 0,onKeydown:d,onKeyup:m,onClick:r};return I({props:{...o,...a},slot:t,attrs:x,slots:n,name:"ListboxButton"})}}}),ke=M({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(o,{attrs:x,slots:n,expose:S}){let e=P("ListboxOptions"),p=`headlessui-listbox-options-${E()}`,d=y(null);S({el:e.optionsRef,$el:e.optionsRef});function m(t){switch(d.value&&clearTimeout(d.value),t.key){case c.Space:if(e.searchQuery.value!=="")return t.preventDefault(),t.stopPropagation(),e.search(t.key);case c.Enter:if(t.preventDefault(),t.stopPropagation(),e.activeOptionIndex.value!==null){let a=e.options.value[e.activeOptionIndex.value];e.select(a.dataRef.value)}e.mode.value===0&&(e.closeListbox(),w(()=>{var a;return(a=v(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})}));break;case C(e.orientation.value,{vertical:c.ArrowDown,horizontal:c.ArrowRight}):return t.preventDefault(),t.stopPropagation(),e.goToOption(b.Next);case C(e.orientation.value,{vertical:c.ArrowUp,horizontal:c.ArrowLeft}):return t.preventDefault(),t.stopPropagation(),e.goToOption(b.Previous);case c.Home:case c.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToOption(b.First);case c.End:case c.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToOption(b.Last);case c.Escape:t.preventDefault(),t.stopPropagation(),e.closeListbox(),w(()=>{var a;return(a=v(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})});break;case c.Tab:t.preventDefault(),t.stopPropagation();break;default:t.key.length===1&&(e.search(t.key),d.value=setTimeout(()=>e.clearSearch(),350));break}}let r=G(),O=g(()=>r!==null?r.value===F.Open:e.listboxState.value===0);return()=>{var L,T,s,i;let t={open:e.listboxState.value===0},a={"aria-activedescendant":e.activeOptionIndex.value===null||(L=e.options.value[e.activeOptionIndex.value])==null?void 0:L.id,"aria-multiselectable":e.mode.value===1?!0:void 0,"aria-labelledby":(i=(T=v(e.labelRef))==null?void 0:T.id)!=null?i:(s=v(e.buttonRef))==null?void 0:s.id,"aria-orientation":e.orientation.value,id:p,onKeydown:m,role:"listbox",tabIndex:0,ref:e.optionsRef};return I({props:{...o,...a},slot:t,attrs:x,slots:n,features:B.RenderStrategy|B.Static,visible:O.value,name:"ListboxOptions"})}}}),Ce=M({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1}},setup(o,{slots:x,attrs:n,expose:S}){let e=P("ListboxOption"),p=`headlessui-listbox-option-${E()}`,d=y(null);S({el:d,$el:d});let m=g(()=>e.activeOptionIndex.value!==null?e.options.value[e.activeOptionIndex.value].id===p:!1),r=g(()=>C(e.mode.value,{[0]:()=>k(e.value.value)===k(o.value),[1]:()=>k(e.value.value).includes(k(o.value))})),O=g(()=>C(e.mode.value,{[1]:()=>{var i;let s=k(e.value.value);return((i=e.options.value.find(l=>s.includes(l.dataRef.value)))==null?void 0:i.id)===p},[0]:()=>r.value})),t=g(()=>({disabled:o.disabled,value:o.value,textValue:"",domRef:d}));A(()=>{var i,l;let s=(l=(i=v(d))==null?void 0:i.textContent)==null?void 0:l.toLowerCase().trim();s!==void 0&&(t.value.textValue=s)}),A(()=>e.registerOption(p,t)),z(()=>e.unregisterOption(p)),A(()=>{Q([e.listboxState,r],()=>{e.listboxState.value===0&&(!r.value||C(e.mode.value,{[1]:()=>{O.value&&e.goToOption(b.Specific,p)},[0]:()=>{e.goToOption(b.Specific,p)}}))},{immediate:!0})}),q(()=>{e.listboxState.value===0&&(!m.value||e.activationTrigger.value!==0&&w(()=>{var s,i;return(i=(s=v(d))==null?void 0:s.scrollIntoView)==null?void 0:i.call(s,{block:"nearest"})}))});function a(s){if(o.disabled)return s.preventDefault();e.select(o.value),e.mode.value===0&&(e.closeListbox(),w(()=>{var i;return(i=v(e.buttonRef))==null?void 0:i.focus({preventScroll:!0})}))}function D(){if(o.disabled)return e.goToOption(b.Nothing);e.goToOption(b.Specific,p)}function L(){o.disabled||m.value||e.goToOption(b.Specific,p,0)}function T(){o.disabled||!m.value||e.goToOption(b.Nothing)}return()=>{let{disabled:s}=o,i={active:m.value,selected:r.value,disabled:s},l={id:p,ref:d,role:"option",tabIndex:s===!0?void 0:-1,"aria-disabled":s===!0?!0:void 0,"aria-selected":r.value===!0?r.value:void 0,disabled:void 0,onClick:a,onFocus:D,onPointermove:L,onMousemove:L,onPointerleave:T,onMouseleave:T};return I({props:{...K(o,["value","disabled"]),...l},slot:i,attrs:n,slots:x,name:"ListboxOption"})}}});export{De as Listbox,we as ListboxButton,Te as ListboxLabel,Ce as ListboxOption,ke as ListboxOptions};
+import{Fragment as z,computed as x,defineComponent as E,h as N,inject as _,nextTick as C,onMounted as K,onUnmounted as q,provide as W,ref as w,toRaw as R,watch as H,watchEffect as G}from"vue";import{useControllable as J}from'../../hooks/use-controllable.js';import{useId as F}from'../../hooks/use-id.js';import{useOutsideClick as X}from'../../hooks/use-outside-click.js';import{useResolveButtonType as Y}from'../../hooks/use-resolve-button-type.js';import{useTextValue as Z}from'../../hooks/use-text-value.js';import{useTrackedPointer as ee}from'../../hooks/use-tracked-pointer.js';import{Hidden as te,Features as oe}from'../../internal/hidden.js';import{State as B,useOpenClosed as ie,useOpenClosedProvider as ae}from'../../internal/open-closed.js';import{Keys as p}from'../../keyboard.js';import{Focus as g,calculateActiveIndex as ne}from'../../utils/calculate-active-index.js';import{dom as S}from'../../utils/dom.js';import{FocusableMode as le,isFocusableElement as ue,sortByDomNode as re}from'../../utils/focus-management.js';import{objectToFormEntries as se}from'../../utils/form.js';import{match as P}from'../../utils/match.js';import{Features as U,compact as de,omit as fe,render as j}from'../../utils/render.js';function pe(t,c){return t===c}var ce=(u=>(u[u.Open=0]="Open",u[u.Closed=1]="Closed",u))(ce||{}),ve=(u=>(u[u.Single=0]="Single",u[u.Multi=1]="Multi",u))(ve||{}),be=(u=>(u[u.Pointer=0]="Pointer",u[u.Other=1]="Other",u))(be||{});function me(t){requestAnimationFrame(()=>requestAnimationFrame(t))}let $=Symbol("ListboxContext");function A(t){let c=_($,null);if(c===null){let u=new Error(`<${t} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,A),u}return c}let Ie=E({name:"Listbox",emits:{"update:modelValue":t=>!0},props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},by:{type:[String,Function],default:()=>pe},horizontal:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean],default:void 0},defaultValue:{type:[Object,String,Number,Boolean],default:void 0},form:{type:String,optional:!0},name:{type:String,optional:!0},multiple:{type:[Boolean],default:!1}},inheritAttrs:!1,setup(t,{slots:c,attrs:u,emit:L}){let e=w(1),d=w(null),v=w(null),b=w(null),f=w([]),o=w(""),i=w(null),T=w(1);function D(a=n=>n){let n=i.value!==null?f.value[i.value]:null,l=re(a(f.value.slice()),O=>S(O.dataRef.domRef)),s=n?l.indexOf(n):null;return s===-1&&(s=null),{options:l,activeOptionIndex:s}}let y=x(()=>t.multiple?1:0),[h,V]=J(x(()=>t.modelValue),a=>L("update:modelValue",a),x(()=>t.defaultValue)),M=x(()=>h.value===void 0?P(y.value,{[1]:[],[0]:void 0}):h.value),r={listboxState:e,value:M,mode:y,compare(a,n){if(typeof t.by=="string"){let l=t.by;return(a==null?void 0:a[l])===(n==null?void 0:n[l])}return t.by(a,n)},orientation:x(()=>t.horizontal?"horizontal":"vertical"),labelRef:d,buttonRef:v,optionsRef:b,disabled:x(()=>t.disabled),options:f,searchQuery:o,activeOptionIndex:i,activationTrigger:T,closeListbox(){t.disabled||e.value!==1&&(e.value=1,i.value=null)},openListbox(){t.disabled||e.value!==0&&(e.value=0)},goToOption(a,n,l){if(t.disabled||e.value===1)return;let s=D(),O=ne(a===g.Specific?{focus:g.Specific,id:n}:{focus:a},{resolveItems:()=>s.options,resolveActiveIndex:()=>s.activeOptionIndex,resolveId:k=>k.id,resolveDisabled:k=>k.dataRef.disabled});o.value="",i.value=O,T.value=l!=null?l:1,f.value=s.options},search(a){if(t.disabled||e.value===1)return;let l=o.value!==""?0:1;o.value+=a.toLowerCase();let O=(i.value!==null?f.value.slice(i.value+l).concat(f.value.slice(0,i.value+l)):f.value).find(I=>I.dataRef.textValue.startsWith(o.value)&&!I.dataRef.disabled),k=O?f.value.indexOf(O):-1;k===-1||k===i.value||(i.value=k,T.value=1)},clearSearch(){t.disabled||e.value!==1&&o.value!==""&&(o.value="")},registerOption(a,n){let l=D(s=>[...s,{id:a,dataRef:n}]);f.value=l.options,i.value=l.activeOptionIndex},unregisterOption(a){let n=D(l=>{let s=l.findIndex(O=>O.id===a);return s!==-1&&l.splice(s,1),l});f.value=n.options,i.value=n.activeOptionIndex,T.value=1},theirOnChange(a){t.disabled||V(a)},select(a){t.disabled||V(P(y.value,{[0]:()=>a,[1]:()=>{let n=R(r.value.value).slice(),l=R(a),s=n.findIndex(O=>r.compare(l,R(O)));return s===-1?n.push(l):n.splice(s,1),n}}))}};X([v,b],(a,n)=>{var l;r.closeListbox(),ue(n,le.Loose)||(a.preventDefault(),(l=S(v))==null||l.focus())},x(()=>e.value===0)),W($,r),ae(x(()=>P(e.value,{[0]:B.Open,[1]:B.Closed})));let m=x(()=>{var a;return(a=S(v))==null?void 0:a.closest("form")});return K(()=>{H([m],()=>{if(!m.value||t.defaultValue===void 0)return;function a(){r.theirOnChange(t.defaultValue)}return m.value.addEventListener("reset",a),()=>{var n;(n=m.value)==null||n.removeEventListener("reset",a)}},{immediate:!0})}),()=>{let{name:a,modelValue:n,disabled:l,form:s,...O}=t,k={open:e.value===0,disabled:l,value:M.value};return N(z,[...a!=null&&M.value!=null?se({[a]:M.value}).map(([I,Q])=>N(te,de({features:oe.Hidden,key:I,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:s,disabled:l,name:I,value:Q}))):[],j({ourProps:{},theirProps:{...u,...fe(O,["defaultValue","onUpdate:modelValue","horizontal","multiple","by"])},slot:k,slots:c,attrs:u,name:"Listbox"})])}}}),Ee=E({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"},id:{type:String,default:()=>`headlessui-listbox-label-${F()}`}},setup(t,{attrs:c,slots:u}){let L=A("ListboxLabel");function e(){var d;(d=S(L.buttonRef))==null||d.focus({preventScroll:!0})}return()=>{let d={open:L.listboxState.value===0,disabled:L.disabled.value},{id:v,...b}=t,f={id:v,ref:L.labelRef,onClick:e};return j({ourProps:f,theirProps:b,slot:d,attrs:c,slots:u,name:"ListboxLabel"})}}}),je=E({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"},id:{type:String,default:()=>`headlessui-listbox-button-${F()}`}},setup(t,{attrs:c,slots:u,expose:L}){let e=A("ListboxButton");L({el:e.buttonRef,$el:e.buttonRef});function d(o){switch(o.key){case p.Space:case p.Enter:case p.ArrowDown:o.preventDefault(),e.openListbox(),C(()=>{var i;(i=S(e.optionsRef))==null||i.focus({preventScroll:!0}),e.value.value||e.goToOption(g.First)});break;case p.ArrowUp:o.preventDefault(),e.openListbox(),C(()=>{var i;(i=S(e.optionsRef))==null||i.focus({preventScroll:!0}),e.value.value||e.goToOption(g.Last)});break}}function v(o){switch(o.key){case p.Space:o.preventDefault();break}}function b(o){e.disabled.value||(e.listboxState.value===0?(e.closeListbox(),C(()=>{var i;return(i=S(e.buttonRef))==null?void 0:i.focus({preventScroll:!0})})):(o.preventDefault(),e.openListbox(),me(()=>{var i;return(i=S(e.optionsRef))==null?void 0:i.focus({preventScroll:!0})})))}let f=Y(x(()=>({as:t.as,type:c.type})),e.buttonRef);return()=>{var y,h;let o={open:e.listboxState.value===0,disabled:e.disabled.value,value:e.value.value},{id:i,...T}=t,D={ref:e.buttonRef,id:i,type:f.value,"aria-haspopup":"listbox","aria-controls":(y=S(e.optionsRef))==null?void 0:y.id,"aria-expanded":e.listboxState.value===0,"aria-labelledby":e.labelRef.value?[(h=S(e.labelRef))==null?void 0:h.id,i].join(" "):void 0,disabled:e.disabled.value===!0?!0:void 0,onKeydown:d,onKeyup:v,onClick:b};return j({ourProps:D,theirProps:T,slot:o,attrs:c,slots:u,name:"ListboxButton"})}}}),Ae=E({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:()=>`headlessui-listbox-options-${F()}`}},setup(t,{attrs:c,slots:u,expose:L}){let e=A("ListboxOptions"),d=w(null);L({el:e.optionsRef,$el:e.optionsRef});function v(o){switch(d.value&&clearTimeout(d.value),o.key){case p.Space:if(e.searchQuery.value!=="")return o.preventDefault(),o.stopPropagation(),e.search(o.key);case p.Enter:if(o.preventDefault(),o.stopPropagation(),e.activeOptionIndex.value!==null){let i=e.options.value[e.activeOptionIndex.value];e.select(i.dataRef.value)}e.mode.value===0&&(e.closeListbox(),C(()=>{var i;return(i=S(e.buttonRef))==null?void 0:i.focus({preventScroll:!0})}));break;case P(e.orientation.value,{vertical:p.ArrowDown,horizontal:p.ArrowRight}):return o.preventDefault(),o.stopPropagation(),e.goToOption(g.Next);case P(e.orientation.value,{vertical:p.ArrowUp,horizontal:p.ArrowLeft}):return o.preventDefault(),o.stopPropagation(),e.goToOption(g.Previous);case p.Home:case p.PageUp:return o.preventDefault(),o.stopPropagation(),e.goToOption(g.First);case p.End:case p.PageDown:return o.preventDefault(),o.stopPropagation(),e.goToOption(g.Last);case p.Escape:o.preventDefault(),o.stopPropagation(),e.closeListbox(),C(()=>{var i;return(i=S(e.buttonRef))==null?void 0:i.focus({preventScroll:!0})});break;case p.Tab:o.preventDefault(),o.stopPropagation();break;default:o.key.length===1&&(e.search(o.key),d.value=setTimeout(()=>e.clearSearch(),350));break}}let b=ie(),f=x(()=>b!==null?(b.value&B.Open)===B.Open:e.listboxState.value===0);return()=>{var y,h;let o={open:e.listboxState.value===0},{id:i,...T}=t,D={"aria-activedescendant":e.activeOptionIndex.value===null||(y=e.options.value[e.activeOptionIndex.value])==null?void 0:y.id,"aria-multiselectable":e.mode.value===1?!0:void 0,"aria-labelledby":(h=S(e.buttonRef))==null?void 0:h.id,"aria-orientation":e.orientation.value,id:i,onKeydown:v,role:"listbox",tabIndex:0,ref:e.optionsRef};return j({ourProps:D,theirProps:T,slot:o,attrs:c,slots:u,features:U.RenderStrategy|U.Static,visible:f.value,name:"ListboxOptions"})}}}),Fe=E({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-listbox.option-${F()}`}},setup(t,{slots:c,attrs:u,expose:L}){let e=A("ListboxOption"),d=w(null);L({el:d,$el:d});let v=x(()=>e.activeOptionIndex.value!==null?e.options.value[e.activeOptionIndex.value].id===t.id:!1),b=x(()=>P(e.mode.value,{[0]:()=>e.compare(R(e.value.value),R(t.value)),[1]:()=>R(e.value.value).some(r=>e.compare(R(r),R(t.value)))})),f=x(()=>P(e.mode.value,{[1]:()=>{var m;let r=R(e.value.value);return((m=e.options.value.find(a=>r.some(n=>e.compare(R(n),R(a.dataRef.value)))))==null?void 0:m.id)===t.id},[0]:()=>b.value})),o=Z(d),i=x(()=>({disabled:t.disabled,value:t.value,get textValue(){return o()},domRef:d}));K(()=>e.registerOption(t.id,i)),q(()=>e.unregisterOption(t.id)),K(()=>{H([e.listboxState,b],()=>{e.listboxState.value===0&&b.value&&P(e.mode.value,{[1]:()=>{f.value&&e.goToOption(g.Specific,t.id)},[0]:()=>{e.goToOption(g.Specific,t.id)}})},{immediate:!0})}),G(()=>{e.listboxState.value===0&&v.value&&e.activationTrigger.value!==0&&C(()=>{var r,m;return(m=(r=S(d))==null?void 0:r.scrollIntoView)==null?void 0:m.call(r,{block:"nearest"})})});function T(r){if(t.disabled)return r.preventDefault();e.select(t.value),e.mode.value===0&&(e.closeListbox(),C(()=>{var m;return(m=S(e.buttonRef))==null?void 0:m.focus({preventScroll:!0})}))}function D(){if(t.disabled)return e.goToOption(g.Nothing);e.goToOption(g.Specific,t.id)}let y=ee();function h(r){y.update(r)}function V(r){y.wasMoved(r)&&(t.disabled||v.value||e.goToOption(g.Specific,t.id,0))}function M(r){y.wasMoved(r)&&(t.disabled||v.value&&e.goToOption(g.Nothing))}return()=>{let{disabled:r}=t,m={active:v.value,selected:b.value,disabled:r},{id:a,value:n,disabled:l,...s}=t,O={id:a,ref:d,role:"option",tabIndex:r===!0?void 0:-1,"aria-disabled":r===!0?!0:void 0,"aria-selected":b.value,disabled:void 0,onClick:T,onFocus:D,onPointerenter:h,onMouseenter:h,onPointermove:V,onMousemove:V,onPointerleave:M,onMouseleave:M};return j({ourProps:O,theirProps:s,slot:m,attrs:u,slots:c,name:"ListboxOption"})}}});export{Ie as Listbox,je as ListboxButton,Ee as ListboxLabel,Fe as ListboxOption,Ae as ListboxOptions};

dist/components/menu/menu.d.ts

@@ -10,3 +10,3 @@ export declare let Menu: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -28,2 +28,6 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -33,3 +37,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
@@ -43,3 +47,8 @@ type: BooleanConstructor;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -61,2 +70,6 @@ disabled: boolean;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -66,3 +79,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -80,3 +93,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -95,2 +113,6 @@ unmount: boolean;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -100,3 +122,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -110,5 +132,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
     disabled: boolean;
 }>;

dist/components/menu/menu.js

@@ -1,1 +0,1 @@
-import{defineComponent as x,ref as b,provide as A,inject as F,onMounted as P,onUnmounted as K,computed as y,nextTick as h,watchEffect as L}from"vue";import{Features as C,render as T}from"../../utils/render.js";import{useId as O}from"../../hooks/use-id.js";import{Keys as c}from"../../keyboard.js";import{Focus as g,calculateActiveIndex as j}from"../../utils/calculate-active-index.js";import{dom as m}from"../../utils/dom.js";import{useTreeWalker as B}from"../../hooks/use-tree-walker.js";import{useOpenClosedProvider as N,State as w,useOpenClosed as U}from"../../internal/open-closed.js";import{match as $}from"../../utils/match.js";import{useResolveButtonType as V}from"../../hooks/use-resolve-button-type.js";import{FocusableMode as H,isFocusableElement as Q,sortByDomNode as _}from"../../utils/focus-management.js";import{useOutsideClick as q}from"../../hooks/use-outside-click.js";var W=(i=>(i[i.Open=0]="Open",i[i.Closed=1]="Closed",i))(W||{}),J=(i=>(i[i.Pointer=0]="Pointer",i[i.Other=1]="Other",i))(J||{});function z(o){requestAnimationFrame(()=>requestAnimationFrame(o))}let E=Symbol("MenuContext");function D(o){let S=F(E,null);if(S===null){let i=new Error(`<${o} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(i,D),i}return S}let fe=x({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup(o,{slots:S,attrs:i}){let v=b(1),e=b(null),p=b(null),r=b([]),f=b(""),d=b(null),I=b(1);function l(u=n=>n){let n=d.value!==null?r.value[d.value]:null,a=_(u(r.value.slice()),R=>m(R.dataRef.domRef)),s=n?a.indexOf(n):null;return s===-1&&(s=null),{items:a,activeItemIndex:s}}let t={menuState:v,buttonRef:e,itemsRef:p,items:r,searchQuery:f,activeItemIndex:d,activationTrigger:I,closeMenu:()=>{v.value=1,d.value=null},openMenu:()=>v.value=0,goToItem(u,n,a){let s=l(),R=j(u===g.Specific?{focus:g.Specific,id:n}:{focus:u},{resolveItems:()=>s.items,resolveActiveIndex:()=>s.activeItemIndex,resolveId:M=>M.id,resolveDisabled:M=>M.dataRef.disabled});f.value="",d.value=R,I.value=a!=null?a:1,r.value=s.items},search(u){let a=f.value!==""?0:1;f.value+=u.toLowerCase();let R=(d.value!==null?r.value.slice(d.value+a).concat(r.value.slice(0,d.value+a)):r.value).find(k=>k.dataRef.textValue.startsWith(f.value)&&!k.dataRef.disabled),M=R?r.value.indexOf(R):-1;M===-1||M===d.value||(d.value=M,I.value=1)},clearSearch(){f.value=""},registerItem(u,n){let a=l(s=>[...s,{id:u,dataRef:n}]);r.value=a.items,d.value=a.activeItemIndex,I.value=1},unregisterItem(u){let n=l(a=>{let s=a.findIndex(R=>R.id===u);return s!==-1&&a.splice(s,1),a});r.value=n.items,d.value=n.activeItemIndex,I.value=1}};return q([e,p],(u,n)=>{var a;v.value===0&&(t.closeMenu(),Q(n,H.Loose)||(u.preventDefault(),(a=m(e))==null||a.focus()))}),A(E,t),N(y(()=>$(v.value,{[0]:w.Open,[1]:w.Closed}))),()=>{let u={open:v.value===0};return T({props:o,slot:u,slots:S,attrs:i,name:"Menu"})}}}),me=x({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},setup(o,{attrs:S,slots:i,expose:v}){let e=D("MenuButton"),p=`headlessui-menu-button-${O()}`;v({el:e.buttonRef,$el:e.buttonRef});function r(l){switch(l.key){case c.Space:case c.Enter:case c.ArrowDown:l.preventDefault(),l.stopPropagation(),e.openMenu(),h(()=>{var t;(t=m(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(g.First)});break;case c.ArrowUp:l.preventDefault(),l.stopPropagation(),e.openMenu(),h(()=>{var t;(t=m(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(g.Last)});break}}function f(l){switch(l.key){case c.Space:l.preventDefault();break}}function d(l){o.disabled||(e.menuState.value===0?(e.closeMenu(),h(()=>{var t;return(t=m(e.buttonRef))==null?void 0:t.focus({preventScroll:!0})})):(l.preventDefault(),l.stopPropagation(),e.openMenu(),z(()=>{var t;return(t=m(e.itemsRef))==null?void 0:t.focus({preventScroll:!0})})))}let I=V(y(()=>({as:o.as,type:S.type})),e.buttonRef);return()=>{var u;let l={open:e.menuState.value===0},t={ref:e.buttonRef,id:p,type:I.value,"aria-haspopup":!0,"aria-controls":(u=m(e.itemsRef))==null?void 0:u.id,"aria-expanded":o.disabled?void 0:e.menuState.value===0,onKeydown:r,onKeyup:f,onClick:d};return T({props:{...o,...t},slot:l,attrs:S,slots:i,name:"MenuButton"})}}}),pe=x({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(o,{attrs:S,slots:i,expose:v}){let e=D("MenuItems"),p=`headlessui-menu-items-${O()}`,r=b(null);v({el:e.itemsRef,$el:e.itemsRef}),B({container:y(()=>m(e.itemsRef)),enabled:y(()=>e.menuState.value===0),accept(t){return t.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:t.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(t){t.setAttribute("role","none")}});function f(t){var u;switch(r.value&&clearTimeout(r.value),t.key){case c.Space:if(e.searchQuery.value!=="")return t.preventDefault(),t.stopPropagation(),e.search(t.key);case c.Enter:if(t.preventDefault(),t.stopPropagation(),e.activeItemIndex.value!==null){let a=e.items.value[e.activeItemIndex.value];(u=m(a.dataRef.domRef))==null||u.click()}e.closeMenu(),h(()=>{var n;return(n=m(e.buttonRef))==null?void 0:n.focus({preventScroll:!0})});break;case c.ArrowDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(g.Next);case c.ArrowUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(g.Previous);case c.Home:case c.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(g.First);case c.End:case c.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(g.Last);case c.Escape:t.preventDefault(),t.stopPropagation(),e.closeMenu(),h(()=>{var n;return(n=m(e.buttonRef))==null?void 0:n.focus({preventScroll:!0})});break;case c.Tab:t.preventDefault(),t.stopPropagation();break;default:t.key.length===1&&(e.search(t.key),r.value=setTimeout(()=>e.clearSearch(),350));break}}function d(t){switch(t.key){case c.Space:t.preventDefault();break}}let I=U(),l=y(()=>I!==null?I.value===w.Open:e.menuState.value===0);return()=>{var a,s;let t={open:e.menuState.value===0},u={"aria-activedescendant":e.activeItemIndex.value===null||(a=e.items.value[e.activeItemIndex.value])==null?void 0:a.id,"aria-labelledby":(s=m(e.buttonRef))==null?void 0:s.id,id:p,onKeydown:f,onKeyup:d,role:"menu",tabIndex:0,ref:e.itemsRef};return T({props:{...o,...u},slot:t,attrs:S,slots:i,features:C.RenderStrategy|C.Static,visible:l.value,name:"MenuItems"})}}}),ve=x({name:"MenuItem",props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1}},setup(o,{slots:S,attrs:i,expose:v}){let e=D("MenuItem"),p=`headlessui-menu-item-${O()}`,r=b(null);v({el:r,$el:r});let f=y(()=>e.activeItemIndex.value!==null?e.items.value[e.activeItemIndex.value].id===p:!1),d=y(()=>({disabled:o.disabled,textValue:"",domRef:r}));P(()=>{var a,s;let n=(s=(a=m(r))==null?void 0:a.textContent)==null?void 0:s.toLowerCase().trim();n!==void 0&&(d.value.textValue=n)}),P(()=>e.registerItem(p,d)),K(()=>e.unregisterItem(p)),L(()=>{e.menuState.value===0&&(!f.value||e.activationTrigger.value!==0&&h(()=>{var n,a;return(a=(n=m(r))==null?void 0:n.scrollIntoView)==null?void 0:a.call(n,{block:"nearest"})}))});function I(n){if(o.disabled)return n.preventDefault();e.closeMenu(),h(()=>{var a;return(a=m(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})})}function l(){if(o.disabled)return e.goToItem(g.Nothing);e.goToItem(g.Specific,p)}function t(){o.disabled||f.value||e.goToItem(g.Specific,p,0)}function u(){o.disabled||!f.value||e.goToItem(g.Nothing)}return()=>{let{disabled:n}=o,a={active:f.value,disabled:n};return T({props:{...o,...{id:p,ref:r,role:"menuitem",tabIndex:n===!0?void 0:-1,"aria-disabled":n===!0?!0:void 0,onClick:I,onFocus:l,onPointermove:t,onMousemove:t,onPointerleave:u,onMouseleave:u}},slot:a,attrs:i,slots:S,name:"MenuItem"})}}});export{fe as Menu,me as MenuButton,ve as MenuItem,pe as MenuItems};
+import{computed as y,defineComponent as T,inject as C,nextTick as h,onMounted as K,onUnmounted as N,provide as j,ref as R,watchEffect as L}from"vue";import{useId as w}from'../../hooks/use-id.js';import{useOutsideClick as B}from'../../hooks/use-outside-click.js';import{useResolveButtonType as U}from'../../hooks/use-resolve-button-type.js';import{useTextValue as $}from'../../hooks/use-text-value.js';import{useTrackedPointer as V}from'../../hooks/use-tracked-pointer.js';import{useTreeWalker as H}from'../../hooks/use-tree-walker.js';import{State as D,useOpenClosed as Q,useOpenClosedProvider as _}from'../../internal/open-closed.js';import{Keys as c}from'../../keyboard.js';import{Focus as S,calculateActiveIndex as q}from'../../utils/calculate-active-index.js';import{dom as p}from'../../utils/dom.js';import{Focus as E,FocusableMode as W,focusFrom as J,isFocusableElement as z,restoreFocusIfNecessary as k,sortByDomNode as G}from'../../utils/focus-management.js';import{match as X}from'../../utils/match.js';import{Features as F,render as P}from'../../utils/render.js';var Y=(l=>(l[l.Open=0]="Open",l[l.Closed=1]="Closed",l))(Y||{}),Z=(l=>(l[l.Pointer=0]="Pointer",l[l.Other=1]="Other",l))(Z||{});function ee(i){requestAnimationFrame(()=>requestAnimationFrame(i))}let A=Symbol("MenuContext");function O(i){let M=C(A,null);if(M===null){let l=new Error(`<${i} /> is missing a parent <Menu /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(l,O),l}return M}let Ie=T({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup(i,{slots:M,attrs:l}){let I=R(1),e=R(null),f=R(null),s=R([]),g=R(""),d=R(null),o=R(1);function t(a=r=>r){let r=d.value!==null?s.value[d.value]:null,u=G(a(s.value.slice()),m=>p(m.dataRef.domRef)),n=r?u.indexOf(r):null;return n===-1&&(n=null),{items:u,activeItemIndex:n}}let v={menuState:I,buttonRef:e,itemsRef:f,items:s,searchQuery:g,activeItemIndex:d,activationTrigger:o,closeMenu:()=>{I.value=1,d.value=null},openMenu:()=>I.value=0,goToItem(a,r,u){let n=t(),m=q(a===S.Specific?{focus:S.Specific,id:r}:{focus:a},{resolveItems:()=>n.items,resolveActiveIndex:()=>n.activeItemIndex,resolveId:b=>b.id,resolveDisabled:b=>b.dataRef.disabled});g.value="",d.value=m,o.value=u!=null?u:1,s.value=n.items},search(a){let u=g.value!==""?0:1;g.value+=a.toLowerCase();let m=(d.value!==null?s.value.slice(d.value+u).concat(s.value.slice(0,d.value+u)):s.value).find(x=>x.dataRef.textValue.startsWith(g.value)&&!x.dataRef.disabled),b=m?s.value.indexOf(m):-1;b===-1||b===d.value||(d.value=b,o.value=1)},clearSearch(){g.value=""},registerItem(a,r){let u=t(n=>[...n,{id:a,dataRef:r}]);s.value=u.items,d.value=u.activeItemIndex,o.value=1},unregisterItem(a){let r=t(u=>{let n=u.findIndex(m=>m.id===a);return n!==-1&&u.splice(n,1),u});s.value=r.items,d.value=r.activeItemIndex,o.value=1}};return B([e,f],(a,r)=>{var u;v.closeMenu(),z(r,W.Loose)||(a.preventDefault(),(u=p(e))==null||u.focus())},y(()=>I.value===0)),j(A,v),_(y(()=>X(I.value,{[0]:D.Open,[1]:D.Closed}))),()=>{let a={open:I.value===0,close:v.closeMenu};return P({ourProps:{},theirProps:i,slot:a,slots:M,attrs:l,name:"Menu"})}}}),ge=T({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"},id:{type:String,default:()=>`headlessui-menu-button-${w()}`}},setup(i,{attrs:M,slots:l,expose:I}){let e=O("MenuButton");I({el:e.buttonRef,$el:e.buttonRef});function f(o){switch(o.key){case c.Space:case c.Enter:case c.ArrowDown:o.preventDefault(),o.stopPropagation(),e.openMenu(),h(()=>{var t;(t=p(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(S.First)});break;case c.ArrowUp:o.preventDefault(),o.stopPropagation(),e.openMenu(),h(()=>{var t;(t=p(e.itemsRef))==null||t.focus({preventScroll:!0}),e.goToItem(S.Last)});break}}function s(o){switch(o.key){case c.Space:o.preventDefault();break}}function g(o){i.disabled||(e.menuState.value===0?(e.closeMenu(),h(()=>{var t;return(t=p(e.buttonRef))==null?void 0:t.focus({preventScroll:!0})})):(o.preventDefault(),e.openMenu(),ee(()=>{var t;return(t=p(e.itemsRef))==null?void 0:t.focus({preventScroll:!0})})))}let d=U(y(()=>({as:i.as,type:M.type})),e.buttonRef);return()=>{var r;let o={open:e.menuState.value===0},{id:t,...v}=i,a={ref:e.buttonRef,id:t,type:d.value,"aria-haspopup":"menu","aria-controls":(r=p(e.itemsRef))==null?void 0:r.id,"aria-expanded":e.menuState.value===0,onKeydown:f,onKeyup:s,onClick:g};return P({ourProps:a,theirProps:v,slot:o,attrs:M,slots:l,name:"MenuButton"})}}}),Se=T({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},id:{type:String,default:()=>`headlessui-menu-items-${w()}`}},setup(i,{attrs:M,slots:l,expose:I}){let e=O("MenuItems"),f=R(null);I({el:e.itemsRef,$el:e.itemsRef}),H({container:y(()=>p(e.itemsRef)),enabled:y(()=>e.menuState.value===0),accept(t){return t.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:t.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(t){t.setAttribute("role","none")}});function s(t){var v;switch(f.value&&clearTimeout(f.value),t.key){case c.Space:if(e.searchQuery.value!=="")return t.preventDefault(),t.stopPropagation(),e.search(t.key);case c.Enter:if(t.preventDefault(),t.stopPropagation(),e.activeItemIndex.value!==null){let r=e.items.value[e.activeItemIndex.value];(v=p(r.dataRef.domRef))==null||v.click()}e.closeMenu(),k(p(e.buttonRef));break;case c.ArrowDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Next);case c.ArrowUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Previous);case c.Home:case c.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.First);case c.End:case c.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(S.Last);case c.Escape:t.preventDefault(),t.stopPropagation(),e.closeMenu(),h(()=>{var a;return(a=p(e.buttonRef))==null?void 0:a.focus({preventScroll:!0})});break;case c.Tab:t.preventDefault(),t.stopPropagation(),e.closeMenu(),h(()=>J(p(e.buttonRef),t.shiftKey?E.Previous:E.Next));break;default:t.key.length===1&&(e.search(t.key),f.value=setTimeout(()=>e.clearSearch(),350));break}}function g(t){switch(t.key){case c.Space:t.preventDefault();break}}let d=Q(),o=y(()=>d!==null?(d.value&D.Open)===D.Open:e.menuState.value===0);return()=>{var u,n;let t={open:e.menuState.value===0},{id:v,...a}=i,r={"aria-activedescendant":e.activeItemIndex.value===null||(u=e.items.value[e.activeItemIndex.value])==null?void 0:u.id,"aria-labelledby":(n=p(e.buttonRef))==null?void 0:n.id,id:v,onKeydown:s,onKeyup:g,role:"menu",tabIndex:0,ref:e.itemsRef};return P({ourProps:r,theirProps:a,slot:t,attrs:M,slots:l,features:F.RenderStrategy|F.Static,visible:o.value,name:"MenuItems"})}}}),Me=T({name:"MenuItem",inheritAttrs:!1,props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-menu-item-${w()}`}},setup(i,{slots:M,attrs:l,expose:I}){let e=O("MenuItem"),f=R(null);I({el:f,$el:f});let s=y(()=>e.activeItemIndex.value!==null?e.items.value[e.activeItemIndex.value].id===i.id:!1),g=$(f),d=y(()=>({disabled:i.disabled,get textValue(){return g()},domRef:f}));K(()=>e.registerItem(i.id,d)),N(()=>e.unregisterItem(i.id)),L(()=>{e.menuState.value===0&&s.value&&e.activationTrigger.value!==0&&h(()=>{var n,m;return(m=(n=p(f))==null?void 0:n.scrollIntoView)==null?void 0:m.call(n,{block:"nearest"})})});function o(n){if(i.disabled)return n.preventDefault();e.closeMenu(),k(p(e.buttonRef))}function t(){if(i.disabled)return e.goToItem(S.Nothing);e.goToItem(S.Specific,i.id)}let v=V();function a(n){v.update(n)}function r(n){v.wasMoved(n)&&(i.disabled||s.value||e.goToItem(S.Specific,i.id,0))}function u(n){v.wasMoved(n)&&(i.disabled||s.value&&e.goToItem(S.Nothing))}return()=>{let{id:n,disabled:m,...b}=i,x={active:s.value,disabled:m,close:e.closeMenu};return P({ourProps:{id:n,ref:f,role:"menuitem",tabIndex:m===!0?void 0:-1,"aria-disabled":m===!0?!0:void 0,onClick:o,onFocus:t,onPointerenter:a,onMouseenter:a,onPointermove:r,onMousemove:r,onPointerleave:u,onMouseleave:u},theirProps:{...l,...b},slot:x,attrs:l,slots:M,name:"MenuItem"})}}});export{Ie as Menu,ge as MenuButton,Me as MenuItem,Se as MenuItems};

dist/components/popover/popover.d.ts

@@ -8,5 +8,3 @@ export declare let Popover: import("vue").DefineComponent<{
     [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -28,7 +26,9 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -42,3 +42,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -64,3 +69,3 @@ disabled: boolean;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -100,2 +105,6 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -105,3 +114,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -123,7 +132,12 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    focus: boolean;
+    id: string;
     as: string | Record<string, any>;
     unmount: boolean;
     static: boolean;
-    focus: boolean;
 }>;
@@ -137,5 +151,3 @@ export declare let PopoverGroup: import("vue").DefineComponent<{
     [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -142,0 +154,0 @@ type: (ObjectConstructor | StringConstructor)[];

dist/components/popover/popover.js

@@ -1,1 +0,1 @@
-import{defineComponent as k,inject as j,onUnmounted as ee,provide as G,ref as I,watchEffect as $,computed as C}from"vue";import{match as z}from"../../utils/match.js";import{render as T,Features as L}from"../../utils/render.js";import{useId as W}from"../../hooks/use-id.js";import{Keys as E}from"../../keyboard.js";import{getFocusableElements as V,Focus as w,focusIn as D,FocusResult as U,isFocusableElement as te,FocusableMode as oe}from"../../utils/focus-management.js";import{dom as n}from"../../utils/dom.js";import{useOpenClosedProvider as ne,State as B,useOpenClosed as J}from"../../internal/open-closed.js";import{useResolveButtonType as re}from"../../hooks/use-resolve-button-type.js";import{useOutsideClick as le}from"../../hooks/use-outside-click.js";import{getOwnerDocument as K}from"../../utils/owner.js";import{useEventListener as M}from"../../hooks/use-event-listener.js";var ae=(f=>(f[f.Open=0]="Open",f[f.Closed=1]="Closed",f))(ae||{});let Q=Symbol("PopoverContext");function H(c){let m=j(Q,null);if(m===null){let f=new Error(`<${c} /> is missing a parent <${pe.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(f,H),f}return m}let X=Symbol("PopoverGroupContext");function Y(){return j(X,null)}let Z=Symbol("PopoverPanelContext");function ue(){return j(Z,null)}let pe=k({name:"Popover",props:{as:{type:[Object,String],default:"div"}},setup(c,{slots:m,attrs:f,expose:y}){var g;let e=`headlessui-popover-button-${W()}`,t=`headlessui-popover-panel-${W()}`,p=I(null);y({el:p,$el:p});let a=I(1),P=I(null),d=I(null),S=C(()=>K(p)),r={popoverState:a,buttonId:e,panelId:t,panel:d,button:P,togglePopover(){a.value=z(a.value,{[0]:1,[1]:0})},closePopover(){a.value!==1&&(a.value=1)},close(s){r.closePopover();let o=(()=>s?s instanceof HTMLElement?s:s.value instanceof HTMLElement?n(s):n(r.button):n(r.button))();o==null||o.focus()}};G(Q,r),ne(C(()=>z(a.value,{[0]:B.Open,[1]:B.Closed})));let l={buttonId:e,panelId:t,close(){r.closePopover()}},u=Y(),i=u==null?void 0:u.registerPopover;function O(){var s,o,v,b;return(b=u==null?void 0:u.isFocusWithinPopoverGroup())!=null?b:((s=S.value)==null?void 0:s.activeElement)&&(((o=n(P))==null?void 0:o.contains(S.value.activeElement))||((v=n(d))==null?void 0:v.contains(S.value.activeElement)))}return $(()=>i==null?void 0:i(l)),M((g=S.value)==null?void 0:g.defaultView,"focus",()=>{a.value===0&&(O()||!P||!d||r.closePopover())},!0),le([P,d],(s,o)=>{var v;a.value===0&&(r.closePopover(),te(o,oe.Loose)||(s.preventDefault(),(v=n(P))==null||v.focus()))}),()=>{let s={open:a.value===0,close:r.close};return T({props:{...c,ref:p},slot:s,slots:m,attrs:f,name:"Popover"})}}}),xe=k({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},setup(c,{attrs:m,slots:f,expose:y}){var s;let e=H("PopoverButton"),t=C(()=>K(e.button));y({el:e.button,$el:e.button});let p=Y(),a=p==null?void 0:p.closeOthers,P=ue(),d=P===null?!1:P===e.panelId,S=I(null),r=I();M((s=t.value)==null?void 0:s.defaultView,"focus",()=>{var o;r.value=S.value,S.value=(o=t.value)==null?void 0:o.activeElement},!0);let l=I(null);d||$(()=>{e.button.value=l.value});let u=re(C(()=>({as:c.as,type:m.type})),l);function i(o){var v,b,x,h,R,F,A,N;if(d){if(e.popoverState.value===1)return;switch(o.key){case E.Space:case E.Enter:o.preventDefault(),(b=(v=o.target).click)==null||b.call(v),e.closePopover(),(x=n(e.button))==null||x.focus();break}}else switch(o.key){case E.Space:case E.Enter:o.preventDefault(),o.stopPropagation(),e.popoverState.value===1&&(a==null||a(e.buttonId)),e.togglePopover();break;case E.Escape:if(e.popoverState.value!==0)return a==null?void 0:a(e.buttonId);if(!n(e.button)||((h=t.value)==null?void 0:h.activeElement)&&!((R=n(e.button))!=null&&R.contains(t.value.activeElement)))return;o.preventDefault(),o.stopPropagation(),e.closePopover();break;case E.Tab:if(e.popoverState.value!==0||!e.panel||!e.button)return;if(o.shiftKey){if(!r.value||(F=n(e.button))!=null&&F.contains(r.value)||(A=n(e.panel))!=null&&A.contains(r.value))return;let q=V((N=t.value)==null?void 0:N.body),_=q.indexOf(r.value);if(q.indexOf(n(e.button))>_)return;o.preventDefault(),o.stopPropagation(),D(n(e.panel),w.Last)}else o.preventDefault(),o.stopPropagation(),D(n(e.panel),w.First);break}}function O(o){var v,b,x;if(!d&&(o.key===E.Space&&o.preventDefault(),e.popoverState.value===0&&!!e.panel&&!!e.button))switch(o.key){case E.Tab:if(!r.value||(v=n(e.button))!=null&&v.contains(r.value)||(b=n(e.panel))!=null&&b.contains(r.value))return;let h=V((x=t.value)==null?void 0:x.body),R=h.indexOf(r.value);if(h.indexOf(n(e.button))>R)return;o.preventDefault(),o.stopPropagation(),D(n(e.panel),w.Last);break}}function g(o){var v,b;c.disabled||(d?(e.closePopover(),(v=n(e.button))==null||v.focus()):(o.preventDefault(),o.stopPropagation(),e.popoverState.value===1&&(a==null||a(e.buttonId)),(b=n(e.button))==null||b.focus(),e.togglePopover()))}return()=>{let o={open:e.popoverState.value===0},v=d?{ref:l,type:u.value,onKeydown:i,onClick:g}:{ref:l,id:e.buttonId,type:u.value,"aria-expanded":c.disabled?void 0:e.popoverState.value===0,"aria-controls":n(e.panel)?e.panelId:void 0,disabled:c.disabled?!0:void 0,onKeydown:i,onKeyup:O,onClick:g};return T({props:{...c,...v},slot:o,attrs:m,slots:f,name:"PopoverButton"})}}}),Ce=k({name:"PopoverOverlay",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(c,{attrs:m,slots:f}){let y=H("PopoverOverlay"),e=`headlessui-popover-overlay-${W()}`,t=J(),p=C(()=>t!==null?t.value===B.Open:y.popoverState.value===0);function a(){y.closePopover()}return()=>{let P={open:y.popoverState.value===0};return T({props:{...c,...{id:e,"aria-hidden":!0,onClick:a}},slot:P,attrs:m,slots:f,features:L.RenderStrategy|L.Static,visible:p.value,name:"PopoverOverlay"})}}}),we=k({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1}},setup(c,{attrs:m,slots:f,expose:y}){var S,r;let{focus:e}=c,t=H("PopoverPanel"),p=C(()=>K(t.panel));y({el:t.panel,$el:t.panel}),G(Z,t.panelId),ee(()=>{t.panel.value=null}),$(()=>{var u,i;if(!e||t.popoverState.value!==0||!t.panel)return;let l=(u=p.value)==null?void 0:u.activeElement;(i=n(t.panel))!=null&&i.contains(l)||D(n(t.panel),w.First)}),M((S=p.value)==null?void 0:S.defaultView,"keydown",l=>{var i,O,g;if(t.popoverState.value!==0||!n(t.panel)||l.key!==E.Tab||!((i=p.value)!=null&&i.activeElement)||!((O=n(t.panel))!=null&&O.contains(p.value.activeElement)))return;l.preventDefault();let u=D(n(t.panel),l.shiftKey?w.Previous:w.Next);if(u===U.Underflow)return(g=n(t.button))==null?void 0:g.focus();if(u===U.Overflow){if(!n(t.button))return;let s=V(p.value.body),o=s.indexOf(n(t.button)),v=s.splice(o+1).filter(b=>{var x;return!((x=n(t.panel))!=null&&x.contains(b))});D(v,w.First)===U.Error&&D(p.value.body,w.First)}}),M((r=p.value)==null?void 0:r.defaultView,"focus",()=>{var l,u;!e||t.popoverState.value===0&&(!n(t.panel)||((l=p.value)==null?void 0:l.activeElement)&&((u=n(t.panel))==null?void 0:u.contains(p.value.activeElement))||t.closePopover())},!0);let a=J(),P=C(()=>a!==null?a.value===B.Open:t.popoverState.value===0);function d(l){var u,i;switch(l.key){case E.Escape:if(t.popoverState.value!==0||!n(t.panel)||p.value&&!((u=n(t.panel))!=null&&u.contains(p.value.activeElement)))return;l.preventDefault(),l.stopPropagation(),t.closePopover(),(i=n(t.button))==null||i.focus();break}}return()=>{let l={open:t.popoverState.value===0,close:t.close},u={ref:t.panel,id:t.panelId,onKeydown:d};return T({props:{...c,...u},slot:l,attrs:m,slots:f,features:L.RenderStrategy|L.Static,visible:P.value,name:"PopoverPanel"})}}}),De=k({name:"PopoverGroup",props:{as:{type:[Object,String],default:"div"}},setup(c,{attrs:m,slots:f,expose:y}){let e=I(null),t=I([]),p=C(()=>K(e));y({el:e,$el:e});function a(r){let l=t.value.indexOf(r);l!==-1&&t.value.splice(l,1)}function P(r){return t.value.push(r),()=>{a(r)}}function d(){var u;let r=p.value;if(!r)return!1;let l=r.activeElement;return(u=n(e))!=null&&u.contains(l)?!0:t.value.some(i=>{var O,g;return((O=r.getElementById(i.buttonId))==null?void 0:O.contains(l))||((g=r.getElementById(i.panelId))==null?void 0:g.contains(l))})}function S(r){for(let l of t.value)l.buttonId!==r&&l.close()}return G(X,{registerPopover:P,unregisterPopover:a,isFocusWithinPopoverGroup:d,closeOthers:S}),()=>T({props:{...c,...{ref:e}},slot:{},attrs:m,slots:f,name:"PopoverGroup"})}});export{pe as Popover,xe as PopoverButton,De as PopoverGroup,Ce as PopoverOverlay,we as PopoverPanel};
+import{Fragment as j,computed as T,defineComponent as K,h as R,inject as _,onMounted as ee,onUnmounted as te,provide as U,ref as F,shallowRef as ie,watchEffect as q}from"vue";import{useNestedPortals as se}from'../../components/portal/portal.js';import{useEventListener as pe}from'../../hooks/use-event-listener.js';import{useId as L}from'../../hooks/use-id.js';import{useOutsideClick as fe}from'../../hooks/use-outside-click.js';import{useResolveButtonType as ve}from'../../hooks/use-resolve-button-type.js';import{useMainTreeNode as ce,useRootContainers as de}from'../../hooks/use-root-containers.js';import{Direction as w,useTabDirection as oe}from'../../hooks/use-tab-direction.js';import{Hidden as z,Features as J}from'../../internal/hidden.js';import{State as x,useOpenClosed as ne,useOpenClosedProvider as Pe}from'../../internal/open-closed.js';import{Keys as D}from'../../keyboard.js';import{dom as r}from'../../utils/dom.js';import{Focus as C,FocusResult as Q,FocusableMode as me,focusIn as B,getFocusableElements as X,isFocusableElement as be}from'../../utils/focus-management.js';import{match as H}from'../../utils/match.js';import'../../utils/micro-task.js';import{getOwnerDocument as A}from'../../utils/owner.js';import{Features as W,render as G}from'../../utils/render.js';var Se=(p=>(p[p.Open=0]="Open",p[p.Closed=1]="Closed",p))(Se||{});let re=Symbol("PopoverContext");function V(P){let b=_(re,null);if(b===null){let p=new Error(`<${P} /> is missing a parent <${ye.name} /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(p,V),p}return b}let le=Symbol("PopoverGroupContext");function ae(){return _(le,null)}let ue=Symbol("PopoverPanelContext");function ge(){return _(ue,null)}let ye=K({name:"Popover",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"}},setup(P,{slots:b,attrs:p,expose:h}){var v;let t=F(null);h({el:t,$el:t});let e=F(1),c=F(null),d=F(null),O=F(null),f=F(null),y=T(()=>A(t)),M=T(()=>{var Y,Z;if(!r(c)||!r(f))return!1;for(let k of document.querySelectorAll("body > *"))if(Number(k==null?void 0:k.contains(r(c)))^Number(k==null?void 0:k.contains(r(f))))return!0;let o=X(),a=o.indexOf(r(c)),g=(a+o.length-1)%o.length,E=(a+1)%o.length,N=o[g],$=o[E];return!((Y=r(f))!=null&&Y.contains(N))&&!((Z=r(f))!=null&&Z.contains($))}),l={popoverState:e,buttonId:F(null),panelId:F(null),panel:f,button:c,isPortalled:M,beforePanelSentinel:d,afterPanelSentinel:O,togglePopover(){e.value=H(e.value,{[0]:1,[1]:0})},closePopover(){e.value!==1&&(e.value=1)},close(o){l.closePopover();let a=(()=>o?o instanceof HTMLElement?o:o.value instanceof HTMLElement?r(o):r(l.button):r(l.button))();a==null||a.focus()}};U(re,l),Pe(T(()=>H(e.value,{[0]:x.Open,[1]:x.Closed})));let m={buttonId:l.buttonId,panelId:l.panelId,close(){l.closePopover()}},S=ae(),I=S==null?void 0:S.registerPopover,[s,u]=se(),i=de({mainTreeNodeRef:S==null?void 0:S.mainTreeNodeRef,portals:s,defaultContainers:[c,f]});function n(){var o,a,g,E;return(E=S==null?void 0:S.isFocusWithinPopoverGroup())!=null?E:((o=y.value)==null?void 0:o.activeElement)&&(((a=r(c))==null?void 0:a.contains(y.value.activeElement))||((g=r(f))==null?void 0:g.contains(y.value.activeElement)))}return q(()=>I==null?void 0:I(m)),pe((v=y.value)==null?void 0:v.defaultView,"focus",o=>{var a,g;o.target!==window&&o.target instanceof HTMLElement&&e.value===0&&(n()||c&&f&&(i.contains(o.target)||(a=r(l.beforePanelSentinel))!=null&&a.contains(o.target)||(g=r(l.afterPanelSentinel))!=null&&g.contains(o.target)||l.closePopover()))},!0),fe(i.resolveContainers,(o,a)=>{var g;l.closePopover(),be(a,me.Loose)||(o.preventDefault(),(g=r(c))==null||g.focus())},T(()=>e.value===0)),()=>{let o={open:e.value===0,close:l.close};return R(j,[R(u,{},()=>G({theirProps:{...P,...p},ourProps:{ref:t},slot:o,slots:b,attrs:p,name:"Popover"})),R(i.MainTreeNode)])}}}),Ge=K({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1},id:{type:String,default:()=>`headlessui-popover-button-${L()}`}},inheritAttrs:!1,setup(P,{attrs:b,slots:p,expose:h}){let t=V("PopoverButton"),e=T(()=>A(t.button));h({el:t.button,$el:t.button}),ee(()=>{t.buttonId.value=P.id}),te(()=>{t.buttonId.value=null});let c=ae(),d=c==null?void 0:c.closeOthers,O=ge(),f=T(()=>O===null?!1:O.value===t.panelId.value),y=F(null),M=`headlessui-focus-sentinel-${L()}`;f.value||q(()=>{t.button.value=r(y)});let l=ve(T(()=>({as:P.as,type:b.type})),y);function m(n){var v,o,a,g,E;if(f.value){if(t.popoverState.value===1)return;switch(n.key){case D.Space:case D.Enter:n.preventDefault(),(o=(v=n.target).click)==null||o.call(v),t.closePopover(),(a=r(t.button))==null||a.focus();break}}else switch(n.key){case D.Space:case D.Enter:n.preventDefault(),n.stopPropagation(),t.popoverState.value===1&&(d==null||d(t.buttonId.value)),t.togglePopover();break;case D.Escape:if(t.popoverState.value!==0)return d==null?void 0:d(t.buttonId.value);if(!r(t.button)||(g=e.value)!=null&&g.activeElement&&!((E=r(t.button))!=null&&E.contains(e.value.activeElement)))return;n.preventDefault(),n.stopPropagation(),t.closePopover();break}}function S(n){f.value||n.key===D.Space&&n.preventDefault()}function I(n){var v,o;P.disabled||(f.value?(t.closePopover(),(v=r(t.button))==null||v.focus()):(n.preventDefault(),n.stopPropagation(),t.popoverState.value===1&&(d==null||d(t.buttonId.value)),t.togglePopover(),(o=r(t.button))==null||o.focus()))}function s(n){n.preventDefault(),n.stopPropagation()}let u=oe();function i(){let n=r(t.panel);if(!n)return;function v(){H(u.value,{[w.Forwards]:()=>B(n,C.First),[w.Backwards]:()=>B(n,C.Last)})===Q.Error&&B(X().filter(a=>a.dataset.headlessuiFocusGuard!=="true"),H(u.value,{[w.Forwards]:C.Next,[w.Backwards]:C.Previous}),{relativeTo:r(t.button)})}v()}return()=>{let n=t.popoverState.value===0,v={open:n},{id:o,...a}=P,g=f.value?{ref:y,type:l.value,onKeydown:m,onClick:I}:{ref:y,id:o,type:l.value,"aria-expanded":t.popoverState.value===0,"aria-controls":r(t.panel)?t.panelId.value:void 0,disabled:P.disabled?!0:void 0,onKeydown:m,onKeyup:S,onClick:I,onMousedown:s};return R(j,[G({ourProps:g,theirProps:{...b,...a},slot:v,attrs:b,slots:p,name:"PopoverButton"}),n&&!f.value&&t.isPortalled.value&&R(z,{id:M,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:i})])}}}),$e=K({name:"PopoverOverlay",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},setup(P,{attrs:b,slots:p}){let h=V("PopoverOverlay"),t=`headlessui-popover-overlay-${L()}`,e=ne(),c=T(()=>e!==null?(e.value&x.Open)===x.Open:h.popoverState.value===0);function d(){h.closePopover()}return()=>{let O={open:h.popoverState.value===0};return G({ourProps:{id:t,"aria-hidden":!0,onClick:d},theirProps:P,slot:O,attrs:b,slots:p,features:W.RenderStrategy|W.Static,visible:c.value,name:"PopoverOverlay"})}}}),je=K({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-popover-panel-${L()}`}},inheritAttrs:!1,setup(P,{attrs:b,slots:p,expose:h}){let{focus:t}=P,e=V("PopoverPanel"),c=T(()=>A(e.panel)),d=`headlessui-focus-sentinel-before-${L()}`,O=`headlessui-focus-sentinel-after-${L()}`;h({el:e.panel,$el:e.panel}),ee(()=>{e.panelId.value=P.id}),te(()=>{e.panelId.value=null}),U(ue,e.panelId),q(()=>{var u,i;if(!t||e.popoverState.value!==0||!e.panel)return;let s=(u=c.value)==null?void 0:u.activeElement;(i=r(e.panel))!=null&&i.contains(s)||B(r(e.panel),C.First)});let f=ne(),y=T(()=>f!==null?(f.value&x.Open)===x.Open:e.popoverState.value===0);function M(s){var u,i;switch(s.key){case D.Escape:if(e.popoverState.value!==0||!r(e.panel)||c.value&&!((u=r(e.panel))!=null&&u.contains(c.value.activeElement)))return;s.preventDefault(),s.stopPropagation(),e.closePopover(),(i=r(e.button))==null||i.focus();break}}function l(s){var i,n,v,o,a;let u=s.relatedTarget;u&&r(e.panel)&&((i=r(e.panel))!=null&&i.contains(u)||(e.closePopover(),((v=(n=r(e.beforePanelSentinel))==null?void 0:n.contains)!=null&&v.call(n,u)||(a=(o=r(e.afterPanelSentinel))==null?void 0:o.contains)!=null&&a.call(o,u))&&u.focus({preventScroll:!0})))}let m=oe();function S(){let s=r(e.panel);if(!s)return;function u(){H(m.value,{[w.Forwards]:()=>{var n;B(s,C.First)===Q.Error&&((n=r(e.afterPanelSentinel))==null||n.focus())},[w.Backwards]:()=>{var i;(i=r(e.button))==null||i.focus({preventScroll:!0})}})}u()}function I(){let s=r(e.panel);if(!s)return;function u(){H(m.value,{[w.Forwards]:()=>{let i=r(e.button),n=r(e.panel);if(!i)return;let v=X(),o=v.indexOf(i),a=v.slice(0,o+1),E=[...v.slice(o+1),...a];for(let N of E.slice())if(N.dataset.headlessuiFocusGuard==="true"||n!=null&&n.contains(N)){let $=E.indexOf(N);$!==-1&&E.splice($,1)}B(E,C.First,{sorted:!1})},[w.Backwards]:()=>{var n;B(s,C.Previous)===Q.Error&&((n=r(e.button))==null||n.focus())}})}u()}return()=>{let s={open:e.popoverState.value===0,close:e.close},{id:u,focus:i,...n}=P,v={ref:e.panel,id:u,onKeydown:M,onFocusout:t&&e.popoverState.value===0?l:void 0,tabIndex:-1};return G({ourProps:v,theirProps:{...b,...n},attrs:b,slot:s,slots:{...p,default:(...o)=>{var a;return[R(j,[y.value&&e.isPortalled.value&&R(z,{id:d,ref:e.beforePanelSentinel,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:S}),(a=p.default)==null?void 0:a.call(p,...o),y.value&&e.isPortalled.value&&R(z,{id:O,ref:e.afterPanelSentinel,features:J.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:I})])]}},features:W.RenderStrategy|W.Static,visible:y.value,name:"PopoverPanel"})}}}),Ae=K({name:"PopoverGroup",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"}},setup(P,{attrs:b,slots:p,expose:h}){let t=F(null),e=ie([]),c=T(()=>A(t)),d=ce();h({el:t,$el:t});function O(l){let m=e.value.indexOf(l);m!==-1&&e.value.splice(m,1)}function f(l){return e.value.push(l),()=>{O(l)}}function y(){var S;let l=c.value;if(!l)return!1;let m=l.activeElement;return(S=r(t))!=null&&S.contains(m)?!0:e.value.some(I=>{var s,u;return((s=l.getElementById(I.buttonId.value))==null?void 0:s.contains(m))||((u=l.getElementById(I.panelId.value))==null?void 0:u.contains(m))})}function M(l){for(let m of e.value)m.buttonId.value!==l&&m.close()}return U(le,{registerPopover:f,unregisterPopover:O,isFocusWithinPopoverGroup:y,closeOthers:M,mainTreeNodeRef:d.mainTreeNodeRef}),()=>R(j,[G({ourProps:{ref:t},theirProps:{...P,...b},slot:{},attrs:b,slots:p,name:"PopoverGroup"}),R(d.MainTreeNode)])}});export{ye as Popover,Ge as PopoverButton,Ae as PopoverGroup,$e as PopoverOverlay,je as PopoverPanel};

dist/components/portal/portal.d.ts

@@ -1,2 +0,2 @@
-import { PropType } from 'vue';
+import { type PropType, type Ref } from 'vue';
 export declare let Portal: import("vue").DefineComponent<{
@@ -17,2 +17,5 @@ as: {
 }>;
+export declare function useNestedPortals(): readonly [Ref<HTMLElement[]>, import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>];
 export declare let PortalGroup: import("vue").DefineComponent<{
@@ -31,3 +34,3 @@ as: {
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -34,0 +37,0 @@ type: (ObjectConstructor | StringConstructor)[];

dist/components/portal/portal.js

@@ -1,1 +0,1 @@
-import{Teleport as P,defineComponent as s,h as y,inject as T,onUnmounted as h,provide as E,reactive as w,ref as f,watchEffect as C,computed as b}from"vue";import{render as d}from"../../utils/render.js";import{usePortalRoot as j}from"../../internal/portal-force-root.js";import{getOwnerDocument as c}from"../../utils/owner.js";function v(r){let t=c(r);if(!t)throw new Error(`[Headless UI]: Cannot find ownerDocument for contextElement: ${r}`);let l=t.getElementById("headlessui-portal-root");if(l)return l;let e=t.createElement("div");return e.setAttribute("id","headlessui-portal-root"),t.body.appendChild(e)}let R=s({name:"Portal",props:{as:{type:[Object,String],default:"div"}},setup(r,{slots:t,attrs:l}){let e=f(null),p=b(()=>c(e)),n=j(),u=T(g,null),o=f(n===!0||u==null?v(e.value):u.resolveTarget());return C(()=>{n||u!=null&&(o.value=u.resolveTarget())}),h(()=>{var i,m;let a=(i=p.value)==null?void 0:i.getElementById("headlessui-portal-root");!a||o.value===a&&o.value.children.length<=0&&((m=o.value.parentElement)==null||m.removeChild(o.value))}),()=>{if(o.value===null)return null;let a={ref:e};return y(P,{to:o.value},d({props:{...r,...a},slot:{},attrs:l,slots:t,name:"Portal"}))}}}),g=Symbol("PortalGroupContext"),L=s({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup(r,{attrs:t,slots:l}){let e=w({resolveTarget(){return r.target}});return E(g,e),()=>{let{target:p,...n}=r;return d({props:n,slot:{},attrs:t,slots:l,name:"PortalGroup"})}}});export{R as Portal,L as PortalGroup};
+import{Teleport as M,computed as L,defineComponent as s,getCurrentInstance as j,h as w,inject as f,onMounted as I,onUnmounted as y,provide as T,reactive as b,ref as p,watch as R,watchEffect as G}from"vue";import{usePortalRoot as O}from'../../internal/portal-force-root.js';import{dom as D}from'../../utils/dom.js';import{getOwnerDocument as E}from'../../utils/owner.js';import{render as h}from'../../utils/render.js';function x(r){let e=E(r);if(!e){if(r===null)return null;throw new Error(`[Headless UI]: Cannot find ownerDocument for contextElement: ${r}`)}let u=e.getElementById("headlessui-portal-root");if(u)return u;let t=e.createElement("div");return t.setAttribute("id","headlessui-portal-root"),e.body.appendChild(t)}let _=s({name:"Portal",props:{as:{type:[Object,String],default:"div"}},setup(r,{slots:e,attrs:u}){let t=p(null),i=L(()=>E(t)),l=O(),n=f(C,null),o=p(l===!0||n==null?x(t.value):n.resolveTarget()),d=p(!1);I(()=>{d.value=!0}),G(()=>{l||n!=null&&(o.value=n.resolveTarget())});let c=f(m,null),v=!1,H=j();return R(t,()=>{if(v||!c)return;let a=D(t);a&&(y(c.register(a),H),v=!0)}),y(()=>{var g,P;let a=(g=i.value)==null?void 0:g.getElementById("headlessui-portal-root");a&&o.value===a&&o.value.children.length<=0&&((P=o.value.parentElement)==null||P.removeChild(o.value))}),()=>{if(!d.value||o.value===null)return null;let a={ref:t,"data-headlessui-portal":""};return w(M,{to:o.value},h({ourProps:a,theirProps:r,slot:{},attrs:u,slots:e,name:"Portal"}))}}}),m=Symbol("PortalParentContext");function A(){let r=f(m,null),e=p([]);function u(l){return e.value.push(l),r&&r.register(l),()=>t(l)}function t(l){let n=e.value.indexOf(l);n!==-1&&e.value.splice(n,1),r&&r.unregister(l)}let i={register:u,unregister:t,portals:e};return[e,s({name:"PortalWrapper",setup(l,{slots:n}){return T(m,i),()=>{var o;return(o=n.default)==null?void 0:o.call(n)}}})]}let C=Symbol("PortalGroupContext"),N=s({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup(r,{attrs:e,slots:u}){let t=b({resolveTarget(){return r.target}});return T(C,t),()=>{let{target:i,...l}=r;return h({theirProps:l,ourProps:{},slot:{},attrs:e,slots:u,name:"PortalGroup"})}}});export{_ as Portal,N as PortalGroup,A as useNestedPortals};

dist/components/radio-group/radio-group.d.ts

@@ -0,1 +1,2 @@
+declare function defaultComparator<T>(a: T, z: T): boolean;
 export declare let RadioGroup: import("vue").DefineComponent<{
@@ -10,5 +11,18 @@ as: {
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
+    defaultValue: {
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -18,2 +32,6 @@ type: StringConstructor;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -32,5 +50,18 @@ [key: string]: any;
     };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: () => typeof defaultComparator;
+    };
     modelValue: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
+    defaultValue: {
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -40,7 +71,15 @@ type: StringConstructor;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((_value: any) => any) | undefined;
 }, {
+    id: string;
     as: string | Record<string, any>;
     disabled: boolean;
+    by: string | Function;
+    modelValue: string | number | boolean | Record<string, any>;
+    defaultValue: string | number | boolean | Record<string, any>;
 }>;
@@ -53,3 +92,3 @@ export declare let RadioGroupOption: import("vue").DefineComponent<{
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
     };
@@ -60,2 +99,6 @@ disabled: {
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -65,3 +108,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -72,3 +115,3 @@ type: (ObjectConstructor | StringConstructor)[];
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
     };
@@ -79,3 +122,8 @@ disabled: {
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -93,2 +141,6 @@ disabled: boolean;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -98,3 +150,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -108,5 +160,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    passive: boolean;
+    id: string;
     as: string | Record<string, any>;
-    passive: boolean;
 }>;
@@ -118,2 +175,6 @@ export declare let RadioGroupDescription: import("vue").DefineComponent<{
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -123,3 +184,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -129,4 +190,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
 }>;
+export {};

dist/components/radio-group/radio-group.js

@@ -1,1 +0,1 @@
-import{Fragment as j,computed as p,defineComponent as S,h as T,inject as H,onMounted as K,onUnmounted as M,provide as N,ref as O,toRaw as b}from"vue";import{dom as V}from"../../utils/dom.js";import{Keys as R}from"../../keyboard.js";import{focusIn as A,Focus as y,FocusResult as D,sortByDomNode as $}from"../../utils/focus-management.js";import{useId as L}from"../../hooks/use-id.js";import{compact as U,omit as _,render as F}from"../../utils/render.js";import{Label as W,useLabels as C}from"../label/label.js";import{Description as J,useDescriptions as x}from"../description/description.js";import{useTreeWalker as q}from"../../hooks/use-tree-walker.js";import{VisuallyHidden as z}from"../../internal/visually-hidden.js";import{attemptSubmit as Q,objectToFormEntries as X}from"../../utils/form.js";import{getOwnerDocument as G}from"../../utils/owner.js";let I=Symbol("RadioGroupContext");function P(i){let v=H(I,null);if(v===null){let n=new Error(`<${i} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,P),n}return v}let me=S({name:"RadioGroup",emits:{"update:modelValue":i=>!0},props:{as:{type:[Object,String],default:"div"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean]},name:{type:String,optional:!0}},inheritAttrs:!1,setup(i,{emit:v,attrs:n,slots:h,expose:s}){let u=O(null),o=O([]),E=C({name:"RadioGroupLabel"}),m=x({name:"RadioGroupDescription"});s({el:u,$el:u});let g=p(()=>i.modelValue),f={options:o,value:g,disabled:p(()=>i.disabled),firstOption:p(()=>o.value.find(e=>!e.propsRef.disabled)),containsCheckedOption:p(()=>o.value.some(e=>b(e.propsRef.value)===b(i.modelValue))),change(e){var t;if(i.disabled||g.value===e)return!1;let r=(t=o.value.find(l=>b(l.propsRef.value)===b(e)))==null?void 0:t.propsRef;return r!=null&&r.disabled?!1:(v("update:modelValue",e),!0)},registerOption(e){o.value.push(e),o.value=$(o.value,r=>r.element)},unregisterOption(e){let r=o.value.findIndex(t=>t.id===e);r!==-1&&o.value.splice(r,1)}};N(I,f),q({container:p(()=>V(u)),accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});function k(e){if(!u.value||!u.value.contains(e.target))return;let r=o.value.filter(t=>t.propsRef.disabled===!1).map(t=>t.element);switch(e.key){case R.Enter:Q(e.currentTarget);break;case R.ArrowLeft:case R.ArrowUp:if(e.preventDefault(),e.stopPropagation(),A(r,y.Previous|y.WrapAround)===D.Success){let l=o.value.find(d=>{var a;return d.element===((a=G(u))==null?void 0:a.activeElement)});l&&f.change(l.propsRef.value)}break;case R.ArrowRight:case R.ArrowDown:if(e.preventDefault(),e.stopPropagation(),A(r,y.Next|y.WrapAround)===D.Success){let l=o.value.find(d=>{var a;return d.element===((a=G(d.element))==null?void 0:a.activeElement)});l&&f.change(l.propsRef.value)}break;case R.Space:{e.preventDefault(),e.stopPropagation();let t=o.value.find(l=>{var d;return l.element===((d=G(l.element))==null?void 0:d.activeElement)});t&&f.change(t.propsRef.value)}break}}let c=`headlessui-radiogroup-${L()}`;return()=>{let{modelValue:e,disabled:r,name:t,...l}=i,d={ref:u,id:c,role:"radiogroup","aria-labelledby":E.value,"aria-describedby":m.value,onKeydown:k};return T(j,[...t!=null&&e!=null?X({[t]:e}).map(([a,w])=>T(z,U({key:a,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:a,value:w}))):[],F({props:{...n,...l,...d},slot:{},attrs:n,slots:h,name:"RadioGroup"})])}}});var Y=(n=>(n[n.Empty=1]="Empty",n[n.Active=2]="Active",n))(Y||{});let ve=S({name:"RadioGroupOption",props:{as:{type:[Object,String],default:"div"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1}},setup(i,{attrs:v,slots:n,expose:h}){let s=P("RadioGroupOption"),u=`headlessui-radiogroup-option-${L()}`,o=C({name:"RadioGroupLabel"}),E=x({name:"RadioGroupDescription"}),m=O(null),g=p(()=>({value:i.value,disabled:i.disabled})),f=O(1);h({el:m,$el:m}),K(()=>s.registerOption({id:u,element:m,propsRef:g})),M(()=>s.unregisterOption(u));let k=p(()=>{var a;return((a=s.firstOption.value)==null?void 0:a.id)===u}),c=p(()=>s.disabled.value||i.disabled),e=p(()=>b(s.value.value)===b(i.value)),r=p(()=>c.value?-1:e.value||!s.containsCheckedOption.value&&k.value?0:-1);function t(){var a;!s.change(i.value)||(f.value|=2,(a=m.value)==null||a.focus())}function l(){f.value|=2}function d(){f.value&=-3}return()=>{let a=_(i,["value","disabled"]),w={checked:e.value,disabled:c.value,active:Boolean(f.value&2)},B={id:u,ref:m,role:"radio","aria-checked":e.value?"true":"false","aria-labelledby":o.value,"aria-describedby":E.value,"aria-disabled":c.value?!0:void 0,tabIndex:r.value,onClick:c.value?void 0:t,onFocus:c.value?void 0:l,onBlur:c.value?void 0:d};return F({props:{...a,...B},slot:w,attrs:v,slots:n,name:"RadioGroupOption"})}}}),be=W,Re=J;export{me as RadioGroup,Re as RadioGroupDescription,be as RadioGroupLabel,ve as RadioGroupOption};
+import{Fragment as M,computed as o,defineComponent as A,h as F,inject as _,onMounted as C,onUnmounted as $,provide as U,ref as h,toRaw as y,watch as W}from"vue";import{useControllable as J}from'../../hooks/use-controllable.js';import{useId as D}from'../../hooks/use-id.js';import{useTreeWalker as q}from'../../hooks/use-tree-walker.js';import{Hidden as Q,Features as X}from'../../internal/hidden.js';import{Keys as g}from'../../keyboard.js';import{dom as O}from'../../utils/dom.js';import{Focus as k,FocusResult as x,focusIn as I,sortByDomNode as Y}from'../../utils/focus-management.js';import{attemptSubmit as Z,objectToFormEntries as z}from'../../utils/form.js';import{getOwnerDocument as L}from'../../utils/owner.js';import{compact as ee,omit as te,render as P}from'../../utils/render.js';import{Description as ae,useDescriptions as B}from'../description/description.js';import{Label as ne,useLabels as V}from'../label/label.js';function re(t,c){return t===c}let j=Symbol("RadioGroupContext");function H(t){let c=_(j,null);if(c===null){let u=new Error(`<${t} /> is missing a parent <RadioGroup /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(u,H),u}return c}let ge=A({name:"RadioGroup",emits:{"update:modelValue":t=>!0},props:{as:{type:[Object,String],default:"div"},disabled:{type:[Boolean],default:!1},by:{type:[String,Function],default:()=>re},modelValue:{type:[Object,String,Number,Boolean],default:void 0},defaultValue:{type:[Object,String,Number,Boolean],default:void 0},form:{type:String,optional:!0},name:{type:String,optional:!0},id:{type:String,default:()=>`headlessui-radiogroup-${D()}`}},inheritAttrs:!1,setup(t,{emit:c,attrs:u,slots:E,expose:d}){let s=h(null),i=h([]),R=V({name:"RadioGroupLabel"}),w=B({name:"RadioGroupDescription"});d({el:s,$el:s});let[f,S]=J(o(()=>t.modelValue),e=>c("update:modelValue",e),o(()=>t.defaultValue)),p={options:i,value:f,disabled:o(()=>t.disabled),firstOption:o(()=>i.value.find(e=>!e.propsRef.disabled)),containsCheckedOption:o(()=>i.value.some(e=>p.compare(y(e.propsRef.value),y(t.modelValue)))),compare(e,a){if(typeof t.by=="string"){let n=t.by;return(e==null?void 0:e[n])===(a==null?void 0:a[n])}return t.by(e,a)},change(e){var n;if(t.disabled||p.compare(y(f.value),y(e)))return!1;let a=(n=i.value.find(l=>p.compare(y(l.propsRef.value),y(e))))==null?void 0:n.propsRef;return a!=null&&a.disabled?!1:(S(e),!0)},registerOption(e){i.value.push(e),i.value=Y(i.value,a=>a.element)},unregisterOption(e){let a=i.value.findIndex(n=>n.id===e);a!==-1&&i.value.splice(a,1)}};U(j,p),q({container:o(()=>O(s)),accept(e){return e.getAttribute("role")==="radio"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});function m(e){if(!s.value||!s.value.contains(e.target))return;let a=i.value.filter(n=>n.propsRef.disabled===!1).map(n=>n.element);switch(e.key){case g.Enter:Z(e.currentTarget);break;case g.ArrowLeft:case g.ArrowUp:if(e.preventDefault(),e.stopPropagation(),I(a,k.Previous|k.WrapAround)===x.Success){let l=i.value.find(r=>{var b;return r.element===((b=L(s))==null?void 0:b.activeElement)});l&&p.change(l.propsRef.value)}break;case g.ArrowRight:case g.ArrowDown:if(e.preventDefault(),e.stopPropagation(),I(a,k.Next|k.WrapAround)===x.Success){let l=i.value.find(r=>{var b;return r.element===((b=L(r.element))==null?void 0:b.activeElement)});l&&p.change(l.propsRef.value)}break;case g.Space:{e.preventDefault(),e.stopPropagation();let n=i.value.find(l=>{var r;return l.element===((r=L(l.element))==null?void 0:r.activeElement)});n&&p.change(n.propsRef.value)}break}}let v=o(()=>{var e;return(e=O(s))==null?void 0:e.closest("form")});return C(()=>{W([v],()=>{if(!v.value||t.defaultValue===void 0)return;function e(){p.change(t.defaultValue)}return v.value.addEventListener("reset",e),()=>{var a;(a=v.value)==null||a.removeEventListener("reset",e)}},{immediate:!0})}),()=>{let{disabled:e,name:a,id:n,form:l,...r}=t,b={ref:s,id:n,role:"radiogroup","aria-labelledby":R.value,"aria-describedby":w.value,onKeydown:m};return F(M,[...a!=null&&f.value!=null?z({[a]:f.value}).map(([T,G])=>F(Q,ee({features:X.Hidden,key:T,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:l,disabled:e,name:T,value:G}))):[],P({ourProps:b,theirProps:{...u,...te(r,["modelValue","defaultValue","by"])},slot:{},attrs:u,slots:E,name:"RadioGroup"})])}}});var ie=(u=>(u[u.Empty=1]="Empty",u[u.Active=2]="Active",u))(ie||{});let he=A({name:"RadioGroupOption",props:{as:{type:[Object,String],default:"div"},value:{type:[Object,String,Number,Boolean]},disabled:{type:Boolean,default:!1},id:{type:String,default:()=>`headlessui-radiogroup-option-${D()}`}},setup(t,{attrs:c,slots:u,expose:E}){let d=H("RadioGroupOption"),s=V({name:"RadioGroupLabel"}),i=B({name:"RadioGroupDescription"}),R=h(null),w=o(()=>({value:t.value,disabled:t.disabled})),f=h(1);E({el:R,$el:R});let S=o(()=>O(R));C(()=>d.registerOption({id:t.id,element:S,propsRef:w})),$(()=>d.unregisterOption(t.id));let p=o(()=>{var r;return((r=d.firstOption.value)==null?void 0:r.id)===t.id}),m=o(()=>d.disabled.value||t.disabled),v=o(()=>d.compare(y(d.value.value),y(t.value))),e=o(()=>m.value?-1:v.value||!d.containsCheckedOption.value&&p.value?0:-1);function a(){var r;d.change(t.value)&&(f.value|=2,(r=O(R))==null||r.focus())}function n(){f.value|=2}function l(){f.value&=-3}return()=>{let{id:r,value:b,disabled:T,...G}=t,N={checked:v.value,disabled:m.value,active:!!(f.value&2)},K={id:r,ref:R,role:"radio","aria-checked":v.value?"true":"false","aria-labelledby":s.value,"aria-describedby":i.value,"aria-disabled":m.value?!0:void 0,tabIndex:e.value,onClick:m.value?void 0:a,onFocus:m.value?void 0:n,onBlur:m.value?void 0:l};return P({ourProps:K,theirProps:G,slot:N,attrs:c,slots:u,name:"RadioGroupOption"})}}}),Oe=ne,ke=ae;export{ge as RadioGroup,ke as RadioGroupDescription,Oe as RadioGroupLabel,he as RadioGroupOption};

dist/components/switch/switch.d.ts

@@ -10,3 +10,3 @@ export declare let SwitchGroup: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -26,4 +26,12 @@ type: (ObjectConstructor | StringConstructor)[];
         type: BooleanConstructor;
-        default: boolean;
+        default: undefined;
     };
+    defaultChecked: {
+        type: BooleanConstructor;
+        optional: boolean;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -37,2 +45,14 @@ type: StringConstructor;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tabIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -49,4 +69,12 @@ [key: string]: any;
         type: BooleanConstructor;
-        default: boolean;
+        default: undefined;
     };
+    defaultChecked: {
+        type: BooleanConstructor;
+        optional: boolean;
+    };
+    form: {
+        type: StringConstructor;
+        optional: boolean;
+    };
     name: {
@@ -60,7 +88,23 @@ type: StringConstructor;
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tabIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
 }, {
+    id: string;
+    tabIndex: number;
     as: string | Record<string, any>;
+    disabled: boolean;
     modelValue: boolean;
+    defaultChecked: boolean;
 }>;
@@ -76,2 +120,6 @@ export declare let SwitchLabel: import("vue").DefineComponent<{
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -81,3 +129,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -91,5 +139,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    passive: boolean;
+    id: string;
     as: string | Record<string, any>;
-    passive: boolean;
 }>;
@@ -101,2 +154,6 @@ export declare let SwitchDescription: import("vue").DefineComponent<{
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -106,3 +163,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -112,4 +169,9 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
 }>;

dist/components/switch/switch.js

@@ -1,1 +0,1 @@
-import{Fragment as x,computed as C,defineComponent as s,h as d,inject as E,provide as L,ref as f}from"vue";import{render as m,compact as V}from"../../utils/render.js";import{useId as j}from"../../hooks/use-id.js";import{Keys as y}from"../../keyboard.js";import{Label as G,useLabels as I}from"../label/label.js";import{Description as T,useDescriptions as B}from"../description/description.js";import{useResolveButtonType as H}from"../../hooks/use-resolve-button-type.js";import{VisuallyHidden as M}from"../../internal/visually-hidden.js";import{attemptSubmit as O}from"../../utils/form.js";let b=Symbol("GroupContext"),W=s({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup(l,{slots:a,attrs:i}){let n=f(null),u=I({name:"SwitchLabel",props:{onClick(){!n.value||(n.value.click(),n.value.focus({preventScroll:!0}))}}}),t=B({name:"SwitchDescription"});return L(b,{switchRef:n,labelledby:u,describedby:t}),()=>m({props:l,slot:{},slots:a,attrs:i,name:"SwitchGroup"})}}),X=s({name:"Switch",emits:{"update:modelValue":l=>!0},props:{as:{type:[Object,String],default:"button"},modelValue:{type:Boolean,default:!1},name:{type:String,optional:!0},value:{type:String,optional:!0}},inheritAttrs:!1,setup(l,{emit:a,attrs:i,slots:n,expose:u}){let t=E(b,null),p=`headlessui-switch-${j()}`;function c(){a("update:modelValue",!l.modelValue)}let h=f(null),o=t===null?h:t.switchRef,S=H(C(()=>({as:l.as,type:i.type})),o);u({el:o,$el:o});function w(e){e.preventDefault(),c()}function v(e){e.key===y.Space?(e.preventDefault(),c()):e.key===y.Enter&&O(e.currentTarget)}function g(e){e.preventDefault()}return()=>{let{name:e,value:R,modelValue:r,...k}=l,D={checked:r},K={id:p,ref:o,role:"switch",type:S.value,tabIndex:0,"aria-checked":r,"aria-labelledby":t==null?void 0:t.labelledby.value,"aria-describedby":t==null?void 0:t.describedby.value,onClick:w,onKeyup:v,onKeypress:g};return d(x,[e!=null&&r!=null?d(M,V({as:"input",type:"checkbox",hidden:!0,readOnly:!0,checked:r,name:e,value:R})):null,m({props:{...i,...k,...K},slot:D,attrs:i,slots:n,name:"Switch"})])}}}),Y=G,Z=T;export{X as Switch,Z as SwitchDescription,W as SwitchGroup,Y as SwitchLabel};
+import{Fragment as B,computed as d,defineComponent as y,h as b,inject as H,onMounted as M,provide as I,ref as v,watch as P}from"vue";import{useControllable as j}from'../../hooks/use-controllable.js';import{useId as G}from'../../hooks/use-id.js';import{useResolveButtonType as V}from'../../hooks/use-resolve-button-type.js';import{Hidden as F,Features as O}from'../../internal/hidden.js';import{Keys as S}from'../../keyboard.js';import{dom as A}from'../../utils/dom.js';import{attemptSubmit as N}from'../../utils/form.js';import{compact as $,omit as U,render as w}from'../../utils/render.js';import{Description as _,useDescriptions as q}from'../description/description.js';import{Label as z,useLabels as J}from'../label/label.js';let g=Symbol("GroupContext"),ie=y({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup(l,{slots:p,attrs:o}){let a=v(null),f=J({name:"SwitchLabel",props:{htmlFor:d(()=>{var n;return(n=a.value)==null?void 0:n.id}),onClick(n){a.value&&(n.currentTarget.tagName==="LABEL"&&n.preventDefault(),a.value.click(),a.value.focus({preventScroll:!0}))}}}),t=q({name:"SwitchDescription"});return I(g,{switchRef:a,labelledby:f,describedby:t}),()=>w({theirProps:l,ourProps:{},slot:{},slots:p,attrs:o,name:"SwitchGroup"})}}),oe=y({name:"Switch",emits:{"update:modelValue":l=>!0},props:{as:{type:[Object,String],default:"button"},modelValue:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,optional:!0},form:{type:String,optional:!0},name:{type:String,optional:!0},value:{type:String,optional:!0},id:{type:String,default:()=>`headlessui-switch-${G()}`},disabled:{type:Boolean,default:!1},tabIndex:{type:Number,default:0}},inheritAttrs:!1,setup(l,{emit:p,attrs:o,slots:a,expose:f}){let t=H(g,null),[i,n]=j(d(()=>l.modelValue),e=>p("update:modelValue",e),d(()=>l.defaultChecked));function s(){n(!i.value)}let k=v(null),u=t===null?k:t.switchRef,C=V(d(()=>({as:l.as,type:o.type})),u);f({el:u,$el:u});function E(e){e.preventDefault(),s()}function L(e){e.key===S.Space?(e.preventDefault(),s()):e.key===S.Enter&&N(e.currentTarget)}function D(e){e.preventDefault()}let c=d(()=>{var e,r;return(r=(e=A(u))==null?void 0:e.closest)==null?void 0:r.call(e,"form")});return M(()=>{P([c],()=>{if(!c.value||l.defaultChecked===void 0)return;function e(){n(l.defaultChecked)}return c.value.addEventListener("reset",e),()=>{var r;(r=c.value)==null||r.removeEventListener("reset",e)}},{immediate:!0})}),()=>{let{id:e,name:r,value:R,form:x,tabIndex:m,...h}=l,K={checked:i.value},T={id:e,ref:u,role:"switch",type:C.value,tabIndex:m===-1?0:m,"aria-checked":i.value,"aria-labelledby":t==null?void 0:t.labelledby.value,"aria-describedby":t==null?void 0:t.describedby.value,onClick:E,onKeyup:L,onKeypress:D};return b(B,[r!=null&&i.value!=null?b(F,$({features:O.Hidden,as:"input",type:"checkbox",hidden:!0,readOnly:!0,checked:i.value,form:x,disabled:h.disabled,name:r,value:R})):null,w({ourProps:T,theirProps:{...o,...U(h,["modelValue","defaultChecked"])},slot:K,attrs:o,slots:a,name:"Switch"})])}}}),ue=z,de=_;export{oe as Switch,de as SwitchDescription,ie as SwitchGroup,ue as SwitchLabel};

dist/components/tabs/tabs.d.ts

@@ -65,3 +65,3 @@ export declare let TabGroup: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -83,2 +83,6 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -88,3 +92,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -98,3 +102,8 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
 }>>, {
+    id: string;
     as: string | Record<string, any>;
@@ -112,3 +121,3 @@ disabled: boolean;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -134,2 +143,10 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    tabIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -139,3 +156,3 @@ [key: string]: any;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -153,3 +170,13 @@ type: (ObjectConstructor | StringConstructor)[];
     };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    tabIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
+    id: string;
+    tabIndex: number;
     as: string | Record<string, any>;
@@ -156,0 +183,0 @@ unmount: boolean;

dist/components/tabs/tabs.js

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

dist/components/transitions/transition.d.ts

@@ -50,3 +50,3 @@ export declare let TransitionChild: import("vue").DefineComponent<{
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     beforeEnter: () => true;
@@ -168,3 +168,3 @@ afterEnter: () => true;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     beforeEnter: () => true;
@@ -171,0 +171,0 @@ afterEnter: () => true;

dist/components/transitions/transition.js

@@ -1,1 +0,1 @@
-import{computed as y,defineComponent as D,h as I,inject as L,onMounted as T,onUnmounted as A,provide as H,ref as g,watch as X,watchEffect as E}from"vue";import{useId as Y}from"../../hooks/use-id.js";import{match as V}from"../../utils/match.js";import{Features as Z,omit as ee,render as P,RenderStrategy as f}from"../../utils/render.js";import{Reason as j,transition as M}from"./utils/transition.js";import{dom as U}from"../../utils/dom.js";import{useOpenClosedProvider as te,State as w,useOpenClosed as ne,hasOpenClosed as re}from"../../internal/open-closed.js";function d(e=""){return e.split(" ").filter(t=>t.trim().length>1)}let F=Symbol("TransitionContext");var ae=(a=>(a.Visible="visible",a.Hidden="hidden",a))(ae||{});function le(){return L(F,null)!==null}function ie(){let e=L(F,null);if(e===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return e}function se(){let e=L(R,null);if(e===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return e}let R=Symbol("NestingContext");function x(e){return"children"in e?x(e.children):e.value.filter(({state:t})=>t==="visible").length>0}function K(e){let t=g([]),a=g(!1);T(()=>a.value=!0),A(()=>a.value=!1);function s(r,n=f.Hidden){let l=t.value.findIndex(({id:i})=>i===r);l!==-1&&(V(n,{[f.Unmount](){t.value.splice(l,1)},[f.Hidden](){t.value[l].state="hidden"}}),!x(t)&&a.value&&(e==null||e()))}function v(r){let n=t.value.find(({id:l})=>l===r);return n?n.state!=="visible"&&(n.state="visible"):t.value.push({id:r,state:"visible"}),()=>s(r,f.Unmount)}return{children:t,register:v,unregister:s}}let _=Z.RenderStrategy,oe=D({props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:v}){if(!le()&&re())return()=>I(fe,{...e,onBeforeEnter:()=>t("beforeEnter"),onAfterEnter:()=>t("afterEnter"),onBeforeLeave:()=>t("beforeLeave"),onAfterLeave:()=>t("afterLeave")},s);let r=g(null),n=g("visible"),l=y(()=>e.unmount?f.Unmount:f.Hidden);v({el:r,$el:r});let{show:i,appear:h}=ie(),{register:c,unregister:p}=se(),B={value:!0},m=Y(),S={value:!1},N=K(()=>{S.value||(n.value="hidden",p(m),t("afterLeave"))});T(()=>{let o=c(m);A(o)}),E(()=>{if(l.value===f.Hidden&&!!m){if(i&&n.value!=="visible"){n.value="visible";return}V(n.value,{["hidden"]:()=>p(m),["visible"]:()=>c(m)})}});let k=d(e.enter),$=d(e.enterFrom),q=d(e.enterTo),O=d(e.entered),z=d(e.leave),G=d(e.leaveFrom),J=d(e.leaveTo);T(()=>{E(()=>{if(n.value==="visible"){let o=U(r);if(o instanceof Comment&&o.data==="")throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}})});function Q(o){let C=B.value&&!h.value,u=U(r);!u||!(u instanceof HTMLElement)||C||(S.value=!0,i.value&&t("beforeEnter"),i.value||t("beforeLeave"),o(i.value?M(u,k,$,q,O,b=>{S.value=!1,b===j.Finished&&t("afterEnter")}):M(u,z,G,J,O,b=>{S.value=!1,b===j.Finished&&(x(N)||(n.value="hidden",p(m),t("afterLeave")))})))}return T(()=>{X([i,h],(o,C,u)=>{Q(u),B.value=!1},{immediate:!0})}),H(R,N),te(y(()=>V(n.value,{["visible"]:w.Open,["hidden"]:w.Closed}))),()=>{let{appear:o,show:C,enter:u,enterFrom:b,enterTo:de,entered:ve,leave:pe,leaveFrom:me,leaveTo:Te,...W}=e;return P({props:{...W,...{ref:r}},slot:{},slots:s,attrs:a,features:_,visible:n.value==="visible",name:"TransitionChild"})}}}),ue=oe,fe=D({inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let v=ne(),r=y(()=>e.show===null&&v!==null?V(v.value,{[w.Open]:!0,[w.Closed]:!1}):e.show);E(()=>{if(![!0,!1].includes(r.value))throw new Error('A <Transition /> is used but it is missing a `:show="true | false"` prop.')});let n=g(r.value?"visible":"hidden"),l=K(()=>{n.value="hidden"}),i={value:!0},h={show:r,appear:y(()=>e.appear||!i.value)};return T(()=>{E(()=>{i.value=!1,r.value?n.value="visible":x(l)||(n.value="hidden")})}),H(R,l),H(F,h),()=>{let c=ee(e,["show","appear","unmount"]),p={unmount:e.unmount};return P({props:{...p,as:"template"},slot:{},slots:{...s,default:()=>[I(ue,{onBeforeEnter:()=>t("beforeEnter"),onAfterEnter:()=>t("afterEnter"),onBeforeLeave:()=>t("beforeLeave"),onAfterLeave:()=>t("afterLeave"),...a,...p,...c},s.default)]},attrs:{},features:_,visible:n.value==="visible",name:"Transition"})}}});export{oe as TransitionChild,fe as TransitionRoot};
+import{computed as w,defineComponent as K,h as k,inject as F,normalizeClass as ae,onMounted as C,onUnmounted as z,provide as B,ref as m,watch as le,watchEffect as x}from"vue";import{useId as ie}from'../../hooks/use-id.js';import{State as u,hasOpenClosed as se,useOpenClosed as oe,useOpenClosedProvider as ue}from'../../internal/open-closed.js';import{dom as $}from'../../utils/dom.js';import{env as fe}from'../../utils/env.js';import{match as O}from'../../utils/match.js';import{Features as de,RenderStrategy as T,omit as ve,render as q}from'../../utils/render.js';import{Reason as G,transition as J}from'./utils/transition.js';function g(e=""){return e.split(/\s+/).filter(t=>t.length>1)}let R=Symbol("TransitionContext");var pe=(a=>(a.Visible="visible",a.Hidden="hidden",a))(pe||{});function me(){return F(R,null)!==null}function Te(){let e=F(R,null);if(e===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return e}function ge(){let e=F(N,null);if(e===null)throw new Error("A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.");return e}let N=Symbol("NestingContext");function L(e){return"children"in e?L(e.children):e.value.filter(({state:t})=>t==="visible").length>0}function Q(e){let t=m([]),a=m(!1);C(()=>a.value=!0),z(()=>a.value=!1);function s(n,r=T.Hidden){let l=t.value.findIndex(({id:f})=>f===n);l!==-1&&(O(r,{[T.Unmount](){t.value.splice(l,1)},[T.Hidden](){t.value[l].state="hidden"}}),!L(t)&&a.value&&(e==null||e()))}function h(n){let r=t.value.find(({id:l})=>l===n);return r?r.state!=="visible"&&(r.state="visible"):t.value.push({id:n,state:"visible"}),()=>s(n,T.Unmount)}return{children:t,register:h,unregister:s}}let W=de.RenderStrategy,he=K({props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:h}){let n=m(0);function r(){n.value|=u.Opening,t("beforeEnter")}function l(){n.value&=~u.Opening,t("afterEnter")}function f(){n.value|=u.Closing,t("beforeLeave")}function S(){n.value&=~u.Closing,t("afterLeave")}if(!me()&&se())return()=>k(Se,{...e,onBeforeEnter:r,onAfterEnter:l,onBeforeLeave:f,onAfterLeave:S},s);let d=m(null),y=w(()=>e.unmount?T.Unmount:T.Hidden);h({el:d,$el:d});let{show:v,appear:A}=Te(),{register:D,unregister:H}=ge(),i=m(v.value?"visible":"hidden"),I={value:!0},c=ie(),b={value:!1},P=Q(()=>{!b.value&&i.value!=="hidden"&&(i.value="hidden",H(c),S())});C(()=>{let o=D(c);z(o)}),x(()=>{if(y.value===T.Hidden&&c){if(v.value&&i.value!=="visible"){i.value="visible";return}O(i.value,{["hidden"]:()=>H(c),["visible"]:()=>D(c)})}});let j=g(e.enter),M=g(e.enterFrom),X=g(e.enterTo),_=g(e.entered),Y=g(e.leave),Z=g(e.leaveFrom),ee=g(e.leaveTo);C(()=>{x(()=>{if(i.value==="visible"){let o=$(d);if(o instanceof Comment&&o.data==="")throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}})});function te(o){let E=I.value&&!A.value,p=$(d);!p||!(p instanceof HTMLElement)||E||(b.value=!0,v.value&&r(),v.value||f(),o(v.value?J(p,j,M,X,_,V=>{b.value=!1,V===G.Finished&&l()}):J(p,Y,Z,ee,_,V=>{b.value=!1,V===G.Finished&&(L(P)||(i.value="hidden",H(c),S()))})))}return C(()=>{le([v],(o,E,p)=>{te(p),I.value=!1},{immediate:!0})}),B(N,P),ue(w(()=>O(i.value,{["visible"]:u.Open,["hidden"]:u.Closed})|n.value)),()=>{let{appear:o,show:E,enter:p,enterFrom:V,enterTo:Ce,entered:ye,leave:be,leaveFrom:Ee,leaveTo:Ve,...U}=e,ne={ref:d},re={...U,...A.value&&v.value&&fe.isServer?{class:ae([a.class,U.class,...j,...M])}:{}};return q({theirProps:re,ourProps:ne,slot:{},slots:s,attrs:a,features:W,visible:i.value==="visible",name:"TransitionChild"})}}}),ce=he,Se=K({inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:""},enterFrom:{type:[String],default:""},enterTo:{type:[String],default:""},entered:{type:[String],default:""},leave:{type:[String],default:""},leaveFrom:{type:[String],default:""},leaveTo:{type:[String],default:""}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let h=oe(),n=w(()=>e.show===null&&h!==null?(h.value&u.Open)===u.Open:e.show);x(()=>{if(![!0,!1].includes(n.value))throw new Error('A <Transition /> is used but it is missing a `:show="true | false"` prop.')});let r=m(n.value?"visible":"hidden"),l=Q(()=>{r.value="hidden"}),f=m(!0),S={show:n,appear:w(()=>e.appear||!f.value)};return C(()=>{x(()=>{f.value=!1,n.value?r.value="visible":L(l)||(r.value="hidden")})}),B(N,l),B(R,S),()=>{let d=ve(e,["show","appear","unmount","onBeforeEnter","onBeforeLeave","onAfterEnter","onAfterLeave"]),y={unmount:e.unmount};return q({ourProps:{...y,as:"template"},theirProps:{},slot:{},slots:{...s,default:()=>[k(ce,{onBeforeEnter:()=>t("beforeEnter"),onAfterEnter:()=>t("afterEnter"),onBeforeLeave:()=>t("beforeLeave"),onAfterLeave:()=>t("afterLeave"),...a,...y,...d},s.default)]},attrs:{},features:W,visible:r.value==="visible",name:"Transition"})}}});export{he as TransitionChild,Se as TransitionRoot};

dist/components/transitions/utils/transition.js

@@ -1,1 +0,1 @@
-import{once as f}from"../../../utils/once.js";import{disposables as p}from"../../../utils/disposables.js";function m(e,...t){e&&t.length>0&&e.classList.add(...t)}function d(e,...t){e&&t.length>0&&e.classList.remove(...t)}var g=(i=>(i.Finished="finished",i.Cancelled="cancelled",i))(g||{});function F(e,t){let i=p();if(!e)return i.dispose;let{transitionDuration:n,transitionDelay:a}=getComputedStyle(e),[l,s]=[n,a].map(o=>{let[u=0]=o.split(",").filter(Boolean).map(r=>r.includes("ms")?parseFloat(r):parseFloat(r)*1e3).sort((r,c)=>c-r);return u});return l!==0?i.setTimeout(()=>t("finished"),l+s):t("finished"),i.add(()=>t("cancelled")),i.dispose}function L(e,t,i,n,a,l){let s=p(),o=l!==void 0?f(l):()=>{};return d(e,...a),m(e,...t,...i),s.nextFrame(()=>{d(e,...i),m(e,...n),s.add(F(e,u=>(d(e,...n,...t),m(e,...a),o(u))))}),s.add(()=>d(e,...t,...i,...n,...a)),s.add(()=>o("cancelled")),s.dispose}export{g as Reason,L as transition};
+import{disposables as p}from'../../../utils/disposables.js';import{once as f}from'../../../utils/once.js';function m(e,...t){e&&t.length>0&&e.classList.add(...t)}function d(e,...t){e&&t.length>0&&e.classList.remove(...t)}var g=(i=>(i.Finished="finished",i.Cancelled="cancelled",i))(g||{});function F(e,t){let i=p();if(!e)return i.dispose;let{transitionDuration:n,transitionDelay:a}=getComputedStyle(e),[l,s]=[n,a].map(o=>{let[u=0]=o.split(",").filter(Boolean).map(r=>r.includes("ms")?parseFloat(r):parseFloat(r)*1e3).sort((r,c)=>c-r);return u});return l!==0?i.setTimeout(()=>t("finished"),l+s):t("finished"),i.add(()=>t("cancelled")),i.dispose}function L(e,t,i,n,a,l){let s=p(),o=l!==void 0?f(l):()=>{};return d(e,...a),m(e,...t,...i),s.nextFrame(()=>{d(e,...i),m(e,...n),s.add(F(e,u=>(d(e,...n,...t),m(e,...a),o(u))))}),s.add(()=>d(e,...t,...i,...n,...a)),s.add(()=>o("cancelled")),s.dispose}export{g as Reason,L as transition};

dist/headlessui.esm.js

@@ -1,1 +0,1 @@
-export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js";
+export*from'./components/combobox/combobox.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as l,PortalGroup as P}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';export{l as Portal,P as PortalGroup};

dist/hooks/use-event-listener.js

@@ -1,1 +0,1 @@
-import{watchEffect as i}from"vue";function r(n,e,d,o){typeof window!="undefined"&&i(t=>{n=n!=null?n:window,n.addEventListener(e,d,o),t(()=>n.removeEventListener(e,d,o))})}export{r as useEventListener};
+import{watchEffect as i}from"vue";import{env as a}from'../utils/env.js';function E(n,e,o,r){a.isServer||i(t=>{n=n!=null?n:window,n.addEventListener(e,o,r),t(()=>n.removeEventListener(e,o,r))})}export{E as useEventListener};

dist/hooks/use-outside-click.d.ts

@@ -1,10 +0,6 @@
-import { Ref } from 'vue';
-declare type Container = Ref<HTMLElement | null> | HTMLElement | null;
-declare type ContainerCollection = Container[] | Set<Container>;
-declare type ContainerInput = Container | ContainerCollection;
-export declare enum Features {
-    None = 1,
-    IgnoreScrollbars = 2
-}
-export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent, target: HTMLElement) => void, features?: Features): void;
+import { type ComputedRef, type Ref } from 'vue';
+type Container = Ref<HTMLElement | null> | HTMLElement | null;
+type ContainerCollection = Container[] | Set<Container>;
+type ContainerInput = Container | ContainerCollection;
+export declare function useOutsideClick(containers: ContainerInput | (() => ContainerInput), cb: (event: MouseEvent | PointerEvent | FocusEvent | TouchEvent, target: HTMLElement) => void, enabled?: ComputedRef<boolean>): void;
 export {};

dist/hooks/use-outside-click.js

@@ -1,1 +0,1 @@
-import{useWindowEvent as c}from"./use-window-event.js";import{dom as m}from"../utils/dom.js";function s(i){typeof queueMicrotask=="function"?queueMicrotask(i):Promise.resolve().then(i).catch(l=>setTimeout(()=>{throw l}))}var p=(n=>(n[n.None=1]="None",n[n.IgnoreScrollbars=2]="IgnoreScrollbars",n))(p||{});function g(i,l,n=1){let u=!1;function f(o){if(u)return;u=!0,s(()=>{u=!1});let r=o.target;if(!r.ownerDocument.documentElement.contains(r))return;let a=function t(e){return typeof e=="function"?t(e()):Array.isArray(e)||e instanceof Set?e:[e]}(i);if((n&2)===2){let t=20,e=r.ownerDocument.documentElement;if(o.clientX>e.clientWidth-t||o.clientX<t||o.clientY>e.clientHeight-t||o.clientY<t)return}for(let t of a){if(t===null)continue;let e=t instanceof HTMLElement?t:m(t);if(e!=null&&e.contains(r))return}l(o,r)}c("pointerdown",f),c("mousedown",f)}export{p as Features,g as useOutsideClick};
+import{computed as p,ref as d}from"vue";import{dom as C}from'../utils/dom.js';import{FocusableMode as h,isFocusableElement as T}from'../utils/focus-management.js';import{isMobile as M}from'../utils/platform.js';import{useDocumentEvent as l}from'./use-document-event.js';import{useWindowEvent as y}from'./use-window-event.js';const f=30;function R(s,m,r=p(()=>!0)){function c(t,o){if(t.defaultPrevented)return;let e=o(t);if(e===null||!e.getRootNode().contains(e))return;let E=function u(n){return typeof n=="function"?u(n()):Array.isArray(n)||n instanceof Set?n:[n]}(s);for(let u of E){if(u===null)continue;let n=u instanceof HTMLElement?u:C(u);if(n!=null&&n.contains(e)||t.composed&&t.composedPath().includes(n))return}return!T(e,h.Loose)&&e.tabIndex!==-1&&t.preventDefault(),m(t,e)}let i=d(null);l(r,"pointerdown",t=>{var o,e;i.value=((e=(o=t.composedPath)==null?void 0:o.call(t))==null?void 0:e[0])||t.target},!0),l(r,"mousedown",t=>{var o,e;i.value=((e=(o=t.composedPath)==null?void 0:o.call(t))==null?void 0:e[0])||t.target},!0),l(r,"click",t=>{M()||i.value&&(c(t,()=>i.value),i.value=null)},!0);let a={x:0,y:0};l(r,"touchstart",t=>{a.x=t.touches[0].clientX,a.y=t.touches[0].clientY},!0),l(r,"touchend",t=>{let o={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY};if(!(Math.abs(o.x-a.x)>=f||Math.abs(o.y-a.y)>=f))return c(t,()=>t.target instanceof HTMLElement?t.target:null)},!0),y(r,"blur",t=>c(t,()=>window.document.activeElement instanceof HTMLIFrameElement?window.document.activeElement:null),!0)}export{R as useOutsideClick};

dist/hooks/use-resolve-button-type.d.ts

@@ -1,5 +0,5 @@
-import { Ref } from 'vue';
+import { type ComponentPublicInstance, type Ref } from 'vue';
 export declare function useResolveButtonType(data: Ref<{
     as: string | object;
     type?: unknown;
-}>, refElement: Ref<HTMLElement | null>): Ref<unknown>;
+}>, refElement: Ref<HTMLElement | ComponentPublicInstance | null>): Ref<{} | undefined>;

dist/hooks/use-resolve-button-type.js

@@ -1,1 +0,1 @@
-import{ref as f,onMounted as i,watchEffect as l}from"vue";import{dom as u}from"../utils/dom.js";function r(t,e){if(t)return t;let n=e!=null?e:"button";if(typeof n=="string"&&n.toLowerCase()==="button")return"button"}function b(t,e){let n=f(r(t.value.type,t.value.as));return i(()=>{n.value=r(t.value.type,t.value.as)}),l(()=>{var o;n.value||!u(e)||u(e)instanceof HTMLButtonElement&&!((o=u(e))!=null&&o.hasAttribute("type"))&&(n.value="button")}),n}export{b as useResolveButtonType};
+import{onMounted as i,ref as f,watchEffect as l}from"vue";import{dom as o}from'../utils/dom.js';function r(t,e){if(t)return t;let n=e!=null?e:"button";if(typeof n=="string"&&n.toLowerCase()==="button")return"button"}function s(t,e){let n=f(r(t.value.type,t.value.as));return i(()=>{n.value=r(t.value.type,t.value.as)}),l(()=>{var u;n.value||o(e)&&o(e)instanceof HTMLButtonElement&&!((u=o(e))!=null&&u.hasAttribute("type"))&&(n.value="button")}),n}export{s as useResolveButtonType};

dist/hooks/use-tree-walker.d.ts

@@ -1,3 +0,3 @@
-import { ComputedRef } from 'vue';
-declare type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
+import { type ComputedRef } from 'vue';
+type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
 export declare function useTreeWalker({ container, accept, walk, enabled, }: {
@@ -4,0 +4,0 @@ container: ComputedRef<HTMLElement | null>;

dist/hooks/use-tree-walker.js

@@ -1,1 +0,1 @@
-import{watchEffect as u}from"vue";import{getOwnerDocument as E}from"../utils/owner.js";function p({container:e,accept:t,walk:d,enabled:o}){u(()=>{let r=e.value;if(!r||o!==void 0&&!o.value)return;let l=E(e);if(!l)return;let c=Object.assign(f=>t(f),{acceptNode:t}),n=l.createTreeWalker(r,NodeFilter.SHOW_ELEMENT,c,!1);for(;n.nextNode();)d(n.currentNode)})}export{p as useTreeWalker};
+import{watchEffect as p}from"vue";import{getOwnerDocument as u}from'../utils/owner.js';function i({container:e,accept:t,walk:d,enabled:o}){p(()=>{let r=e.value;if(!r||o!==void 0&&!o.value)return;let l=u(e);if(!l)return;let c=Object.assign(f=>t(f),{acceptNode:t}),n=l.createTreeWalker(r,NodeFilter.SHOW_ELEMENT,c,!1);for(;n.nextNode();)d(n.currentNode)})}export{i as useTreeWalker};

dist/hooks/use-window-event.d.ts

@@ -1,1 +0,2 @@
-export declare function useWindowEvent<TType extends keyof WindowEventMap>(type: TType, listener: (this: Window, ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;
+import { type Ref } from 'vue';
+export declare function useWindowEvent<TType extends keyof WindowEventMap>(enabled: Ref<boolean>, type: TType, listener: (this: Window, ev: WindowEventMap[TType]) => any, options?: boolean | AddEventListenerOptions): void;

dist/hooks/use-window-event.js

@@ -1,1 +0,1 @@
-import{watchEffect as d}from"vue";function w(e,n,t){typeof window!="undefined"&&d(o=>{window.addEventListener(e,n,t),o(()=>window.removeEventListener(e,n,t))})}export{w as useWindowEvent};
+import{watchEffect as r}from"vue";import{env as d}from'../utils/env.js';function w(o,e,n,t){d.isServer||r(i=>{o.value&&(window.addEventListener(e,n,t),i(()=>window.removeEventListener(e,n,t)))})}export{w as useWindowEvent};

dist/index.d.ts

@@ -1,12 +0,12 @@
-export * from './components/combobox/combobox';
-export * from './components/dialog/dialog';
-export * from './components/disclosure/disclosure';
-export * from './components/focus-trap/focus-trap';
-export * from './components/listbox/listbox';
-export * from './components/menu/menu';
-export * from './components/popover/popover';
-export * from './components/portal/portal';
-export * from './components/radio-group/radio-group';
-export * from './components/switch/switch';
-export * from './components/tabs/tabs';
-export * from './components/transitions/transition';
+export * from './components/combobox/combobox.js';
+export * from './components/dialog/dialog.js';
+export * from './components/disclosure/disclosure.js';
+export * from './components/focus-trap/focus-trap.js';
+export * from './components/listbox/listbox.js';
+export * from './components/menu/menu.js';
+export * from './components/popover/popover.js';
+export { Portal, PortalGroup } from './components/portal/portal.js';
+export * from './components/radio-group/radio-group.js';
+export * from './components/switch/switch.js';
+export * from './components/tabs/tabs.js';
+export * from './components/transitions/transition.js';

dist/index.js

@@ -1,1 +0,1 @@
-export*from"./components/combobox/combobox.js";export*from"./components/dialog/dialog.js";export*from"./components/disclosure/disclosure.js";export*from"./components/focus-trap/focus-trap.js";export*from"./components/listbox/listbox.js";export*from"./components/menu/menu.js";export*from"./components/popover/popover.js";export*from"./components/portal/portal.js";export*from"./components/radio-group/radio-group.js";export*from"./components/switch/switch.js";export*from"./components/tabs/tabs.js";export*from"./components/transitions/transition.js";
+export*from'./components/combobox/combobox.js';export*from'./components/dialog/dialog.js';export*from'./components/disclosure/disclosure.js';export*from'./components/focus-trap/focus-trap.js';export*from'./components/listbox/listbox.js';export*from'./components/menu/menu.js';export*from'./components/popover/popover.js';import{Portal as l,PortalGroup as P}from'./components/portal/portal.js';export*from'./components/radio-group/radio-group.js';export*from'./components/switch/switch.js';export*from'./components/tabs/tabs.js';export*from'./components/transitions/transition.js';export{l as Portal,P as PortalGroup};

dist/internal/focus-sentinel.js

@@ -1,1 +0,1 @@
-import{h as i,ref as a,defineComponent as l}from"vue";import{VisuallyHidden as m}from"./visually-hidden.js";let c=l({props:{onFocus:{type:Function,required:!0}},setup(r){let t=a(!0);return()=>t.value?i(m,{as:"button",type:"button",onFocus(o){o.preventDefault();let e,u=50;function n(){if(u--<=0){e&&cancelAnimationFrame(e);return}if(r.onFocus()){t.value=!1,cancelAnimationFrame(e);return}e=requestAnimationFrame(n)}e=requestAnimationFrame(n)}}):null}});export{c as FocusSentinel};
+import{defineComponent as i,h as m,ref as f}from"vue";import{Features as l,Hidden as F}from'./hidden.js';let d=i({props:{onFocus:{type:Function,required:!0}},setup(t){let n=f(!0);return()=>n.value?m(F,{as:"button",type:"button",features:l.Focusable,onFocus(o){o.preventDefault();let e,a=50;function r(){var u;if(a--<=0){e&&cancelAnimationFrame(e);return}if((u=t.onFocus)!=null&&u.call(t)){n.value=!1,cancelAnimationFrame(e);return}e=requestAnimationFrame(r)}e=requestAnimationFrame(r)}}):null}});export{d as FocusSentinel};

dist/internal/open-closed.d.ts

@@ -1,5 +0,7 @@
-import { Ref } from 'vue';
+import { type Ref } from 'vue';
 export declare enum State {
-    Open = 0,
-    Closed = 1
+    Open = 1,
+    Closed = 2,
+    Closing = 4,
+    Opening = 8
 }
@@ -6,0 +8,0 @@ export declare function hasOpenClosed(): boolean;

dist/internal/open-closed.js

@@ -1,1 +0,1 @@
-import{inject as t,provide as r}from"vue";let n=Symbol("Context");var l=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(l||{});function f(){return p()!==null}function p(){return t(n,null)}function c(o){r(n,o)}export{l as State,f as hasOpenClosed,p as useOpenClosed,c as useOpenClosedProvider};
+import{inject as p,provide as r}from"vue";let n=Symbol("Context");var i=(e=>(e[e.Open=1]="Open",e[e.Closed=2]="Closed",e[e.Closing=4]="Closing",e[e.Opening=8]="Opening",e))(i||{});function s(){return l()!==null}function l(){return p(n,null)}function t(o){r(n,o)}export{i as State,s as hasOpenClosed,l as useOpenClosed,t as useOpenClosedProvider};

dist/internal/portal-force-root.d.ts

@@ -15,3 +15,3 @@ export declare function usePortalRoot(): Boolean;
     [key: string]: any;
-}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
@@ -18,0 +18,0 @@ type: (ObjectConstructor | StringConstructor)[];

dist/internal/portal-force-root.js

@@ -1,1 +0,1 @@
-import{defineComponent as l,inject as a,provide as c}from"vue";import{render as p}from"../utils/render.js";let e=Symbol("ForcePortalRootContext");function u(){return a(e,!1)}let P=l({name:"ForcePortalRoot",props:{as:{type:[Object,String],default:"template"},force:{type:Boolean,default:!1}},setup(o,{slots:t,attrs:r}){return c(e,o.force),()=>{let{force:f,...n}=o;return p({props:n,slot:{},slots:t,attrs:r,name:"ForcePortalRoot"})}}});export{P as ForcePortalRoot,u as usePortalRoot};
+import{defineComponent as l,inject as a,provide as c}from"vue";import{render as p}from'../utils/render.js';let e=Symbol("ForcePortalRootContext");function s(){return a(e,!1)}let u=l({name:"ForcePortalRoot",props:{as:{type:[Object,String],default:"template"},force:{type:Boolean,default:!1}},setup(o,{slots:t,attrs:r}){return c(e,o.force),()=>{let{force:f,...n}=o;return p({theirProps:n,ourProps:{},slot:{},slots:t,attrs:r,name:"ForcePortalRoot"})}}});export{u as ForcePortalRoot,s as usePortalRoot};

dist/internal/stack-context.d.ts

@@ -1,3 +0,3 @@
-import { Ref } from 'vue';
-declare type OnUpdate = (message: StackMessage, type: string, element: Ref<HTMLElement | null>) => void;
+import { type Ref } from 'vue';
+type OnUpdate = (message: StackMessage, type: string, element: Ref<HTMLElement | null>) => void;
 export declare enum StackMessage {
@@ -8,4 +8,5 @@ Add = 0,
 export declare function useStackContext(): OnUpdate;
-export declare function useStackProvider({ type, element, onUpdate, }: {
+export declare function useStackProvider({ type, enabled, element, onUpdate, }: {
     type: string;
+    enabled: Ref<boolean | undefined>;
     element: Ref<HTMLElement | null>;
@@ -12,0 +13,0 @@ onUpdate?: OnUpdate;

dist/internal/stack-context.js

@@ -1,1 +0,1 @@
-import{inject as d,provide as u,onMounted as l,onUnmounted as p}from"vue";let i=Symbol("StackContext");var c=(e=>(e[e.Add=0]="Add",e[e.Remove=1]="Remove",e))(c||{});function a(){return d(i,()=>{})}function s({type:n,element:o,onUpdate:e}){let m=a();function t(...r){e==null||e(...r),m(...r)}l(()=>{t(0,n,o),p(()=>{t(1,n,o)})}),u(i,t)}export{c as StackMessage,a as useStackContext,s as useStackProvider};
+import{inject as f,onMounted as m,onUnmounted as l,provide as c,watch as p}from"vue";let u=Symbol("StackContext");var s=(e=>(e[e.Add=0]="Add",e[e.Remove=1]="Remove",e))(s||{});function y(){return f(u,()=>{})}function R({type:o,enabled:r,element:e,onUpdate:i}){let a=y();function t(...n){i==null||i(...n),a(...n)}m(()=>{p(r,(n,d)=>{n?t(0,o,e):d===!0&&t(1,o,e)},{immediate:!0,flush:"sync"})}),l(()=>{r.value&&t(1,o,e)}),c(u,t)}export{s as StackMessage,y as useStackContext,R as useStackProvider};

dist/utils/calculate-active-index.d.ts

@@ -23,4 +23,4 @@ export declare enum Focus {
     resolveActiveIndex(): number | null;
-    resolveId(item: TItem): string;
-    resolveDisabled(item: TItem): boolean;
+    resolveId(item: TItem, index: number, items: TItem[]): string;
+    resolveDisabled(item: TItem, index: number, items: TItem[]): boolean;
 }): number | null;

dist/utils/calculate-active-index.js

@@ -1,1 +0,1 @@
-function f(r){throw new Error("Unexpected object: "+r)}var a=(e=>(e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing",e))(a||{});function x(r,n){let t=n.resolveItems();if(t.length<=0)return null;let l=n.resolveActiveIndex(),s=l!=null?l:-1,d=(()=>{switch(r.focus){case 0:return t.findIndex(e=>!n.resolveDisabled(e));case 1:{let e=t.slice().reverse().findIndex((i,c,u)=>s!==-1&&u.length-c-1>=s?!1:!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 2:return t.findIndex((e,i)=>i<=s?!1:!n.resolveDisabled(e));case 3:{let e=t.slice().reverse().findIndex(i=>!n.resolveDisabled(i));return e===-1?e:t.length-1-e}case 4:return t.findIndex(e=>n.resolveId(e)===r.id);case 5:return null;default:f(r)}})();return d===-1?l:d}export{a as Focus,x as calculateActiveIndex};
+function u(l){throw new Error("Unexpected object: "+l)}var c=(i=>(i[i.First=0]="First",i[i.Previous=1]="Previous",i[i.Next=2]="Next",i[i.Last=3]="Last",i[i.Specific=4]="Specific",i[i.Nothing=5]="Nothing",i))(c||{});function f(l,n){let t=n.resolveItems();if(t.length<=0)return null;let r=n.resolveActiveIndex(),s=r!=null?r:-1;switch(l.focus){case 0:{for(let e=0;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 1:{s===-1&&(s=t.length);for(let e=s-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 2:{for(let e=s+1;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 3:{for(let e=t.length-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r}case 4:{for(let e=0;e<t.length;++e)if(n.resolveId(t[e],e,t)===l.id)return e;return r}case 5:return null;default:u(l)}}export{c as Focus,f as calculateActiveIndex};

dist/utils/disposables.d.ts

@@ -0,9 +1,12 @@
+export type Disposables = ReturnType<typeof disposables>;
 export declare function disposables(): {
-    enqueue(fn: Function): void;
+    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void;
     requestAnimationFrame(callback: FrameRequestCallback): void;
     nextFrame(callback: FrameRequestCallback): void;
     setTimeout(callback: (...args: any[]) => void, ms?: number | undefined, ...args: any[]): void;
-    add(cb: () => void): void;
+    microTask(cb: () => void): () => void;
+    style(node: HTMLElement, property: string, value: string): () => void;
+    group(cb: (d: typeof this) => void): () => void;
+    add(cb: () => void): () => void;
     dispose(): void;
-    workQueue(): Promise<void>;
 };

dist/utils/disposables.js

@@ -1,1 +0,1 @@
-function r(){let i=[],o=[],t={enqueue(e){o.push(e)},requestAnimationFrame(...e){let a=requestAnimationFrame(...e);t.add(()=>cancelAnimationFrame(a))},nextFrame(...e){t.requestAnimationFrame(()=>{t.requestAnimationFrame(...e)})},setTimeout(...e){let a=setTimeout(...e);t.add(()=>clearTimeout(a))},add(e){i.push(e)},dispose(){for(let e of i.splice(0))e()},async workQueue(){for(let e of o.splice(0))await e()}};return t}export{r as disposables};
+import{microTask as n}from'./micro-task.js';function o(){let a=[],s={addEventListener(e,t,r,i){return e.addEventListener(t,r,i),s.add(()=>e.removeEventListener(t,r,i))},requestAnimationFrame(...e){let t=requestAnimationFrame(...e);s.add(()=>cancelAnimationFrame(t))},nextFrame(...e){s.requestAnimationFrame(()=>{s.requestAnimationFrame(...e)})},setTimeout(...e){let t=setTimeout(...e);s.add(()=>clearTimeout(t))},microTask(...e){let t={current:!0};return n(()=>{t.current&&e[0]()}),s.add(()=>{t.current=!1})},style(e,t,r){let i=e.style.getPropertyValue(t);return Object.assign(e.style,{[t]:r}),this.add(()=>{Object.assign(e.style,{[t]:i})})},group(e){let t=o();return e(t),this.add(()=>t.dispose())},add(e){return a.push(e),()=>{let t=a.indexOf(e);if(t>=0)for(let r of a.splice(t,1))r()}},dispose(){for(let e of a.splice(0))e()}};return s}export{o as disposables};

dist/utils/dom.d.ts

@@ -1,2 +0,4 @@
-import { Ref, ComponentPublicInstance } from 'vue';
-export declare function dom<T extends Element | ComponentPublicInstance>(ref?: Ref<T | null>): T | null;
+import type { ComponentPublicInstance, Ref } from 'vue';
+type AsElement<T extends HTMLElement | ComponentPublicInstance> = (T extends HTMLElement ? T : HTMLElement) | null;
+export declare function dom<T extends HTMLElement | ComponentPublicInstance>(ref?: Ref<T | null>): AsElement<T> | null;
+export {};

dist/utils/dom.js

@@ -1,1 +0,1 @@
-function t(l){return l==null||l.value==null?null:"$el"in l.value?l.value.$el:l.value}export{t as dom};
+function t(e){var l;if(e==null||e.value==null)return null;let n=(l=e.value.$el)!=null?l:e.value;return n instanceof Node?n:null}export{t as dom};

dist/utils/focus-management.d.ts

@@ -0,1 +1,2 @@
+export declare let focusableSelector: string;
 export declare enum Focus {
@@ -29,4 +30,10 @@ /** Focus the first non-disabled element */
 export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean;
+export declare function restoreFocusIfNecessary(element: HTMLElement | null): void;
 export declare function focusElement(element: HTMLElement | null): void;
 export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null): T[];
-export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus): FocusResult;
+export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult;
+export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{
+    sorted: boolean;
+    relativeTo: HTMLElement | null;
+    skipElements: HTMLElement[];
+}>): FocusResult;

dist/utils/focus-management.js

@@ -1,1 +0,1 @@
-import{match as x}from"./match.js";import{getOwnerDocument as E}from"./owner.js";let c=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var p=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n))(p||{}),L=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(L||{}),N=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(N||{});function T(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(c))}var b=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(b||{});function S(e,r=0){var t;return e===((t=E(e))==null?void 0:t.body)?!1:x(r,{[0](){return e.matches(c)},[1](){let l=e;for(;l!==null;){if(l.matches(c))return!0;l=l.parentElement}return!1}})}function F(e){e==null||e.focus({preventScroll:!0})}let M=["textarea","input"].join(",");function h(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,M))!=null?t:!1}function v(e,r=t=>t){return e.slice().sort((t,l)=>{let o=r(t),a=r(l);if(o===null||a===null)return 0;let n=o.compareDocumentPosition(a);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function H(e,r){var d;let t=(d=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e==null?void 0:e.ownerDocument)!=null?d:document,l=Array.isArray(e)?v(e):T(e),o=t.activeElement,a=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),n=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,l.indexOf(o))-1;if(r&4)return Math.max(0,l.indexOf(o))+1;if(r&8)return l.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),m=r&32?{preventScroll:!0}:{},f=0,i=l.length,u;do{if(f>=i||f+i<=0)return 0;let s=n+f;if(r&16)s=(s+i)%i;else{if(s<0)return 3;if(s>=i)return 1}u=l[s],u==null||u.focus(m),f+=a}while(u!==t.activeElement);return u.hasAttribute("tabindex")||u.setAttribute("tabindex","0"),r&6&&h(u)&&u.select(),2}export{p as Focus,L as FocusResult,b as FocusableMode,F as focusElement,H as focusIn,T as getFocusableElements,S as isFocusableElement,v as sortByDomNode};
+import{nextTick as b}from"vue";import{match as M}from'./match.js';import{getOwnerDocument as f}from'./owner.js';let c=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var N=(n=>(n[n.First=1]="First",n[n.Previous=2]="Previous",n[n.Next=4]="Next",n[n.Last=8]="Last",n[n.WrapAround=16]="WrapAround",n[n.NoScroll=32]="NoScroll",n))(N||{}),T=(o=>(o[o.Error=0]="Error",o[o.Overflow=1]="Overflow",o[o.Success=2]="Success",o[o.Underflow=3]="Underflow",o))(T||{}),F=(t=>(t[t.Previous=-1]="Previous",t[t.Next=1]="Next",t))(F||{});function E(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(c)).sort((r,t)=>Math.sign((r.tabIndex||Number.MAX_SAFE_INTEGER)-(t.tabIndex||Number.MAX_SAFE_INTEGER)))}var h=(t=>(t[t.Strict=0]="Strict",t[t.Loose=1]="Loose",t))(h||{});function w(e,r=0){var t;return e===((t=f(e))==null?void 0:t.body)?!1:M(r,{[0](){return e.matches(c)},[1](){let l=e;for(;l!==null;){if(l.matches(c))return!0;l=l.parentElement}return!1}})}function _(e){let r=f(e);b(()=>{r&&!w(r.activeElement,0)&&S(e)})}var y=(t=>(t[t.Keyboard=0]="Keyboard",t[t.Mouse=1]="Mouse",t))(y||{});typeof window!="undefined"&&typeof document!="undefined"&&(document.addEventListener("keydown",e=>{e.metaKey||e.altKey||e.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible="")},!0),document.addEventListener("click",e=>{e.detail===1?delete document.documentElement.dataset.headlessuiFocusVisible:e.detail===0&&(document.documentElement.dataset.headlessuiFocusVisible="")},!0));function S(e){e==null||e.focus({preventScroll:!0})}let H=["textarea","input"].join(",");function I(e){var r,t;return(t=(r=e==null?void 0:e.matches)==null?void 0:r.call(e,H))!=null?t:!1}function O(e,r=t=>t){return e.slice().sort((t,l)=>{let o=r(t),i=r(l);if(o===null||i===null)return 0;let n=o.compareDocumentPosition(i);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function v(e,r){return P(E(),r,{relativeTo:e})}function P(e,r,{sorted:t=!0,relativeTo:l=null,skipElements:o=[]}={}){var m;let i=(m=Array.isArray(e)?e.length>0?e[0].ownerDocument:document:e==null?void 0:e.ownerDocument)!=null?m:document,n=Array.isArray(e)?t?O(e):e:E(e);o.length>0&&n.length>1&&(n=n.filter(s=>!o.includes(s))),l=l!=null?l:i.activeElement;let x=(()=>{if(r&5)return 1;if(r&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),p=(()=>{if(r&1)return 0;if(r&2)return Math.max(0,n.indexOf(l))-1;if(r&4)return Math.max(0,n.indexOf(l))+1;if(r&8)return n.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),L=r&32?{preventScroll:!0}:{},a=0,d=n.length,u;do{if(a>=d||a+d<=0)return 0;let s=p+a;if(r&16)s=(s+d)%d;else{if(s<0)return 3;if(s>=d)return 1}u=n[s],u==null||u.focus(L),a+=x}while(u!==i.activeElement);return r&6&&I(u)&&u.select(),2}export{N as Focus,T as FocusResult,h as FocusableMode,S as focusElement,v as focusFrom,P as focusIn,c as focusableSelector,E as getFocusableElements,w as isFocusableElement,_ as restoreFocusIfNecessary,O as sortByDomNode};

dist/utils/form.d.ts

@@ -1,4 +0,4 @@
-declare type Entries = [string, string][];
+type Entries = [string, string][];
 export declare function objectToFormEntries(source?: Record<string, any>, parentKey?: string | null, entries?: Entries): Entries;
-export declare function attemptSubmit(element: HTMLElement): void;
+export declare function attemptSubmit(elementInForm: HTMLElement): void;
 export {};

dist/utils/form.js

@@ -1,1 +0,1 @@
-function e(n={},r=null,t=[]){for(let[i,o]of Object.entries(n))f(t,s(r,i),o);return t}function s(n,r){return n?n+"["+r+"]":r}function f(n,r,t){if(Array.isArray(t))for(let[i,o]of t.entries())f(n,s(r,i.toString()),o);else t instanceof Date?n.push([r,t.toISOString()]):typeof t=="boolean"?n.push([r,t?"1":"0"]):typeof t=="string"?n.push([r,t]):typeof t=="number"?n.push([r,`${t}`]):t==null?n.push([r,""]):e(t,r,n)}function p(n){var t;let r=(t=n==null?void 0:n.form)!=null?t:n.closest("form");if(!!r){for(let i of r.elements)if(i.tagName==="INPUT"&&i.type==="submit"||i.tagName==="BUTTON"&&i.type==="submit"||i.nodeName==="INPUT"&&i.type==="image"){i.click();return}}}export{p as attemptSubmit,e as objectToFormEntries};
+function e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))o(t,f(s,r),n);return t}function f(i,s){return i?i+"["+s+"]":s}function o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())o(i,f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):typeof t=="boolean"?i.push([s,t?"1":"0"]):typeof t=="string"?i.push([s,t]):typeof t=="number"?i.push([s,`${t}`]):t==null?i.push([s,""]):e(t,s,i)}function p(i){var t,r;let s=(t=i==null?void 0:i.form)!=null?t:i.closest("form");if(s){for(let n of s.elements)if(n!==i&&(n.tagName==="INPUT"&&n.type==="submit"||n.tagName==="BUTTON"&&n.type==="submit"||n.nodeName==="INPUT"&&n.type==="image")){n.click();return}(r=s.requestSubmit)==null||r.call(s)}}export{p as attemptSubmit,e as objectToFormEntries};

dist/utils/owner.d.ts

@@ -1,2 +0,2 @@
-import { Ref } from 'vue';
-export declare function getOwnerDocument<T extends Element | Ref<Element | null>>(element: T | null | undefined): Document | null;
+import type { Ref } from 'vue';
+export declare function getOwnerDocument<T extends HTMLElement | Ref<HTMLElement | null>>(element: T | null | undefined): Document | null;

dist/utils/owner.js

@@ -1,1 +0,1 @@
-import{dom as r}from"./dom.js";function e(n){if(typeof window=="undefined")return null;if(n instanceof Node)return n.ownerDocument;if(n!=null&&n.hasOwnProperty("value")){let o=r(n);if(o)return o.ownerDocument}return document}export{e as getOwnerDocument};
+import{dom as o}from'./dom.js';import{env as t}from'./env.js';function f(r){if(t.isServer)return null;if(r instanceof Node)return r.ownerDocument;if(r!=null&&r.hasOwnProperty("value")){let n=o(r);if(n)return n.ownerDocument}return document}export{f as getOwnerDocument};

dist/utils/render.d.ts

@@ -1,2 +0,2 @@
-import { Slots } from 'vue';
+import { type Slots, type VNode } from 'vue';
 export declare enum Features {
@@ -23,4 +23,5 @@ /** No features at all */
 }
-export declare function render({ visible, features, ...main }: {
-    props: Record<string, any>;
+export declare function render({ visible, features, ourProps, theirProps, ...main }: {
+    ourProps: Record<string, any>;
+    theirProps: Record<string, any>;
     slot: Record<string, any>;
@@ -33,8 +34,8 @@ attrs: Record<string, any>;
     visible?: boolean;
-}): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>[] | null | undefined;
+}>[] | null;
 export declare function compact<T extends Record<any, any>>(object: T): {} & T;
 export declare function omit<T extends Record<any, any>, Keys extends keyof T>(object: T, keysToOmit?: readonly Keys[]): Omit<T, Keys>;

dist/utils/render.js

@@ -1,4 +0,4 @@
-import{h as f,cloneVNode as y}from"vue";import{match as g}from"./match.js";var m=(t=>(t[t.None=0]="None",t[t.RenderStrategy=1]="RenderStrategy",t[t.Static=2]="Static",t))(m||{}),h=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(h||{});function k({visible:n=!0,features:r=0,...e}){var t;if(n||r&2&&e.props.static)return a(e);if(r&1){let i=(t=e.props.unmount)==null||t?0:1;return g(i,{[0](){return null},[1](){return a({...e,props:{...e.props,hidden:!0,style:{display:"none"}}})}})}return a(e)}function a({props:n,attrs:r,slots:e,slot:t,name:i}){var u;let{as:p,...s}=R(n,["unmount","static"]),o=(u=e.default)==null?void 0:u.call(e,t);if(p==="template"){if(Object.keys(s).length>0||Object.keys(r).length>0){let[d,...c]=o!=null?o:[];if(!b(d)||c.length>0)throw new Error(['Passing props on "template"!',"",`The current component <${i} /> is rendering a "template".`,"However we need to passthrough the following props:",Object.keys(s).concat(Object.keys(r)).map(l=>`  - ${l}`).join(`
-`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".',"Render a single element as the child so that we can forward the props onto that element."].map(l=>`  - ${l}`).join(`
+import{cloneVNode as O,Fragment as x,h as k}from"vue";import{match as w}from'./match.js';var N=(o=>(o[o.None=0]="None",o[o.RenderStrategy=1]="RenderStrategy",o[o.Static=2]="Static",o))(N||{}),S=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(S||{});function A({visible:r=!0,features:t=0,ourProps:e,theirProps:o,...i}){var a;let n=j(o,e),l=Object.assign(i,{props:n});if(r||t&2&&n.static)return y(l);if(t&1){let d=(a=n.unmount)==null||a?0:1;return w(d,{[0](){return null},[1](){return y({...i,props:{...n,hidden:!0,style:{display:"none"}}})}})}return y(l)}function y({props:r,attrs:t,slots:e,slot:o,name:i}){var m,h;let{as:n,...l}=T(r,["unmount","static"]),a=(m=e.default)==null?void 0:m.call(e,o),d={};if(o){let u=!1,c=[];for(let[p,f]of Object.entries(o))typeof f=="boolean"&&(u=!0),f===!0&&c.push(p);u&&(d["data-headlessui-state"]=c.join(" "))}if(n==="template"){if(a=b(a!=null?a:[]),Object.keys(l).length>0||Object.keys(t).length>0){let[u,...c]=a!=null?a:[];if(!v(u)||c.length>0)throw new Error(['Passing props on "template"!',"",`The current component <${i} /> is rendering a "template".`,"However we need to passthrough the following props:",Object.keys(l).concat(Object.keys(t)).map(s=>s.trim()).filter((s,g,R)=>R.indexOf(s)===g).sort((s,g)=>s.localeCompare(g)).map(s=>`  - ${s}`).join(`
+`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".',"Render a single element as the child so that we can forward the props onto that element."].map(s=>`  - ${s}`).join(`
 `)].join(`
-`));return y(d,s)}return Array.isArray(o)&&o.length===1?o[0]:o}return f(p,s,o)}function O(n){let r=Object.assign({},n);for(let e in r)r[e]===void 0&&delete r[e];return r}function R(n,r=[]){let e=Object.assign({},n);for(let t of r)t in e&&delete e[t];return e}function b(n){return n==null?!1:typeof n.type=="string"||typeof n.type=="object"||typeof n.type=="function"}export{m as Features,h as RenderStrategy,O as compact,R as omit,k as render};
+`));let p=j((h=u.props)!=null?h:{},l,d),f=O(u,p,!0);for(let s in p)s.startsWith("on")&&(f.props||(f.props={}),f.props[s]=p[s]);return f}return Array.isArray(a)&&a.length===1?a[0]:a}return k(n,Object.assign({},l,d),{default:()=>a})}function b(r){return r.flatMap(t=>t.type===x?b(t.children):[t])}function j(...r){var o;if(r.length===0)return{};if(r.length===1)return r[0];let t={},e={};for(let i of r)for(let n in i)n.startsWith("on")&&typeof i[n]=="function"?((o=e[n])!=null||(e[n]=[]),e[n].push(i[n])):t[n]=i[n];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map(i=>[i,void 0])));for(let i in e)Object.assign(t,{[i](n,...l){let a=e[i];for(let d of a){if(n instanceof Event&&n.defaultPrevented)return;d(n,...l)}}});return t}function E(r){let t=Object.assign({},r);for(let e in t)t[e]===void 0&&delete t[e];return t}function T(r,t=[]){let e=Object.assign({},r);for(let o of t)o in e&&delete e[o];return e}function v(r){return r==null?!1:typeof r.type=="string"||typeof r.type=="object"||typeof r.type=="function"}export{N as Features,S as RenderStrategy,E as compact,T as omit,A as render};

package.json

 {
   "name": "@headlessui/vue",
-  "version": "0.0.0-insiders.cb7a969",
+  "version": "0.0.0-insiders.cb86665",
   "description": "A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.",
@@ -14,5 +14,8 @@ "main": "dist/index.cjs",
   "exports": {
+    "types": {
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.cts"
+    },
     "import": "./dist/headlessui.esm.js",
-    "require": "./dist/index.cjs",
-    "types": "./dist/index.d.ts"
+    "require": "./dist/index.cjs"
   },
@@ -38,3 +41,4 @@ "type": "module",
     "lint": "../../scripts/lint.sh",
-    "playground": "yarn workspace playground-vue dev",
+    "lint-types": "npm run attw -P --workspaces --if-present",
+    "playground": "npm run dev --workspace=playground-vue",
     "clean": "rimraf ./dist"
@@ -46,6 +50,9 @@ },
   "devDependencies": {
-    "@testing-library/vue": "^5.8.2",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "vue": "^3.2.29"
+    "@testing-library/vue": "8.0.0",
+    "@vue/test-utils": "^2.4.1",
+    "vue": "3.2.37"
+  },
+  "dependencies": {
+    "@tanstack/vue-virtual": "3.0.0-beta.60"
   }
 }

README.md

@@ -26,3 +26,3 @@ <h3 align="center">
 
-For full documentation, visit [headlessui.dev](https://headlessui.dev/vue/menu).
+For full documentation, visit [headlessui.com](https://headlessui.com/v1/vue).
 
@@ -29,0 +29,0 @@ ## Community

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

601361

increased by48.96%

Number of package files

135

increased by51.69%

Lines of code

11534

increased by56.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Number of low supply chain risk alerts

4

increased by300%

Dependency changes

• + Added@tanstack/vue-virtual@3.0.0-beta.60

• + Added@tanstack/virtual-core@3.0.0-beta.60(transitive)

• + Added@tanstack/vue-virtual@3.0.0-beta.60(transitive)