@headlessui/vue
Advanced tools
Comparing version 0.3.0 to 0.3.1-5ff5225
@@ -63,1 +63,14 @@ import { Ref } from 'vue'; | ||
}>; | ||
export declare let SwitchDescription: import("vue").DefineComponent<{ | ||
as: { | ||
type: (ObjectConstructor | StringConstructor)[]; | ||
default: string; | ||
}; | ||
}, { | ||
id: string; | ||
el: Ref<HTMLParagraphElement | null>; | ||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ | ||
as: string; | ||
} & {}>, { | ||
as: string; | ||
}>; |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n=require("vue");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)t.indexOf(n=l[o])>=0||(r[n]=e[n]);return r}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),l=2;l<o;l++)r[l-2]=arguments[l];return"function"==typeof n?n.apply(void 0,r):n}var a=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(a,u),a}function a(n){var l,a,s=n.visible,c=void 0===s||s,d=n.features,v=void 0===d?e.None:d,f=r(n,["visible","features"]);return c||v&e.Static&&f.props.static?i(f):v&e.RenderStrategy?u(null==(l=f.props.unmount)||l?t.Unmount:t.Hidden,((a={})[t.Unmount]=function(){return null},a[t.Hidden]=function(){return i(o({},f,{props:o({},f.props,{hidden:!0,style:{display:"none"}})}))},a)):i(f)}function i(e){var t=e.attrs,o=e.slots,u=e.slot,a=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),r=function(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return l(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(e,void 0):void 0}}(e))){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}(t);!(n=r()).done;){var u=n.value;u in o&&delete o[u]}return o}(e.props,["unmount","static"]),i=a.as,s=r(a,["as"]),c=null==o.default?void 0:o.default(u);if("template"===i){if(Object.keys(s).length>0||"class"in t){var d=null!=c?c:[],v=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return n.cloneVNode(v,s)}return c}return n.h(i,s,c)}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(e||(e={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(t||(t={}));var s,c,d,v=0;function f(){return++v}function p(e,t){var n=t.resolveItems();if(n.length<=0)return null;var o=t.resolveActiveIndex(),r=null!=o?o:-1,l=function(){switch(e.focus){case c.First:return n.findIndex((function(e){return!t.resolveDisabled(e)}));case c.Previous:var o=n.slice().reverse().findIndex((function(e,n,o){return!(-1!==r&&o.length-n-1>=r||t.resolveDisabled(e))}));return-1===o?o:n.length-1-o;case c.Next:return n.findIndex((function(e,n){return!(n<=r||t.resolveDisabled(e))}));case c.Last:var l=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===l?l:n.length-1-l;case c.Specific:return n.findIndex((function(n){return t.resolveId(n)===e.id}));case c.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===l?o:l}function b(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(s||(s={})),function(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"}(c||(c={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(d||(d={}));var m=Symbol("MenuContext");function h(e){var t=n.inject(m,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,h),o}return t}var x,y=n.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var o=t.slots,r=t.attrs,l=n.ref(d.Closed),u=n.ref(null),i=n.ref(null),s=n.ref([]),v=n.ref(""),f=n.ref(null),b={menuState:l,buttonRef:u,itemsRef:i,items:s,searchQuery:v,activeItemIndex:f,closeMenu:function(){l.value=d.Closed,f.value=null},openMenu:function(){return l.value=d.Open},goToItem:function(e,t){var n=p(e===c.Specific?{focus:c.Specific,id:t}:{focus:e},{resolveItems:function(){return s.value},resolveActiveIndex:function(){return f.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===v.value&&f.value===n||(v.value="",f.value=n)},search:function(e){v.value+=e;var t=s.value.findIndex((function(e){return e.dataRef.textValue.startsWith(v.value)&&!e.dataRef.disabled}));-1!==t&&t!==f.value&&(f.value=t)},clearSearch:function(){v.value=""},registerItem:function(e,t){s.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=s.value.slice(),n=null!==f.value?t[f.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),s.value=t,f.value=o===f.value||null===n?null:t.indexOf(n)}};return n.onMounted((function(){function e(e){var t,n,o,r=e.target,a=document.activeElement;l.value===d.Open&&((null==(t=u.value)?void 0:t.contains(r))||((null==(n=i.value)?void 0:n.contains(r))||b.closeMenu(),a!==document.body&&(null==a?void 0:a.contains(r))||e.defaultPrevented||null==(o=u.value)||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),n.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),n.provide(m,b),function(){return a({props:e,slot:{open:l.value===d.Open},slots:o,attrs:r})}}}),S=n.defineComponent({props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=h("MenuButton"),n={open:t.menuState.value===d.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.itemsRef.value)?void 0:e.id,"aria-expanded":t.menuState.value===d.Open||void 0,onKeyDown:this.handleKeyDown,onClick:this.handleClick};return a({props:o({},this.$props,r),slot:n,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var t=h("MenuButton");return{id:"headlessui-menu-button-"+f(),el:t.buttonRef,handleKeyDown:function(e){switch(e.key){case s.Space:case s.Enter:case s.ArrowDown:e.preventDefault(),t.openMenu(),n.nextTick((function(){var e;null==(e=t.itemsRef.value)||e.focus({preventScroll:!0}),t.goToItem(c.First)}));break;case s.ArrowUp:e.preventDefault(),t.openMenu(),n.nextTick((function(){var e;null==(e=t.itemsRef.value)||e.focus({preventScroll:!0}),t.goToItem(c.Last)}))}},handleClick:function(o){var r;e.disabled||(t.menuState.value===d.Open?(t.closeMenu(),n.nextTick((function(){var e;return null==(e=t.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),t.openMenu(),r=function(){var e;return null==(e=t.itemsRef.value)?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),g=n.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t,n,r=h("MenuItems"),l={open:r.menuState.value===d.Open},u={"aria-activedescendant":null===r.activeItemIndex.value||null==(t=r.items.value[r.activeItemIndex.value])?void 0:t.id,"aria-labelledby":null==(n=r.buttonRef.value)?void 0:n.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return a({props:o({},this.$props,u),slot:l,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:l.open})},setup:function(){var e=h("MenuItems"),t="headlessui-menu-items-"+f(),o=n.ref(null);return n.watchEffect((function(){var t=e.itemsRef.value;if(t&&e.menuState.value===d.Open)for(var n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"menuitem"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});n.nextNode();)n.currentNode.setAttribute("role","none")})),{id:t,el:e.itemsRef,handleKeyDown:function(t){switch(o.value&&clearTimeout(o.value),t.key){case s.Space:if(""!==e.searchQuery.value)return t.preventDefault(),e.search(t.key);case s.Enter:var r;t.preventDefault(),null!==e.activeItemIndex.value&&(null==(r=document.getElementById(e.items.value[e.activeItemIndex.value].id))||r.click()),e.closeMenu(),n.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case s.ArrowDown:return t.preventDefault(),e.goToItem(c.Next);case s.ArrowUp:return t.preventDefault(),e.goToItem(c.Previous);case s.Home:case s.PageUp:return t.preventDefault(),e.goToItem(c.First);case s.End:case s.PageDown:return t.preventDefault(),e.goToItem(c.Last);case s.Escape:t.preventDefault(),e.closeMenu(),n.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case s.Tab:return t.preventDefault();default:1===t.key.length&&(e.search(t.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),w=n.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,t){var r=t.slots,l=t.attrs,u=h("MenuItem"),i="headlessui-menu-item-"+f(),s=e.disabled,v=e.className,p=void 0===v?e.class:v,m=n.computed((function(){return null!==u.activeItemIndex.value&&u.items.value[u.activeItemIndex.value].id===i})),x=n.ref({disabled:s,textValue:""});function y(e){if(s)return e.preventDefault();u.closeMenu(),n.nextTick((function(){var e;return null==(e=u.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function S(){if(s)return u.goToItem(c.Nothing);u.goToItem(c.Specific,i)}function g(){s||m.value||u.goToItem(c.Specific,i)}function w(){s||m.value&&u.goToItem(c.Nothing)}return n.onMounted((function(){var e,t,n=null==(e=document.getElementById(i))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(x.value.textValue=n)})),n.onMounted((function(){return u.registerItem(i,x)})),n.onUnmounted((function(){return u.unregisterItem(i)})),n.watchEffect((function(){u.menuState.value===d.Open&&m.value&&n.nextTick((function(){var e;return null==(e=document.getElementById(i))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:m.value,disabled:s},n={id:i,role:"menuitem",tabIndex:-1,class:b(p,t),"aria-disabled":!0===s||void 0,onClick:y,onFocus:S,onPointerMove:g,onMouseMove:g,onPointerLeave:w,onMouseLeave:w};return a({props:o({},e,n),slot:t,attrs:l,slots:r})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(x||(x={}));var O=Symbol("ListboxContext");function I(e){var t=n.inject(O,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,I),o}return t}var k=n.defineComponent({name:"Listbox",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean],default:null}},setup:function(e,t){var o=t.slots,l=t.attrs,u=t.emit,i=e.disabled,s=r(e,["modelValue","disabled"]),d=n.ref(x.Closed),v=n.ref(null),f=n.ref(null),b=n.ref(null),m=n.ref([]),h=n.ref(""),y=n.ref(null),S=n.computed((function(){return e.modelValue})),g={listboxState:d,value:S,labelRef:v,buttonRef:f,optionsRef:b,disabled:i,options:m,searchQuery:h,activeOptionIndex:y,closeListbox:function(){i||d.value!==x.Closed&&(d.value=x.Closed,y.value=null)},openListbox:function(){i||d.value!==x.Open&&(d.value=x.Open)},goToOption:function(e,t){if(!i&&d.value!==x.Closed){var n=p(e===c.Specific?{focus:c.Specific,id:t}:{focus:e},{resolveItems:function(){return m.value},resolveActiveIndex:function(){return y.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===h.value&&y.value===n||(h.value="",y.value=n)}},search:function(e){if(!i&&d.value!==x.Closed){h.value+=e;var t=m.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(h.value)}));-1!==t&&t!==y.value&&(y.value=t)}},clearSearch:function(){i||d.value!==x.Closed&&""!==h.value&&(h.value="")},registerOption:function(e,t){m.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=m.value.slice(),n=null!==y.value?t[y.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),m.value=t,y.value=o===y.value||null===n?null:t.indexOf(n)},select:function(e){i||u("update:modelValue",e)}};return n.onMounted((function(){function e(e){var t,n,o,r=e.target,l=document.activeElement;d.value===x.Open&&((null==(t=f.value)?void 0:t.contains(r))||((null==(n=b.value)?void 0:n.contains(r))||g.closeListbox(),l!==document.body&&(null==l?void 0:l.contains(r))||e.defaultPrevented||null==(o=f.value)||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),n.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),n.provide(O,g),function(){return a({props:s,slot:{open:d.value===x.Open,disabled:i},slots:o,attrs:l})}}}),T=n.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=I("ListboxLabel"),t={open:e.listboxState.value===x.Open,disabled:e.disabled};return a({props:o({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=I("ListboxLabel");return{id:"headlessui-listbox-label-"+f(),el:e.labelRef,handleClick:function(){var t;null==(t=e.buttonRef.value)||t.focus({preventScroll:!0})}}}}),R=n.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=I("ListboxButton"),n={open:t.listboxState.value===x.Open,disabled:t.disabled},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.optionsRef.value)?void 0:e.id,"aria-expanded":t.listboxState.value===x.Open||void 0,"aria-labelledby":t.labelRef.value?[t.labelRef.value.id,this.id].join(" "):void 0,disabled:t.disabled,onKeyDown:this.handleKeyDown,onClick:this.handleClick};return a({props:o({},this.$props,r),slot:n,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=I("ListboxButton");return{id:"headlessui-listbox-button-"+f(),el:e.buttonRef,handleKeyDown:function(t){switch(t.key){case s.Space:case s.Enter:case s.ArrowDown:t.preventDefault(),e.openListbox(),n.nextTick((function(){var t;null==(t=e.optionsRef.value)||t.focus({preventScroll:!0}),e.value.value||e.goToOption(c.First)}));break;case s.ArrowUp:t.preventDefault(),e.openListbox(),n.nextTick((function(){var t;null==(t=e.optionsRef.value)||t.focus({preventScroll:!0}),e.value.value||e.goToOption(c.Last)}))}},handleClick:function(t){var o;e.disabled||(e.listboxState.value===x.Open?(e.closeListbox(),n.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}))):(t.preventDefault(),e.openListbox(),o=function(){var t;return null==(t=e.optionsRef.value)?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(o)}))))}}}}),L=n.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t,n,r,l,u=I("ListboxOptions"),i={open:u.listboxState.value===x.Open},s={"aria-activedescendant":null===u.activeOptionIndex.value||null==(t=u.options.value[u.activeOptionIndex.value])?void 0:t.id,"aria-labelledby":null!=(n=null==(r=u.labelRef.value)?void 0:r.id)?n:null==(l=u.buttonRef.value)?void 0:l.id,id:this.id,onKeyDown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return a({props:o({},this.$props,s),slot:i,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:i.open})},setup:function(){var e=I("ListboxOptions"),t="headlessui-listbox-options-"+f(),o=n.ref(null);return{id:t,el:e.optionsRef,handleKeyDown:function(t){switch(o.value&&clearTimeout(o.value),t.key){case s.Space:if(""!==e.searchQuery.value)return t.preventDefault(),e.search(t.key);case s.Enter:t.preventDefault(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),e.closeListbox(),n.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case s.ArrowDown:return t.preventDefault(),e.goToOption(c.Next);case s.ArrowUp:return t.preventDefault(),e.goToOption(c.Previous);case s.Home:case s.PageUp:return t.preventDefault(),e.goToOption(c.First);case s.End:case s.PageDown:return t.preventDefault(),e.goToOption(c.Last);case s.Escape:t.preventDefault(),e.closeListbox(),n.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case s.Tab:return t.preventDefault();default:1===t.key.length&&(e.search(t.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),D=n.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,t){var r=t.slots,l=t.attrs,u=I("ListboxOption"),i="headlessui-listbox-option-"+f(),s=e.disabled,d=e.className,v=void 0===d?e.class:d,p=e.value,m=n.computed((function(){return null!==u.activeOptionIndex.value&&u.options.value[u.activeOptionIndex.value].id===i})),h=n.computed((function(){return n.toRaw(u.value.value)===n.toRaw(p)})),y=n.ref({disabled:s,value:p,textValue:""});function S(e){if(s)return e.preventDefault();u.select(p),u.closeListbox(),n.nextTick((function(){var e;return null==(e=u.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function g(){if(s)return u.goToOption(c.Nothing);u.goToOption(c.Specific,i)}function w(){s||m.value||u.goToOption(c.Specific,i)}function O(){s||m.value&&u.goToOption(c.Nothing)}return n.onMounted((function(){var e,t,n=null==(e=document.getElementById(i))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(y.value.textValue=n)})),n.onMounted((function(){return u.registerOption(i,y)})),n.onUnmounted((function(){return u.unregisterOption(i)})),n.onMounted((function(){n.watch([u.listboxState,h],(function(){var e;u.listboxState.value===x.Open&&h.value&&(u.goToOption(c.Specific,i),null==(e=document.getElementById(i))||null==e.focus||e.focus())}),{immediate:!0})})),n.watchEffect((function(){u.listboxState.value===x.Open&&m.value&&n.nextTick((function(){var e;return null==(e=document.getElementById(i))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:m.value,selected:h.value,disabled:s},n={id:i,role:"option",tabIndex:-1,class:b(v,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===h.value?h.value:void 0,onClick:S,onFocus:g,onPointerMove:w,onMouseMove:w,onPointerLeave:O,onMouseLeave:O};return a({props:o({},e,n),slot:t,attrs:l,slots:r})}}}),E=Symbol("GroupContext");function C(e){var t=n.inject(E,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,C),o}return t}var M=n.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var o=t.slots,r=t.attrs,l=n.ref(null),u=n.ref(null);return n.provide(E,{switchRef:l,labelRef:u}),function(){return a({props:e,slot:{},slots:o,attrs:r})}}}),j=n.defineComponent({name:"Switch",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"button"},modelValue:{type:[Object,Boolean],default:null},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e=n.inject(E,null),t=this.$props,r=t.className,l=void 0===r?t.class:r,u=n.computed((function(){var t;return null==e||null==(t=e.labelRef.value)?void 0:t.id})),i={checked:this.$props.modelValue},s={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:b(l,i),"aria-checked":this.$props.modelValue,"aria-labelledby":u.value,onClick:this.handleClick,onKeyUp:this.handleKeyUp,onKeyPress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(s,{type:"button"}),a({props:o({},this.$props,s),slot:i,attrs:this.$attrs,slots:this.$slots})},setup:function(e,t){var o=t.emit,r=n.inject(E,null);function l(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+f(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),l()},handleKeyUp:function(e){e.key!==s.Tab&&e.preventDefault(),e.key===s.Space&&l()},handleKeyPress:function(e){e.preventDefault()}}}}),N=n.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return a({props:o({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=C("SwitchLabel");return{id:"headlessui-switch-label-"+f(),el:e.labelRef,handleClick:function(){var t,n;null==(t=e.switchRef.value)||t.click(),null==(n=e.switchRef.value)||n.focus({preventScroll:!0})}}}});exports.Listbox=k,exports.ListboxButton=R,exports.ListboxLabel=T,exports.ListboxOption=D,exports.ListboxOptions=L,exports.Menu=y,exports.MenuButton=S,exports.MenuItem=w,exports.MenuItems=g,exports.Switch=j,exports.SwitchGroup=M,exports.SwitchLabel=N; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,o=require("vue");function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(n=i[o])>=0||(r[n]=e[n]);return r}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function l(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return a(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),i=2;i<o;i++)r[i-2]=arguments[i];return"function"==typeof n?n.apply(void 0,r):n}var a=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(a,u),a}function s(n){var o,a,l=n.visible,s=void 0===l||l,d=n.features,p=void 0===d?e.None:d,v=i(n,["visible","features"]);return s||p&e.Static&&v.props.static?c(v):p&e.RenderStrategy?u(null==(o=v.props.unmount)||o?t.Unmount:t.Hidden,((a={})[t.Unmount]=function(){return null},a[t.Hidden]=function(){return c(r({},v,{props:r({},v.props,{hidden:!0,style:{display:"none"}})}))},a)):c(v)}function c(e){var t,n=e.attrs,r=e.slots,a=e.slot,u=e.name,s=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),r=l(t);!(n=r()).done;){var i=n.value;i in o&&delete o[i]}return o}(e.props,["unmount","static"]),c=s.as,d=i(s,["as"]),p=null==r.default?void 0:r.default(a);if("template"===c){if(Object.keys(d).length>0||Object.keys(n).length>0){var v=null!=p?p:[],f=v[0],m=v.slice(1);if(null==(t=f)||"string"!=typeof t.type&&"object"!=typeof t.type||m.length>0)throw new Error(['Passing props on "template"!',"","The current component <"+u+' /> is rendering a "template".',"However we need to passthrough the following props:",Object.keys(d).concat(Object.keys(n)).map((function(e){return" - "+e})).join("\n"),"","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((function(e){return" - "+e})).join("\n")].join("\n"));return o.cloneVNode(f,d)}return p}return o.h(c,d,p)}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(e||(e={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(t||(t={})),function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowLeft="ArrowLeft",e.ArrowUp="ArrowUp",e.ArrowRight="ArrowRight",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(n||(n={}));var d=0;function p(){return++d}var v,f,m,h,b=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map((function(e){return e+":not([tabindex='-1'])"})).join(",");function g(e){return void 0===e&&(e=document.body),null==e?[]:Array.from(e.querySelectorAll(b))}function y(e){null==e||e.focus({preventScroll:!0})}function S(e,t){var n=Array.isArray(e)?e:g(e),o=document.activeElement,r=function(){if(t&(v.First|v.Next))return m.Next;if(t&(v.Previous|v.Last))return m.Previous;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),i=function(){if(t&v.First)return 0;if(t&v.Previous)return Math.max(0,n.indexOf(o))-1;if(t&v.Next)return Math.max(0,n.indexOf(o))+1;if(t&v.Last)return n.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),a=t&v.NoScroll?{preventScroll:!0}:{},l=0,u=n.length,s=void 0;do{var c;if(l>=u||l+u<=0)return f.Error;var d=i+l;if(t&v.WrapAround)d=(d+u)%u;else{if(d<0)return f.Underflow;if(d>=u)return f.Overflow}null==(c=s=n[d])||c.focus(a),l+=r}while(s!==document.activeElement);return s.hasAttribute("tabindex")||s.setAttribute("tabindex","0"),f.Success}function x(e,t,n){window.addEventListener(e,t,n),o.onUnmounted((function(){return window.removeEventListener(e,t,n)}))}function w(e,t){for(var n,o=l(e);!(n=o()).done;)if(n.value.contains(t))return!0;return!1}function O(e,t,r){void 0===t&&(t=o.ref(!0)),void 0===r&&(r=o.ref({}));var i=o.ref("undefined"!=typeof window?document.activeElement:null),a=o.ref(null);function u(){if(t.value&&1===e.value.size){var n=r.value.initialFocus,o=document.activeElement;if(n){if(n===o)return}else if(w(e.value,o))return;if(i.value=o,n)y(n);else{for(var u,s=!1,c=l(e.value);!(u=c()).done;)if(S(u.value,v.First)===f.Success){s=!0;break}if(!s)throw new Error("There are no focusable elements inside the <FocusTrap />")}a.value=document.activeElement}}function s(){y(i.value),i.value=null,a.value=null}o.watchEffect(u),o.onUpdated((function(){t.value?u():s()})),o.onUnmounted(s),x("keydown",(function(o){if(t.value&&o.key===n.Tab&&document.activeElement&&1===e.value.size){o.preventDefault();for(var r,i=l(e.value);!(r=i()).done;)if(S(r.value,(o.shiftKey?v.Previous:v.Next)|v.WrapAround)===f.Success){a.value=document.activeElement;break}}})),x("focus",(function(n){if(t.value&&1===e.value.size){var o=a.value;if(o){var r=n.target;r&&r instanceof HTMLElement?w(e.value,r)?(a.value=r,y(r)):(n.preventDefault(),n.stopPropagation(),y(o)):y(a.value)}}}),!0)}!function(e){e[e.First=1]="First",e[e.Previous=2]="Previous",e[e.Next=4]="Next",e[e.Last=8]="Last",e[e.WrapAround=16]="WrapAround",e[e.NoScroll=32]="NoScroll"}(v||(v={})),function(e){e[e.Error=0]="Error",e[e.Overflow=1]="Overflow",e[e.Success=2]="Success",e[e.Underflow=3]="Underflow"}(f||(f={})),function(e){e[e.Previous=-1]="Previous",e[e.Next=1]="Next"}(m||(m={})),function(e){e[e.Strict=0]="Strict",e[e.Loose=1]="Loose"}(h||(h={}));var E=new Set,C=new Map;function P(e){e.setAttribute("aria-hidden","true"),e.inert=!0}function D(e){var t=C.get(e);t&&(null===t["aria-hidden"]?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t["aria-hidden"]),e.inert=t.inert)}var k,I=Symbol("StackContext");function R(){return o.inject(I,(function(){}))}!function(e){e[e.AddElement=0]="AddElement",e[e.RemoveElement=1]="RemoveElement"}(k||(k={}));var T=o.defineComponent({name:"StackProvider",props:{onUpdate:{type:Function,default:void 0}},setup:function(e,t){var n=t.slots,r=R();return o.provide(I,(function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];null==e.onUpdate||e.onUpdate.apply(e,n),r.apply(void 0,n)})),function(){return n.default()}}}),L=Symbol("ForcePortalRootContext"),j=o.defineComponent({name:"ForcePortalRoot",props:{force:{type:Boolean,default:!1}},setup:function(e,t){var n=t.slots;return o.provide(L,e.force),function(){return n.default()}}}),F=o.defineComponent({name:"Portal",props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var n=t.slots,r=t.attrs,i=o.inject(L,!1),a=o.inject(A,null),l=o.ref(!0===i||null===a?function(){var e=document.getElementById("headlessui-portal-root");if(e)return e;var t=document.createElement("div");return t.setAttribute("id","headlessui-portal-root"),document.body.appendChild(t)}():a.resolveTarget());o.watchEffect((function(){i||null!==a&&(l.value=a.resolveTarget())}));var u=o.ref(null);return function(e){var t=R();o.watchEffect((function(n){var o=null==e?void 0:e.value;o&&(t(k.AddElement,o),n((function(){return t(k.RemoveElement,o)})))}))}(u),o.onUnmounted((function(){var e,t=document.getElementById("headlessui-portal-root");t&&l.value===t&&l.value.children.length<=0&&(null==(e=l.value.parentElement)||e.removeChild(l.value))})),function(){return null===l.value?null:o.h(T,{},(function(){return[o.h(o.Teleport,{to:l.value},[o.h("div",{ref:u},[s({props:e,slot:{},attrs:r,slots:n,name:"Portal"})])])]}))}}}),A=Symbol("PortalGroupContext"),$=o.defineComponent({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup:function(e,t){var n=t.attrs,r=t.slots,a=o.reactive({resolveTarget:function(){return e.target}});return o.provide(A,a),function(){return s({props:i(e,["target"]),slot:{},attrs:n,slots:r,name:"PortalGroup"})}}}),B=Symbol("DescriptionContext");function N(){var e=o.ref([]);return[o.computed((function(){return e.value.length>0?e.value.join(" "):void 0})),o.defineComponent({name:"DescriptionProvider",props:["slot"],setup:function(t,n){var r=n.slots,i=o.computed((function(){return t.slot}));return o.provide(B,{register:function(t){return e.value.push(t),function(){var n=e.value.indexOf(t);-1!==n&&e.value.splice(n,1)}},slot:i}),function(){return r.default()}}})]}var M,U=o.defineComponent({name:"Description",props:{as:{type:[Object,String],default:"p"}},render:function(){return s({props:r({},this.$props,{id:this.id}),slot:this.slot,attrs:this.$attrs,slots:this.$slots,name:"Description"})},setup:function(){var e=o.inject(B,{register:function(){return function(){}},slot:{}}),t=e.register,n=e.slot,r="headlessui-description-"+p();return o.onMounted((function(){return o.onUnmounted(t(r))})),{id:r,slot:n}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(M||(M={}));var K=Symbol("DialogContext");function G(e){var t=o.inject(K,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <Dialog /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,G),n}return t}var V,W="DC8F892D-2EBD-447C-A4C8-A03058436FF4",q=o.defineComponent({name:"Dialog",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},open:{type:Boolean,default:W},onClose:{type:Function,default:W},initialFocus:{type:Object,default:null}},render:function(){var t=this,n=r({ref:"el",id:this.id,role:"dialog","aria-modal":this.dialogState===M.Open||void 0,"aria-labelledby":this.titleId,"aria-describedby":this.describedby},this.$attrs),a=this.$props,l=a.open,c=i(a,["open","onClose","initialFocus"]),d=this.containers,p={open:this.dialogState===M.Open};return o.h(T,{onUpdate:function(e,t){var n;return u(e,((n={})[k.AddElement]=function(){d.add(t)},n[k.RemoveElement]=function(){d.delete(t)},n))}},(function(){return[o.h(j,{force:!0},(function(){return[o.h(F,{},(function(){return[o.h($,{target:t.dialogRef},(function(){return[o.h(j,{force:!1},(function(){return[o.h(t.DescriptionProvider,{slot:p},(function(){return[s({props:r({},c,n),slot:p,attrs:t.$attrs,slots:t.$slots,visible:l,features:e.RenderStrategy|e.Static,name:"Dialog"})]}))]}))]}))]}))]}))]}))},setup:function(e){var t=o.ref(new Set),r=e.open!==W,i=e.onClose!==W;if(!r&&!i)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!r)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!i)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if("boolean"!=typeof e.open)throw new Error("You provided an `open` prop to the `Dialog`, but the value is not a boolean. Received: "+(e.open===W?void 0:e.open));if("function"!=typeof e.onClose)throw new Error("You provided an `onClose` prop to the `Dialog`, but the value is not a function. Received: "+(e.onClose===W?void 0:e.onClose));var a=o.computed((function(){return e.open?M.Open:M.Closed})),u=o.ref(null),s=o.ref(a.value===M.Open);o.onUpdated((function(){s.value=a.value===M.Open}));var c="headlessui-dialog-"+p(),d=o.computed((function(){return{initialFocus:e.initialFocus}}));O(t,s,d),function(e,t){void 0===t&&(t=o.ref(!0)),o.watchEffect((function(n){if(t.value&&e.value){var o=e.value;E.add(o);for(var r,i=l(C.keys());!(r=i()).done;){var a=r.value;a.contains(o)&&(D(a),C.delete(a))}document.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement){for(var t,n=l(E);!(t=n()).done;)if(e.contains(t.value))return;1===E.size&&(C.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),P(e))}})),n((function(){if(E.delete(o),E.size>0)document.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement&&!C.has(e)){for(var t,n=l(E);!(t=n()).done;)if(e.contains(t.value))return;C.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),P(e)}}));else for(var e,t=l(C.keys());!(e=t()).done;){var n=e.value;D(n),C.delete(n)}}))}}))}(u,s);var v=N(),f=v[0],m=v[1],h=o.ref(null),b={titleId:h,dialogState:a,setTitleId:function(e){h.value!==e&&(h.value=e)},close:function(){e.onClose(!1)}};return o.provide(K,b),x("mousedown",(function(e){var n=e.target;a.value===M.Open&&1===t.value.size&&(w(t.value,n)||(b.close(),o.nextTick((function(){null==n||n.focus()}))))})),x("keydown",(function(e){e.key===n.Escape&&a.value===M.Open&&(t.value.size>1||b.close())})),o.watchEffect((function(e){if(a.value===M.Open){var t=document.documentElement.style.overflow,n=document.documentElement.style.paddingRight,o=window.innerWidth-document.documentElement.clientWidth;document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=o+"px",e((function(){document.documentElement.style.overflow=t,document.documentElement.style.paddingRight=n}))}})),o.watchEffect((function(e){if(a.value===M.Open&&u.value){var t=new IntersectionObserver((function(e){for(var t,n=l(e);!(t=n()).done;){var o=t.value;0===o.boundingClientRect.x&&0===o.boundingClientRect.y&&0===o.boundingClientRect.width&&0===o.boundingClientRect.height&&b.close()}}));t.observe(u.value),e((function(){return t.disconnect()}))}})),{id:c,el:u,dialogRef:u,containers:t,dialogState:a,titleId:h,describedby:f,DescriptionProvider:m}}}),H=o.defineComponent({name:"DialogOverlay",props:{as:{type:[Object,String],default:"div"}},render:function(){var e=G("DialogOverlay");return s({props:r({},this.$props,{ref:"el",id:this.id,"aria-hidden":!0,onClick:this.handleClick}),slot:{open:e.dialogState.value===M.Open},attrs:this.$attrs,slots:this.$slots,name:"DialogOverlay"})},setup:function(){var e=G("DialogOverlay");return{id:"headlessui-dialog-overlay-"+p(),handleClick:function(){e.close()}}}}),_=o.defineComponent({name:"DialogTitle",props:{as:{type:[Object,String],default:"h2"}},render:function(){var e=G("DialogTitle");return s({props:r({},this.$props,{id:this.id}),slot:{open:e.dialogState.value===M.Open},attrs:this.$attrs,slots:this.$slots,name:"DialogTitle"})},setup:function(){var e=G("DialogTitle"),t="headlessui-dialog-title-"+p();return o.onMounted((function(){e.setTitleId(t),o.onUnmounted((function(){return e.setTitleId(null)}))})),{id:t}}}),z=U;function Y(e){var t;return null==e||null==e.value?null:null!=(t=e.value.$el)?t:e.value}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(V||(V={}));var Q=Symbol("DisclosureContext");function J(e){var t=o.inject(Q,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <Disclosure /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,J),n}return t}var X,Z,ee=o.defineComponent({name:"Disclosure",props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var n=t.slots,i=t.attrs,a=r({},e),l=o.ref(V.Closed),c=o.ref(null);return o.provide(Q,{disclosureState:l,panelRef:c,toggleDisclosure:function(){var e;l.value=u(l.value,((e={})[V.Open]=V.Closed,e[V.Closed]=V.Open,e))}}),function(){return s({props:a,slot:{open:l.value===V.Open},slots:n,attrs:i,name:"Disclosure"})}}}),te=o.defineComponent({name:"DisclosureButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},render:function(){var e=J("DisclosureButton"),t={open:e.disclosureState.value===V.Open};return s({props:r({},this.$props,{id:this.id,type:"button","aria-expanded":e.disclosureState.value===V.Open||void 0,"aria-controls":this.ariaControls,onClick:this.handleClick,onKeydown:this.handleKeyDown}),slot:t,attrs:this.$attrs,slots:this.$slots,name:"DisclosureButton"})},setup:function(e){var t=J("DisclosureButton");return{id:"headlessui-disclosure-button-"+p(),ariaControls:o.computed((function(){var e,n;return null!=(e=null==(n=Y(t.panelRef))?void 0:n.id)?e:void 0})),handleClick:function(){e.disabled||t.toggleDisclosure()},handleKeyDown:function(o){if(!e.disabled)switch(o.key){case n.Space:case n.Enter:o.preventDefault(),t.toggleDisclosure()}}}}}),ne=o.defineComponent({name:"DisclosurePanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t={open:J("DisclosurePanel").disclosureState.value===V.Open};return s({props:r({},this.$props,{id:this.id,ref:"el"}),slot:t,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:t.open,name:"DisclosurePanel"})},setup:function(){var e=J("DisclosurePanel");return{id:"headlessui-disclosure-panel-"+p(),el:e.panelRef}}}),oe=o.defineComponent({name:"FocusTrap",props:{as:{type:[Object,String],default:"div"},initialFocus:{type:Object,default:null}},render:function(){return s({props:r({},i(this.$props,["initialFocus"]),{ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"FocusTrap"})},setup:function(e){var t=o.ref(new Set),n=o.ref(null),r=o.ref(!0),i=o.computed((function(){return{initialFocus:e.initialFocus}}));return o.onMounted((function(){n.value&&(t.value.add(n.value),O(t,r,i))})),o.onUnmounted((function(){r.value=!1})),{el:n}}});function re(e,t){var n=t.resolveItems();if(n.length<=0)return null;var o=t.resolveActiveIndex(),r=null!=o?o:-1,i=function(){switch(e.focus){case X.First:return n.findIndex((function(e){return!t.resolveDisabled(e)}));case X.Previous:var o=n.slice().reverse().findIndex((function(e,n,o){return!(-1!==r&&o.length-n-1>=r||t.resolveDisabled(e))}));return-1===o?o:n.length-1-o;case X.Next:return n.findIndex((function(e,n){return!(n<=r||t.resolveDisabled(e))}));case X.Last:var i=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===i?i:n.length-1-i;case X.Specific:return n.findIndex((function(n){return t.resolveId(n)===e.id}));case X.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===i?o:i}function ie(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(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"}(X||(X={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(Z||(Z={}));var ae=Symbol("ListboxContext");function le(e){var t=o.inject(ae,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,le),n}return t}var ue,se=o.defineComponent({name:"Listbox",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean],default:null}},setup:function(e,t){var n=t.slots,r=t.attrs,a=t.emit,l=e.disabled,u=i(e,["modelValue","disabled"]),c=o.ref(Z.Closed),d=o.ref(null),p=o.ref(null),v=o.ref(null),f=o.ref([]),m=o.ref(""),h=o.ref(null),b=o.computed((function(){return e.modelValue})),g={listboxState:c,value:b,labelRef:d,buttonRef:p,optionsRef:v,disabled:l,options:f,searchQuery:m,activeOptionIndex:h,closeListbox:function(){l||c.value!==Z.Closed&&(c.value=Z.Closed,h.value=null)},openListbox:function(){l||c.value!==Z.Open&&(c.value=Z.Open)},goToOption:function(e,t){if(!l&&c.value!==Z.Closed){var n=re(e===X.Specific?{focus:X.Specific,id:t}:{focus:e},{resolveItems:function(){return f.value},resolveActiveIndex:function(){return h.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===m.value&&h.value===n||(m.value="",h.value=n)}},search:function(e){if(!l&&c.value!==Z.Closed){m.value+=e;var t=f.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(m.value)}));-1!==t&&t!==h.value&&(h.value=t)}},clearSearch:function(){l||c.value!==Z.Closed&&""!==m.value&&(m.value="")},registerOption:function(e,t){f.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=f.value.slice(),n=null!==h.value?t[h.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),f.value=t,h.value=o===h.value||null===n?null:t.indexOf(n)},select:function(e){l||a("update:modelValue",e)}};return x("mousedown",(function(e){var t,n,o,r=e.target,i=document.activeElement;c.value===Z.Open&&((null==(t=Y(p))?void 0:t.contains(r))||((null==(n=Y(v))?void 0:n.contains(r))||g.closeListbox(),i!==document.body&&(null==i?void 0:i.contains(r))||e.defaultPrevented||null==(o=Y(p))||o.focus({preventScroll:!0})))})),o.provide(ae,g),function(){return s({props:u,slot:{open:c.value===Z.Open,disabled:l},slots:n,attrs:r,name:"Listbox"})}}}),ce=o.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=le("ListboxLabel"),t={open:e.listboxState.value===Z.Open,disabled:e.disabled};return s({props:r({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots,name:"ListboxLabel"})},setup:function(){var e=le("ListboxLabel");return{id:"headlessui-listbox-label-"+p(),el:e.labelRef,handleClick:function(){var t;null==(t=Y(e.buttonRef))||t.focus({preventScroll:!0})}}}}),de=o.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t,n=le("ListboxButton"),o={open:n.listboxState.value===Z.Open,disabled:n.disabled},i={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=Y(n.optionsRef))?void 0:e.id,"aria-expanded":n.listboxState.value===Z.Open||void 0,"aria-labelledby":n.labelRef.value?[null==(t=Y(n.labelRef))?void 0:t.id,this.id].join(" "):void 0,disabled:n.disabled,onKeydown:this.handleKeyDown,onClick:this.handleClick};return s({props:r({},this.$props,i),slot:o,attrs:this.$attrs,slots:this.$slots,name:"ListboxButton"})},setup:function(){var e=le("ListboxButton");return{id:"headlessui-listbox-button-"+p(),el:e.buttonRef,handleKeyDown:function(t){switch(t.key){case n.Space:case n.Enter:case n.ArrowDown:t.preventDefault(),e.openListbox(),o.nextTick((function(){var t;null==(t=Y(e.optionsRef))||t.focus({preventScroll:!0}),e.value.value||e.goToOption(X.First)}));break;case n.ArrowUp:t.preventDefault(),e.openListbox(),o.nextTick((function(){var t;null==(t=Y(e.optionsRef))||t.focus({preventScroll:!0}),e.value.value||e.goToOption(X.Last)}))}},handleClick:function(t){var n;e.disabled||(e.listboxState.value===Z.Open?(e.closeListbox(),o.nextTick((function(){var t;return null==(t=Y(e.buttonRef))?void 0:t.focus({preventScroll:!0})}))):(t.preventDefault(),e.openListbox(),n=function(){var t;return null==(t=Y(e.optionsRef))?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(n)}))))}}}}),pe=o.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t,n,o,i,a=le("ListboxOptions"),l={open:a.listboxState.value===Z.Open},u={"aria-activedescendant":null===a.activeOptionIndex.value||null==(t=a.options.value[a.activeOptionIndex.value])?void 0:t.id,"aria-labelledby":null!=(n=null==(o=Y(a.labelRef))?void 0:o.id)?n:null==(i=Y(a.buttonRef))?void 0:i.id,id:this.id,onKeydown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return s({props:r({},this.$props,u),slot:l,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:l.open,name:"ListboxOptions"})},setup:function(){var e=le("ListboxOptions"),t="headlessui-listbox-options-"+p(),r=o.ref(null);return{id:t,el:e.optionsRef,handleKeyDown:function(t){switch(r.value&&clearTimeout(r.value),t.key){case n.Space:if(""!==e.searchQuery.value)return t.preventDefault(),t.stopPropagation(),e.search(t.key);case n.Enter:t.preventDefault(),t.stopPropagation(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),e.closeListbox(),o.nextTick((function(){var t;return null==(t=Y(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case n.ArrowDown:return t.preventDefault(),t.stopPropagation(),e.goToOption(X.Next);case n.ArrowUp:return t.preventDefault(),t.stopPropagation(),e.goToOption(X.Previous);case n.Home:case n.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToOption(X.First);case n.End:case n.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToOption(X.Last);case n.Escape:t.preventDefault(),t.stopPropagation(),e.closeListbox(),o.nextTick((function(){var t;return null==(t=Y(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case n.Tab:t.preventDefault(),t.stopPropagation();break;default:1===t.key.length&&(e.search(t.key),r.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),ve=o.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,t){var n=t.slots,i=t.attrs,a=le("ListboxOption"),l="headlessui-listbox-option-"+p(),u=e.disabled,c=e.className,d=void 0===c?e.class:c,v=e.value,f=o.computed((function(){return null!==a.activeOptionIndex.value&&a.options.value[a.activeOptionIndex.value].id===l})),m=o.computed((function(){return o.toRaw(a.value.value)===o.toRaw(v)})),h=o.ref({disabled:u,value:v,textValue:""});function b(e){if(u)return e.preventDefault();a.select(v),a.closeListbox(),o.nextTick((function(){var e;return null==(e=Y(a.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function g(){if(u)return a.goToOption(X.Nothing);a.goToOption(X.Specific,l)}function y(){u||f.value||a.goToOption(X.Specific,l)}function S(){u||f.value&&a.goToOption(X.Nothing)}return o.onMounted((function(){var e,t,n=null==(e=document.getElementById(l))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(h.value.textValue=n)})),o.onMounted((function(){return a.registerOption(l,h)})),o.onUnmounted((function(){return a.unregisterOption(l)})),o.onMounted((function(){o.watch([a.listboxState,m],(function(){var e;a.listboxState.value===Z.Open&&m.value&&(a.goToOption(X.Specific,l),null==(e=document.getElementById(l))||null==e.focus||e.focus())}),{immediate:!0})})),o.watchEffect((function(){a.listboxState.value===Z.Open&&f.value&&o.nextTick((function(){var e;return null==(e=document.getElementById(l))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:f.value,selected:m.value,disabled:u},o={id:l,role:"option",tabIndex:-1,class:ie(d,t),"aria-disabled":!0===u||void 0,"aria-selected":!0===m.value?m.value:void 0,onClick:b,onFocus:g,onPointermove:y,onMousemove:y,onPointerleave:S,onMouseleave:S};return s({props:r({},e,o),slot:t,attrs:i,slots:n,name:"ListboxOption"})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(ue||(ue={}));var fe=Symbol("MenuContext");function me(e){var t=o.inject(fe,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,me),n}return t}var he,be=o.defineComponent({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var n=t.slots,r=t.attrs,i=o.ref(ue.Closed),a=o.ref(null),l=o.ref(null),u=o.ref([]),c=o.ref(""),d=o.ref(null),p={menuState:i,buttonRef:a,itemsRef:l,items:u,searchQuery:c,activeItemIndex:d,closeMenu:function(){i.value=ue.Closed,d.value=null},openMenu:function(){return i.value=ue.Open},goToItem:function(e,t){var n=re(e===X.Specific?{focus:X.Specific,id:t}:{focus:e},{resolveItems:function(){return u.value},resolveActiveIndex:function(){return d.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===c.value&&d.value===n||(c.value="",d.value=n)},search:function(e){c.value+=e;var t=u.value.findIndex((function(e){return e.dataRef.textValue.startsWith(c.value)&&!e.dataRef.disabled}));-1!==t&&t!==d.value&&(d.value=t)},clearSearch:function(){c.value=""},registerItem:function(e,t){u.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=u.value.slice(),n=null!==d.value?t[d.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),u.value=t,d.value=o===d.value||null===n?null:t.indexOf(n)}};return x("mousedown",(function(e){var t,n,o,r=e.target,u=document.activeElement;i.value===ue.Open&&((null==(t=Y(a))?void 0:t.contains(r))||((null==(n=Y(l))?void 0:n.contains(r))||p.closeMenu(),u!==document.body&&(null==u?void 0:u.contains(r))||e.defaultPrevented||null==(o=Y(a))||o.focus({preventScroll:!0})))})),o.provide(fe,p),function(){return s({props:e,slot:{open:i.value===ue.Open},slots:n,attrs:r,name:"Menu"})}}}),ge=o.defineComponent({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=me("MenuButton"),n={open:t.menuState.value===ue.Open},o={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=Y(t.itemsRef))?void 0:e.id,"aria-expanded":t.menuState.value===ue.Open||void 0,onKeydown:this.handleKeyDown,onClick:this.handleClick};return s({props:r({},this.$props,o),slot:n,attrs:this.$attrs,slots:this.$slots,name:"MenuButton"})},setup:function(e){var t=me("MenuButton");return{id:"headlessui-menu-button-"+p(),el:t.buttonRef,handleKeyDown:function(e){switch(e.key){case n.Space:case n.Enter:case n.ArrowDown:e.preventDefault(),e.stopPropagation(),t.openMenu(),o.nextTick((function(){var e;null==(e=Y(t.itemsRef))||e.focus({preventScroll:!0}),t.goToItem(X.First)}));break;case n.ArrowUp:e.preventDefault(),e.stopPropagation(),t.openMenu(),o.nextTick((function(){var e;null==(e=Y(t.itemsRef))||e.focus({preventScroll:!0}),t.goToItem(X.Last)}))}},handleClick:function(n){var r;e.disabled||(t.menuState.value===ue.Open?(t.closeMenu(),o.nextTick((function(){var e;return null==(e=Y(t.buttonRef))?void 0:e.focus({preventScroll:!0})}))):(n.preventDefault(),n.stopPropagation(),t.openMenu(),r=function(){var e;return null==(e=Y(t.itemsRef))?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),ye=o.defineComponent({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t,n,o=me("MenuItems"),i={open:o.menuState.value===ue.Open},a={"aria-activedescendant":null===o.activeItemIndex.value||null==(t=o.items.value[o.activeItemIndex.value])?void 0:t.id,"aria-labelledby":null==(n=Y(o.buttonRef))?void 0:n.id,id:this.id,onKeydown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return s({props:r({},this.$props,a),slot:i,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:i.open,name:"MenuItems"})},setup:function(){var e=me("MenuItems"),t="headlessui-menu-items-"+p(),r=o.ref(null);return o.watchEffect((function(){var t=Y(e.itemsRef);if(t&&e.menuState.value===ue.Open)for(var n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"menuitem"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});n.nextNode();)n.currentNode.setAttribute("role","none")})),{id:t,el:e.itemsRef,handleKeyDown:function(t){switch(r.value&&clearTimeout(r.value),t.key){case n.Space:if(""!==e.searchQuery.value)return t.preventDefault(),t.stopPropagation(),e.search(t.key);case n.Enter:var i;t.preventDefault(),t.stopPropagation(),null!==e.activeItemIndex.value&&(null==(i=document.getElementById(e.items.value[e.activeItemIndex.value].id))||i.click()),e.closeMenu(),o.nextTick((function(){var t;return null==(t=Y(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case n.ArrowDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(X.Next);case n.ArrowUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(X.Previous);case n.Home:case n.PageUp:return t.preventDefault(),t.stopPropagation(),e.goToItem(X.First);case n.End:case n.PageDown:return t.preventDefault(),t.stopPropagation(),e.goToItem(X.Last);case n.Escape:t.preventDefault(),t.stopPropagation(),e.closeMenu(),o.nextTick((function(){var t;return null==(t=Y(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case n.Tab:t.preventDefault(),t.stopPropagation();break;default:1===t.key.length&&(e.search(t.key),r.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),Se=o.defineComponent({name:"MenuItem",props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,t){var n=t.slots,i=t.attrs,a=me("MenuItem"),l="headlessui-menu-item-"+p(),u=e.disabled,c=e.className,d=void 0===c?e.class:c,v=o.computed((function(){return null!==a.activeItemIndex.value&&a.items.value[a.activeItemIndex.value].id===l})),f=o.ref({disabled:u,textValue:""});function m(e){if(u)return e.preventDefault();a.closeMenu(),o.nextTick((function(){var e;return null==(e=Y(a.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function h(){if(u)return a.goToItem(X.Nothing);a.goToItem(X.Specific,l)}function b(){u||v.value||a.goToItem(X.Specific,l)}function g(){u||v.value&&a.goToItem(X.Nothing)}return o.onMounted((function(){var e,t,n=null==(e=document.getElementById(l))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(f.value.textValue=n)})),o.onMounted((function(){return a.registerItem(l,f)})),o.onUnmounted((function(){return a.unregisterItem(l)})),o.watchEffect((function(){a.menuState.value===ue.Open&&v.value&&o.nextTick((function(){var e;return null==(e=document.getElementById(l))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:v.value,disabled:u},o={id:l,role:"menuitem",tabIndex:-1,class:ie(d,t),"aria-disabled":!0===u||void 0,onClick:m,onFocus:h,onPointermove:b,onMousemove:b,onPointerleave:g,onMouseleave:g};return s({props:r({},e,o),slot:t,attrs:i,slots:n,name:"MenuItem"})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(he||(he={}));var xe=Symbol("PopoverContext");function we(e){var t=o.inject(xe,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <"+Pe.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,we),n}return t}var Oe=Symbol("PopoverGroupContext");function Ee(){return o.inject(Oe,null)}var Ce=Symbol("PopoverPanelContext"),Pe=o.defineComponent({name:"Popover",props:{as:{type:[Object,String],default:"div"}},setup:function(e,t){var n=t.slots,i=t.attrs,a=r({},e),l="headlessui-popover-button-"+p(),c="headlessui-popover-panel-"+p(),d=o.ref(he.Closed),v=o.ref(null),f=o.ref(null),m={popoverState:d,buttonId:l,panelId:c,panel:f,button:v,togglePopover:function(){var e;d.value=u(d.value,((e={})[he.Open]=he.Closed,e[he.Closed]=he.Open,e))},closePopover:function(){d.value!==he.Closed&&(d.value=he.Closed)}};o.provide(xe,m);var g={buttonId:l,panelId:c,close:function(){m.closePopover()}},y=Ee(),S=null==y?void 0:y.registerPopover;return o.watchEffect((function(){return null==S?void 0:S(g)})),x("focus",(function(){var e,t,n;d.value===he.Open&&((null!=(e=null==y?void 0:y.isFocusWithinPopoverGroup())?e:(null==(t=Y(v))?void 0:t.contains(document.activeElement))||(null==(n=Y(f))?void 0:n.contains(document.activeElement)))||v&&f&&m.closePopover())}),!0),x("mousedown",(function(e){var t,n,o,r,i,a,l=e.target;d.value===he.Open&&((null==(t=Y(v))?void 0:t.contains(l))||(null==(n=Y(f))?void 0:n.contains(l))||(m.closePopover(),void 0===(i=h.Loose)&&(i=h.Strict),(r=l)!==document.body&&u(i,((a={})[h.Strict]=function(){return r.matches(b)},a[h.Loose]=function(){for(var e=r;null!==e;){if(e.matches(b))return!0;e=e.parentElement}return!1},a))||(e.preventDefault(),null==(o=Y(v))||o.focus())))})),function(){return s({props:a,slot:{open:d.value===he.Open},slots:n,attrs:i,name:"Popover"})}}}),De=o.defineComponent({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},render:function(){var e=we("PopoverButton"),t={open:e.popoverState.value===he.Open},n=this.isWithinPanel?{type:"button",onKeydown:this.handleKeyDown,onClick:this.handleClick}:{ref:"el",id:e.buttonId,type:"button","aria-expanded":e.popoverState.value===he.Open||void 0,"aria-controls":Y(e.panel)?e.panelId:void 0,onKeydown:this.handleKeyDown,onKeyup:this.handleKeyUp,onClick:this.handleClick};return s({props:r({},this.$props,n),slot:t,attrs:this.$attrs,slots:this.$slots,name:"PopoverButton"})},setup:function(e){var t=we("PopoverButton"),r=Ee(),i=null==r?void 0:r.closeOthers,a=o.inject(Ce,null),l=null!==a&&a===t.panelId,u=o.ref(null),s=o.ref("undefined"==typeof window?null:document.activeElement);return x("focus",(function(){s.value=u.value,u.value=document.activeElement}),!0),{isWithinPanel:l,el:l?null:t.button,handleKeyDown:function(e){var o,r;if(l){if(t.popoverState.value===he.Closed)return;switch(e.key){case n.Space:case n.Enter:e.preventDefault(),e.stopPropagation(),t.closePopover(),null==(o=Y(t.button))||o.focus()}}else switch(e.key){case n.Space:case n.Enter:e.preventDefault(),e.stopPropagation(),t.popoverState.value===he.Closed&&(null==i||i(t.buttonId)),t.togglePopover();break;case n.Escape:if(t.popoverState.value!==he.Open)return null==i?void 0:i(t.buttonId);if(!Y(t.button))return;if(!(null==(r=Y(t.button))?void 0:r.contains(document.activeElement)))return;t.closePopover();break;case n.Tab:if(t.popoverState.value!==he.Open)return;if(!t.panel)return;if(!t.button)return;if(e.shiftKey){var a,u;if(!s.value)return;if(null==(a=Y(t.button))?void 0:a.contains(s.value))return;if(null==(u=Y(t.panel))?void 0:u.contains(s.value))return;var c=g(),d=c.indexOf(s.value);if(c.indexOf(Y(t.button))>d)return;e.preventDefault(),e.stopPropagation(),S(Y(t.panel),v.Last)}else e.preventDefault(),e.stopPropagation(),S(Y(t.panel),v.First)}},handleKeyUp:function(e){var o,r;if(!l&&t.popoverState.value===he.Open&&t.panel&&t.button)switch(e.key){case n.Tab:if(!s.value)return;if(null==(o=Y(t.button))?void 0:o.contains(s.value))return;if(null==(r=Y(t.panel))?void 0:r.contains(s.value))return;var i=g(),a=i.indexOf(s.value);if(i.indexOf(Y(t.button))>a)return;e.preventDefault(),e.stopPropagation(),S(Y(t.panel),v.Last)}},handleClick:function(){var n,o;e.disabled||(l?(t.closePopover(),null==(n=Y(t.button))||n.focus()):(t.popoverState.value===he.Closed&&(null==i||i(t.buttonId)),null==(o=Y(t.button))||o.focus(),t.togglePopover()))},handleFocus:function(){}}}}),ke=o.defineComponent({name:"PopoverOverlay",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t={open:we("PopoverOverlay").popoverState.value===he.Open};return s({props:r({},this.$props,{id:this.id,ref:"el","aria-hidden":!0,onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:t.open,name:"PopoverOverlay"})},setup:function(){var e=we("PopoverOverlay");return{id:"headlessui-popover-overlay-"+p(),handleClick:function(){e.closePopover()}}}}),Ie=o.defineComponent({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1}},render:function(){var t={open:we("PopoverPanel").popoverState.value===he.Open};return s({props:r({},this.$props,{ref:"el",id:this.id,onKeydown:this.handleKeyDown}),slot:t,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:t.open,name:"PopoverPanel"})},setup:function(e){var t=e.focus,r=we("PopoverPanel");return o.provide(Ce,r.panelId),o.onUnmounted((function(){r.panel.value=null})),o.watchEffect((function(){var e;if(t&&r.popoverState.value===he.Open&&r.panel){var n=document.activeElement;(null==(e=Y(r.panel))?void 0:e.contains(n))||S(Y(r.panel),v.First)}})),x("keydown",(function(e){var t;if(r.popoverState.value===he.Open&&Y(r.panel)&&e.key===n.Tab&&document.activeElement&&(null==(t=Y(r.panel))?void 0:t.contains(document.activeElement))){e.preventDefault();var o,i=S(Y(r.panel),e.shiftKey?v.Previous:v.Next);if(i===f.Underflow)return null==(o=Y(r.button))?void 0:o.focus();if(i===f.Overflow){if(!Y(r.button))return;var a=g(),l=a.indexOf(Y(r.button));S(a.splice(l+1).filter((function(e){var t;return!(null==(t=Y(r.panel))?void 0:t.contains(e))})),v.First)===f.Error&&S(document.body,v.First)}}})),x("focus",(function(){var e;t&&r.popoverState.value===he.Open&&Y(r.panel)&&((null==(e=Y(r.panel))?void 0:e.contains(document.activeElement))||r.closePopover())}),!0),{id:r.panelId,el:r.panel,handleKeyDown:function(e){var t,o;switch(e.key){case n.Escape:if(r.popoverState.value!==he.Open)return;if(!Y(r.panel))return;if(!(null==(t=Y(r.panel))?void 0:t.contains(document.activeElement)))return;e.preventDefault(),r.closePopover(),null==(o=Y(r.button))||o.focus()}}}}}),Re=o.defineComponent({name:"PopoverGroup",props:{as:{type:[Object,String],default:"div"}},render:function(){return s({props:r({},this.$props,{ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"PopoverGroup"})},setup:function(){var e=o.ref(null),t=o.ref([]);function n(e){var n=t.value.indexOf(e);-1!==n&&t.value.splice(n,1)}return o.provide(Oe,{registerPopover:function(e){return t.value.push(e),function(){n(e)}},unregisterPopover:n,isFocusWithinPopoverGroup:function(){var n,o=document.activeElement;return!!(null==(n=Y(e))?void 0:n.contains(o))||t.value.some((function(e){var t,n;return(null==(t=document.getElementById(e.buttonId))?void 0:t.contains(o))||(null==(n=document.getElementById(e.panelId))?void 0:n.contains(o))}))},closeOthers:function(e){for(var n,o=l(t.value);!(n=o()).done;){var r=n.value;r.buttonId!==e&&r.close()}}}),{el:e}}}),Te=Symbol("LabelContext");function Le(){var e=o.ref([]);return[o.computed((function(){return e.value.length>0?e.value.join(" "):void 0})),o.defineComponent({name:"LabelProvider",setup:function(t,n){var r=n.slots;return o.provide(Te,{register:function(t){return e.value.push(t),function(){var n=e.value.indexOf(t);-1!==n&&e.value.splice(n,1)}}}),function(){return r.default()}}})]}var je=o.defineComponent({name:"Label",props:{as:{type:[Object,String],default:"label"}},render:function(){return s({props:r({},this.$props,{id:this.id}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"Label"})},setup:function(){var e=o.inject(Te,{register:function(){return function(){}}}).register,t="headlessui-label-"+p();return o.onMounted((function(){return o.onUnmounted(e(t))})),{id:t}}}),Fe=Symbol("RadioGroupContext");function Ae(e){var t=o.inject(Fe,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <RadioGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,Ae),n}return t}var $e,Be=o.defineComponent({name:"RadioGroup",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"div"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean]}},render:function(){var e=this,t=i(this.$props,["modelValue","disabled"]),n={ref:"el",id:this.id,role:"radiogroup","aria-labelledby":this.labelledby,"aria-describedby":this.describedby};return o.h(this.DescriptionProvider,(function(){return[o.h(e.LabelProvider,(function(){return[s({props:r({},t,n),slot:{},attrs:e.$attrs,slots:e.$slots,name:"RadioGroup"})]}))]}))},setup:function(e,t){var r=t.emit,i=o.ref(null),a=o.ref([]),l=Le(),u=l[0],s=l[1],c=N(),d=c[0],m=c[1],h=o.computed((function(){return e.modelValue})),b={options:a,value:h,change:function(t){e.disabled||h.value!==t&&r("update:modelValue",t)},registerOption:function(e){var t,n=Array.from(null==(t=i.value)?void 0:t.querySelectorAll('[id^="headlessui-radiogroup-option-"]')).reduce((function(e,t,n){var o;return Object.assign(e,((o={})[t.id]=n,o))}),{});a.value.push(e),a.value.sort((function(e,t){return n[e.id]-n[t.id]}))},unregisterOption:function(e){var t=a.value.findIndex((function(t){return t.id===e}));-1!==t&&a.value.splice(t,1)}};return o.provide(Fe,b),o.watchEffect((function(){var e=Y(i);if(e)for(var t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"radio"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});t.nextNode();)t.currentNode.setAttribute("role","none")})),x("keydown",(function(e){if(i.value&&i.value.contains(e.target))switch(e.key){case n.ArrowLeft:case n.ArrowUp:if(e.preventDefault(),e.stopPropagation(),S(a.value.map((function(e){return e.element})),v.Previous|v.WrapAround)===f.Success){var t=a.value.find((function(e){return e.element===document.activeElement}));t&&b.change(t.propsRef.value)}break;case n.ArrowRight:case n.ArrowDown:if(e.preventDefault(),e.stopPropagation(),S(a.value.map((function(e){return e.element})),v.Next|v.WrapAround)===f.Success){var o=a.value.find((function(e){return e.element===document.activeElement}));o&&b.change(o.propsRef.value)}break;case n.Space:e.preventDefault(),e.stopPropagation();var r=a.value.find((function(e){return e.element===document.activeElement}));r&&b.change(r.propsRef.value)}})),{id:"headlessui-radiogroup-"+p(),labelledby:u,describedby:d,el:i,LabelProvider:s,DescriptionProvider:m}}});!function(e){e[e.Empty=1]="Empty",e[e.Active=2]="Active"}($e||($e={}));var Ne=o.defineComponent({name:"RadioGroupOption",props:{as:{type:[Object,String],default:"div"},value:{type:[Object,String]},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e,t,n=this,a=this.$props,l=a.value,u=a.className,c=void 0===u?a.class:u,d=i(a,["value","disabled","class","className"]),p=Ae("RadioGroupOption"),v=(null==(e=p.options.value)||null==(t=e[0])?void 0:t.id)===this.id,f=p.value.value===l,m={checked:f,active:Boolean(this.state&$e.Active)},h={id:this.id,ref:"el",role:"radio",class:ie(c,m),"aria-checked":f?"true":"false","aria-labelledby":this.labelledby,"aria-describedby":this.describedby,tabIndex:f||void 0===p.value.value&&v?0:-1,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur};return o.h(this.DescriptionProvider,(function(){return[o.h(n.LabelProvider,(function(){return[s({props:r({},d,h),slot:m,attrs:n.$attrs,slots:n.$slots,name:"RadioGroupOption"})]}))]}))},setup:function(e){var t=Ae("RadioGroupOption"),n="headlessui-radiogroup-option-"+p(),r=Le(),i=r[0],a=r[1],l=N(),u=l[0],s=l[1],c=o.ref(null),d=o.computed((function(){return{value:e.value}})),v=o.ref($e.Empty);return o.onMounted((function(){return t.registerOption({id:n,element:c,propsRef:d})})),o.onUnmounted((function(){return t.unregisterOption(n)})),{id:n,el:c,labelledby:i,describedby:u,state:v,LabelProvider:a,DescriptionProvider:s,handleClick:function(){var n,o=e.value;t.value.value!==o&&(v.value|=$e.Active,t.change(o),null==(n=c.value)||n.focus())},handleFocus:function(){v.value|=$e.Active},handleBlur:function(){v.value&=~$e.Active}}}}),Me=je,Ue=U,Ke=Symbol("GroupContext");function Ge(e){var t=o.inject(Ke,null);if(null===t){var n=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(n,Ge),n}return t}var Ve=o.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,t){var n=t.slots,r=t.attrs,i=o.ref(null),a=o.ref(null),l=o.ref(null);return o.provide(Ke,{switchRef:i,labelRef:a,descriptionRef:l}),function(){return s({props:e,slot:{},slots:n,attrs:r,name:"SwitchGroup"})}}}),We=o.defineComponent({name:"Switch",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"button"},modelValue:{type:[Object,Boolean],default:null},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e=o.inject(Ke,null),t=this.$props,n=t.className,i=void 0===n?t.class:n,a=o.computed((function(){var t;return null==(t=Y(null==e?void 0:e.labelRef))?void 0:t.id})),l=o.computed((function(){var t;return null==(t=Y(null==e?void 0:e.descriptionRef))?void 0:t.id})),u={checked:this.$props.modelValue},c={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:ie(i,u),"aria-checked":this.$props.modelValue,"aria-labelledby":a.value,"aria-describedby":l.value,onClick:this.handleClick,onKeyup:this.handleKeyUp,onKeypress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(c,{type:"button"}),s({props:r({},this.$props,c),slot:u,attrs:this.$attrs,slots:this.$slots,name:"Switch"})},setup:function(e,t){var r=t.emit,i=o.inject(Ke,null);function a(){r("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+p(),el:null==i?void 0:i.switchRef,handleClick:function(e){e.preventDefault(),a()},handleKeyUp:function(e){e.key!==n.Tab&&e.preventDefault(),e.key===n.Space&&a()},handleKeyPress:function(e){e.preventDefault()}}}}),qe=o.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return s({props:r({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"SwitchLabel"})},setup:function(){var e=Ge("SwitchLabel");return{id:"headlessui-switch-label-"+p(),el:e.labelRef,handleClick:function(){var t=Y(e.switchRef);null==t||t.click(),null==t||t.focus({preventScroll:!0})}}}}),He=o.defineComponent({name:"SwitchDescription",props:{as:{type:[Object,String],default:"p"}},render:function(){return s({props:r({},this.$props,{id:this.id,ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"SwitchDescription"})},setup:function(){var e=Ge("SwitchDescription");return{id:"headlessui-switch-description-"+p(),el:e.descriptionRef}}});exports.Dialog=q,exports.DialogDescription=z,exports.DialogOverlay=H,exports.DialogTitle=_,exports.Disclosure=ee,exports.DisclosureButton=te,exports.DisclosurePanel=ne,exports.FocusTrap=oe,exports.Listbox=se,exports.ListboxButton=de,exports.ListboxLabel=ce,exports.ListboxOption=ve,exports.ListboxOptions=pe,exports.Menu=be,exports.MenuButton=ge,exports.MenuItem=Se,exports.MenuItems=ye,exports.Popover=Pe,exports.PopoverButton=De,exports.PopoverGroup=Re,exports.PopoverOverlay=ke,exports.PopoverPanel=Ie,exports.Portal=F,exports.PortalGroup=$,exports.RadioGroup=Be,exports.RadioGroupDescription=Ue,exports.RadioGroupLabel=Me,exports.RadioGroupOption=Ne,exports.Switch=We,exports.SwitchDescription=He,exports.SwitchGroup=Ve,exports.SwitchLabel=qe; | ||
//# sourceMappingURL=headlessui.cjs.production.min.js.map |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).headlessui={},e.Vue)}(this,(function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,o,r={},u=Object.keys(e);for(o=0;o<u.length;o++)t.indexOf(n=u[o])>=0||(r[n]=e[n]);return r}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),l=2;l<o;l++)r[l-2]=arguments[l];return"function"==typeof n?n.apply(void 0,r):n}var a=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(a,u),a}var l,a;function i(e){var t,r,i=e.visible,c=void 0===i||i,d=e.features,v=void 0===d?l.None:d,f=o(e,["visible","features"]);return c||v&l.Static&&f.props.static?s(f):v&l.RenderStrategy?u(null==(t=f.props.unmount)||t?a.Unmount:a.Hidden,((r={})[a.Unmount]=function(){return null},r[a.Hidden]=function(){return s(n({},f,{props:n({},f.props,{hidden:!0,style:{display:"none"}})}))},r)):s(f)}function s(e){var n=e.attrs,u=e.slots,l=e.slot,a=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),u=function(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return r(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,void 0):void 0}}(e))){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}(t);!(n=u()).done;){var l=n.value;l in o&&delete o[l]}return o}(e.props,["unmount","static"]),i=a.as,s=o(a,["as"]),c=null==u.default?void 0:u.default(l);if("template"===i){if(Object.keys(s).length>0||"class"in n){var d=null!=c?c:[],v=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return t.cloneVNode(v,s)}return c}return t.h(i,s,c)}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(l||(l={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(a||(a={}));var c,d,v,f=0;function p(){return++f}function b(e,t){var n=t.resolveItems();if(n.length<=0)return null;var o=t.resolveActiveIndex(),r=null!=o?o:-1,u=function(){switch(e.focus){case d.First:return n.findIndex((function(e){return!t.resolveDisabled(e)}));case d.Previous:var o=n.slice().reverse().findIndex((function(e,n,o){return!(-1!==r&&o.length-n-1>=r||t.resolveDisabled(e))}));return-1===o?o:n.length-1-o;case d.Next:return n.findIndex((function(e,n){return!(n<=r||t.resolveDisabled(e))}));case d.Last:var u=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===u?u:n.length-1-u;case d.Specific:return n.findIndex((function(n){return t.resolveId(n)===e.id}));case d.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===u?o:u}function m(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(c||(c={})),function(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"}(d||(d={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(v||(v={}));var h=Symbol("MenuContext");function y(e){var n=t.inject(h,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,y),o}return n}var x,S=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,u=t.ref(v.Closed),l=t.ref(null),a=t.ref(null),s=t.ref([]),c=t.ref(""),f=t.ref(null),p={menuState:u,buttonRef:l,itemsRef:a,items:s,searchQuery:c,activeItemIndex:f,closeMenu:function(){u.value=v.Closed,f.value=null},openMenu:function(){return u.value=v.Open},goToItem:function(e,t){var n=b(e===d.Specific?{focus:d.Specific,id:t}:{focus:e},{resolveItems:function(){return s.value},resolveActiveIndex:function(){return f.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===c.value&&f.value===n||(c.value="",f.value=n)},search:function(e){c.value+=e;var t=s.value.findIndex((function(e){return e.dataRef.textValue.startsWith(c.value)&&!e.dataRef.disabled}));-1!==t&&t!==f.value&&(f.value=t)},clearSearch:function(){c.value=""},registerItem:function(e,t){s.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=s.value.slice(),n=null!==f.value?t[f.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),s.value=t,f.value=o===f.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,i=document.activeElement;u.value===v.Open&&((null==(t=l.value)?void 0:t.contains(r))||((null==(n=a.value)?void 0:n.contains(r))||p.closeMenu(),i!==document.body&&(null==i?void 0:i.contains(r))||e.defaultPrevented||null==(o=l.value)||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),t.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),t.provide(h,p),function(){return i({props:e,slot:{open:u.value===v.Open},slots:o,attrs:r})}}}),g=t.defineComponent({props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=y("MenuButton"),o={open:t.menuState.value===v.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.itemsRef.value)?void 0:e.id,"aria-expanded":t.menuState.value===v.Open||void 0,onKeyDown:this.handleKeyDown,onClick:this.handleClick};return i({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var n=y("MenuButton");return{id:"headlessui-menu-button-"+p(),el:n.buttonRef,handleKeyDown:function(e){switch(e.key){case c.Space:case c.Enter:case c.ArrowDown:e.preventDefault(),n.openMenu(),t.nextTick((function(){var e;null==(e=n.itemsRef.value)||e.focus({preventScroll:!0}),n.goToItem(d.First)}));break;case c.ArrowUp:e.preventDefault(),n.openMenu(),t.nextTick((function(){var e;null==(e=n.itemsRef.value)||e.focus({preventScroll:!0}),n.goToItem(d.Last)}))}},handleClick:function(o){var r;e.disabled||(n.menuState.value===v.Open?(n.closeMenu(),t.nextTick((function(){var e;return null==(e=n.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),n.openMenu(),r=function(){var e;return null==(e=n.itemsRef.value)?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),w=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o=y("MenuItems"),r={open:o.menuState.value===v.Open},u={"aria-activedescendant":null===o.activeItemIndex.value||null==(e=o.items.value[o.activeItemIndex.value])?void 0:e.id,"aria-labelledby":null==(t=o.buttonRef.value)?void 0:t.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return i({props:n({},this.$props,u),slot:r,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:r.open})},setup:function(){var e=y("MenuItems"),n="headlessui-menu-items-"+p(),o=t.ref(null);return t.watchEffect((function(){var t=e.itemsRef.value;if(t&&e.menuState.value===v.Open)for(var n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"menuitem"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});n.nextNode();)n.currentNode.setAttribute("role","none")})),{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case c.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case c.Enter:var r;n.preventDefault(),null!==e.activeItemIndex.value&&(null==(r=document.getElementById(e.items.value[e.activeItemIndex.value].id))||r.click()),e.closeMenu(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.ArrowDown:return n.preventDefault(),e.goToItem(d.Next);case c.ArrowUp:return n.preventDefault(),e.goToItem(d.Previous);case c.Home:case c.PageUp:return n.preventDefault(),e.goToItem(d.First);case c.End:case c.PageDown:return n.preventDefault(),e.goToItem(d.Last);case c.Escape:n.preventDefault(),e.closeMenu(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),O=t.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,u=o.attrs,l=y("MenuItem"),a="headlessui-menu-item-"+p(),s=e.disabled,c=e.className,f=void 0===c?e.class:c,b=t.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===a})),h=t.ref({disabled:s,textValue:""});function x(e){if(s)return e.preventDefault();l.closeMenu(),t.nextTick((function(){var e;return null==(e=l.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function S(){if(s)return l.goToItem(d.Nothing);l.goToItem(d.Specific,a)}function g(){s||b.value||l.goToItem(d.Specific,a)}function w(){s||b.value&&l.goToItem(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(a))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(h.value.textValue=n)})),t.onMounted((function(){return l.registerItem(a,h)})),t.onUnmounted((function(){return l.unregisterItem(a)})),t.watchEffect((function(){l.menuState.value===v.Open&&b.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(a))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:b.value,disabled:s},o={id:a,role:"menuitem",tabIndex:-1,class:m(f,t),"aria-disabled":!0===s||void 0,onClick:x,onFocus:S,onPointerMove:g,onMouseMove:g,onPointerLeave:w,onMouseLeave:w};return i({props:n({},e,o),slot:t,attrs:u,slots:r})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(x||(x={}));var I=Symbol("ListboxContext");function k(e){var n=t.inject(I,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,k),o}return n}var T=t.defineComponent({name:"Listbox",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean],default:null}},setup:function(e,n){var r=n.slots,u=n.attrs,l=n.emit,a=e.disabled,s=o(e,["modelValue","disabled"]),c=t.ref(x.Closed),v=t.ref(null),f=t.ref(null),p=t.ref(null),m=t.ref([]),h=t.ref(""),y=t.ref(null),S=t.computed((function(){return e.modelValue})),g={listboxState:c,value:S,labelRef:v,buttonRef:f,optionsRef:p,disabled:a,options:m,searchQuery:h,activeOptionIndex:y,closeListbox:function(){a||c.value!==x.Closed&&(c.value=x.Closed,y.value=null)},openListbox:function(){a||c.value!==x.Open&&(c.value=x.Open)},goToOption:function(e,t){if(!a&&c.value!==x.Closed){var n=b(e===d.Specific?{focus:d.Specific,id:t}:{focus:e},{resolveItems:function(){return m.value},resolveActiveIndex:function(){return y.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===h.value&&y.value===n||(h.value="",y.value=n)}},search:function(e){if(!a&&c.value!==x.Closed){h.value+=e;var t=m.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(h.value)}));-1!==t&&t!==y.value&&(y.value=t)}},clearSearch:function(){a||c.value!==x.Closed&&""!==h.value&&(h.value="")},registerOption:function(e,t){m.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=m.value.slice(),n=null!==y.value?t[y.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),m.value=t,y.value=o===y.value||null===n?null:t.indexOf(n)},select:function(e){a||l("update:modelValue",e)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,u=document.activeElement;c.value===x.Open&&((null==(t=f.value)?void 0:t.contains(r))||((null==(n=p.value)?void 0:n.contains(r))||g.closeListbox(),u!==document.body&&(null==u?void 0:u.contains(r))||e.defaultPrevented||null==(o=f.value)||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),t.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),t.provide(I,g),function(){return i({props:s,slot:{open:c.value===x.Open,disabled:a},slots:r,attrs:u})}}}),R=t.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=k("ListboxLabel"),t={open:e.listboxState.value===x.Open,disabled:e.disabled};return i({props:n({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=k("ListboxLabel");return{id:"headlessui-listbox-label-"+p(),el:e.labelRef,handleClick:function(){var t;null==(t=e.buttonRef.value)||t.focus({preventScroll:!0})}}}}),L=t.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=k("ListboxButton"),o={open:t.listboxState.value===x.Open,disabled:t.disabled},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.optionsRef.value)?void 0:e.id,"aria-expanded":t.listboxState.value===x.Open||void 0,"aria-labelledby":t.labelRef.value?[t.labelRef.value.id,this.id].join(" "):void 0,disabled:t.disabled,onKeyDown:this.handleKeyDown,onClick:this.handleClick};return i({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=k("ListboxButton");return{id:"headlessui-listbox-button-"+p(),el:e.buttonRef,handleKeyDown:function(n){switch(n.key){case c.Space:case c.Enter:case c.ArrowDown:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null==(t=e.optionsRef.value)||t.focus({preventScroll:!0}),e.value.value||e.goToOption(d.First)}));break;case c.ArrowUp:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null==(t=e.optionsRef.value)||t.focus({preventScroll:!0}),e.value.value||e.goToOption(d.Last)}))}},handleClick:function(n){var o;e.disabled||(e.listboxState.value===x.Open?(e.closeListbox(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}))):(n.preventDefault(),e.openListbox(),o=function(){var t;return null==(t=e.optionsRef.value)?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(o)}))))}}}}),D=t.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o,r,u=k("ListboxOptions"),a={open:u.listboxState.value===x.Open},s={"aria-activedescendant":null===u.activeOptionIndex.value||null==(e=u.options.value[u.activeOptionIndex.value])?void 0:e.id,"aria-labelledby":null!=(t=null==(o=u.labelRef.value)?void 0:o.id)?t:null==(r=u.buttonRef.value)?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return i({props:n({},this.$props,s),slot:a,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:a.open})},setup:function(){var e=k("ListboxOptions"),n="headlessui-listbox-options-"+p(),o=t.ref(null);return{id:n,el:e.optionsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case c.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case c.Enter:n.preventDefault(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),e.closeListbox(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.ArrowDown:return n.preventDefault(),e.goToOption(d.Next);case c.ArrowUp:return n.preventDefault(),e.goToOption(d.Previous);case c.Home:case c.PageUp:return n.preventDefault(),e.goToOption(d.First);case c.End:case c.PageDown:return n.preventDefault(),e.goToOption(d.Last);case c.Escape:n.preventDefault(),e.closeListbox(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),E=t.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,u=o.attrs,l=k("ListboxOption"),a="headlessui-listbox-option-"+p(),s=e.disabled,c=e.className,v=void 0===c?e.class:c,f=e.value,b=t.computed((function(){return null!==l.activeOptionIndex.value&&l.options.value[l.activeOptionIndex.value].id===a})),h=t.computed((function(){return t.toRaw(l.value.value)===t.toRaw(f)})),y=t.ref({disabled:s,value:f,textValue:""});function S(e){if(s)return e.preventDefault();l.select(f),l.closeListbox(),t.nextTick((function(){var e;return null==(e=l.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function g(){if(s)return l.goToOption(d.Nothing);l.goToOption(d.Specific,a)}function w(){s||b.value||l.goToOption(d.Specific,a)}function O(){s||b.value&&l.goToOption(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(a))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(y.value.textValue=n)})),t.onMounted((function(){return l.registerOption(a,y)})),t.onUnmounted((function(){return l.unregisterOption(a)})),t.onMounted((function(){t.watch([l.listboxState,h],(function(){var e;l.listboxState.value===x.Open&&h.value&&(l.goToOption(d.Specific,a),null==(e=document.getElementById(a))||null==e.focus||e.focus())}),{immediate:!0})})),t.watchEffect((function(){l.listboxState.value===x.Open&&b.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(a))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:b.value,selected:h.value,disabled:s},o={id:a,role:"option",tabIndex:-1,class:m(v,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===h.value?h.value:void 0,onClick:S,onFocus:g,onPointerMove:w,onMouseMove:w,onPointerLeave:O,onMouseLeave:O};return i({props:n({},e,o),slot:t,attrs:u,slots:r})}}}),C=Symbol("GroupContext");function M(e){var n=t.inject(C,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,M),o}return n}var j=t.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,u=t.ref(null),l=t.ref(null);return t.provide(C,{switchRef:u,labelRef:l}),function(){return i({props:e,slot:{},slots:o,attrs:r})}}}),N=t.defineComponent({name:"Switch",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"button"},modelValue:{type:[Object,Boolean],default:null},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e=t.inject(C,null),o=this.$props,r=o.className,u=void 0===r?o.class:r,l=t.computed((function(){var t;return null==e||null==(t=e.labelRef.value)?void 0:t.id})),a={checked:this.$props.modelValue},s={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:m(u,a),"aria-checked":this.$props.modelValue,"aria-labelledby":l.value,onClick:this.handleClick,onKeyUp:this.handleKeyUp,onKeyPress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(s,{type:"button"}),i({props:n({},this.$props,s),slot:a,attrs:this.$attrs,slots:this.$slots})},setup:function(e,n){var o=n.emit,r=t.inject(C,null);function u(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+p(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),u()},handleKeyUp:function(e){e.key!==c.Tab&&e.preventDefault(),e.key===c.Space&&u()},handleKeyPress:function(e){e.preventDefault()}}}}),A=t.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return i({props:n({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=M("SwitchLabel");return{id:"headlessui-switch-label-"+p(),el:e.labelRef,handleClick:function(){var t,n;null==(t=e.switchRef.value)||t.click(),null==(n=e.switchRef.value)||n.focus({preventScroll:!0})}}}});e.Listbox=T,e.ListboxButton=L,e.ListboxLabel=R,e.ListboxOption=E,e.ListboxOptions=D,e.Menu=S,e.MenuButton=g,e.MenuItem=O,e.MenuItems=w,e.Switch=N,e.SwitchGroup=j,e.SwitchLabel=A,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).headlessui={},e.Vue)}(this,(function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(n=i[o])>=0||(r[n]=e[n]);return r}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function i(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return r(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}function a(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),i=2;i<o;i++)r[i-2]=arguments[i];return"function"==typeof n?n.apply(void 0,r):n}var l=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(l,a),l}var l,u,s;function c(e){var t,r,i=e.visible,s=void 0===i||i,c=e.features,p=void 0===c?l.None:c,f=o(e,["visible","features"]);return s||p&l.Static&&f.props.static?d(f):p&l.RenderStrategy?a(null==(t=f.props.unmount)||t?u.Unmount:u.Hidden,((r={})[u.Unmount]=function(){return null},r[u.Hidden]=function(){return d(n({},f,{props:n({},f.props,{hidden:!0,style:{display:"none"}})}))},r)):d(f)}function d(e){var n,r=e.attrs,a=e.slots,l=e.slot,u=e.name,s=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),r=i(t);!(n=r()).done;){var a=n.value;a in o&&delete o[a]}return o}(e.props,["unmount","static"]),c=s.as,d=o(s,["as"]),p=null==a.default?void 0:a.default(l);if("template"===c){if(Object.keys(d).length>0||Object.keys(r).length>0){var f=null!=p?p:[],v=f[0],m=f.slice(1);if(null==(n=v)||"string"!=typeof n.type&&"object"!=typeof n.type||m.length>0)throw new Error(['Passing props on "template"!',"","The current component <"+u+' /> is rendering a "template".',"However we need to passthrough the following props:",Object.keys(d).concat(Object.keys(r)).map((function(e){return" - "+e})).join("\n"),"","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((function(e){return" - "+e})).join("\n")].join("\n"));return t.cloneVNode(v,d)}return p}return t.h(c,d,p)}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(l||(l={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(u||(u={})),function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowLeft="ArrowLeft",e.ArrowUp="ArrowUp",e.ArrowRight="ArrowRight",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(s||(s={}));var p=0;function f(){return++p}var v,m,h,b,y=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map((function(e){return e+":not([tabindex='-1'])"})).join(",");function g(e){return void 0===e&&(e=document.body),null==e?[]:Array.from(e.querySelectorAll(y))}function S(e){null==e||e.focus({preventScroll:!0})}function w(e,t){var n=Array.isArray(e)?e:g(e),o=document.activeElement,r=function(){if(t&(v.First|v.Next))return h.Next;if(t&(v.Previous|v.Last))return h.Previous;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),i=function(){if(t&v.First)return 0;if(t&v.Previous)return Math.max(0,n.indexOf(o))-1;if(t&v.Next)return Math.max(0,n.indexOf(o))+1;if(t&v.Last)return n.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")}(),a=t&v.NoScroll?{preventScroll:!0}:{},l=0,u=n.length,s=void 0;do{var c;if(l>=u||l+u<=0)return m.Error;var d=i+l;if(t&v.WrapAround)d=(d+u)%u;else{if(d<0)return m.Underflow;if(d>=u)return m.Overflow}null==(c=s=n[d])||c.focus(a),l+=r}while(s!==document.activeElement);return s.hasAttribute("tabindex")||s.setAttribute("tabindex","0"),m.Success}function O(e,n,o){window.addEventListener(e,n,o),t.onUnmounted((function(){return window.removeEventListener(e,n,o)}))}function x(e,t){for(var n,o=i(e);!(n=o()).done;)if(n.value.contains(t))return!0;return!1}function E(e,n,o){void 0===n&&(n=t.ref(!0)),void 0===o&&(o=t.ref({}));var r=t.ref("undefined"!=typeof window?document.activeElement:null),a=t.ref(null);function l(){if(n.value&&1===e.value.size){var t=o.value.initialFocus,l=document.activeElement;if(t){if(t===l)return}else if(x(e.value,l))return;if(r.value=l,t)S(t);else{for(var u,s=!1,c=i(e.value);!(u=c()).done;)if(w(u.value,v.First)===m.Success){s=!0;break}if(!s)throw new Error("There are no focusable elements inside the <FocusTrap />")}a.value=document.activeElement}}function u(){S(r.value),r.value=null,a.value=null}t.watchEffect(l),t.onUpdated((function(){n.value?l():u()})),t.onUnmounted(u),O("keydown",(function(t){if(n.value&&t.key===s.Tab&&document.activeElement&&1===e.value.size){t.preventDefault();for(var o,r=i(e.value);!(o=r()).done;)if(w(o.value,(t.shiftKey?v.Previous:v.Next)|v.WrapAround)===m.Success){a.value=document.activeElement;break}}})),O("focus",(function(t){if(n.value&&1===e.value.size){var o=a.value;if(o){var r=t.target;r&&r instanceof HTMLElement?x(e.value,r)?(a.value=r,S(r)):(t.preventDefault(),t.stopPropagation(),S(o)):S(a.value)}}}),!0)}!function(e){e[e.First=1]="First",e[e.Previous=2]="Previous",e[e.Next=4]="Next",e[e.Last=8]="Last",e[e.WrapAround=16]="WrapAround",e[e.NoScroll=32]="NoScroll"}(v||(v={})),function(e){e[e.Error=0]="Error",e[e.Overflow=1]="Overflow",e[e.Success=2]="Success",e[e.Underflow=3]="Underflow"}(m||(m={})),function(e){e[e.Previous=-1]="Previous",e[e.Next=1]="Next"}(h||(h={})),function(e){e[e.Strict=0]="Strict",e[e.Loose=1]="Loose"}(b||(b={}));var C=new Set,P=new Map;function D(e){e.setAttribute("aria-hidden","true"),e.inert=!0}function k(e){var t=P.get(e);t&&(null===t["aria-hidden"]?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",t["aria-hidden"]),e.inert=t.inert)}var I,R=Symbol("StackContext");function T(){return t.inject(R,(function(){}))}!function(e){e[e.AddElement=0]="AddElement",e[e.RemoveElement=1]="RemoveElement"}(I||(I={}));var L=t.defineComponent({name:"StackProvider",props:{onUpdate:{type:Function,default:void 0}},setup:function(e,n){var o=n.slots,r=T();return t.provide(R,(function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];null==e.onUpdate||e.onUpdate.apply(e,n),r.apply(void 0,n)})),function(){return o.default()}}}),j=Symbol("ForcePortalRootContext"),F=t.defineComponent({name:"ForcePortalRoot",props:{force:{type:Boolean,default:!1}},setup:function(e,n){var o=n.slots;return t.provide(j,e.force),function(){return o.default()}}}),A=t.defineComponent({name:"Portal",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,i=t.inject(j,!1),a=t.inject($,null),l=t.ref(!0===i||null===a?function(){var e=document.getElementById("headlessui-portal-root");if(e)return e;var t=document.createElement("div");return t.setAttribute("id","headlessui-portal-root"),document.body.appendChild(t)}():a.resolveTarget());t.watchEffect((function(){i||null!==a&&(l.value=a.resolveTarget())}));var u=t.ref(null);return function(e){var n=T();t.watchEffect((function(t){var o=null==e?void 0:e.value;o&&(n(I.AddElement,o),t((function(){return n(I.RemoveElement,o)})))}))}(u),t.onUnmounted((function(){var e,t=document.getElementById("headlessui-portal-root");t&&l.value===t&&l.value.children.length<=0&&(null==(e=l.value.parentElement)||e.removeChild(l.value))})),function(){return null===l.value?null:t.h(L,{},(function(){return[t.h(t.Teleport,{to:l.value},[t.h("div",{ref:u},[c({props:e,slot:{},attrs:r,slots:o,name:"Portal"})])])]}))}}}),$=Symbol("PortalGroupContext"),B=t.defineComponent({name:"PortalGroup",props:{as:{type:[Object,String],default:"template"},target:{type:Object,default:null}},setup:function(e,n){var r=n.attrs,i=n.slots,a=t.reactive({resolveTarget:function(){return e.target}});return t.provide($,a),function(){return c({props:o(e,["target"]),slot:{},attrs:r,slots:i,name:"PortalGroup"})}}}),N=Symbol("DescriptionContext");function M(){var e=t.ref([]);return[t.computed((function(){return e.value.length>0?e.value.join(" "):void 0})),t.defineComponent({name:"DescriptionProvider",props:["slot"],setup:function(n,o){var r=o.slots,i=t.computed((function(){return n.slot}));return t.provide(N,{register:function(t){return e.value.push(t),function(){var n=e.value.indexOf(t);-1!==n&&e.value.splice(n,1)}},slot:i}),function(){return r.default()}}})]}var U,K=t.defineComponent({name:"Description",props:{as:{type:[Object,String],default:"p"}},render:function(){return c({props:n({},this.$props,{id:this.id}),slot:this.slot,attrs:this.$attrs,slots:this.$slots,name:"Description"})},setup:function(){var e=t.inject(N,{register:function(){return function(){}},slot:{}}),n=e.register,o=e.slot,r="headlessui-description-"+f();return t.onMounted((function(){return t.onUnmounted(n(r))})),{id:r,slot:o}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(U||(U={}));var V=Symbol("DialogContext");function G(e){var n=t.inject(V,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Dialog /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,G),o}return n}var W,q="DC8F892D-2EBD-447C-A4C8-A03058436FF4",H=t.defineComponent({name:"Dialog",inheritAttrs:!1,props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},open:{type:Boolean,default:q},onClose:{type:Function,default:q},initialFocus:{type:Object,default:null}},render:function(){var e=this,r=n({ref:"el",id:this.id,role:"dialog","aria-modal":this.dialogState===U.Open||void 0,"aria-labelledby":this.titleId,"aria-describedby":this.describedby},this.$attrs),i=this.$props,u=i.open,s=o(i,["open","onClose","initialFocus"]),d=this.containers,p={open:this.dialogState===U.Open};return t.h(L,{onUpdate:function(e,t){var n;return a(e,((n={})[I.AddElement]=function(){d.add(t)},n[I.RemoveElement]=function(){d.delete(t)},n))}},(function(){return[t.h(F,{force:!0},(function(){return[t.h(A,{},(function(){return[t.h(B,{target:e.dialogRef},(function(){return[t.h(F,{force:!1},(function(){return[t.h(e.DescriptionProvider,{slot:p},(function(){return[c({props:n({},s,r),slot:p,attrs:e.$attrs,slots:e.$slots,visible:u,features:l.RenderStrategy|l.Static,name:"Dialog"})]}))]}))]}))]}))]}))]}))},setup:function(e){var n=t.ref(new Set),o=e.open!==q,r=e.onClose!==q;if(!o&&!r)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!o)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!r)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if("boolean"!=typeof e.open)throw new Error("You provided an `open` prop to the `Dialog`, but the value is not a boolean. Received: "+(e.open===q?void 0:e.open));if("function"!=typeof e.onClose)throw new Error("You provided an `onClose` prop to the `Dialog`, but the value is not a function. Received: "+(e.onClose===q?void 0:e.onClose));var a=t.computed((function(){return e.open?U.Open:U.Closed})),l=t.ref(null),u=t.ref(a.value===U.Open);t.onUpdated((function(){u.value=a.value===U.Open}));var c="headlessui-dialog-"+f(),d=t.computed((function(){return{initialFocus:e.initialFocus}}));E(n,u,d),function(e,n){void 0===n&&(n=t.ref(!0)),t.watchEffect((function(t){if(n.value&&e.value){var o=e.value;C.add(o);for(var r,a=i(P.keys());!(r=a()).done;){var l=r.value;l.contains(o)&&(k(l),P.delete(l))}document.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement){for(var t,n=i(C);!(t=n()).done;)if(e.contains(t.value))return;1===C.size&&(P.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),D(e))}})),t((function(){if(C.delete(o),C.size>0)document.querySelectorAll("body > *").forEach((function(e){if(e instanceof HTMLElement&&!P.has(e)){for(var t,n=i(C);!(t=n()).done;)if(e.contains(t.value))return;P.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),D(e)}}));else for(var e,t=i(P.keys());!(e=t()).done;){var n=e.value;k(n),P.delete(n)}}))}}))}(l,u);var p=M(),v=p[0],m=p[1],h=t.ref(null),b={titleId:h,dialogState:a,setTitleId:function(e){h.value!==e&&(h.value=e)},close:function(){e.onClose(!1)}};return t.provide(V,b),O("mousedown",(function(e){var o=e.target;a.value===U.Open&&1===n.value.size&&(x(n.value,o)||(b.close(),t.nextTick((function(){null==o||o.focus()}))))})),O("keydown",(function(e){e.key===s.Escape&&a.value===U.Open&&(n.value.size>1||b.close())})),t.watchEffect((function(e){if(a.value===U.Open){var t=document.documentElement.style.overflow,n=document.documentElement.style.paddingRight,o=window.innerWidth-document.documentElement.clientWidth;document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=o+"px",e((function(){document.documentElement.style.overflow=t,document.documentElement.style.paddingRight=n}))}})),t.watchEffect((function(e){if(a.value===U.Open&&l.value){var t=new IntersectionObserver((function(e){for(var t,n=i(e);!(t=n()).done;){var o=t.value;0===o.boundingClientRect.x&&0===o.boundingClientRect.y&&0===o.boundingClientRect.width&&0===o.boundingClientRect.height&&b.close()}}));t.observe(l.value),e((function(){return t.disconnect()}))}})),{id:c,el:l,dialogRef:l,containers:n,dialogState:a,titleId:h,describedby:v,DescriptionProvider:m}}}),_=t.defineComponent({name:"DialogOverlay",props:{as:{type:[Object,String],default:"div"}},render:function(){var e=G("DialogOverlay");return c({props:n({},this.$props,{ref:"el",id:this.id,"aria-hidden":!0,onClick:this.handleClick}),slot:{open:e.dialogState.value===U.Open},attrs:this.$attrs,slots:this.$slots,name:"DialogOverlay"})},setup:function(){var e=G("DialogOverlay");return{id:"headlessui-dialog-overlay-"+f(),handleClick:function(){e.close()}}}}),z=t.defineComponent({name:"DialogTitle",props:{as:{type:[Object,String],default:"h2"}},render:function(){var e=G("DialogTitle");return c({props:n({},this.$props,{id:this.id}),slot:{open:e.dialogState.value===U.Open},attrs:this.$attrs,slots:this.$slots,name:"DialogTitle"})},setup:function(){var e=G("DialogTitle"),n="headlessui-dialog-title-"+f();return t.onMounted((function(){e.setTitleId(n),t.onUnmounted((function(){return e.setTitleId(null)}))})),{id:n}}}),Y=K;function Q(e){var t;return null==e||null==e.value?null:null!=(t=e.value.$el)?t:e.value}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(W||(W={}));var J=Symbol("DisclosureContext");function X(e){var n=t.inject(J,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Disclosure /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,X),o}return n}var Z,ee,te=t.defineComponent({name:"Disclosure",props:{as:{type:[Object,String],default:"template"}},setup:function(e,o){var r=o.slots,i=o.attrs,l=n({},e),u=t.ref(W.Closed),s=t.ref(null);return t.provide(J,{disclosureState:u,panelRef:s,toggleDisclosure:function(){var e;u.value=a(u.value,((e={})[W.Open]=W.Closed,e[W.Closed]=W.Open,e))}}),function(){return c({props:l,slot:{open:u.value===W.Open},slots:r,attrs:i,name:"Disclosure"})}}}),ne=t.defineComponent({name:"DisclosureButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},render:function(){var e=X("DisclosureButton"),t={open:e.disclosureState.value===W.Open};return c({props:n({},this.$props,{id:this.id,type:"button","aria-expanded":e.disclosureState.value===W.Open||void 0,"aria-controls":this.ariaControls,onClick:this.handleClick,onKeydown:this.handleKeyDown}),slot:t,attrs:this.$attrs,slots:this.$slots,name:"DisclosureButton"})},setup:function(e){var n=X("DisclosureButton");return{id:"headlessui-disclosure-button-"+f(),ariaControls:t.computed((function(){var e,t;return null!=(e=null==(t=Q(n.panelRef))?void 0:t.id)?e:void 0})),handleClick:function(){e.disabled||n.toggleDisclosure()},handleKeyDown:function(t){if(!e.disabled)switch(t.key){case s.Space:case s.Enter:t.preventDefault(),n.toggleDisclosure()}}}}}),oe=t.defineComponent({name:"DisclosurePanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e={open:X("DisclosurePanel").disclosureState.value===W.Open};return c({props:n({},this.$props,{id:this.id,ref:"el"}),slot:e,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:e.open,name:"DisclosurePanel"})},setup:function(){var e=X("DisclosurePanel");return{id:"headlessui-disclosure-panel-"+f(),el:e.panelRef}}}),re=t.defineComponent({name:"FocusTrap",props:{as:{type:[Object,String],default:"div"},initialFocus:{type:Object,default:null}},render:function(){return c({props:n({},o(this.$props,["initialFocus"]),{ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"FocusTrap"})},setup:function(e){var n=t.ref(new Set),o=t.ref(null),r=t.ref(!0),i=t.computed((function(){return{initialFocus:e.initialFocus}}));return t.onMounted((function(){o.value&&(n.value.add(o.value),E(n,r,i))})),t.onUnmounted((function(){r.value=!1})),{el:o}}});function ie(e,t){var n=t.resolveItems();if(n.length<=0)return null;var o=t.resolveActiveIndex(),r=null!=o?o:-1,i=function(){switch(e.focus){case Z.First:return n.findIndex((function(e){return!t.resolveDisabled(e)}));case Z.Previous:var o=n.slice().reverse().findIndex((function(e,n,o){return!(-1!==r&&o.length-n-1>=r||t.resolveDisabled(e))}));return-1===o?o:n.length-1-o;case Z.Next:return n.findIndex((function(e,n){return!(n<=r||t.resolveDisabled(e))}));case Z.Last:var i=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===i?i:n.length-1-i;case Z.Specific:return n.findIndex((function(n){return t.resolveId(n)===e.id}));case Z.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===i?o:i}function ae(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(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"}(Z||(Z={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(ee||(ee={}));var le=Symbol("ListboxContext");function ue(e){var n=t.inject(le,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,ue),o}return n}var se,ce=t.defineComponent({name:"Listbox",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"template"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean],default:null}},setup:function(e,n){var r=n.slots,i=n.attrs,a=n.emit,l=e.disabled,u=o(e,["modelValue","disabled"]),s=t.ref(ee.Closed),d=t.ref(null),p=t.ref(null),f=t.ref(null),v=t.ref([]),m=t.ref(""),h=t.ref(null),b=t.computed((function(){return e.modelValue})),y={listboxState:s,value:b,labelRef:d,buttonRef:p,optionsRef:f,disabled:l,options:v,searchQuery:m,activeOptionIndex:h,closeListbox:function(){l||s.value!==ee.Closed&&(s.value=ee.Closed,h.value=null)},openListbox:function(){l||s.value!==ee.Open&&(s.value=ee.Open)},goToOption:function(e,t){if(!l&&s.value!==ee.Closed){var n=ie(e===Z.Specific?{focus:Z.Specific,id:t}:{focus:e},{resolveItems:function(){return v.value},resolveActiveIndex:function(){return h.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===m.value&&h.value===n||(m.value="",h.value=n)}},search:function(e){if(!l&&s.value!==ee.Closed){m.value+=e;var t=v.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(m.value)}));-1!==t&&t!==h.value&&(h.value=t)}},clearSearch:function(){l||s.value!==ee.Closed&&""!==m.value&&(m.value="")},registerOption:function(e,t){v.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=v.value.slice(),n=null!==h.value?t[h.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),v.value=t,h.value=o===h.value||null===n?null:t.indexOf(n)},select:function(e){l||a("update:modelValue",e)}};return O("mousedown",(function(e){var t,n,o,r=e.target,i=document.activeElement;s.value===ee.Open&&((null==(t=Q(p))?void 0:t.contains(r))||((null==(n=Q(f))?void 0:n.contains(r))||y.closeListbox(),i!==document.body&&(null==i?void 0:i.contains(r))||e.defaultPrevented||null==(o=Q(p))||o.focus({preventScroll:!0})))})),t.provide(le,y),function(){return c({props:u,slot:{open:s.value===ee.Open,disabled:l},slots:r,attrs:i,name:"Listbox"})}}}),de=t.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=ue("ListboxLabel"),t={open:e.listboxState.value===ee.Open,disabled:e.disabled};return c({props:n({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots,name:"ListboxLabel"})},setup:function(){var e=ue("ListboxLabel");return{id:"headlessui-listbox-label-"+f(),el:e.labelRef,handleClick:function(){var t;null==(t=Q(e.buttonRef))||t.focus({preventScroll:!0})}}}}),pe=t.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t,o=ue("ListboxButton"),r={open:o.listboxState.value===ee.Open,disabled:o.disabled},i={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=Q(o.optionsRef))?void 0:e.id,"aria-expanded":o.listboxState.value===ee.Open||void 0,"aria-labelledby":o.labelRef.value?[null==(t=Q(o.labelRef))?void 0:t.id,this.id].join(" "):void 0,disabled:o.disabled,onKeydown:this.handleKeyDown,onClick:this.handleClick};return c({props:n({},this.$props,i),slot:r,attrs:this.$attrs,slots:this.$slots,name:"ListboxButton"})},setup:function(){var e=ue("ListboxButton");return{id:"headlessui-listbox-button-"+f(),el:e.buttonRef,handleKeyDown:function(n){switch(n.key){case s.Space:case s.Enter:case s.ArrowDown:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null==(t=Q(e.optionsRef))||t.focus({preventScroll:!0}),e.value.value||e.goToOption(Z.First)}));break;case s.ArrowUp:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null==(t=Q(e.optionsRef))||t.focus({preventScroll:!0}),e.value.value||e.goToOption(Z.Last)}))}},handleClick:function(n){var o;e.disabled||(e.listboxState.value===ee.Open?(e.closeListbox(),t.nextTick((function(){var t;return null==(t=Q(e.buttonRef))?void 0:t.focus({preventScroll:!0})}))):(n.preventDefault(),e.openListbox(),o=function(){var t;return null==(t=Q(e.optionsRef))?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(o)}))))}}}}),fe=t.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o,r,i=ue("ListboxOptions"),a={open:i.listboxState.value===ee.Open},u={"aria-activedescendant":null===i.activeOptionIndex.value||null==(e=i.options.value[i.activeOptionIndex.value])?void 0:e.id,"aria-labelledby":null!=(t=null==(o=Q(i.labelRef))?void 0:o.id)?t:null==(r=Q(i.buttonRef))?void 0:r.id,id:this.id,onKeydown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return c({props:n({},this.$props,u),slot:a,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:a.open,name:"ListboxOptions"})},setup:function(){var e=ue("ListboxOptions"),n="headlessui-listbox-options-"+f(),o=t.ref(null);return{id:n,el:e.optionsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case s.Space:if(""!==e.searchQuery.value)return n.preventDefault(),n.stopPropagation(),e.search(n.key);case s.Enter:n.preventDefault(),n.stopPropagation(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),e.closeListbox(),t.nextTick((function(){var t;return null==(t=Q(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case s.ArrowDown:return n.preventDefault(),n.stopPropagation(),e.goToOption(Z.Next);case s.ArrowUp:return n.preventDefault(),n.stopPropagation(),e.goToOption(Z.Previous);case s.Home:case s.PageUp:return n.preventDefault(),n.stopPropagation(),e.goToOption(Z.First);case s.End:case s.PageDown:return n.preventDefault(),n.stopPropagation(),e.goToOption(Z.Last);case s.Escape:n.preventDefault(),n.stopPropagation(),e.closeListbox(),t.nextTick((function(){var t;return null==(t=Q(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case s.Tab:n.preventDefault(),n.stopPropagation();break;default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),ve=t.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,i=o.attrs,a=ue("ListboxOption"),l="headlessui-listbox-option-"+f(),u=e.disabled,s=e.className,d=void 0===s?e.class:s,p=e.value,v=t.computed((function(){return null!==a.activeOptionIndex.value&&a.options.value[a.activeOptionIndex.value].id===l})),m=t.computed((function(){return t.toRaw(a.value.value)===t.toRaw(p)})),h=t.ref({disabled:u,value:p,textValue:""});function b(e){if(u)return e.preventDefault();a.select(p),a.closeListbox(),t.nextTick((function(){var e;return null==(e=Q(a.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function y(){if(u)return a.goToOption(Z.Nothing);a.goToOption(Z.Specific,l)}function g(){u||v.value||a.goToOption(Z.Specific,l)}function S(){u||v.value&&a.goToOption(Z.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(l))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(h.value.textValue=n)})),t.onMounted((function(){return a.registerOption(l,h)})),t.onUnmounted((function(){return a.unregisterOption(l)})),t.onMounted((function(){t.watch([a.listboxState,m],(function(){var e;a.listboxState.value===ee.Open&&m.value&&(a.goToOption(Z.Specific,l),null==(e=document.getElementById(l))||null==e.focus||e.focus())}),{immediate:!0})})),t.watchEffect((function(){a.listboxState.value===ee.Open&&v.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(l))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:v.value,selected:m.value,disabled:u},o={id:l,role:"option",tabIndex:-1,class:ae(d,t),"aria-disabled":!0===u||void 0,"aria-selected":!0===m.value?m.value:void 0,onClick:b,onFocus:y,onPointermove:g,onMousemove:g,onPointerleave:S,onMouseleave:S};return c({props:n({},e,o),slot:t,attrs:i,slots:r,name:"ListboxOption"})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(se||(se={}));var me=Symbol("MenuContext");function he(e){var n=t.inject(me,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,he),o}return n}var be,ye=t.defineComponent({name:"Menu",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,i=t.ref(se.Closed),a=t.ref(null),l=t.ref(null),u=t.ref([]),s=t.ref(""),d=t.ref(null),p={menuState:i,buttonRef:a,itemsRef:l,items:u,searchQuery:s,activeItemIndex:d,closeMenu:function(){i.value=se.Closed,d.value=null},openMenu:function(){return i.value=se.Open},goToItem:function(e,t){var n=ie(e===Z.Specific?{focus:Z.Specific,id:t}:{focus:e},{resolveItems:function(){return u.value},resolveActiveIndex:function(){return d.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===s.value&&d.value===n||(s.value="",d.value=n)},search:function(e){s.value+=e;var t=u.value.findIndex((function(e){return e.dataRef.textValue.startsWith(s.value)&&!e.dataRef.disabled}));-1!==t&&t!==d.value&&(d.value=t)},clearSearch:function(){s.value=""},registerItem:function(e,t){u.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=u.value.slice(),n=null!==d.value?t[d.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),u.value=t,d.value=o===d.value||null===n?null:t.indexOf(n)}};return O("mousedown",(function(e){var t,n,o,r=e.target,u=document.activeElement;i.value===se.Open&&((null==(t=Q(a))?void 0:t.contains(r))||((null==(n=Q(l))?void 0:n.contains(r))||p.closeMenu(),u!==document.body&&(null==u?void 0:u.contains(r))||e.defaultPrevented||null==(o=Q(a))||o.focus({preventScroll:!0})))})),t.provide(me,p),function(){return c({props:e,slot:{open:i.value===se.Open},slots:o,attrs:r,name:"Menu"})}}}),ge=t.defineComponent({name:"MenuButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=he("MenuButton"),o={open:t.menuState.value===se.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=Q(t.itemsRef))?void 0:e.id,"aria-expanded":t.menuState.value===se.Open||void 0,onKeydown:this.handleKeyDown,onClick:this.handleClick};return c({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots,name:"MenuButton"})},setup:function(e){var n=he("MenuButton");return{id:"headlessui-menu-button-"+f(),el:n.buttonRef,handleKeyDown:function(e){switch(e.key){case s.Space:case s.Enter:case s.ArrowDown:e.preventDefault(),e.stopPropagation(),n.openMenu(),t.nextTick((function(){var e;null==(e=Q(n.itemsRef))||e.focus({preventScroll:!0}),n.goToItem(Z.First)}));break;case s.ArrowUp:e.preventDefault(),e.stopPropagation(),n.openMenu(),t.nextTick((function(){var e;null==(e=Q(n.itemsRef))||e.focus({preventScroll:!0}),n.goToItem(Z.Last)}))}},handleClick:function(o){var r;e.disabled||(n.menuState.value===se.Open?(n.closeMenu(),t.nextTick((function(){var e;return null==(e=Q(n.buttonRef))?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),o.stopPropagation(),n.openMenu(),r=function(){var e;return null==(e=Q(n.itemsRef))?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),Se=t.defineComponent({name:"MenuItems",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o=he("MenuItems"),r={open:o.menuState.value===se.Open},i={"aria-activedescendant":null===o.activeItemIndex.value||null==(e=o.items.value[o.activeItemIndex.value])?void 0:e.id,"aria-labelledby":null==(t=Q(o.buttonRef))?void 0:t.id,id:this.id,onKeydown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return c({props:n({},this.$props,i),slot:r,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:r.open,name:"MenuItems"})},setup:function(){var e=he("MenuItems"),n="headlessui-menu-items-"+f(),o=t.ref(null);return t.watchEffect((function(){var t=Q(e.itemsRef);if(t&&e.menuState.value===se.Open)for(var n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"menuitem"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});n.nextNode();)n.currentNode.setAttribute("role","none")})),{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case s.Space:if(""!==e.searchQuery.value)return n.preventDefault(),n.stopPropagation(),e.search(n.key);case s.Enter:var r;n.preventDefault(),n.stopPropagation(),null!==e.activeItemIndex.value&&(null==(r=document.getElementById(e.items.value[e.activeItemIndex.value].id))||r.click()),e.closeMenu(),t.nextTick((function(){var t;return null==(t=Q(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case s.ArrowDown:return n.preventDefault(),n.stopPropagation(),e.goToItem(Z.Next);case s.ArrowUp:return n.preventDefault(),n.stopPropagation(),e.goToItem(Z.Previous);case s.Home:case s.PageUp:return n.preventDefault(),n.stopPropagation(),e.goToItem(Z.First);case s.End:case s.PageDown:return n.preventDefault(),n.stopPropagation(),e.goToItem(Z.Last);case s.Escape:n.preventDefault(),n.stopPropagation(),e.closeMenu(),t.nextTick((function(){var t;return null==(t=Q(e.buttonRef))?void 0:t.focus({preventScroll:!0})}));break;case s.Tab:n.preventDefault(),n.stopPropagation();break;default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),we=t.defineComponent({name:"MenuItem",props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,i=o.attrs,a=he("MenuItem"),l="headlessui-menu-item-"+f(),u=e.disabled,s=e.className,d=void 0===s?e.class:s,p=t.computed((function(){return null!==a.activeItemIndex.value&&a.items.value[a.activeItemIndex.value].id===l})),v=t.ref({disabled:u,textValue:""});function m(e){if(u)return e.preventDefault();a.closeMenu(),t.nextTick((function(){var e;return null==(e=Q(a.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function h(){if(u)return a.goToItem(Z.Nothing);a.goToItem(Z.Specific,l)}function b(){u||p.value||a.goToItem(Z.Specific,l)}function y(){u||p.value&&a.goToItem(Z.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(l))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(v.value.textValue=n)})),t.onMounted((function(){return a.registerItem(l,v)})),t.onUnmounted((function(){return a.unregisterItem(l)})),t.watchEffect((function(){a.menuState.value===se.Open&&p.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(l))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:p.value,disabled:u},o={id:l,role:"menuitem",tabIndex:-1,class:ae(d,t),"aria-disabled":!0===u||void 0,onClick:m,onFocus:h,onPointermove:b,onMousemove:b,onPointerleave:y,onMouseleave:y};return c({props:n({},e,o),slot:t,attrs:i,slots:r,name:"MenuItem"})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(be||(be={}));var Oe=Symbol("PopoverContext");function xe(e){var n=t.inject(Oe,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <"+De.name+" /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,xe),o}return n}var Ee=Symbol("PopoverGroupContext");function Ce(){return t.inject(Ee,null)}var Pe=Symbol("PopoverPanelContext"),De=t.defineComponent({name:"Popover",props:{as:{type:[Object,String],default:"div"}},setup:function(e,o){var r=o.slots,i=o.attrs,l=n({},e),u="headlessui-popover-button-"+f(),s="headlessui-popover-panel-"+f(),d=t.ref(be.Closed),p=t.ref(null),v=t.ref(null),m={popoverState:d,buttonId:u,panelId:s,panel:v,button:p,togglePopover:function(){var e;d.value=a(d.value,((e={})[be.Open]=be.Closed,e[be.Closed]=be.Open,e))},closePopover:function(){d.value!==be.Closed&&(d.value=be.Closed)}};t.provide(Oe,m);var h={buttonId:u,panelId:s,close:function(){m.closePopover()}},g=Ce(),S=null==g?void 0:g.registerPopover;return t.watchEffect((function(){return null==S?void 0:S(h)})),O("focus",(function(){var e,t,n;d.value===be.Open&&((null!=(e=null==g?void 0:g.isFocusWithinPopoverGroup())?e:(null==(t=Q(p))?void 0:t.contains(document.activeElement))||(null==(n=Q(v))?void 0:n.contains(document.activeElement)))||p&&v&&m.closePopover())}),!0),O("mousedown",(function(e){var t,n,o,r,i,l,u=e.target;d.value===be.Open&&((null==(t=Q(p))?void 0:t.contains(u))||(null==(n=Q(v))?void 0:n.contains(u))||(m.closePopover(),void 0===(i=b.Loose)&&(i=b.Strict),(r=u)!==document.body&&a(i,((l={})[b.Strict]=function(){return r.matches(y)},l[b.Loose]=function(){for(var e=r;null!==e;){if(e.matches(y))return!0;e=e.parentElement}return!1},l))||(e.preventDefault(),null==(o=Q(p))||o.focus())))})),function(){return c({props:l,slot:{open:d.value===be.Open},slots:r,attrs:i,name:"Popover"})}}}),ke=t.defineComponent({name:"PopoverButton",props:{as:{type:[Object,String],default:"button"},disabled:{type:[Boolean],default:!1}},render:function(){var e=xe("PopoverButton"),t={open:e.popoverState.value===be.Open},o=this.isWithinPanel?{type:"button",onKeydown:this.handleKeyDown,onClick:this.handleClick}:{ref:"el",id:e.buttonId,type:"button","aria-expanded":e.popoverState.value===be.Open||void 0,"aria-controls":Q(e.panel)?e.panelId:void 0,onKeydown:this.handleKeyDown,onKeyup:this.handleKeyUp,onClick:this.handleClick};return c({props:n({},this.$props,o),slot:t,attrs:this.$attrs,slots:this.$slots,name:"PopoverButton"})},setup:function(e){var n=xe("PopoverButton"),o=Ce(),r=null==o?void 0:o.closeOthers,i=t.inject(Pe,null),a=null!==i&&i===n.panelId,l=t.ref(null),u=t.ref("undefined"==typeof window?null:document.activeElement);return O("focus",(function(){u.value=l.value,l.value=document.activeElement}),!0),{isWithinPanel:a,el:a?null:n.button,handleKeyDown:function(e){var t,o;if(a){if(n.popoverState.value===be.Closed)return;switch(e.key){case s.Space:case s.Enter:e.preventDefault(),e.stopPropagation(),n.closePopover(),null==(t=Q(n.button))||t.focus()}}else switch(e.key){case s.Space:case s.Enter:e.preventDefault(),e.stopPropagation(),n.popoverState.value===be.Closed&&(null==r||r(n.buttonId)),n.togglePopover();break;case s.Escape:if(n.popoverState.value!==be.Open)return null==r?void 0:r(n.buttonId);if(!Q(n.button))return;if(!(null==(o=Q(n.button))?void 0:o.contains(document.activeElement)))return;n.closePopover();break;case s.Tab:if(n.popoverState.value!==be.Open)return;if(!n.panel)return;if(!n.button)return;if(e.shiftKey){var i,l;if(!u.value)return;if(null==(i=Q(n.button))?void 0:i.contains(u.value))return;if(null==(l=Q(n.panel))?void 0:l.contains(u.value))return;var c=g(),d=c.indexOf(u.value);if(c.indexOf(Q(n.button))>d)return;e.preventDefault(),e.stopPropagation(),w(Q(n.panel),v.Last)}else e.preventDefault(),e.stopPropagation(),w(Q(n.panel),v.First)}},handleKeyUp:function(e){var t,o;if(!a&&n.popoverState.value===be.Open&&n.panel&&n.button)switch(e.key){case s.Tab:if(!u.value)return;if(null==(t=Q(n.button))?void 0:t.contains(u.value))return;if(null==(o=Q(n.panel))?void 0:o.contains(u.value))return;var r=g(),i=r.indexOf(u.value);if(r.indexOf(Q(n.button))>i)return;e.preventDefault(),e.stopPropagation(),w(Q(n.panel),v.Last)}},handleClick:function(){var t,o;e.disabled||(a?(n.closePopover(),null==(t=Q(n.button))||t.focus()):(n.popoverState.value===be.Closed&&(null==r||r(n.buttonId)),null==(o=Q(n.button))||o.focus(),n.togglePopover()))},handleFocus:function(){}}}}),Ie=t.defineComponent({name:"PopoverOverlay",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e={open:xe("PopoverOverlay").popoverState.value===be.Open};return c({props:n({},this.$props,{id:this.id,ref:"el","aria-hidden":!0,onClick:this.handleClick}),slot:e,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:e.open,name:"PopoverOverlay"})},setup:function(){var e=xe("PopoverOverlay");return{id:"headlessui-popover-overlay-"+f(),handleClick:function(){e.closePopover()}}}}),Re=t.defineComponent({name:"PopoverPanel",props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0},focus:{type:Boolean,default:!1}},render:function(){var e={open:xe("PopoverPanel").popoverState.value===be.Open};return c({props:n({},this.$props,{ref:"el",id:this.id,onKeydown:this.handleKeyDown}),slot:e,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:e.open,name:"PopoverPanel"})},setup:function(e){var n=e.focus,o=xe("PopoverPanel");return t.provide(Pe,o.panelId),t.onUnmounted((function(){o.panel.value=null})),t.watchEffect((function(){var e;if(n&&o.popoverState.value===be.Open&&o.panel){var t=document.activeElement;(null==(e=Q(o.panel))?void 0:e.contains(t))||w(Q(o.panel),v.First)}})),O("keydown",(function(e){var t;if(o.popoverState.value===be.Open&&Q(o.panel)&&e.key===s.Tab&&document.activeElement&&(null==(t=Q(o.panel))?void 0:t.contains(document.activeElement))){e.preventDefault();var n,r=w(Q(o.panel),e.shiftKey?v.Previous:v.Next);if(r===m.Underflow)return null==(n=Q(o.button))?void 0:n.focus();if(r===m.Overflow){if(!Q(o.button))return;var i=g(),a=i.indexOf(Q(o.button));w(i.splice(a+1).filter((function(e){var t;return!(null==(t=Q(o.panel))?void 0:t.contains(e))})),v.First)===m.Error&&w(document.body,v.First)}}})),O("focus",(function(){var e;n&&o.popoverState.value===be.Open&&Q(o.panel)&&((null==(e=Q(o.panel))?void 0:e.contains(document.activeElement))||o.closePopover())}),!0),{id:o.panelId,el:o.panel,handleKeyDown:function(e){var t,n;switch(e.key){case s.Escape:if(o.popoverState.value!==be.Open)return;if(!Q(o.panel))return;if(!(null==(t=Q(o.panel))?void 0:t.contains(document.activeElement)))return;e.preventDefault(),o.closePopover(),null==(n=Q(o.button))||n.focus()}}}}}),Te=t.defineComponent({name:"PopoverGroup",props:{as:{type:[Object,String],default:"div"}},render:function(){return c({props:n({},this.$props,{ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"PopoverGroup"})},setup:function(){var e=t.ref(null),n=t.ref([]);function o(e){var t=n.value.indexOf(e);-1!==t&&n.value.splice(t,1)}return t.provide(Ee,{registerPopover:function(e){return n.value.push(e),function(){o(e)}},unregisterPopover:o,isFocusWithinPopoverGroup:function(){var t,o=document.activeElement;return!!(null==(t=Q(e))?void 0:t.contains(o))||n.value.some((function(e){var t,n;return(null==(t=document.getElementById(e.buttonId))?void 0:t.contains(o))||(null==(n=document.getElementById(e.panelId))?void 0:n.contains(o))}))},closeOthers:function(e){for(var t,o=i(n.value);!(t=o()).done;){var r=t.value;r.buttonId!==e&&r.close()}}}),{el:e}}}),Le=Symbol("LabelContext");function je(){var e=t.ref([]);return[t.computed((function(){return e.value.length>0?e.value.join(" "):void 0})),t.defineComponent({name:"LabelProvider",setup:function(n,o){var r=o.slots;return t.provide(Le,{register:function(t){return e.value.push(t),function(){var n=e.value.indexOf(t);-1!==n&&e.value.splice(n,1)}}}),function(){return r.default()}}})]}var Fe=t.defineComponent({name:"Label",props:{as:{type:[Object,String],default:"label"}},render:function(){return c({props:n({},this.$props,{id:this.id}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"Label"})},setup:function(){var e=t.inject(Le,{register:function(){return function(){}}}).register,n="headlessui-label-"+f();return t.onMounted((function(){return t.onUnmounted(e(n))})),{id:n}}}),Ae=Symbol("RadioGroupContext");function $e(e){var n=t.inject(Ae,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <RadioGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,$e),o}return n}var Be,Ne=t.defineComponent({name:"RadioGroup",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"div"},disabled:{type:[Boolean],default:!1},modelValue:{type:[Object,String,Number,Boolean]}},render:function(){var e=this,r=o(this.$props,["modelValue","disabled"]),i={ref:"el",id:this.id,role:"radiogroup","aria-labelledby":this.labelledby,"aria-describedby":this.describedby};return t.h(this.DescriptionProvider,(function(){return[t.h(e.LabelProvider,(function(){return[c({props:n({},r,i),slot:{},attrs:e.$attrs,slots:e.$slots,name:"RadioGroup"})]}))]}))},setup:function(e,n){var o=n.emit,r=t.ref(null),i=t.ref([]),a=je(),l=a[0],u=a[1],c=M(),d=c[0],p=c[1],h=t.computed((function(){return e.modelValue})),b={options:i,value:h,change:function(t){e.disabled||h.value!==t&&o("update:modelValue",t)},registerOption:function(e){var t,n=Array.from(null==(t=r.value)?void 0:t.querySelectorAll('[id^="headlessui-radiogroup-option-"]')).reduce((function(e,t,n){var o;return Object.assign(e,((o={})[t.id]=n,o))}),{});i.value.push(e),i.value.sort((function(e,t){return n[e.id]-n[t.id]}))},unregisterOption:function(e){var t=i.value.findIndex((function(t){return t.id===e}));-1!==t&&i.value.splice(t,1)}};return t.provide(Ae,b),t.watchEffect((function(){var e=Q(r);if(e)for(var t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"radio"===e.getAttribute("role")?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});t.nextNode();)t.currentNode.setAttribute("role","none")})),O("keydown",(function(e){if(r.value&&r.value.contains(e.target))switch(e.key){case s.ArrowLeft:case s.ArrowUp:if(e.preventDefault(),e.stopPropagation(),w(i.value.map((function(e){return e.element})),v.Previous|v.WrapAround)===m.Success){var t=i.value.find((function(e){return e.element===document.activeElement}));t&&b.change(t.propsRef.value)}break;case s.ArrowRight:case s.ArrowDown:if(e.preventDefault(),e.stopPropagation(),w(i.value.map((function(e){return e.element})),v.Next|v.WrapAround)===m.Success){var n=i.value.find((function(e){return e.element===document.activeElement}));n&&b.change(n.propsRef.value)}break;case s.Space:e.preventDefault(),e.stopPropagation();var o=i.value.find((function(e){return e.element===document.activeElement}));o&&b.change(o.propsRef.value)}})),{id:"headlessui-radiogroup-"+f(),labelledby:l,describedby:d,el:r,LabelProvider:u,DescriptionProvider:p}}});!function(e){e[e.Empty=1]="Empty",e[e.Active=2]="Active"}(Be||(Be={}));var Me=t.defineComponent({name:"RadioGroupOption",props:{as:{type:[Object,String],default:"div"},value:{type:[Object,String]},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e,r,i=this,a=this.$props,l=a.value,u=a.className,s=void 0===u?a.class:u,d=o(a,["value","disabled","class","className"]),p=$e("RadioGroupOption"),f=(null==(e=p.options.value)||null==(r=e[0])?void 0:r.id)===this.id,v=p.value.value===l,m={checked:v,active:Boolean(this.state&Be.Active)},h={id:this.id,ref:"el",role:"radio",class:ae(s,m),"aria-checked":v?"true":"false","aria-labelledby":this.labelledby,"aria-describedby":this.describedby,tabIndex:v||void 0===p.value.value&&f?0:-1,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur};return t.h(this.DescriptionProvider,(function(){return[t.h(i.LabelProvider,(function(){return[c({props:n({},d,h),slot:m,attrs:i.$attrs,slots:i.$slots,name:"RadioGroupOption"})]}))]}))},setup:function(e){var n=$e("RadioGroupOption"),o="headlessui-radiogroup-option-"+f(),r=je(),i=r[0],a=r[1],l=M(),u=l[0],s=l[1],c=t.ref(null),d=t.computed((function(){return{value:e.value}})),p=t.ref(Be.Empty);return t.onMounted((function(){return n.registerOption({id:o,element:c,propsRef:d})})),t.onUnmounted((function(){return n.unregisterOption(o)})),{id:o,el:c,labelledby:i,describedby:u,state:p,LabelProvider:a,DescriptionProvider:s,handleClick:function(){var t,o=e.value;n.value.value!==o&&(p.value|=Be.Active,n.change(o),null==(t=c.value)||t.focus())},handleFocus:function(){p.value|=Be.Active},handleBlur:function(){p.value&=~Be.Active}}}}),Ue=Fe,Ke=K,Ve=Symbol("GroupContext");function Ge(e){var n=t.inject(Ve,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,Ge),o}return n}var We=t.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,i=t.ref(null),a=t.ref(null),l=t.ref(null);return t.provide(Ve,{switchRef:i,labelRef:a,descriptionRef:l}),function(){return c({props:e,slot:{},slots:o,attrs:r,name:"SwitchGroup"})}}}),qe=t.defineComponent({name:"Switch",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"button"},modelValue:{type:[Object,Boolean],default:null},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},render:function(){var e=t.inject(Ve,null),o=this.$props,r=o.className,i=void 0===r?o.class:r,a=t.computed((function(){var t;return null==(t=Q(null==e?void 0:e.labelRef))?void 0:t.id})),l=t.computed((function(){var t;return null==(t=Q(null==e?void 0:e.descriptionRef))?void 0:t.id})),u={checked:this.$props.modelValue},s={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:ae(i,u),"aria-checked":this.$props.modelValue,"aria-labelledby":a.value,"aria-describedby":l.value,onClick:this.handleClick,onKeyup:this.handleKeyUp,onKeypress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(s,{type:"button"}),c({props:n({},this.$props,s),slot:u,attrs:this.$attrs,slots:this.$slots,name:"Switch"})},setup:function(e,n){var o=n.emit,r=t.inject(Ve,null);function i(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+f(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),i()},handleKeyUp:function(e){e.key!==s.Tab&&e.preventDefault(),e.key===s.Space&&i()},handleKeyPress:function(e){e.preventDefault()}}}}),He=t.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return c({props:n({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"SwitchLabel"})},setup:function(){var e=Ge("SwitchLabel");return{id:"headlessui-switch-label-"+f(),el:e.labelRef,handleClick:function(){var t=Q(e.switchRef);null==t||t.click(),null==t||t.focus({preventScroll:!0})}}}}),_e=t.defineComponent({name:"SwitchDescription",props:{as:{type:[Object,String],default:"p"}},render:function(){return c({props:n({},this.$props,{id:this.id,ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots,name:"SwitchDescription"})},setup:function(){var e=Ge("SwitchDescription");return{id:"headlessui-switch-description-"+f(),el:e.descriptionRef}}});e.Dialog=H,e.DialogDescription=Y,e.DialogOverlay=_,e.DialogTitle=z,e.Disclosure=te,e.DisclosureButton=ne,e.DisclosurePanel=oe,e.FocusTrap=re,e.Listbox=ce,e.ListboxButton=pe,e.ListboxLabel=de,e.ListboxOption=ve,e.ListboxOptions=fe,e.Menu=ye,e.MenuButton=ge,e.MenuItem=we,e.MenuItems=Se,e.Popover=De,e.PopoverButton=ke,e.PopoverGroup=Te,e.PopoverOverlay=Ie,e.PopoverPanel=Re,e.Portal=A,e.PortalGroup=B,e.RadioGroup=Ne,e.RadioGroupDescription=Ke,e.RadioGroupLabel=Ue,e.RadioGroupOption=Me,e.Switch=qe,e.SwitchDescription=_e,e.SwitchGroup=We,e.SwitchLabel=He,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
//# sourceMappingURL=headlessui.umd.production.min.js.map |
@@ -0,3 +1,9 @@ | ||
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/listbox/listbox'; | ||
export * from './components/popover/popover'; | ||
export * from './components/portal/portal'; | ||
export * from './components/radio-group/radio-group'; | ||
export * from './components/switch/switch'; |
@@ -6,3 +6,5 @@ export declare enum Keys { | ||
Backspace = "Backspace", | ||
ArrowLeft = "ArrowLeft", | ||
ArrowUp = "ArrowUp", | ||
ArrowRight = "ArrowRight", | ||
ArrowDown = "ArrowDown", | ||
@@ -9,0 +11,0 @@ Home = "Home", |
@@ -82,6 +82,92 @@ export declare function getMenuButton(): HTMLElement | null; | ||
label?: string; | ||
description?: string; | ||
}, switchElement?: HTMLElement | null): void; | ||
export declare function getDisclosureButton(): HTMLElement | null; | ||
export declare function getDisclosurePanel(): HTMLElement | null; | ||
export declare enum DisclosureState { | ||
/** The disclosure is visible to the user. */ | ||
Visible = 0, | ||
/** The disclosure is **not** visible to the user. It's still in the DOM, but it is hidden. */ | ||
InvisibleHidden = 1, | ||
/** The disclosure is **not** visible to the user. It's not in the DOM, it is unmounted. */ | ||
InvisibleUnmounted = 2 | ||
} | ||
export declare function assertDisclosureButton(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DisclosureState; | ||
}, button?: HTMLElement | null): void; | ||
export declare function assertDisclosurePanel(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DisclosureState; | ||
}, panel?: HTMLElement | null): void; | ||
export declare function getPopoverButton(): HTMLElement | null; | ||
export declare function getPopoverPanel(): HTMLElement | null; | ||
export declare function getPopoverOverlay(): HTMLElement | null; | ||
export declare enum PopoverState { | ||
/** The popover is visible to the user. */ | ||
Visible = 0, | ||
/** The popover is **not** visible to the user. It's still in the DOM, but it is hidden. */ | ||
InvisibleHidden = 1, | ||
/** The popover is **not** visible to the user. It's not in the DOM, it is unmounted. */ | ||
InvisibleUnmounted = 2 | ||
} | ||
export declare function assertPopoverButton(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: PopoverState; | ||
}, button?: HTMLElement | null): void; | ||
export declare function assertPopoverPanel(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: PopoverState; | ||
}, panel?: HTMLElement | null): void; | ||
export declare function assertLabelValue(element: HTMLElement | null, value: string): void; | ||
export declare function assertDescriptionValue(element: HTMLElement | null, value: string): void; | ||
export declare function getDialog(): HTMLElement | null; | ||
export declare function getDialogTitle(): HTMLElement | null; | ||
export declare function getDialogDescription(): HTMLElement | null; | ||
export declare function getDialogOverlay(): HTMLElement | null; | ||
export declare enum DialogState { | ||
/** The dialog is visible to the user. */ | ||
Visible = 0, | ||
/** The dialog is **not** visible to the user. It's still in the DOM, but it is hidden. */ | ||
InvisibleHidden = 1, | ||
/** The dialog is **not** visible to the user. It's not in the DOM, it is unmounted. */ | ||
InvisibleUnmounted = 2 | ||
} | ||
export declare function assertDialog(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DialogState; | ||
}, dialog?: HTMLElement | null): void; | ||
export declare function assertDialogTitle(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DialogState; | ||
}, title?: HTMLElement | null, dialog?: HTMLElement | null): void; | ||
export declare function assertDialogDescription(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DialogState; | ||
}, description?: HTMLElement | null, dialog?: HTMLElement | null): void; | ||
export declare function assertDialogOverlay(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
state: DialogState; | ||
}, overlay?: HTMLElement | null): void; | ||
export declare function getRadioGroup(): HTMLElement | null; | ||
export declare function getRadioGroupLabel(): HTMLElement | null; | ||
export declare function getRadioGroupOptions(): HTMLElement[]; | ||
export declare function assertRadioGroupLabel(options: { | ||
attributes?: Record<string, string | null>; | ||
textContent?: string; | ||
}, label?: HTMLElement | null, radioGroup?: HTMLElement | null): void; | ||
export declare function assertActiveElement(element: HTMLElement | null): void; | ||
export declare function assertContainsActiveElement(element: HTMLElement | null): void; | ||
export declare function assertHidden(element: HTMLElement | null): void; | ||
export declare function assertVisible(element: HTMLElement | null): void; | ||
export declare function assertFocusable(element: HTMLElement | null): void; | ||
export declare function assertNotFocusable(element: HTMLElement | null): void; | ||
export declare function getByText(text: string): HTMLElement | null; |
import { mount } from '@vue/test-utils'; | ||
import { fireEvent } from '@testing-library/dom'; | ||
export declare function render(TestComponent: any, options?: Omit<Parameters<typeof mount>[1], 'attachTo'>): { | ||
debug(): void; | ||
export declare function render(TestComponent: any, options?: Parameters<typeof mount>[1] | undefined): { | ||
readonly container: Element; | ||
debug(element?: Element): void; | ||
}; | ||
export { fireEvent }; |
@@ -24,2 +24,3 @@ import { Slots } from 'vue'; | ||
slots: Slots; | ||
name: string; | ||
} & { | ||
@@ -26,0 +27,0 @@ features?: Features; |
{ | ||
"name": "@headlessui/vue", | ||
"version": "0.3.0", | ||
"version": "0.3.1-5ff5225", | ||
"main": "dist/index.js", | ||
@@ -23,3 +23,3 @@ "typings": "dist/index.d.ts", | ||
"scripts": { | ||
"playground": "vite serve examples", | ||
"playground": "vite --config ./vite.config.js serve examples", | ||
"playground:build": "NODE_ENV=production vite build examples", | ||
@@ -33,3 +33,3 @@ "prepublishOnly": "npm run build", | ||
"peerDependencies": { | ||
"vue": "^3.0.0-rc.13" | ||
"vue": "^3.0.0" | ||
}, | ||
@@ -43,5 +43,5 @@ "devDependencies": { | ||
"vite": "^1.0.0-rc.4", | ||
"vue": "^3.0.0-rc.13", | ||
"vue": "^3.0.0", | ||
"vue-router": "^4.0.0-beta.13" | ||
} | ||
} |
1196
README.md
@@ -32,5 +32,11 @@ <h3 align="center"> | ||
- [Menu Button (Dropdown)](#menu-button-dropdown) | ||
- [Listbox (Select)](#listbox-select) | ||
- [Switch (Toggle)](#switch-toggle) | ||
- [Menu Button (Dropdown)](./src/components/menu/README.md) | ||
- [Listbox (Select)](./src/components/listbox/README.md) | ||
- [Switch (Toggle)](./src/components/switch/README.md) | ||
- [Disclosure](./src/components/disclosure/README.md) | ||
- [FocusTrap](./src/components/focus-trap/README.md) | ||
- [Portal](./src/components/portal/README.md) | ||
- [Dialog](./src/components/dialog/README.md) | ||
- [Popover](./src/components/popover/README.md) | ||
- [Radio Group](./src/components/radio-group/README.md) | ||
@@ -43,6 +49,3 @@ ### Roadmap | ||
- Modals | ||
- Tabs | ||
- Slide-overs | ||
- Mobile menus | ||
- Accordions | ||
@@ -53,1182 +56,1 @@ | ||
We'll be continuing to develop new components on an on-going basis, with a goal of reaching a pretty fleshed out v1.0 by the end of the year. | ||
--- | ||
## Menu Button (Dropdown) | ||
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-menu-example-70br3?file=/src/App.vue) | ||
The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support. | ||
- [Basic example](#basic-example) | ||
- [Styling](#styling) | ||
- [Transitions](#transitions) | ||
- [Component API](#component-api) | ||
### Basic example | ||
Menu Buttons are built using the `Menu`, `MenuButton`, `MenuItems`, and `MenuItem` components. | ||
The `MenuButton` will automatically open/close the `MenuItems` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<MenuItems> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a> | ||
</MenuItem> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Documentation </a> | ||
</MenuItem> | ||
<MenuItem v-slot="{ active }" disabled> | ||
<span :class="{ 'bg-blue-500': active }"> Invite a friend (coming soon!) </span> | ||
</MenuItem> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
<script> | ||
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Menu, | ||
MenuButton, | ||
MenuItems, | ||
MenuItem, | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Styling the active item | ||
This is a headless component so there are no styles included by default. Instead, the components expose useful information via [scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) that you can use to apply the styles you'd like to apply yourself. | ||
To style the active `MenuItem` you can read the `active` slot prop, which tells you whether or not that menu item is the item that is currently focused via the mouse or keyboard. | ||
You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<MenuItems> | ||
<!-- Use the `active` state to conditionally style the active item. --> | ||
<MenuItem v-slot="{ active }"> | ||
<a href="/settings" :class="active ? 'bg-blue-500 text-white' : 'bg-white text-black'"> | ||
Settings | ||
</a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
### Showing/hiding the menu | ||
By default, your `MenuItems` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Menu` component itself. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<!-- By default, this will automatically show/hide when the MenuButton is pressed. --> | ||
<MenuItems> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `MenuItems` instance to tell it to always render, and inspect the `open` slot prop provided by the `Menu` to control which element is shown/hidden yourself. | ||
```vue | ||
<template> | ||
<Menu v-slot="{ open }"> | ||
<MenuButton> More </MenuButton> | ||
<div v-show="open"> | ||
<!-- Using `static`, `MenuItems` is always rendered and ignores the `open` state. --> | ||
<MenuItems static> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</div> | ||
</Menu> | ||
</template> | ||
``` | ||
### Disabling an item | ||
Use the `disabled` prop to disable a `MenuItem`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<MenuItems> | ||
<MenuItem disabled> | ||
<span class="opacity-75">Invite a friend (coming soon!)</span> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
### Transitions | ||
To animate the opening/closing of the menu panel, use Vue's built-in `transition` component. All you need to do is wrap your `MenuItems` instance in a `<transition>` element and the transition will be applied automatically. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<transition | ||
enter-active-class="transition duration-100 ease-out" | ||
enter-from-class="transform scale-95 opacity-0" | ||
enter-to-class="transform scale-100 opacity-100" | ||
leave-active-class="transition duration-75 ease-out" | ||
leave-from-class="transform scale-100 opacity-100" | ||
leave-to-class="transform scale-95 opacity-0" | ||
> | ||
<MenuItems> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</transition> | ||
</Menu> | ||
</template> | ||
``` | ||
### Rendering additional content | ||
The `Menu` component is not limited to rendering only its related subcomponents. You can render anything you like within a menu, which gives you complete control over exactly what you are building. | ||
For example, if you'd like to add a little header section to the menu with some extra information in it, just render an extra `div` with your content in it. | ||
```vue | ||
<template> | ||
<Menu> | ||
<MenuButton> More </MenuButton> | ||
<MenuItems> | ||
<div class="px-4 py-3"> | ||
<p class="text-sm leading-5">Signed in as</p> | ||
<p class="text-sm font-medium leading-5 text-gray-900 truncate">tom@example.com</p> | ||
</div> | ||
<MenuItem v-slot="{ active }"> | ||
<a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
Note that only `MenuItem` instances will be navigable via the keyboard. | ||
### Rendering a different element for a component | ||
By default, the `Menu` and its subcomponents each render a default element that is sensible for that component. | ||
For example, `MenuButton` renders a `button` by default, and `MenuItems` renders a `div`. `Menu` and `MenuItem` interestingly _do not render an extra element_, and instead render their children directly by default. | ||
This is easy to change using the `as` prop, which exists on every component. | ||
```vue | ||
<template> | ||
<!-- Render a `div` instead of no wrapper element --> | ||
<Menu as="div"> | ||
<MenuButton> More </MenuButton> | ||
<!-- Render a `ul` instead of a `div` --> | ||
<MenuItems as="ul"> | ||
<!-- Render an `li` instead of no wrapper element --> | ||
<MenuItem as="li" v-slot="{ active }"> | ||
<a href="/account-settings" :class="{ 'bg-blue-500': active }"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
To tell an element to render its children directly with no wrapper element, use `as="template"`. | ||
```vue | ||
<template> | ||
<Menu> | ||
<!-- Render no wrapper, instead pass in a button manually --> | ||
<MenuButton as="template"> | ||
<button>More</button> | ||
</MenuButton> | ||
<MenuItems> | ||
<MenuItem v-slot="{ active }"> | ||
<a href="/account-settings" :class="{ 'bg-blue-500': active }"> Account settings </a> | ||
</MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
</template> | ||
``` | ||
### Component API | ||
#### Menu | ||
```vue | ||
<Menu v-slot="{ open }"> | ||
<MenuButton>More options</MenuButton> | ||
<MenuItems> | ||
<MenuItem><!-- ... --></MenuItem> | ||
<!-- ... --> | ||
</MenuItems> | ||
</Menu> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | --------------------------------- | ----------------------------------------------------- | | ||
| `as` | String \| Component | `template` _(no wrapper element_) | The element or component the `Menu` should render as. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ------ | ------- | -------------------------------- | | ||
| `open` | Boolean | Whether or not the menu is open. | | ||
#### MenuButton | ||
```vue | ||
<MenuButton v-slot="{ open }"> | ||
<span>More options</span> | ||
<ChevronRightIcon :class="open ? 'transform rotate-90' : ''" /> | ||
</MenuButton> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | -------- | ----------------------------------------------------------- | | ||
| `as` | String \| Component | `button` | The element or component the `MenuButton` should render as. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ------ | ------- | -------------------------------- | | ||
| `open` | Boolean | Whether or not the menu is open. | | ||
#### MenuItems | ||
```vue | ||
<MenuItems> | ||
<MenuItem><!-- ... --></MenuItem> | ||
<!-- ... --> | ||
</MenuItem> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| --------- | ------------------- | ------- | --------------------------------------------------------------------------------- | | ||
| `as` | String \| Component | `div` | The element or component the `MenuItems` should render as. | | ||
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. | | ||
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ------ | ------- | -------------------------------- | | ||
| `open` | Boolean | Whether or not the menu is open. | | ||
#### MenuItem | ||
```vue | ||
<MenuItem v-slot="{ active }"> | ||
<a href="/settings" :class="active ? 'bg-blue-500 text-white' : 'bg-white text-black'"> | ||
Settings | ||
</a> | ||
</MenuItem> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---------- | ------------------- | --------------------------------- | ------------------------------------------------------------------------------------- | | ||
| `as` | String \| Component | `template` _(no wrapper element)_ | The element or component the `MenuItem` should render as. | | ||
| `disabled` | Boolean | `false` | Whether or not the item should be disabled for keyboard navigation and ARIA purposes. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ---------- | ------- | ---------------------------------------------------------------------------------- | | ||
| `active` | Boolean | Whether or not the item is the active/focused item in the list. | | ||
| `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. | | ||
## Listbox (Select) | ||
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-listbox-example-mi67g?file=/src/App.vue) | ||
The `Listbox` component and related child components are used to quickly build custom listbox components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support. | ||
- [Basic example](#basic-example-1) | ||
- [Styling the active and selected option](#styling-the-active-and-selected-option) | ||
- [Showing/hiding the listbox](#showinghiding-the-listbox) | ||
- [Using a custom label](#using-a-custom-label) | ||
- [Disabling an option](#disabling-an-option) | ||
- [Transitions](#transitions-1) | ||
- [Rendering additional content](#rendering-additional-content-1) | ||
- [Rendering a different element for a component](#rendering-a-different-element-for-a-component-1) | ||
- [Component API](#component-api-1) | ||
### Basic example | ||
Listboxes are built using the `Listbox`, `ListboxButton`, `ListboxOptions`, `ListboxOption` and `ListboxLabel` components. | ||
The `ListboxButton` will automatically open/close the `ListboxOptions` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard. | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton> | ||
<ListboxOptions> | ||
<ListboxOption | ||
v-for="person in people" | ||
:key="person.id" | ||
:value="person" | ||
:disabled="person.unavailable" | ||
> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds', unavailable: false }, | ||
{ id: 2, name: 'Kenton Towne', unavailable: false }, | ||
{ id: 3, name: 'Therese Wunsch', unavailable: false }, | ||
{ id: 4, name: 'Benedict Kessler', unavailable: true }, | ||
{ id: 5, name: 'Katelyn Rohan', unavailable: false }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Styling the active and selected option | ||
This is a headless component so there are no styles included by default. Instead, the components expose useful information via [scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) that you can use to apply the styles you'd like to apply yourself. | ||
To style the active `ListboxOption` you can read the `active` slot prop, which tells you whether or not that listbox option is the option that is currently focused via the mouse or keyboard. | ||
To style the selected `ListboxOption` you can read the `selected` slot prop, which tells you whether or not that listbox option is the option that is currently the `value` passed to the `Listbox`. | ||
You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems. For the selected state, you might conditionally render a checkmark next to the seleted option. | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton> | ||
<ListboxOptions> | ||
<!-- Use the `active` state to conditionally style the active option. --> | ||
<!-- Use the `selected` state to conditionally style the selected option. --> | ||
<ListboxOption | ||
as="template" | ||
v-slot="{ active, selected }" | ||
v-for="person in people" | ||
:key="person.id" | ||
:value="person" | ||
> | ||
<li :class="{ 'bg-blue-500 text-white': active, 'bg-white text-black': !active }"> | ||
<CheckmarkIcon v-show="selected" /> | ||
{{ person.name }} | ||
</li> | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
import CheckmarkIcon from './CheckmarkIcon' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
CheckmarkIcon, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Using a custom label | ||
By default the `Listbox` will use the button contents as the label for screenreaders. However you can also render a custom `ListboxLabel` which will be automatically linked to the listbox with a generated ID. | ||
```vue | ||
<template> | ||
<Listbox v-model="country"> | ||
<ListboxLabel>Country:</ListboxLabel> | ||
<ListboxButton>{country}</ListboxButton> | ||
<ListboxOptions> | ||
<ListboxOption value="australia">Australia</ListboxOption> | ||
<ListboxOption value="belgium">Belgium</ListboxOption> | ||
<ListboxOption value="canada">Canada</ListboxOption> | ||
<ListboxOption value="england">England</ListboxOption> | ||
<!-- ... --> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const country = ref('belgium') | ||
return { | ||
country, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Showing/hiding the listbox | ||
By default, your `ListboxOptions` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Listbox` component itself. | ||
```vue | ||
<template> | ||
<Listbox v-model="option"> | ||
<ListboxButton>{{ person.name }}</ListboxButton> | ||
<!-- By default, this will automatically show/hide when the ListboxButton is pressed. --> | ||
<ListboxOptions> | ||
<ListboxOption v-for="person in people" :key="person.id" :value="person"> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `ListboxOptions` instance to tell it to always render, and inspect the `open` slot prop provided by the `Listbox` to control which element is shown/hidden yourself. | ||
```vue | ||
<template> | ||
<Listbox v-model="option" v-slot="{ open }"> | ||
<ListboxButton>{{ person.name }}</ListboxButton> | ||
<div v-show="open"> | ||
<!-- Using `static`, `ListboxOptions` is always rendered and ignores the `open` state. --> | ||
<ListboxOptions static> | ||
<ListboxOption v-for="person in people" :key="person.id" :value="person"> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</div> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Disabling an option | ||
Use the `disabled` prop to disable a `ListboxOption`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows. | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton> | ||
<ListboxOptions> | ||
<!-- Disabled options will be skipped by keyboard navigation. --> | ||
<ListboxOption | ||
v-for="person in people" | ||
:key="person.id" | ||
:value="person" | ||
:disabled="person.unavailable" | ||
> | ||
<span :class="{ 'opacity-75': person.unavailable }">{{ person.name }}</span> | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds', unavailable: false }, | ||
{ id: 2, name: 'Kenton Towne', unavailable: false }, | ||
{ id: 3, name: 'Therese Wunsch', unavailable: false }, | ||
{ id: 4, name: 'Benedict Kessler', unavailable: true }, | ||
{ id: 5, name: 'Katelyn Rohan', unavailable: false }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Transitions | ||
To animate the opening/closing of the menu panel, use Vue's built-in `transition` component. All you need to do is wrap your `ListboxOptions` instance in a `<transition>` element and the transition will be applied automatically. | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton> | ||
<transition | ||
enter-active-class="transition duration-100 ease-out" | ||
enter-from-class="transform scale-95 opacity-0" | ||
enter-to-class="transform scale-100 opacity-100" | ||
leave-active-class="transition duration-75 ease-out" | ||
leave-from-class="transform scale-100 opacity-100" | ||
leave-to-class="transform scale-95 opacity-0" | ||
> | ||
<ListboxOptions> | ||
<ListboxOption | ||
v-for="person in people" | ||
:key="person.id" | ||
:value="person" | ||
:disabled="person.unavailable" | ||
> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</transition> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds', unavailable: false }, | ||
{ id: 2, name: 'Kenton Towne', unavailable: false }, | ||
{ id: 3, name: 'Therese Wunsch', unavailable: false }, | ||
{ id: 4, name: 'Benedict Kessler', unavailable: true }, | ||
{ id: 5, name: 'Katelyn Rohan', unavailable: false }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Rendering a different element for a component | ||
By default, the `Listbox` and its subcomponents each render a default element that is sensible for that component. | ||
For example, `ListboxLabel` renders a `label` by default, `ListboxButton` renders a `button` by default, `ListboxOptions` renders a `ul` and `ListboxOption` renders a `li` by default. `Listbox` interestingly _does not render an extra element_, and instead renders its children directly by default. | ||
This is easy to change using the `as` prop, which exists on every component. | ||
```vue | ||
<template> | ||
<Listbox as="div" v-model="selectedPerson"> | ||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton> | ||
<ListboxOptions as="div"> | ||
<ListboxOption as="span" v-for="person in people" :key="person.id" :value="person"> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
To tell an element to render its children directly with no wrapper element, use `as="template"`. | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<!-- Render no wrapper, instead pass in a button manually. --> | ||
<ListboxButton as="template"> | ||
<button>{{ selectedPerson.name }}</button> | ||
</ListboxButton> | ||
<ListboxOptions> | ||
<ListboxOption v-for="person in people" :key="person.id" :value="person"> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Component API | ||
#### Listbox | ||
```vue | ||
<template> | ||
<Listbox v-model="selectedPerson"> | ||
<ListboxButton> | ||
{{ selectedPerson.name }} | ||
</ListboxButton> | ||
<ListboxOptions> | ||
<ListboxOption v-for="person in people" :key="person.id" :value="person"> | ||
{{ person.name }} | ||
</ListboxOption> | ||
</ListboxOptions> | ||
</Listbox> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
} from '@headlessui/vue' | ||
export default { | ||
components: { | ||
Listbox, | ||
ListboxLabel, | ||
ListboxButton, | ||
ListboxOptions, | ||
ListboxOption, | ||
}, | ||
setup() { | ||
const people = [ | ||
{ id: 1, name: 'Durward Reynolds' }, | ||
{ id: 2, name: 'Kenton Towne' }, | ||
{ id: 3, name: 'Therese Wunsch' }, | ||
{ id: 4, name: 'Benedict Kessler' }, | ||
{ id: 5, name: 'Katelyn Rohan' }, | ||
] | ||
const selectedPerson = ref(people[0]) | ||
return { | ||
people, | ||
selectedPerson, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---------- | ------------------- | --------------------------------- | -------------------------------------------------------- | | ||
| `as` | String \| Component | `template` _(no wrapper element_) | The element or component the `Listbox` should render as. | | ||
| `v-model` | `T` | | The selected value. | | ||
| `disabled` | Boolean | `false` | Enable/Disable the `Listbox` component. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ---------- | ------- | --------------------------------------- | | ||
| `open` | Boolean | Whether or not the listbox is open. | | ||
| `disabled` | Boolean | Whether or not the listbox is disabled. | | ||
#### ListboxButton | ||
```vue | ||
<ListboxButton v-slot="{ open }"> | ||
<span>{{ selectedPerson.name }}</span> | ||
<ChevronRightIcon class={`${open ? 'transform rotate-90' : ''}`} /> | ||
</ListboxButton> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | -------- | -------------------------------------------------------------- | | ||
| `as` | String \| Component | `button` | The element or component the `ListboxButton` should render as. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ---------- | ------- | --------------------------------------- | | ||
| `open` | Boolean | Whether or not the listbox is open. | | ||
| `disabled` | Boolean | Whether or not the listbox is disabled. | | ||
#### ListboxLabel | ||
```vue | ||
<ListboxLabel>Enable notifications</ListboxLabel> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | ------- | ------------------------------------------------------------- | | ||
| `as` | String \| Component | `label` | The element or component the `ListboxLabel` should render as. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ---------- | ------- | --------------------------------------- | | ||
| `open` | Boolean | Whether or not the listbox is open. | | ||
| `disabled` | Boolean | Whether or not the listbox is disabled. | | ||
#### ListboxOptions | ||
```vue | ||
<ListboxOptions> | ||
<ListboxOption value="option-a"><!-- ... --></ListboxOption> | ||
<!-- ... --> | ||
</ListboxOptions> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| --------- | ------------------- | ------- | --------------------------------------------------------------------------------- | | ||
| `as` | String \| Component | `ul` | The element or component the `ListboxOptions` should render as. | | ||
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. | | ||
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ------ | ------- | ----------------------------------- | | ||
| `open` | Boolean | Whether or not the listbox is open. | | ||
#### ListboxOption | ||
```vue | ||
<ListboxOption value="option-a">Option A</ListboxOption> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---------- | ------------------- | ------- | --------------------------------------------------------------------------------------- | | ||
| `as` | String \| Component | `li` | The element or component the `ListboxOption` should render as. | | ||
| `value` | `T` | | The option value. | | ||
| `disabled` | Boolean | `false` | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| ---------- | ------- | ------------------------------------------------------------------------------------ | | ||
| `active` | Boolean | Whether or not the option is the active/focused option in the list. | | ||
| `selected` | Boolean | Whether or not the option is the selected option in the list. | | ||
| `disabled` | Boolean | Whether or not the option is the disabled for keyboard navigation and ARIA purposes. | | ||
## Switch (Toggle) | ||
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-switch-example-8ycp6?file=/src/App.vue) | ||
The `Switch` component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support. | ||
- [Basic example](#basic-example-2) | ||
- [Using a custom label](#using-a-custom-label-1) | ||
- [Component API](#component-api-2) | ||
### Basic example | ||
Switches are built using the `Switch` component. Optionally you can also use the `SwitchGroup` and `SwitchLabel` components. | ||
```vue | ||
<template> | ||
<Switch | ||
as="button" | ||
v-model="switchValue" | ||
class="relative inline-flex w-8 h-6 rounded-full" | ||
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'" | ||
v-slot="{ checked }" | ||
> | ||
<span | ||
class="inline-block w-4 h-4 transform bg-white rounded-full" | ||
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }" | ||
/> | ||
</Switch> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue' | ||
export default { | ||
components: { | ||
SwitchGroup, | ||
Switch, | ||
SwitchLabel, | ||
}, | ||
setup() { | ||
const switchValue = ref(false) | ||
return { | ||
switchValue, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Using a custom label | ||
By default the `Switch` will use the contents as the label for screenreaders. If you need more control, you can render a `SwitchLabel` outside of the `Switch`, as long as both the switch and label are within a parent `SwitchGroup`. | ||
Clicking the label will toggle the switch state, like you'd expect from a native checkbox. | ||
```vue | ||
<template> | ||
<SwitchGroup as="div" class="flex items-center space-x-4"> | ||
<SwitchLabel>Enable notifications</SwitchLabel> | ||
<Switch | ||
as="button" | ||
v-model="switchValue" | ||
class="relative inline-flex w-8 h-6 rounded-full" | ||
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'" | ||
v-slot="{ checked }" | ||
> | ||
<span | ||
class="inline-block w-4 h-4 transform bg-white rounded-full" | ||
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }" | ||
/> | ||
</Switch> | ||
</SwitchGroup> | ||
</template> | ||
<script> | ||
import { ref } from 'vue' | ||
import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue' | ||
export default { | ||
components: { | ||
SwitchGroup, | ||
Switch, | ||
SwitchLabel, | ||
}, | ||
setup() { | ||
const switchValue = ref(false) | ||
return { | ||
switchValue, | ||
} | ||
}, | ||
} | ||
</script> | ||
``` | ||
### Component API | ||
#### Switch | ||
```html | ||
<Switch v-model="switchState"> | ||
<span class="sr-only">Enable notifications</span> | ||
<!-- ... --> | ||
</Switch> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| --------- | ------------------- | -------- | ------------------------------------------------------- | | ||
| `as` | String \| Component | `button` | The element or component the `Switch` should render as. | | ||
| `v-model` | `T` | | The switch value. | | ||
##### Slot props | ||
| Prop | Type | Description | | ||
| --------- | ------- | ------------------------------------- | | ||
| `checked` | Boolean | Whether or not the switch is checked. | | ||
#### SwitchLabel | ||
```html | ||
<SwitchGroup> | ||
<SwitchLabel>Enable notifications</SwitchLabel> | ||
<Switch v-model="switchState"> | ||
<!-- ... --> | ||
</Switch> | ||
</SwitchGroup> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | ------- | ------------------------------------------------------------ | | ||
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. | | ||
#### SwitchGroup | ||
```html | ||
<SwitchGroup> | ||
<SwitchLabel>Enable notifications</SwitchLabel> | ||
<Switch v-model="switchState"> | ||
<!-- ... --> | ||
</Switch> | ||
</SwitchGroup> | ||
``` | ||
##### Props | ||
| Prop | Type | Default | Description | | ||
| ---- | ------------------- | --------------------------------- | ------------------------------------------------------------ | | ||
| `as` | String \| Component | `template` _(no wrapper element)_ | The element or component the `SwitchGroup` should render as. | |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1487537
45
11911
54
3