Socket
Socket
Sign inDemoInstall

@headlessui/vue

Package Overview
Dependencies
Maintainers
2
Versions
670
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@headlessui/vue - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-4648332

dist/utils/calculate-active-index.d.ts
dist/utils/dom.d.ts
dist/utils/resolve-prop-value.d.ts

39

dist/components/listbox/listbox.d.ts
import { Ref } from 'vue';
export declare const Listbox: import("vue").DefineComponent<{
export declare let Listbox: import("vue").DefineComponent<{
as: {

@@ -7,4 +7,8 @@ type: (ObjectConstructor | StringConstructor)[];

};
disabled: {
type: BooleanConstructor[];
default: boolean;
};
modelValue: {
type: (ObjectConstructor | StringConstructor)[];
type: (ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
default: null;

@@ -16,10 +20,12 @@ };

[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;
disabled: boolean;
modelValue: null;
} & {}>, {
as: string;
disabled: boolean;
modelValue: null;
}>;
export declare const ListboxLabel: import("vue").DefineComponent<{
export declare let ListboxLabel: import("vue").DefineComponent<{
as: {

@@ -32,3 +38,3 @@ type: (ObjectConstructor | StringConstructor)[];

el: Ref<HTMLLabelElement | null>;
handlePointerUp(): void;
handleClick(): void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

@@ -39,3 +45,3 @@ as: string;

}>;
export declare const ListboxButton: import("vue").DefineComponent<{
export declare let ListboxButton: import("vue").DefineComponent<{
as: {

@@ -48,7 +54,4 @@ type: (ObjectConstructor | StringConstructor)[];

el: Ref<HTMLButtonElement | null>;
focused: Ref<boolean>;
handleKeyDown: (event: KeyboardEvent) => void;
handlePointerUp: (event: MouseEvent) => void;
handleFocus: () => void;
handleBlur: () => void;
handleClick: (event: MouseEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

@@ -59,3 +62,3 @@ as: string;

}>;
export declare const ListboxOptions: import("vue").DefineComponent<{
export declare let ListboxOptions: import("vue").DefineComponent<{
as: {

@@ -69,2 +72,6 @@ type: (ObjectConstructor | StringConstructor)[];

};
unmount: {
type: BooleanConstructor;
default: boolean;
};
}, {

@@ -76,8 +83,10 @@ id: string;

as: string;
unmount: boolean;
static: boolean;
} & {}>, {
as: string;
unmount: boolean;
static: boolean;
}>;
export declare const ListboxOption: import("vue").DefineComponent<{
export declare let ListboxOption: import("vue").DefineComponent<{
as: {

@@ -107,6 +116,6 @@ type: (ObjectConstructor | StringConstructor)[];

[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;
disabled: boolean;
value: null;
disabled: boolean;
} & {

@@ -117,4 +126,4 @@ class?: string | Function | undefined;

as: string;
disabled: boolean;
value: null;
disabled: boolean;
}>;

27

dist/components/menu/menu.d.ts
import { Ref } from 'vue';
export declare const Menu: import("vue").DefineComponent<{
export declare let Menu: import("vue").DefineComponent<{
as: {

@@ -11,3 +11,3 @@ type: (ObjectConstructor | StringConstructor)[];

[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;

@@ -17,3 +17,7 @@ } & {}>, {

}>;
export declare const MenuButton: import("vue").DefineComponent<{
export declare let MenuButton: import("vue").DefineComponent<{
disabled: {
type: BooleanConstructor;
default: boolean;
};
as: {

@@ -27,10 +31,11 @@ type: (ObjectConstructor | StringConstructor)[];

handleKeyDown: (event: KeyboardEvent) => void;
handlePointerUp: (event: MouseEvent) => void;
handleFocus: () => void;
handleClick: (event: MouseEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;
disabled: boolean;
} & {}>, {
as: string;
disabled: boolean;
}>;
export declare const MenuItems: import("vue").DefineComponent<{
export declare let MenuItems: import("vue").DefineComponent<{
as: {

@@ -44,2 +49,6 @@ type: (ObjectConstructor | StringConstructor)[];

};
unmount: {
type: BooleanConstructor;
default: boolean;
};
}, {

@@ -51,8 +60,10 @@ id: string;

as: string;
unmount: boolean;
static: boolean;
} & {}>, {
as: string;
unmount: boolean;
static: boolean;
}>;
export declare const MenuItem: import("vue").DefineComponent<{
export declare let MenuItem: import("vue").DefineComponent<{
as: {

@@ -78,3 +89,3 @@ type: (ObjectConstructor | StringConstructor)[];

[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;

@@ -81,0 +92,0 @@ disabled: boolean;

26

dist/components/switch/switch.d.ts
import { Ref } from 'vue';
export declare const SwitchGroup: import("vue").DefineComponent<{
export declare let SwitchGroup: import("vue").DefineComponent<{
as: {

@@ -11,3 +11,3 @@ type: (ObjectConstructor | StringConstructor)[];

[key: string]: any;
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;

@@ -17,3 +17,3 @@ } & {}>, {

}>;
export declare const Switch: import("vue").DefineComponent<{
export declare let Switch: import("vue").DefineComponent<{
as: {

@@ -40,3 +40,4 @@ type: (ObjectConstructor | StringConstructor)[];

handleKeyUp(event: KeyboardEvent): void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
handleKeyPress(event: KeyboardEvent): void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
as: string;

@@ -51,3 +52,3 @@ modelValue: null;

}>;
export declare const SwitchLabel: import("vue").DefineComponent<{
export declare let SwitchLabel: import("vue").DefineComponent<{
as: {

@@ -60,3 +61,3 @@ type: (ObjectConstructor | StringConstructor)[];

el: Ref<HTMLLabelElement | null>;
handlePointerUp(): void;
handleClick(): void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

@@ -67,1 +68,14 @@ as: string;

}>;
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;
}>;

920

dist/headlessui.cjs.development.js

@@ -40,2 +40,44 @@ 'use strict';

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
function match(value, lookup) {

@@ -55,28 +97,89 @@ if (value in lookup) {

}).join(', ') + ".");
if (Error.captureStackTrace) Error.captureStackTrace(error, match);
throw error;
}
if (Error.captureStackTrace) {
Error.captureStackTrace(error, match);
var Features;
(function (Features) {
/** No features at all */
Features[Features["None"] = 0] = "None";
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
Features[Features["RenderStrategy"] = 1] = "RenderStrategy";
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Features[Features["Static"] = 2] = "Static";
})(Features || (Features = {}));
var RenderStrategy;
(function (RenderStrategy) {
RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
})(RenderStrategy || (RenderStrategy = {}));
function render(_ref) {
var _ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? true : _ref$visible,
_ref$features = _ref.features,
features = _ref$features === void 0 ? Features.None : _ref$features,
main = _objectWithoutPropertiesLoose(_ref, ["visible", "features"]);
// Visible always render
if (visible) return _render(main);
if (features & Features.Static) {
// When the `static` prop is passed as `true`, then the user is in control, thus we don't care about anything else
if (main.props["static"]) return _render(main);
}
throw error;
if (features & Features.RenderStrategy) {
var _main$props$unmount, _match;
var strategy = ((_main$props$unmount = main.props.unmount) != null ? _main$props$unmount : true) ? RenderStrategy.Unmount : RenderStrategy.Hidden;
return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
return null;
}, _match[RenderStrategy.Hidden] = function () {
return _render(_extends({}, main, {
props: _extends({}, main.props, {
hidden: true,
style: {
display: 'none'
}
})
}));
}, _match));
} // No features enabled, just render
return _render(main);
}
function render(_ref) {
var _slots$default;
function _render(_ref2) {
var props = _ref2.props,
attrs = _ref2.attrs,
slots = _ref2.slots,
slot = _ref2.slot;
var props = _ref.props,
attrs = _ref.attrs,
slots = _ref.slots,
slot = _ref.slot;
var _omit = omit(props, ['unmount', 'static']),
as = _omit.as,
passThroughProps = _objectWithoutPropertiesLoose(_omit, ["as"]);
var as = props.as,
passThroughProps = _objectWithoutPropertiesLoose(props, ["as"]);
var children = slots["default"] == null ? void 0 : slots["default"](slot);
var children = (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, slot);
if (as === 'template') {
if (Object.keys(passThroughProps).length > 0 || 'class' in attrs) {
var _ref2 = children !== null && children !== void 0 ? children : [],
firstChild = _ref2[0],
other = _ref2.slice(1);
var _ref3 = children != null ? children : [],
firstChild = _ref3[0],
other = _ref3.slice(1);

@@ -93,2 +196,17 @@ if (other.length > 0) throw new Error('You should only render 1 child or use the `as="..."` prop');

function omit(object, keysToOmit) {
if (keysToOmit === void 0) {
keysToOmit = [];
}
var clone = Object.assign({}, object);
for (var _iterator = _createForOfIteratorHelperLoose(keysToOmit), _step; !(_step = _iterator()).done;) {
var key = _step.value;
if (key in clone) delete clone[key];
}
return clone;
}
var id = 0;

@@ -122,2 +240,97 @@

function assertNever(x) {
throw new Error('Unexpected object: ' + x);
}
var Focus;
(function (Focus) {
/** Focus the first non-disabled item. */
Focus[Focus["First"] = 0] = "First";
/** Focus the previous non-disabled item. */
Focus[Focus["Previous"] = 1] = "Previous";
/** Focus the next non-disabled item. */
Focus[Focus["Next"] = 2] = "Next";
/** Focus the last non-disabled item. */
Focus[Focus["Last"] = 3] = "Last";
/** Focus a specific item based on the `id` of the item. */
Focus[Focus["Specific"] = 4] = "Specific";
/** Focus no items at all. */
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
function calculateActiveIndex(action, resolvers) {
var items = resolvers.resolveItems();
if (items.length <= 0) return null;
var currentActiveIndex = resolvers.resolveActiveIndex();
var activeIndex = currentActiveIndex != null ? currentActiveIndex : -1;
var nextActiveIndex = function () {
switch (action.focus) {
case Focus.First:
return items.findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
case Focus.Previous:
{
var idx = items.slice().reverse().findIndex(function (item, idx, all) {
if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
if (idx === -1) return idx;
return items.length - 1 - idx;
}
case Focus.Next:
return items.findIndex(function (item, idx) {
if (idx <= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
case Focus.Last:
{
var _idx = items.slice().reverse().findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
if (_idx === -1) return _idx;
return items.length - 1 - _idx;
}
case Focus.Specific:
return items.findIndex(function (item) {
return resolvers.resolveId(item) === action.id;
});
case Focus.Nothing:
return null;
default:
assertNever(action);
}
}();
return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
}
function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
function dom(ref) {
var _ref$value$$el;
if (ref == null) return null;
if (ref.value == null) return null;
return (_ref$value$$el = ref.value.$el) != null ? _ref$value$$el : ref.value;
}
var MenuStates;

@@ -130,19 +343,14 @@

var Focus;
function nextFrame(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["FirstItem"] = 0] = "FirstItem";
Focus[Focus["PreviousItem"] = 1] = "PreviousItem";
Focus[Focus["NextItem"] = 2] = "NextItem";
Focus[Focus["LastItem"] = 3] = "LastItem";
Focus[Focus["SpecificItem"] = 4] = "SpecificItem";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
var MenuContext = /*#__PURE__*/Symbol('MenuContext');
function useMenuContext(component) {
var context = vue.inject(MenuContext);
var context = vue.inject(MenuContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Menu /> component.");

@@ -172,41 +380,2 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useMenuContext);

var activeItemIndex = vue.ref(null);
function calculateActiveItemIndex(focus, id) {
var _activeItemIndex$valu, _match;
if (items.value.length <= 0) return null;
var currentActiveItemIndex = (_activeItemIndex$valu = activeItemIndex.value) !== null && _activeItemIndex$valu !== void 0 ? _activeItemIndex$valu : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus.FirstItem] = function () {
return items.value.findIndex(function (item) {
return !item.dataRef.disabled;
});
}, _match[Focus.PreviousItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item, idx, all) {
if (currentActiveItemIndex !== -1 && all.length - idx - 1 >= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.NextItem] = function () {
return items.value.findIndex(function (item, idx) {
if (idx <= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
}, _match[Focus.LastItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item) {
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.SpecificItem] = function () {
return items.value.findIndex(function (item) {
return item.id === id;
});
}, _match[Focus.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeItemIndex.value;
return nextActiveIndex;
}
var api = {

@@ -220,3 +389,4 @@ menuState: menuState,

closeMenu: function closeMenu() {
return menuState.value = MenuStates.Closed;
menuState.value = MenuStates.Closed;
activeItemIndex.value = null;
},

@@ -227,3 +397,21 @@ openMenu: function openMenu() {

goToItem: function goToItem(focus, id) {
var nextActiveItemIndex = calculateActiveItemIndex(focus, id);
var nextActiveItemIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return items.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeItemIndex.value;
},
resolveId: function resolveId(item) {
return item.id;
},
resolveDisabled: function resolveDisabled(item) {
return item.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeItemIndex.value === nextActiveItemIndex) return;

@@ -238,7 +426,3 @@ searchQuery.value = '';

});
if (match === -1 || match === activeItemIndex.value) {
return;
}
if (match === -1 || match === activeItemIndex.value) return;
activeItemIndex.value = match;

@@ -276,21 +460,19 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (menuState.value !== MenuStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(itemsRef)) == null ? void 0 : _dom2.contains(target))) api.closeMenu();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
api.closeMenu();
}
if (!event.defaultPrevented) vue.nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
vue.onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -315,2 +497,6 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

props: {
disabled: {
type: Boolean,
"default": false
},
as: {

@@ -322,3 +508,3 @@ type: [Object, String],

render: function render$1() {
var _api$itemsRef$value;
var _dom4;

@@ -334,7 +520,6 @@ var api = useMenuContext('MenuButton');

'aria-haspopup': true,
'aria-controls': (_api$itemsRef$value = api.itemsRef.value) === null || _api$itemsRef$value === void 0 ? void 0 : _api$itemsRef$value.id,
'aria-controls': (_dom4 = dom(api.itemsRef)) == null ? void 0 : _dom4.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -348,3 +533,3 @@ return render({

},
setup: function setup() {
setup: function setup(props) {
var api = useMenuContext('MenuButton');

@@ -362,6 +547,8 @@ var id = "headlessui-menu-button-" + useId();

vue.nextTick(function () {
var _api$itemsRef$value2;
var _dom5;
(_api$itemsRef$value2 = api.itemsRef.value) === null || _api$itemsRef$value2 === void 0 ? void 0 : _api$itemsRef$value2.focus();
api.goToItem(Focus.FirstItem);
(_dom5 = dom(api.itemsRef)) == null ? void 0 : _dom5.focus({
preventScroll: true
});
api.goToItem(Focus.First);
});

@@ -374,6 +561,8 @@ break;

vue.nextTick(function () {
var _api$itemsRef$value3;
var _dom6;
(_api$itemsRef$value3 = api.itemsRef.value) === null || _api$itemsRef$value3 === void 0 ? void 0 : _api$itemsRef$value3.focus();
api.goToItem(Focus.LastItem);
(_dom6 = dom(api.itemsRef)) == null ? void 0 : _dom6.focus({
preventScroll: true
});
api.goToItem(Focus.Last);
});

@@ -384,9 +573,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value;
var _dom7;
return (_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
return (_dom7 = dom(api.buttonRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
});

@@ -396,6 +589,8 @@ } else {

api.openMenu();
vue.nextTick(function () {
var _api$itemsRef$value4;
nextFrame(function () {
var _dom8;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_dom8 = dom(api.itemsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
});

@@ -405,8 +600,2 @@ }

function handleFocus() {
var _api$itemsRef$value5;
if (api.menuState.value === MenuStates.Open) (_api$itemsRef$value5 = api.itemsRef.value) === null || _api$itemsRef$value5 === void 0 ? void 0 : _api$itemsRef$value5.focus();
}
return {

@@ -416,4 +605,3 @@ id: id,

handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus
handleClick: handleClick
};

@@ -431,14 +619,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value2;
var _api$items$value$api$, _dom9;
var api = useMenuContext('MenuItems'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.menuState.value === MenuStates.Closed) return null;
var api = useMenuContext('MenuItems');
var slot = {

@@ -448,6 +634,6 @@ open: api.menuState.value === MenuStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) === null || _api$items$value$api$ === void 0 ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.id,
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) == null ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'menu',

@@ -457,2 +643,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -462,3 +649,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -470,3 +659,19 @@ },

var searchDebounce = vue.ref(null);
vue.watchEffect(function () {
var container = dom(api.itemsRef);
if (!container) return;
if (api.menuState.value !== MenuStates.Open) return;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: function acceptNode(node) {
if (node.getAttribute('role') === 'menuitem') return NodeFilter.FILTER_REJECT;
if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
});
while (walker.nextNode()) {
walker.currentNode.setAttribute('role', 'none');
}
});
function handleKeyDown(event) {

@@ -488,3 +693,2 @@ if (searchDebounce.value) clearTimeout(searchDebounce.value);

event.preventDefault();
api.closeMenu();

@@ -495,9 +699,12 @@ if (api.activeItemIndex.value !== null) {

var _id = api.items.value[api.activeItemIndex.value].id;
(_document$getElementB = document.getElementById(_id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value3;
var _dom10;
return (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.focus();
return (_dom10 = dom(api.buttonRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -508,7 +715,7 @@ break;

event.preventDefault();
return api.goToItem(Focus.NextItem);
return api.goToItem(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToItem(Focus.PreviousItem);
return api.goToItem(Focus.Previous);

@@ -518,3 +725,3 @@ case Keys.Home:

event.preventDefault();
return api.goToItem(Focus.FirstItem);
return api.goToItem(Focus.First);

@@ -524,3 +731,3 @@ case Keys.End:

event.preventDefault();
return api.goToItem(Focus.LastItem);
return api.goToItem(Focus.Last);

@@ -531,5 +738,7 @@ case Keys.Escape:

vue.nextTick(function () {
var _api$buttonRef$value4;
var _dom11;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom11 = dom(api.buttonRef)) == null ? void 0 : _dom11.focus({
preventScroll: true
});
});

@@ -598,3 +807,3 @@ break;

var textValue = (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.toLowerCase().trim();
var textValue = (_document$getElementB2 = document.getElementById(id)) == null ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) == null ? void 0 : _document$getElementB3.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -608,3 +817,14 @@ });

});
vue.watchEffect(function () {
if (api.menuState.value !== MenuStates.Open) return;
if (!active.value) return;
vue.nextTick(function () {
var _document$getElementB4;
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'
});
});
});
function handleClick(event) {

@@ -614,5 +834,7 @@ if (disabled) return event.preventDefault();

vue.nextTick(function () {
var _api$buttonRef$value5;
var _dom12;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.focus({
preventScroll: true
});
});

@@ -623,12 +845,12 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;

@@ -652,4 +874,6 @@ if (!active.value) return;

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -666,8 +890,2 @@ return render({

function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var ListboxStates;

@@ -680,19 +898,14 @@

var Focus$1;
function nextFrame$1(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["First"] = 0] = "First";
Focus[Focus["Previous"] = 1] = "Previous";
Focus[Focus["Next"] = 2] = "Next";
Focus[Focus["Last"] = 3] = "Last";
Focus[Focus["Specific"] = 4] = "Specific";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus$1 || (Focus$1 = {}));
var ListboxContext = /*#__PURE__*/Symbol('ListboxContext');
function useListboxContext(component) {
var context = vue.inject(ListboxContext);
var context = vue.inject(ListboxContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Listbox /> component.");

@@ -709,2 +922,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

name: 'Listbox',
emits: ['update:modelValue'],
props: {

@@ -715,4 +929,8 @@ as: {

},
disabled: {
type: [Boolean],
"default": false
},
modelValue: {
type: [Object, String],
type: [Object, String, Number, Boolean],
"default": null

@@ -726,3 +944,4 @@ }

var passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue"]);
var disabled = props.disabled,
passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue", "disabled"]);

@@ -739,41 +958,2 @@ var listboxState = vue.ref(ListboxStates.Closed);

});
function calculateActiveOptionIndex(focus, id) {
var _activeOptionIndex$va, _match;
if (options.value.length <= 0) return null;
var currentActiveOptionIndex = (_activeOptionIndex$va = activeOptionIndex.value) !== null && _activeOptionIndex$va !== void 0 ? _activeOptionIndex$va : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus$1.First] = function () {
return options.value.findIndex(function (option) {
return !option.dataRef.disabled;
});
}, _match[Focus$1.Previous] = function () {
var idx = options.value.slice().reverse().findIndex(function (option, idx, all) {
if (currentActiveOptionIndex !== -1 && all.length - idx - 1 >= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Next] = function () {
return options.value.findIndex(function (option, idx) {
if (idx <= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
}, _match[Focus$1.Last] = function () {
var idx = options.value.slice().reverse().findIndex(function (option) {
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Specific] = function () {
return options.value.findIndex(function (option) {
return option.id === id;
});
}, _match[Focus$1.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeOptionIndex.value;
return nextActiveIndex;
}
var api = {

@@ -785,2 +965,3 @@ listboxState: listboxState,

optionsRef: optionsRef,
disabled: disabled,
options: options,

@@ -790,9 +971,34 @@ searchQuery: searchQuery,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},
openListbox: function openListbox() {
return listboxState.value = ListboxStates.Open;
if (disabled) return;
if (listboxState.value === ListboxStates.Open) return;
listboxState.value = ListboxStates.Open;
},
goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
var nextActiveOptionIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return options.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeOptionIndex.value;
},
resolveId: function resolveId(option) {
return option.id;
},
resolveDisabled: function resolveDisabled(option) {
return option.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeOptionIndex.value === nextActiveOptionIndex) return;

@@ -803,2 +1009,4 @@ searchQuery.value = '';

search: function search(value) {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
searchQuery.value += value;

@@ -808,10 +1016,9 @@ var match = options.value.findIndex(function (option) {

});
if (match === -1 || match === activeOptionIndex.value) {
return;
}
if (match === -1 || match === activeOptionIndex.value) return;
activeOptionIndex.value = match;
},
clearSearch: function clearSearch() {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
if (searchQuery.value === '') return;
searchQuery.value = '';

@@ -844,2 +1051,3 @@ },

select: function select(value) {
if (disabled) return;
emit('update:modelValue', value);

@@ -850,21 +1058,19 @@ }

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (listboxState.value !== ListboxStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(optionsRef)) == null ? void 0 : _dom2.contains(target))) api.closeListbox();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_optionsRef$value = optionsRef.value) === null || _optionsRef$value === void 0 ? void 0 : _optionsRef$value.contains(event.target))) {
api.closeListbox();
}
if (!event.defaultPrevented) vue.nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
vue.onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -876,3 +1082,4 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

var slot = {
open: listboxState.value === ListboxStates.Open
open: listboxState.value === ListboxStates.Open,
disabled: disabled
};

@@ -900,3 +1107,4 @@ return render({

var slot = {
open: api.listboxState.value === ListboxStates.Open
open: api.listboxState.value === ListboxStates.Open,
disabled: api.disabled
};

@@ -906,3 +1114,3 @@ var propsWeControl = {

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -922,6 +1130,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$buttonRef$value;
handleClick: function handleClick() {
var _dom4;
(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_dom4 = dom(api.buttonRef)) == null ? void 0 : _dom4.focus({
preventScroll: true
});
}

@@ -941,3 +1151,3 @@ };

render: function render$1() {
var _api$optionsRef$value;
var _dom5, _dom6;

@@ -947,3 +1157,3 @@ var api = useListboxContext('ListboxButton');

open: api.listboxState.value === ListboxStates.Open,
focused: this.focused
disabled: api.disabled
};

@@ -955,9 +1165,8 @@ var propsWeControl = {

'aria-haspopup': true,
'aria-controls': (_api$optionsRef$value = api.optionsRef.value) === null || _api$optionsRef$value === void 0 ? void 0 : _api$optionsRef$value.id,
'aria-controls': (_dom5 = dom(api.optionsRef)) == null ? void 0 : _dom5.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -974,3 +1183,2 @@ return render({

var id = "headlessui-listbox-button-" + useId();
var focused = vue.ref(false);

@@ -986,6 +1194,8 @@ function handleKeyDown(event) {

vue.nextTick(function () {
var _api$optionsRef$value2;
var _dom7;
(_api$optionsRef$value2 = api.optionsRef.value) === null || _api$optionsRef$value2 === void 0 ? void 0 : _api$optionsRef$value2.focus();
if (!api.value.value) api.goToOption(Focus$1.First);
(_dom7 = dom(api.optionsRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -998,6 +1208,8 @@ break;

vue.nextTick(function () {
var _api$optionsRef$value3;
var _dom8;
(_api$optionsRef$value3 = api.optionsRef.value) === null || _api$optionsRef$value3 === void 0 ? void 0 : _api$optionsRef$value3.focus();
if (!api.value.value) api.goToOption(Focus$1.Last);
(_dom8 = dom(api.optionsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -1008,9 +1220,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (api.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value2;
var _dom9;
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
return (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.focus({
preventScroll: true
});
});

@@ -1020,6 +1236,8 @@ } else {

api.openListbox();
vue.nextTick(function () {
var _api$optionsRef$value4;
nextFrame$1(function () {
var _dom10;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_dom10 = dom(api.optionsRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -1029,21 +1247,7 @@ }

function handleFocus() {
var _api$optionsRef$value5;
if (api.listboxState.value === ListboxStates.Open) return (_api$optionsRef$value5 = api.optionsRef.value) === null || _api$optionsRef$value5 === void 0 ? void 0 : _api$optionsRef$value5.focus();
focused.value = true;
}
function handleBlur() {
focused.value = false;
}
return {
id: id,
el: api.buttonRef,
focused: focused,
handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus,
handleBlur: handleBlur
handleClick: handleClick
};

@@ -1063,14 +1267,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
var _api$options$value$ap, _dom$id, _dom11, _dom12;
var api = useListboxContext('ListboxOptions'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.listboxState.value === ListboxStates.Closed) return null;
var api = useListboxContext('ListboxOptions');
var slot = {

@@ -1080,6 +1282,6 @@ open: api.listboxState.value === ListboxStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) === null || _api$options$value$ap === void 0 ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id) !== null && _api$labelRef$value$i !== void 0 ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.id,
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) == null ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_dom$id = (_dom11 = dom(api.labelRef)) == null ? void 0 : _dom11.id) != null ? _dom$id : (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'listbox',

@@ -1089,2 +1291,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -1094,3 +1297,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -1119,3 +1324,2 @@ },

event.preventDefault();
api.closeListbox();

@@ -1127,6 +1331,9 @@ if (api.activeOptionIndex.value !== null) {

api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value4;
var _dom13;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom13 = dom(api.buttonRef)) == null ? void 0 : _dom13.focus({
preventScroll: true
});
});

@@ -1137,7 +1344,7 @@ break;

event.preventDefault();
return api.goToOption(Focus$1.Next);
return api.goToOption(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToOption(Focus$1.Previous);
return api.goToOption(Focus.Previous);

@@ -1147,3 +1354,3 @@ case Keys.Home:

event.preventDefault();
return api.goToOption(Focus$1.First);
return api.goToOption(Focus.First);

@@ -1153,3 +1360,3 @@ case Keys.End:

event.preventDefault();
return api.goToOption(Focus$1.Last);
return api.goToOption(Focus.Last);

@@ -1160,5 +1367,7 @@ case Keys.Escape:

vue.nextTick(function () {
var _api$buttonRef$value5;
var _dom14;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom14 = dom(api.buttonRef)) == null ? void 0 : _dom14.focus({
preventScroll: true
});
});

@@ -1237,3 +1446,3 @@ break;

var textValue = (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.toLowerCase().trim();
var textValue = (_document$getElementB = document.getElementById(id)) == null ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) == null ? void 0 : _document$getElementB2.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -1248,14 +1457,20 @@ });

vue.onMounted(function () {
var _document$getElementB3, _document$getElementB4;
vue.watch([api.listboxState, selected], function () {
var _document$getElementB3;
if (!selected.value) return;
api.goToOption(Focus$1.Specific, id);
(_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3.focus) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.call(_document$getElementB3);
if (api.listboxState.value !== ListboxStates.Open) return;
if (!selected.value) return;
api.goToOption(Focus.Specific, id);
(_document$getElementB3 = document.getElementById(id)) == null ? void 0 : _document$getElementB3.focus == null ? void 0 : _document$getElementB3.focus();
}, {
immediate: true
});
});
vue.watchEffect(function () {
if (api.listboxState.value !== ListboxStates.Open) return;
if (!active.value) return;
vue.nextTick(function () {
var _document$getElementB5, _document$getElementB6;
var _document$getElementB4;
return (_document$getElementB5 = document.getElementById(id)) === null || _document$getElementB5 === void 0 ? void 0 : (_document$getElementB6 = _document$getElementB5.scrollIntoView) === null || _document$getElementB6 === void 0 ? void 0 : _document$getElementB6.call(_document$getElementB5, {
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'

@@ -1271,5 +1486,7 @@ });

vue.nextTick(function () {
var _api$buttonRef$value6;
var _dom15;
return (_api$buttonRef$value6 = api.buttonRef.value) === null || _api$buttonRef$value6 === void 0 ? void 0 : _api$buttonRef$value6.focus();
return (_dom15 = dom(api.buttonRef)) == null ? void 0 : _dom15.focus({
preventScroll: true
});
});

@@ -1279,16 +1496,16 @@ }

function handleFocus() {
if (disabled) return api.goToOption(Focus$1.Nothing);
api.goToOption(Focus$1.Specific, id);
if (disabled) return api.goToOption(Focus.Nothing);
api.goToOption(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;
if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1306,3 +1523,3 @@

tabIndex: -1,
"class": resolvePropValue$1(className, slot),
"class": resolvePropValue(className, slot),
'aria-disabled': disabled === true ? true : undefined,

@@ -1312,4 +1529,6 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -1324,10 +1543,4 @@ return render({

}
}); // ---
});
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var GroupContext = /*#__PURE__*/Symbol('GroupContext');

@@ -1361,5 +1574,7 @@

var labelRef = vue.ref(null);
var descriptionRef = vue.ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
labelRef: labelRef,
descriptionRef: descriptionRef
};

@@ -1380,2 +1595,3 @@ vue.provide(GroupContext, api);

name: 'Switch',
emits: ['update:modelValue'],
props: {

@@ -1406,6 +1622,11 @@ as: {

var labelledby = vue.computed(function () {
var _api$labelRef$value;
var _dom;
return api === null || api === void 0 ? void 0 : (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id;
return (_dom = dom(api == null ? void 0 : api.labelRef)) == null ? void 0 : _dom.id;
});
var describedby = vue.computed(function () {
var _dom2;
return (_dom2 = dom(api == null ? void 0 : api.descriptionRef)) == null ? void 0 : _dom2.id;
});
var slot = {

@@ -1419,8 +1640,17 @@ checked: this.$props.modelValue

tabIndex: 0,
"class": resolvePropValue$2(className, slot),
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
'aria-describedby': describedby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp
onKeyup: this.handleKeyUp,
onKeypress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({

@@ -1444,3 +1674,3 @@ props: _extends({}, this.$props, propsWeControl),

id: id,
el: api === null || api === void 0 ? void 0 : api.switchRef,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {

@@ -1451,6 +1681,8 @@ event.preventDefault();

handleKeyUp: function handleKeyUp(event) {
if (event.key === Keys.Space) {
event.preventDefault();
toggle();
}
if (event.key !== Keys.Tab) event.preventDefault();
if (event.key === Keys.Space) toggle();
},
// This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
handleKeyPress: function handleKeyPress(event) {
event.preventDefault();
}

@@ -1473,3 +1705,3 @@ };

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -1489,7 +1721,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) === null || _api$switchRef$value === void 0 ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) === null || _api$switchRef$value2 === void 0 ? void 0 : _api$switchRef$value2.focus();
handleClick: function handleClick() {
var el = dom(api.switchRef);
el == null ? void 0 : el.click();
el == null ? void 0 : el.focus({
preventScroll: true
});
}

@@ -1500,7 +1733,31 @@ };

function resolvePropValue$2(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var SwitchDescription = /*#__PURE__*/vue.defineComponent({
name: 'SwitchDescription',
props: {
as: {
type: [Object, String],
"default": 'p'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el'
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchDescription');
var id = "headlessui-switch-description-" + useId();
return {
id: id,
el: api.descriptionRef
};
}
});

@@ -1517,4 +1774,5 @@ exports.Listbox = Listbox;

exports.Switch = Switch;
exports.SwitchDescription = SwitchDescription;
exports.SwitchGroup = SwitchGroup;
exports.SwitchLabel = SwitchLabel;
//# sourceMappingURL=headlessui.cjs.development.js.map

2

dist/headlessui.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");function t(){return(t=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 n(e,t){if(null==e)return{};var n,o,u={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(n=i[o])>=0||(u[n]=e[n]);return u}function o(e,t){if(e in t){for(var n=t[e],u=arguments.length,i=new Array(u>2?u-2:0),r=2;r<u;r++)i[r-2]=arguments[r];return"function"==typeof n?n.apply(void 0,i):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,o),a}function u(t){var o,u=t.props,i=t.attrs,r=t.slots,a=t.slot,l=u.as,s=n(u,["as"]),c=null===(o=r.default)||void 0===o?void 0:o.call(r,a);if("template"===l){if(Object.keys(s).length>0||"class"in i){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 e.cloneVNode(v,s)}return c}return e.h(l,s,c)}var i,r,a,l=0;function s(){return++l}!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"}(i||(i={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(r||(r={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(a||(a={}));var c=Symbol("MenuContext");function d(t){var n=e.inject(c);if(void 0===n){var o=new Error("<"+t+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,d),o}return n}var v,f,p=e.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(t,n){var i=n.slots,l=n.attrs,s=e.ref(r.Closed),d=e.ref(null),v=e.ref(null),f=e.ref([]),p=e.ref(""),h=e.ref(null),m={menuState:s,buttonRef:d,itemsRef:v,items:f,searchQuery:p,activeItemIndex:h,closeMenu:function(){return s.value=r.Closed},openMenu:function(){return s.value=r.Open},goToItem:function(e,t){var n=function(e,t){var n,u;if(f.value.length<=0)return null;var i=null!==(n=h.value)&&void 0!==n?n:-1,r=o(e,((u={})[a.FirstItem]=function(){return f.value.findIndex((function(e){return!e.dataRef.disabled}))},u[a.PreviousItem]=function(){var e=f.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==i&&n.length-t-1>=i||e.dataRef.disabled)}));return-1===e?e:f.value.length-1-e},u[a.NextItem]=function(){return f.value.findIndex((function(e,t){return!(t<=i||e.dataRef.disabled)}))},u[a.LastItem]=function(){var e=f.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:f.value.length-1-e},u[a.SpecificItem]=function(){return f.value.findIndex((function(e){return e.id===t}))},u[a.Nothing]=function(){return null},u));return-1===r?h.value:r}(e,t);""===p.value&&h.value===n||(p.value="",h.value=n)},search:function(e){p.value+=e;var t=f.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==h.value&&(h.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){f.value.push({id:e,dataRef:t})},unregisterItem: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)}};return e.onMounted((function(){function t(t){var n,o;s.value===r.Open&&((null===(n=d.value)||void 0===n?void 0:n.contains(t.target))||((null===(o=v.value)||void 0===o?void 0:o.contains(t.target))||m.closeMenu(),t.defaultPrevented||e.nextTick((function(){var e;return null===(e=d.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("click",t),e.onUnmounted((function(){return window.removeEventListener("click",t)}))})),e.provide(c,m),function(){return u({props:t,slot:{open:s.value===r.Open},slots:i,attrs:l})}}}),h=e.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,n=d("MenuButton"),o={open:n.menuState.value===r.Open},i={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=n.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":n.menuState.value===r.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp};return u({props:t({},this.$props,i),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=d("MenuButton");return{id:"headlessui-menu-button-"+s(),el:t.buttonRef,handleKeyDown:function(n){switch(n.key){case i.Space:case i.Enter:case i.ArrowDown:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(a.FirstItem)}));break;case i.ArrowUp:n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;null===(e=t.itemsRef.value)||void 0===e||e.focus(),t.goToItem(a.LastItem)}))}},handlePointerUp:function(n){t.menuState.value===r.Open?(t.closeMenu(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}))):(n.preventDefault(),t.openMenu(),e.nextTick((function(){var e;return null===(e=t.itemsRef.value)||void 0===e?void 0:e.focus()})))},handleFocus:function(){var e;t.menuState.value===r.Open&&(null===(e=t.itemsRef.value)||void 0===e||e.focus())}}}}),m=e.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,o,i=d("MenuItems"),a=this.$props,l=a.static,s=n(a,["static"]);if(!l&&i.menuState.value===r.Closed)return null;var c={open:i.menuState.value===r.Open};return u({props:t({},s,{"aria-activedescendant":null===i.activeItemIndex.value||null===(e=i.items.value[i.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(o=i.buttonRef.value)||void 0===o?void 0:o.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=d("MenuItems"),n="headlessui-menu-items-"+s(),o=e.ref(null);return{id:n,el:t.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case i.Space:if(""!==t.searchQuery.value)return n.preventDefault(),t.search(n.key);case i.Enter:var u;n.preventDefault(),t.closeMenu(),null!==t.activeItemIndex.value&&(null===(u=document.getElementById(t.items.value[t.activeItemIndex.value].id))||void 0===u||u.click()),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case i.ArrowDown:return n.preventDefault(),t.goToItem(a.NextItem);case i.ArrowUp:return n.preventDefault(),t.goToItem(a.PreviousItem);case i.Home:case i.PageUp:return n.preventDefault(),t.goToItem(a.FirstItem);case i.End:case i.PageDown:return n.preventDefault(),t.goToItem(a.LastItem);case i.Escape:n.preventDefault(),t.closeMenu(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case i.Tab:return n.preventDefault();default:1===n.key.length&&(t.search(n.key),o.value=setTimeout((function(){return t.clearSearch()}),350))}}}}}),b=e.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(n,o){var i=o.slots,r=o.attrs,l=d("MenuItem"),c="headlessui-menu-item-"+s(),v=n.disabled,f=n.className,p=void 0===f?n.class:f,h=e.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===c})),m=e.ref({disabled:v,textValue:""});function b(t){if(v)return t.preventDefault();l.closeMenu(),e.nextTick((function(){var e;return null===(e=l.buttonRef.value)||void 0===e?void 0:e.focus()}))}function g(){if(v)return l.goToItem(a.Nothing);l.goToItem(a.SpecificItem,c)}function I(){v||h.value||l.goToItem(a.SpecificItem,c)}function y(){v||h.value&&l.goToItem(a.Nothing)}return e.onMounted((function(){var e,t,n=null===(e=document.getElementById(c))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(m.value.textValue=n)})),e.onMounted((function(){return l.registerItem(c,m)})),e.onUnmounted((function(){return l.unregisterItem(c)})),function(){var e={active:h.value,disabled:v},o={id:c,role:"menuitem",tabIndex:-1,class:x(p,e),"aria-disabled":!0===v||void 0,onClick:b,onFocus:g,onPointerMove:I,onPointerLeave:y};return u({props:t({},n,o),slot:e,attrs:r,slots:i})}}});function x(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(v||(v={})),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"}(f||(f={}));var g=Symbol("ListboxContext");function I(t){var n=e.inject(g);if(void 0===n){var o=new Error("<"+t+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,I),o}return n}var y=e.defineComponent({name:"Listbox",props:{as:{type:[Object,String],default:"template"},modelValue:{type:[Object,String],default:null}},setup:function(t,i){var r=i.slots,a=i.attrs,l=i.emit,s=n(t,["modelValue"]),c=e.ref(v.Closed),d=e.ref(null),p=e.ref(null),h=e.ref(null),m=e.ref([]),b=e.ref(""),x=e.ref(null),I=e.computed((function(){return t.modelValue})),y={listboxState:c,value:I,labelRef:d,buttonRef:p,optionsRef:h,options:m,searchQuery:b,activeOptionIndex:x,closeListbox:function(){return c.value=v.Closed},openListbox:function(){return c.value=v.Open},goToOption:function(e,t){var n=function(e,t){var n,u;if(m.value.length<=0)return null;var i=null!==(n=x.value)&&void 0!==n?n:-1,r=o(e,((u={})[f.First]=function(){return m.value.findIndex((function(e){return!e.dataRef.disabled}))},u[f.Previous]=function(){var e=m.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==i&&n.length-t-1>=i||e.dataRef.disabled)}));return-1===e?e:m.value.length-1-e},u[f.Next]=function(){return m.value.findIndex((function(e,t){return!(t<=i||e.dataRef.disabled)}))},u[f.Last]=function(){var e=m.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:m.value.length-1-e},u[f.Specific]=function(){return m.value.findIndex((function(e){return e.id===t}))},u[f.Nothing]=function(){return null},u));return-1===r?x.value:r}(e,t);""===b.value&&x.value===n||(b.value="",x.value=n)},search:function(e){b.value+=e;var t=m.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(b.value)}));-1!==t&&t!==x.value&&(x.value=t)},clearSearch:function(){b.value=""},registerOption:function(e,t){m.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=m.value.slice(),n=null!==x.value?t[x.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),m.value=t,x.value=o===x.value||null===n?null:t.indexOf(n)},select:function(e){l("update:modelValue",e)}};return e.onMounted((function(){function t(t){var n,o;c.value===v.Open&&((null===(n=p.value)||void 0===n?void 0:n.contains(t.target))||((null===(o=h.value)||void 0===o?void 0:o.contains(t.target))||y.closeListbox(),t.defaultPrevented||e.nextTick((function(){var e;return null===(e=p.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("click",t),e.onUnmounted((function(){return window.removeEventListener("click",t)}))})),e.provide(g,y),function(){return u({props:s,slot:{open:c.value===v.Open},slots:r,attrs:a})}}}),w=e.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e={open:I("ListboxLabel").listboxState.value===v.Open};return u({props:t({},this.$props,{id:this.id,ref:"el",onPointerUp:this.handlePointerUp}),slot:e,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=I("ListboxLabel");return{id:"headlessui-listbox-label-"+s(),el:e.labelRef,handlePointerUp:function(){var t;null===(t=e.buttonRef.value)||void 0===t||t.focus()}}}}),O=e.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,n=I("ListboxButton"),o={open:n.listboxState.value===v.Open,focused:this.focused},i={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=n.optionsRef.value)||void 0===e?void 0:e.id,"aria-expanded":n.listboxState.value===v.Open||void 0,"aria-labelledby":n.labelRef.value?[n.labelRef.value.id,this.id].join(" "):void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onPointerUp:this.handlePointerUp};return u({props:t({},this.$props,i),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=I("ListboxButton"),n="headlessui-listbox-button-"+s(),o=e.ref(!1);return{id:n,el:t.buttonRef,focused:o,handleKeyDown:function(n){switch(n.key){case i.Space:case i.Enter:case i.ArrowDown:n.preventDefault(),t.openListbox(),e.nextTick((function(){var e;null===(e=t.optionsRef.value)||void 0===e||e.focus(),t.value.value||t.goToOption(f.First)}));break;case i.ArrowUp:n.preventDefault(),t.openListbox(),e.nextTick((function(){var e;null===(e=t.optionsRef.value)||void 0===e||e.focus(),t.value.value||t.goToOption(f.Last)}))}},handlePointerUp:function(n){t.listboxState.value===v.Open?(t.closeListbox(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}))):(n.preventDefault(),t.openListbox(),e.nextTick((function(){var e;return null===(e=t.optionsRef.value)||void 0===e?void 0:e.focus()})))},handleFocus:function(){var e;if(t.listboxState.value===v.Open)return null===(e=t.optionsRef.value)||void 0===e?void 0:e.focus();o.value=!0},handleBlur:function(){o.value=!1}}}}),S=e.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1}},render:function(){var e,o,i,r,a=I("ListboxOptions"),l=this.$props,s=l.static,c=n(l,["static"]);if(!s&&a.listboxState.value===v.Closed)return null;var d={open:a.listboxState.value===v.Open};return u({props:t({},c,{"aria-activedescendant":null===a.activeOptionIndex.value||null===(e=a.options.value[a.activeOptionIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null!==(o=null===(i=a.labelRef.value)||void 0===i?void 0:i.id)&&void 0!==o?o:null===(r=a.buttonRef.value)||void 0===r?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"}),slot:d,attrs:this.$attrs,slots:this.$slots})},setup:function(){var t=I("ListboxOptions"),n="headlessui-listbox-options-"+s(),o=e.ref(null);return{id:n,el:t.optionsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case i.Space:if(""!==t.searchQuery.value)return n.preventDefault(),t.search(n.key);case i.Enter:n.preventDefault(),t.closeListbox(),null!==t.activeOptionIndex.value&&t.select(t.options.value[t.activeOptionIndex.value].dataRef.value),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case i.ArrowDown:return n.preventDefault(),t.goToOption(f.Next);case i.ArrowUp:return n.preventDefault(),t.goToOption(f.Previous);case i.Home:case i.PageUp:return n.preventDefault(),t.goToOption(f.First);case i.End:case i.PageDown:return n.preventDefault(),t.goToOption(f.Last);case i.Escape:n.preventDefault(),t.closeListbox(),e.nextTick((function(){var e;return null===(e=t.buttonRef.value)||void 0===e?void 0:e.focus()}));break;case i.Tab:return n.preventDefault();default:1===n.key.length&&(t.search(n.key),o.value=setTimeout((function(){return t.clearSearch()}),350))}}}}}),k=e.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(n,o){var i=o.slots,r=o.attrs,a=I("ListboxOption"),l="headlessui-listbox-option-"+s(),c=n.disabled,d=n.className,v=void 0===d?n.class:d,p=n.value,h=e.computed((function(){return null!==a.activeOptionIndex.value&&a.options.value[a.activeOptionIndex.value].id===l})),m=e.computed((function(){return e.toRaw(a.value.value)===e.toRaw(p)})),b=e.ref({disabled:c,value:p,textValue:""});function x(t){if(c)return t.preventDefault();a.select(p),a.closeListbox(),e.nextTick((function(){var e;return null===(e=a.buttonRef.value)||void 0===e?void 0:e.focus()}))}function g(){if(c)return a.goToOption(f.Nothing);a.goToOption(f.Specific,l)}function y(){c||h.value||a.goToOption(f.Specific,l)}function w(){c||h.value&&a.goToOption(f.Nothing)}return e.onMounted((function(){var e,t,n=null===(e=document.getElementById(l))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(b.value.textValue=n)})),e.onMounted((function(){return a.registerOption(l,b)})),e.onUnmounted((function(){return a.unregisterOption(l)})),e.onMounted((function(){var e,t;m.value&&(a.goToOption(f.Specific,l),null===(e=document.getElementById(l))||void 0===e||null===(t=e.focus)||void 0===t||t.call(e))})),e.watchEffect((function(){h.value&&e.nextTick((function(){var e,t;return null===(e=document.getElementById(l))||void 0===e||null===(t=e.scrollIntoView)||void 0===t?void 0:t.call(e,{block:"nearest"})}))})),function(){var e={active:h.value,selected:m.value,disabled:c},o={id:l,role:"option",tabIndex:-1,class:R(v,e),"aria-disabled":!0===c||void 0,"aria-selected":!0===m.value?m.value:void 0,onClick:x,onFocus:g,onPointerMove:y,onPointerLeave:w};return u({props:t({},n,o),slot:e,attrs:r,slots:i})}}});function R(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}var T=Symbol("GroupContext");function L(t){var n=e.inject(T,null);if(null===n){var o=new Error("<"+t+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,L),o}return n}var D=e.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(t,n){var o=n.slots,i=n.attrs,r=e.ref(null),a=e.ref(null);return e.provide(T,{switchRef:r,labelRef:a}),function(){return u({props:t,slot:{},slots:o,attrs:i})}}}),E=e.defineComponent({name:"Switch",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 n=e.inject(T,null),o=this.$props,i=o.className,r=void 0===i?o.class:i,a=e.computed((function(){var e;return null==n||null===(e=n.labelRef.value)||void 0===e?void 0:e.id})),l={checked:this.$props.modelValue},s={id:this.id,ref:null===n?void 0:n.switchRef,role:"switch",tabIndex:0,class:C(r,l),"aria-checked":this.$props.modelValue,"aria-labelledby":a.value,onClick:this.handleClick,onKeyUp:this.handleKeyUp};return u({props:t({},this.$props,s),slot:l,attrs:this.$attrs,slots:this.$slots})},setup:function(t,n){var o=n.emit,u=e.inject(T,null);function r(){o("update:modelValue",!t.modelValue)}return{id:"headlessui-switch-"+s(),el:null==u?void 0:u.switchRef,handleClick:function(e){e.preventDefault(),r()},handleKeyUp:function(e){e.key===i.Space&&(e.preventDefault(),r())}}}}),P=e.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return u({props:t({},this.$props,{id:this.id,ref:"el",onPointerUp:this.handlePointerUp}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=L("SwitchLabel");return{id:"headlessui-switch-label-"+s(),el:e.labelRef,handlePointerUp:function(){var t,n;null===(t=e.switchRef.value)||void 0===t||t.click(),null===(n=e.switchRef.value)||void 0===n||n.focus()}}}});function C(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}exports.Listbox=y,exports.ListboxButton=O,exports.ListboxLabel=w,exports.ListboxOption=k,exports.ListboxOptions=S,exports.Menu=p,exports.MenuButton=h,exports.MenuItem=b,exports.MenuItems=m,exports.Switch=E,exports.SwitchGroup=D,exports.SwitchLabel=P;
"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 i(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 u=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(u,i),u}function u(n){var l,u,s=n.visible,c=void 0===s||s,d=n.features,p=void 0===d?e.None:d,f=r(n,["visible","features"]);return c||p&e.Static&&f.props.static?a(f):p&e.RenderStrategy?i(null==(l=f.props.unmount)||l?t.Unmount:t.Hidden,((u={})[t.Unmount]=function(){return null},u[t.Hidden]=function(){return a(o({},f,{props:o({},f.props,{hidden:!0,style:{display:"none"}})}))},u)):a(f)}function a(e){var t=e.attrs,o=e.slots,i=e.slot,u=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 i=n.value;i in o&&delete o[i]}return o}(e.props,["unmount","static"]),a=u.as,s=r(u,["as"]),c=null==o.default?void 0:o.default(i);if("template"===a){if(Object.keys(s).length>0||"class"in t){var d=null!=c?c:[],p=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(p,s)}return c}return n.h(a,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,p=0;function f(){return++p}function v(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 m(e){var t;return null==e||null==e.value?null:null!=(t=e.value.$el)?t:e.value}!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 h=Symbol("MenuContext");function x(e){var t=n.inject(h,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,x),o}return t}var y,S=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),i=n.ref(null),a=n.ref(null),s=n.ref([]),p=n.ref(""),f=n.ref(null),b={menuState:l,buttonRef:i,itemsRef:a,items:s,searchQuery:p,activeItemIndex:f,closeMenu:function(){l.value=d.Closed,f.value=null},openMenu:function(){return l.value=d.Open},goToItem:function(e,t){var n=v(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}});""===p.value&&f.value===n||(p.value="",f.value=n)},search:function(e){p.value+=e;var t=s.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==f.value&&(f.value=t)},clearSearch:function(){p.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,u=document.activeElement;l.value===d.Open&&((null==(t=m(i))?void 0:t.contains(r))||((null==(n=m(a))?void 0:n.contains(r))||b.closeMenu(),u!==document.body&&(null==u?void 0:u.contains(r))||e.defaultPrevented||null==(o=m(i))||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),n.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),n.provide(h,b),function(){return u({props:e,slot:{open:l.value===d.Open},slots:o,attrs:r})}}}),g=n.defineComponent({props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=x("MenuButton"),n={open:t.menuState.value===d.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=m(t.itemsRef))?void 0:e.id,"aria-expanded":t.menuState.value===d.Open||void 0,onKeydown:this.handleKeyDown,onClick:this.handleClick};return u({props:o({},this.$props,r),slot:n,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var t=x("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=m(t.itemsRef))||e.focus({preventScroll:!0}),t.goToItem(c.First)}));break;case s.ArrowUp:e.preventDefault(),t.openMenu(),n.nextTick((function(){var e;null==(e=m(t.itemsRef))||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=m(t.buttonRef))?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),t.openMenu(),r=function(){var e;return null==(e=m(t.itemsRef))?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),w=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=x("MenuItems"),l={open:r.menuState.value===d.Open},i={"aria-activedescendant":null===r.activeItemIndex.value||null==(t=r.items.value[r.activeItemIndex.value])?void 0:t.id,"aria-labelledby":null==(n=m(r.buttonRef))?void 0:n.id,id:this.id,onKeydown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return u({props:o({},this.$props,i),slot:l,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:l.open})},setup:function(){var e=x("MenuItems"),t="headlessui-menu-items-"+f(),o=n.ref(null);return n.watchEffect((function(){var t=m(e.itemsRef);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=m(e.buttonRef))?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=m(e.buttonRef))?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))}}}}}),O=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,i=x("MenuItem"),a="headlessui-menu-item-"+f(),s=e.disabled,p=e.className,v=void 0===p?e.class:p,h=n.computed((function(){return null!==i.activeItemIndex.value&&i.items.value[i.activeItemIndex.value].id===a})),y=n.ref({disabled:s,textValue:""});function S(e){if(s)return e.preventDefault();i.closeMenu(),n.nextTick((function(){var e;return null==(e=m(i.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function g(){if(s)return i.goToItem(c.Nothing);i.goToItem(c.Specific,a)}function w(){s||h.value||i.goToItem(c.Specific,a)}function O(){s||h.value&&i.goToItem(c.Nothing)}return n.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)})),n.onMounted((function(){return i.registerItem(a,y)})),n.onUnmounted((function(){return i.unregisterItem(a)})),n.watchEffect((function(){i.menuState.value===d.Open&&h.value&&n.nextTick((function(){var e;return null==(e=document.getElementById(a))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:h.value,disabled:s},n={id:a,role:"menuitem",tabIndex:-1,class:b(v,t),"aria-disabled":!0===s||void 0,onClick:S,onFocus:g,onPointermove:w,onMousemove:w,onPointerleave:O,onMouseleave:O};return u({props:o({},e,n),slot:t,attrs:l,slots:r})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(y||(y={}));var I=Symbol("ListboxContext");function k(e){var t=n.inject(I,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,k),o}return t}var R=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,i=t.emit,a=e.disabled,s=r(e,["modelValue","disabled"]),d=n.ref(y.Closed),p=n.ref(null),f=n.ref(null),b=n.ref(null),h=n.ref([]),x=n.ref(""),S=n.ref(null),g=n.computed((function(){return e.modelValue})),w={listboxState:d,value:g,labelRef:p,buttonRef:f,optionsRef:b,disabled:a,options:h,searchQuery:x,activeOptionIndex:S,closeListbox:function(){a||d.value!==y.Closed&&(d.value=y.Closed,S.value=null)},openListbox:function(){a||d.value!==y.Open&&(d.value=y.Open)},goToOption:function(e,t){if(!a&&d.value!==y.Closed){var n=v(e===c.Specific?{focus:c.Specific,id:t}:{focus:e},{resolveItems:function(){return h.value},resolveActiveIndex:function(){return S.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===x.value&&S.value===n||(x.value="",S.value=n)}},search:function(e){if(!a&&d.value!==y.Closed){x.value+=e;var t=h.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(x.value)}));-1!==t&&t!==S.value&&(S.value=t)}},clearSearch:function(){a||d.value!==y.Closed&&""!==x.value&&(x.value="")},registerOption:function(e,t){h.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=h.value.slice(),n=null!==S.value?t[S.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),h.value=t,S.value=o===S.value||null===n?null:t.indexOf(n)},select:function(e){a||i("update:modelValue",e)}};return n.onMounted((function(){function e(e){var t,n,o,r=e.target,l=document.activeElement;d.value===y.Open&&((null==(t=m(f))?void 0:t.contains(r))||((null==(n=m(b))?void 0:n.contains(r))||w.closeListbox(),l!==document.body&&(null==l?void 0:l.contains(r))||e.defaultPrevented||null==(o=m(f))||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),n.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),n.provide(I,w),function(){return u({props:s,slot:{open:d.value===y.Open,disabled:a},slots:o,attrs:l})}}}),T=n.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=k("ListboxLabel"),t={open:e.listboxState.value===y.Open,disabled:e.disabled};return u({props:o({},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-"+f(),el:e.labelRef,handleClick:function(){var t;null==(t=m(e.buttonRef))||t.focus({preventScroll:!0})}}}}),D=n.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t,n=k("ListboxButton"),r={open:n.listboxState.value===y.Open,disabled:n.disabled},l={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=m(n.optionsRef))?void 0:e.id,"aria-expanded":n.listboxState.value===y.Open||void 0,"aria-labelledby":n.labelRef.value?[null==(t=m(n.labelRef))?void 0:t.id,this.id].join(" "):void 0,disabled:n.disabled,onKeydown:this.handleKeyDown,onClick:this.handleClick};return u({props:o({},this.$props,l),slot:r,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=k("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=m(e.optionsRef))||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=m(e.optionsRef))||t.focus({preventScroll:!0}),e.value.value||e.goToOption(c.Last)}))}},handleClick:function(t){var o;e.disabled||(e.listboxState.value===y.Open?(e.closeListbox(),n.nextTick((function(){var t;return null==(t=m(e.buttonRef))?void 0:t.focus({preventScroll:!0})}))):(t.preventDefault(),e.openListbox(),o=function(){var t;return null==(t=m(e.optionsRef))?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(o)}))))}}}}),C=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,i=k("ListboxOptions"),a={open:i.listboxState.value===y.Open},s={"aria-activedescendant":null===i.activeOptionIndex.value||null==(t=i.options.value[i.activeOptionIndex.value])?void 0:t.id,"aria-labelledby":null!=(n=null==(r=m(i.labelRef))?void 0:r.id)?n:null==(l=m(i.buttonRef))?void 0:l.id,id:this.id,onKeydown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return u({props:o({},this.$props,s),slot:a,attrs:this.$attrs,slots:this.$slots,features:e.RenderStrategy|e.Static,visible:a.open})},setup:function(){var e=k("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=m(e.buttonRef))?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=m(e.buttonRef))?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))}}}}}),E=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,i=k("ListboxOption"),a="headlessui-listbox-option-"+f(),s=e.disabled,d=e.className,p=void 0===d?e.class:d,v=e.value,h=n.computed((function(){return null!==i.activeOptionIndex.value&&i.options.value[i.activeOptionIndex.value].id===a})),x=n.computed((function(){return n.toRaw(i.value.value)===n.toRaw(v)})),S=n.ref({disabled:s,value:v,textValue:""});function g(e){if(s)return e.preventDefault();i.select(v),i.closeListbox(),n.nextTick((function(){var e;return null==(e=m(i.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function w(){if(s)return i.goToOption(c.Nothing);i.goToOption(c.Specific,a)}function O(){s||h.value||i.goToOption(c.Specific,a)}function I(){s||h.value&&i.goToOption(c.Nothing)}return n.onMounted((function(){var e,t,n=null==(e=document.getElementById(a))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(S.value.textValue=n)})),n.onMounted((function(){return i.registerOption(a,S)})),n.onUnmounted((function(){return i.unregisterOption(a)})),n.onMounted((function(){n.watch([i.listboxState,x],(function(){var e;i.listboxState.value===y.Open&&x.value&&(i.goToOption(c.Specific,a),null==(e=document.getElementById(a))||null==e.focus||e.focus())}),{immediate:!0})})),n.watchEffect((function(){i.listboxState.value===y.Open&&h.value&&n.nextTick((function(){var e;return null==(e=document.getElementById(a))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:h.value,selected:x.value,disabled:s},n={id:a,role:"option",tabIndex:-1,class:b(p,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===x.value?x.value:void 0,onClick:g,onFocus:w,onPointermove:O,onMousemove:O,onPointerleave:I,onMouseleave:I};return u({props:o({},e,n),slot:t,attrs:l,slots:r})}}}),L=Symbol("GroupContext");function j(e){var t=n.inject(L,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,j),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),i=n.ref(null),a=n.ref(null);return n.provide(L,{switchRef:l,labelRef:i,descriptionRef:a}),function(){return u({props:e,slot:{},slots:o,attrs:r})}}}),N=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(L,null),t=this.$props,r=t.className,l=void 0===r?t.class:r,i=n.computed((function(){var t;return null==(t=m(null==e?void 0:e.labelRef))?void 0:t.id})),a=n.computed((function(){var t;return null==(t=m(null==e?void 0:e.descriptionRef))?void 0:t.id})),s={checked:this.$props.modelValue},c={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:b(l,s),"aria-checked":this.$props.modelValue,"aria-labelledby":i.value,"aria-describedby":a.value,onClick:this.handleClick,onKeyup:this.handleKeyUp,onKeypress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(c,{type:"button"}),u({props:o({},this.$props,c),slot:s,attrs:this.$attrs,slots:this.$slots})},setup:function(e,t){var o=t.emit,r=n.inject(L,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()}}}}),A=n.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return u({props:o({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=j("SwitchLabel");return{id:"headlessui-switch-label-"+f(),el:e.labelRef,handleClick:function(){var t=m(e.switchRef);null==t||t.click(),null==t||t.focus({preventScroll:!0})}}}}),$=n.defineComponent({name:"SwitchDescription",props:{as:{type:[Object,String],default:"p"}},render:function(){return u({props:o({},this.$props,{id:this.id,ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=j("SwitchDescription");return{id:"headlessui-switch-description-"+f(),el:e.descriptionRef}}});exports.Listbox=R,exports.ListboxButton=D,exports.ListboxLabel=T,exports.ListboxOption=E,exports.ListboxOptions=C,exports.Menu=S,exports.MenuButton=g,exports.MenuItem=O,exports.MenuItems=w,exports.Switch=N,exports.SwitchDescription=$,exports.SwitchGroup=M,exports.SwitchLabel=A;
//# sourceMappingURL=headlessui.cjs.production.min.js.map

923

dist/headlessui.esm.js

@@ -1,2 +0,2 @@

import { cloneVNode, h, defineComponent, ref, onMounted, onUnmounted, provide, computed, inject, nextTick, toRaw, watchEffect } from 'vue';
import { cloneVNode, h, defineComponent, ref, onMounted, onUnmounted, provide, watchEffect, computed, nextTick, inject, toRaw, watch } from 'vue';

@@ -36,2 +36,44 @@ function _extends() {

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
function match(value, lookup) {

@@ -51,28 +93,89 @@ if (value in lookup) {

}).join(', ') + ".");
if (Error.captureStackTrace) Error.captureStackTrace(error, match);
throw error;
}
if (Error.captureStackTrace) {
Error.captureStackTrace(error, match);
var Features;
(function (Features) {
/** No features at all */
Features[Features["None"] = 0] = "None";
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
Features[Features["RenderStrategy"] = 1] = "RenderStrategy";
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Features[Features["Static"] = 2] = "Static";
})(Features || (Features = {}));
var RenderStrategy;
(function (RenderStrategy) {
RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
})(RenderStrategy || (RenderStrategy = {}));
function render(_ref) {
var _ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? true : _ref$visible,
_ref$features = _ref.features,
features = _ref$features === void 0 ? Features.None : _ref$features,
main = _objectWithoutPropertiesLoose(_ref, ["visible", "features"]);
// Visible always render
if (visible) return _render(main);
if (features & Features.Static) {
// When the `static` prop is passed as `true`, then the user is in control, thus we don't care about anything else
if (main.props["static"]) return _render(main);
}
throw error;
if (features & Features.RenderStrategy) {
var _main$props$unmount, _match;
var strategy = ((_main$props$unmount = main.props.unmount) != null ? _main$props$unmount : true) ? RenderStrategy.Unmount : RenderStrategy.Hidden;
return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
return null;
}, _match[RenderStrategy.Hidden] = function () {
return _render(_extends({}, main, {
props: _extends({}, main.props, {
hidden: true,
style: {
display: 'none'
}
})
}));
}, _match));
} // No features enabled, just render
return _render(main);
}
function render(_ref) {
var _slots$default;
function _render(_ref2) {
var props = _ref2.props,
attrs = _ref2.attrs,
slots = _ref2.slots,
slot = _ref2.slot;
var props = _ref.props,
attrs = _ref.attrs,
slots = _ref.slots,
slot = _ref.slot;
var _omit = omit(props, ['unmount', 'static']),
as = _omit.as,
passThroughProps = _objectWithoutPropertiesLoose(_omit, ["as"]);
var as = props.as,
passThroughProps = _objectWithoutPropertiesLoose(props, ["as"]);
var children = slots["default"] == null ? void 0 : slots["default"](slot);
var children = (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, slot);
if (as === 'template') {
if (Object.keys(passThroughProps).length > 0 || 'class' in attrs) {
var _ref2 = children !== null && children !== void 0 ? children : [],
firstChild = _ref2[0],
other = _ref2.slice(1);
var _ref3 = children != null ? children : [],
firstChild = _ref3[0],
other = _ref3.slice(1);

@@ -89,2 +192,17 @@ if (other.length > 0) throw new Error('You should only render 1 child or use the `as="..."` prop');

function omit(object, keysToOmit) {
if (keysToOmit === void 0) {
keysToOmit = [];
}
var clone = Object.assign({}, object);
for (var _iterator = _createForOfIteratorHelperLoose(keysToOmit), _step; !(_step = _iterator()).done;) {
var key = _step.value;
if (key in clone) delete clone[key];
}
return clone;
}
var id = 0;

@@ -118,2 +236,97 @@

function assertNever(x) {
throw new Error('Unexpected object: ' + x);
}
var Focus;
(function (Focus) {
/** Focus the first non-disabled item. */
Focus[Focus["First"] = 0] = "First";
/** Focus the previous non-disabled item. */
Focus[Focus["Previous"] = 1] = "Previous";
/** Focus the next non-disabled item. */
Focus[Focus["Next"] = 2] = "Next";
/** Focus the last non-disabled item. */
Focus[Focus["Last"] = 3] = "Last";
/** Focus a specific item based on the `id` of the item. */
Focus[Focus["Specific"] = 4] = "Specific";
/** Focus no items at all. */
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
function calculateActiveIndex(action, resolvers) {
var items = resolvers.resolveItems();
if (items.length <= 0) return null;
var currentActiveIndex = resolvers.resolveActiveIndex();
var activeIndex = currentActiveIndex != null ? currentActiveIndex : -1;
var nextActiveIndex = function () {
switch (action.focus) {
case Focus.First:
return items.findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
case Focus.Previous:
{
var idx = items.slice().reverse().findIndex(function (item, idx, all) {
if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
if (idx === -1) return idx;
return items.length - 1 - idx;
}
case Focus.Next:
return items.findIndex(function (item, idx) {
if (idx <= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
case Focus.Last:
{
var _idx = items.slice().reverse().findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
if (_idx === -1) return _idx;
return items.length - 1 - _idx;
}
case Focus.Specific:
return items.findIndex(function (item) {
return resolvers.resolveId(item) === action.id;
});
case Focus.Nothing:
return null;
default:
assertNever(action);
}
}();
return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
}
function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
function dom(ref) {
var _ref$value$$el;
if (ref == null) return null;
if (ref.value == null) return null;
return (_ref$value$$el = ref.value.$el) != null ? _ref$value$$el : ref.value;
}
var MenuStates;

@@ -126,19 +339,14 @@

var Focus;
function nextFrame(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["FirstItem"] = 0] = "FirstItem";
Focus[Focus["PreviousItem"] = 1] = "PreviousItem";
Focus[Focus["NextItem"] = 2] = "NextItem";
Focus[Focus["LastItem"] = 3] = "LastItem";
Focus[Focus["SpecificItem"] = 4] = "SpecificItem";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
var MenuContext = /*#__PURE__*/Symbol('MenuContext');
function useMenuContext(component) {
var context = inject(MenuContext);
var context = inject(MenuContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Menu /> component.");

@@ -168,41 +376,2 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useMenuContext);

var activeItemIndex = ref(null);
function calculateActiveItemIndex(focus, id) {
var _activeItemIndex$valu, _match;
if (items.value.length <= 0) return null;
var currentActiveItemIndex = (_activeItemIndex$valu = activeItemIndex.value) !== null && _activeItemIndex$valu !== void 0 ? _activeItemIndex$valu : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus.FirstItem] = function () {
return items.value.findIndex(function (item) {
return !item.dataRef.disabled;
});
}, _match[Focus.PreviousItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item, idx, all) {
if (currentActiveItemIndex !== -1 && all.length - idx - 1 >= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.NextItem] = function () {
return items.value.findIndex(function (item, idx) {
if (idx <= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
}, _match[Focus.LastItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item) {
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.SpecificItem] = function () {
return items.value.findIndex(function (item) {
return item.id === id;
});
}, _match[Focus.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeItemIndex.value;
return nextActiveIndex;
}
var api = {

@@ -216,3 +385,4 @@ menuState: menuState,

closeMenu: function closeMenu() {
return menuState.value = MenuStates.Closed;
menuState.value = MenuStates.Closed;
activeItemIndex.value = null;
},

@@ -223,3 +393,21 @@ openMenu: function openMenu() {

goToItem: function goToItem(focus, id) {
var nextActiveItemIndex = calculateActiveItemIndex(focus, id);
var nextActiveItemIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return items.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeItemIndex.value;
},
resolveId: function resolveId(item) {
return item.id;
},
resolveDisabled: function resolveDisabled(item) {
return item.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeItemIndex.value === nextActiveItemIndex) return;

@@ -234,7 +422,3 @@ searchQuery.value = '';

});
if (match === -1 || match === activeItemIndex.value) {
return;
}
if (match === -1 || match === activeItemIndex.value) return;
activeItemIndex.value = match;

@@ -272,21 +456,19 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (menuState.value !== MenuStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(itemsRef)) == null ? void 0 : _dom2.contains(target))) api.closeMenu();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
api.closeMenu();
}
if (!event.defaultPrevented) nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -311,2 +493,6 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

props: {
disabled: {
type: Boolean,
"default": false
},
as: {

@@ -318,3 +504,3 @@ type: [Object, String],

render: function render$1() {
var _api$itemsRef$value;
var _dom4;

@@ -330,7 +516,6 @@ var api = useMenuContext('MenuButton');

'aria-haspopup': true,
'aria-controls': (_api$itemsRef$value = api.itemsRef.value) === null || _api$itemsRef$value === void 0 ? void 0 : _api$itemsRef$value.id,
'aria-controls': (_dom4 = dom(api.itemsRef)) == null ? void 0 : _dom4.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -344,3 +529,3 @@ return render({

},
setup: function setup() {
setup: function setup(props) {
var api = useMenuContext('MenuButton');

@@ -358,6 +543,8 @@ var id = "headlessui-menu-button-" + useId();

nextTick(function () {
var _api$itemsRef$value2;
var _dom5;
(_api$itemsRef$value2 = api.itemsRef.value) === null || _api$itemsRef$value2 === void 0 ? void 0 : _api$itemsRef$value2.focus();
api.goToItem(Focus.FirstItem);
(_dom5 = dom(api.itemsRef)) == null ? void 0 : _dom5.focus({
preventScroll: true
});
api.goToItem(Focus.First);
});

@@ -370,6 +557,8 @@ break;

nextTick(function () {
var _api$itemsRef$value3;
var _dom6;
(_api$itemsRef$value3 = api.itemsRef.value) === null || _api$itemsRef$value3 === void 0 ? void 0 : _api$itemsRef$value3.focus();
api.goToItem(Focus.LastItem);
(_dom6 = dom(api.itemsRef)) == null ? void 0 : _dom6.focus({
preventScroll: true
});
api.goToItem(Focus.Last);
});

@@ -380,9 +569,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
nextTick(function () {
var _api$buttonRef$value;
var _dom7;
return (_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
return (_dom7 = dom(api.buttonRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
});

@@ -392,6 +585,8 @@ } else {

api.openMenu();
nextTick(function () {
var _api$itemsRef$value4;
nextFrame(function () {
var _dom8;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_dom8 = dom(api.itemsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
});

@@ -401,8 +596,2 @@ }

function handleFocus() {
var _api$itemsRef$value5;
if (api.menuState.value === MenuStates.Open) (_api$itemsRef$value5 = api.itemsRef.value) === null || _api$itemsRef$value5 === void 0 ? void 0 : _api$itemsRef$value5.focus();
}
return {

@@ -412,4 +601,3 @@ id: id,

handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus
handleClick: handleClick
};

@@ -427,14 +615,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value2;
var _api$items$value$api$, _dom9;
var api = useMenuContext('MenuItems'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.menuState.value === MenuStates.Closed) return null;
var api = useMenuContext('MenuItems');
var slot = {

@@ -444,6 +630,6 @@ open: api.menuState.value === MenuStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) === null || _api$items$value$api$ === void 0 ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.id,
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) == null ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'menu',

@@ -453,2 +639,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -458,3 +645,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -466,3 +655,19 @@ },

var searchDebounce = ref(null);
watchEffect(function () {
var container = dom(api.itemsRef);
if (!container) return;
if (api.menuState.value !== MenuStates.Open) return;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: function acceptNode(node) {
if (node.getAttribute('role') === 'menuitem') return NodeFilter.FILTER_REJECT;
if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
});
while (walker.nextNode()) {
walker.currentNode.setAttribute('role', 'none');
}
});
function handleKeyDown(event) {

@@ -484,3 +689,2 @@ if (searchDebounce.value) clearTimeout(searchDebounce.value);

event.preventDefault();
api.closeMenu();

@@ -491,9 +695,12 @@ if (api.activeItemIndex.value !== null) {

var _id = api.items.value[api.activeItemIndex.value].id;
(_document$getElementB = document.getElementById(_id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
api.closeMenu();
nextTick(function () {
var _api$buttonRef$value3;
var _dom10;
return (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.focus();
return (_dom10 = dom(api.buttonRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -504,7 +711,7 @@ break;

event.preventDefault();
return api.goToItem(Focus.NextItem);
return api.goToItem(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToItem(Focus.PreviousItem);
return api.goToItem(Focus.Previous);

@@ -514,3 +721,3 @@ case Keys.Home:

event.preventDefault();
return api.goToItem(Focus.FirstItem);
return api.goToItem(Focus.First);

@@ -520,3 +727,3 @@ case Keys.End:

event.preventDefault();
return api.goToItem(Focus.LastItem);
return api.goToItem(Focus.Last);

@@ -527,5 +734,7 @@ case Keys.Escape:

nextTick(function () {
var _api$buttonRef$value4;
var _dom11;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom11 = dom(api.buttonRef)) == null ? void 0 : _dom11.focus({
preventScroll: true
});
});

@@ -594,3 +803,3 @@ break;

var textValue = (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.toLowerCase().trim();
var textValue = (_document$getElementB2 = document.getElementById(id)) == null ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) == null ? void 0 : _document$getElementB3.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -604,3 +813,14 @@ });

});
watchEffect(function () {
if (api.menuState.value !== MenuStates.Open) return;
if (!active.value) return;
nextTick(function () {
var _document$getElementB4;
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'
});
});
});
function handleClick(event) {

@@ -610,5 +830,7 @@ if (disabled) return event.preventDefault();

nextTick(function () {
var _api$buttonRef$value5;
var _dom12;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.focus({
preventScroll: true
});
});

@@ -619,12 +841,12 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;

@@ -648,4 +870,6 @@ if (!active.value) return;

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -662,8 +886,2 @@ return render({

function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var ListboxStates;

@@ -676,19 +894,14 @@

var Focus$1;
function nextFrame$1(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["First"] = 0] = "First";
Focus[Focus["Previous"] = 1] = "Previous";
Focus[Focus["Next"] = 2] = "Next";
Focus[Focus["Last"] = 3] = "Last";
Focus[Focus["Specific"] = 4] = "Specific";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus$1 || (Focus$1 = {}));
var ListboxContext = /*#__PURE__*/Symbol('ListboxContext');
function useListboxContext(component) {
var context = inject(ListboxContext);
var context = inject(ListboxContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Listbox /> component.");

@@ -705,2 +918,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

name: 'Listbox',
emits: ['update:modelValue'],
props: {

@@ -711,4 +925,8 @@ as: {

},
disabled: {
type: [Boolean],
"default": false
},
modelValue: {
type: [Object, String],
type: [Object, String, Number, Boolean],
"default": null

@@ -722,3 +940,4 @@ }

var passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue"]);
var disabled = props.disabled,
passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue", "disabled"]);

@@ -735,41 +954,2 @@ var listboxState = ref(ListboxStates.Closed);

});
function calculateActiveOptionIndex(focus, id) {
var _activeOptionIndex$va, _match;
if (options.value.length <= 0) return null;
var currentActiveOptionIndex = (_activeOptionIndex$va = activeOptionIndex.value) !== null && _activeOptionIndex$va !== void 0 ? _activeOptionIndex$va : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus$1.First] = function () {
return options.value.findIndex(function (option) {
return !option.dataRef.disabled;
});
}, _match[Focus$1.Previous] = function () {
var idx = options.value.slice().reverse().findIndex(function (option, idx, all) {
if (currentActiveOptionIndex !== -1 && all.length - idx - 1 >= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Next] = function () {
return options.value.findIndex(function (option, idx) {
if (idx <= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
}, _match[Focus$1.Last] = function () {
var idx = options.value.slice().reverse().findIndex(function (option) {
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Specific] = function () {
return options.value.findIndex(function (option) {
return option.id === id;
});
}, _match[Focus$1.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeOptionIndex.value;
return nextActiveIndex;
}
var api = {

@@ -781,2 +961,3 @@ listboxState: listboxState,

optionsRef: optionsRef,
disabled: disabled,
options: options,

@@ -786,9 +967,34 @@ searchQuery: searchQuery,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},
openListbox: function openListbox() {
return listboxState.value = ListboxStates.Open;
if (disabled) return;
if (listboxState.value === ListboxStates.Open) return;
listboxState.value = ListboxStates.Open;
},
goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
var nextActiveOptionIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return options.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeOptionIndex.value;
},
resolveId: function resolveId(option) {
return option.id;
},
resolveDisabled: function resolveDisabled(option) {
return option.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeOptionIndex.value === nextActiveOptionIndex) return;

@@ -799,2 +1005,4 @@ searchQuery.value = '';

search: function search(value) {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
searchQuery.value += value;

@@ -804,10 +1012,9 @@ var match = options.value.findIndex(function (option) {

});
if (match === -1 || match === activeOptionIndex.value) {
return;
}
if (match === -1 || match === activeOptionIndex.value) return;
activeOptionIndex.value = match;
},
clearSearch: function clearSearch() {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
if (searchQuery.value === '') return;
searchQuery.value = '';

@@ -840,2 +1047,3 @@ },

select: function select(value) {
if (disabled) return;
emit('update:modelValue', value);

@@ -846,21 +1054,19 @@ }

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (listboxState.value !== ListboxStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(optionsRef)) == null ? void 0 : _dom2.contains(target))) api.closeListbox();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_optionsRef$value = optionsRef.value) === null || _optionsRef$value === void 0 ? void 0 : _optionsRef$value.contains(event.target))) {
api.closeListbox();
}
if (!event.defaultPrevented) nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -872,3 +1078,4 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

var slot = {
open: listboxState.value === ListboxStates.Open
open: listboxState.value === ListboxStates.Open,
disabled: disabled
};

@@ -896,3 +1103,4 @@ return render({

var slot = {
open: api.listboxState.value === ListboxStates.Open
open: api.listboxState.value === ListboxStates.Open,
disabled: api.disabled
};

@@ -902,3 +1110,3 @@ var propsWeControl = {

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -918,6 +1126,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$buttonRef$value;
handleClick: function handleClick() {
var _dom4;
(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_dom4 = dom(api.buttonRef)) == null ? void 0 : _dom4.focus({
preventScroll: true
});
}

@@ -937,3 +1147,3 @@ };

render: function render$1() {
var _api$optionsRef$value;
var _dom5, _dom6;

@@ -943,3 +1153,3 @@ var api = useListboxContext('ListboxButton');

open: api.listboxState.value === ListboxStates.Open,
focused: this.focused
disabled: api.disabled
};

@@ -951,9 +1161,8 @@ var propsWeControl = {

'aria-haspopup': true,
'aria-controls': (_api$optionsRef$value = api.optionsRef.value) === null || _api$optionsRef$value === void 0 ? void 0 : _api$optionsRef$value.id,
'aria-controls': (_dom5 = dom(api.optionsRef)) == null ? void 0 : _dom5.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -970,3 +1179,2 @@ return render({

var id = "headlessui-listbox-button-" + useId();
var focused = ref(false);

@@ -982,6 +1190,8 @@ function handleKeyDown(event) {

nextTick(function () {
var _api$optionsRef$value2;
var _dom7;
(_api$optionsRef$value2 = api.optionsRef.value) === null || _api$optionsRef$value2 === void 0 ? void 0 : _api$optionsRef$value2.focus();
if (!api.value.value) api.goToOption(Focus$1.First);
(_dom7 = dom(api.optionsRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -994,6 +1204,8 @@ break;

nextTick(function () {
var _api$optionsRef$value3;
var _dom8;
(_api$optionsRef$value3 = api.optionsRef.value) === null || _api$optionsRef$value3 === void 0 ? void 0 : _api$optionsRef$value3.focus();
if (!api.value.value) api.goToOption(Focus$1.Last);
(_dom8 = dom(api.optionsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -1004,9 +1216,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (api.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
nextTick(function () {
var _api$buttonRef$value2;
var _dom9;
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
return (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.focus({
preventScroll: true
});
});

@@ -1016,6 +1232,8 @@ } else {

api.openListbox();
nextTick(function () {
var _api$optionsRef$value4;
nextFrame$1(function () {
var _dom10;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_dom10 = dom(api.optionsRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -1025,21 +1243,7 @@ }

function handleFocus() {
var _api$optionsRef$value5;
if (api.listboxState.value === ListboxStates.Open) return (_api$optionsRef$value5 = api.optionsRef.value) === null || _api$optionsRef$value5 === void 0 ? void 0 : _api$optionsRef$value5.focus();
focused.value = true;
}
function handleBlur() {
focused.value = false;
}
return {
id: id,
el: api.buttonRef,
focused: focused,
handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus,
handleBlur: handleBlur
handleClick: handleClick
};

@@ -1059,14 +1263,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
var _api$options$value$ap, _dom$id, _dom11, _dom12;
var api = useListboxContext('ListboxOptions'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.listboxState.value === ListboxStates.Closed) return null;
var api = useListboxContext('ListboxOptions');
var slot = {

@@ -1076,6 +1278,6 @@ open: api.listboxState.value === ListboxStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) === null || _api$options$value$ap === void 0 ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id) !== null && _api$labelRef$value$i !== void 0 ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.id,
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) == null ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_dom$id = (_dom11 = dom(api.labelRef)) == null ? void 0 : _dom11.id) != null ? _dom$id : (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'listbox',

@@ -1085,2 +1287,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -1090,3 +1293,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -1115,3 +1320,2 @@ },

event.preventDefault();
api.closeListbox();

@@ -1123,6 +1327,9 @@ if (api.activeOptionIndex.value !== null) {

api.closeListbox();
nextTick(function () {
var _api$buttonRef$value4;
var _dom13;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom13 = dom(api.buttonRef)) == null ? void 0 : _dom13.focus({
preventScroll: true
});
});

@@ -1133,7 +1340,7 @@ break;

event.preventDefault();
return api.goToOption(Focus$1.Next);
return api.goToOption(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToOption(Focus$1.Previous);
return api.goToOption(Focus.Previous);

@@ -1143,3 +1350,3 @@ case Keys.Home:

event.preventDefault();
return api.goToOption(Focus$1.First);
return api.goToOption(Focus.First);

@@ -1149,3 +1356,3 @@ case Keys.End:

event.preventDefault();
return api.goToOption(Focus$1.Last);
return api.goToOption(Focus.Last);

@@ -1156,5 +1363,7 @@ case Keys.Escape:

nextTick(function () {
var _api$buttonRef$value5;
var _dom14;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom14 = dom(api.buttonRef)) == null ? void 0 : _dom14.focus({
preventScroll: true
});
});

@@ -1233,3 +1442,3 @@ break;

var textValue = (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.toLowerCase().trim();
var textValue = (_document$getElementB = document.getElementById(id)) == null ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) == null ? void 0 : _document$getElementB2.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -1244,14 +1453,20 @@ });

onMounted(function () {
var _document$getElementB3, _document$getElementB4;
watch([api.listboxState, selected], function () {
var _document$getElementB3;
if (!selected.value) return;
api.goToOption(Focus$1.Specific, id);
(_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3.focus) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.call(_document$getElementB3);
if (api.listboxState.value !== ListboxStates.Open) return;
if (!selected.value) return;
api.goToOption(Focus.Specific, id);
(_document$getElementB3 = document.getElementById(id)) == null ? void 0 : _document$getElementB3.focus == null ? void 0 : _document$getElementB3.focus();
}, {
immediate: true
});
});
watchEffect(function () {
if (api.listboxState.value !== ListboxStates.Open) return;
if (!active.value) return;
nextTick(function () {
var _document$getElementB5, _document$getElementB6;
var _document$getElementB4;
return (_document$getElementB5 = document.getElementById(id)) === null || _document$getElementB5 === void 0 ? void 0 : (_document$getElementB6 = _document$getElementB5.scrollIntoView) === null || _document$getElementB6 === void 0 ? void 0 : _document$getElementB6.call(_document$getElementB5, {
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'

@@ -1267,5 +1482,7 @@ });

nextTick(function () {
var _api$buttonRef$value6;
var _dom15;
return (_api$buttonRef$value6 = api.buttonRef.value) === null || _api$buttonRef$value6 === void 0 ? void 0 : _api$buttonRef$value6.focus();
return (_dom15 = dom(api.buttonRef)) == null ? void 0 : _dom15.focus({
preventScroll: true
});
});

@@ -1275,16 +1492,16 @@ }

function handleFocus() {
if (disabled) return api.goToOption(Focus$1.Nothing);
api.goToOption(Focus$1.Specific, id);
if (disabled) return api.goToOption(Focus.Nothing);
api.goToOption(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;
if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1302,3 +1519,3 @@

tabIndex: -1,
"class": resolvePropValue$1(className, slot),
"class": resolvePropValue(className, slot),
'aria-disabled': disabled === true ? true : undefined,

@@ -1308,4 +1525,6 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -1320,10 +1539,4 @@ return render({

}
}); // ---
});
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var GroupContext = /*#__PURE__*/Symbol('GroupContext');

@@ -1357,5 +1570,7 @@

var labelRef = ref(null);
var descriptionRef = ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
labelRef: labelRef,
descriptionRef: descriptionRef
};

@@ -1376,2 +1591,3 @@ provide(GroupContext, api);

name: 'Switch',
emits: ['update:modelValue'],
props: {

@@ -1402,6 +1618,11 @@ as: {

var labelledby = computed(function () {
var _api$labelRef$value;
var _dom;
return api === null || api === void 0 ? void 0 : (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id;
return (_dom = dom(api == null ? void 0 : api.labelRef)) == null ? void 0 : _dom.id;
});
var describedby = computed(function () {
var _dom2;
return (_dom2 = dom(api == null ? void 0 : api.descriptionRef)) == null ? void 0 : _dom2.id;
});
var slot = {

@@ -1415,8 +1636,17 @@ checked: this.$props.modelValue

tabIndex: 0,
"class": resolvePropValue$2(className, slot),
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
'aria-describedby': describedby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp
onKeyup: this.handleKeyUp,
onKeypress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({

@@ -1440,3 +1670,3 @@ props: _extends({}, this.$props, propsWeControl),

id: id,
el: api === null || api === void 0 ? void 0 : api.switchRef,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {

@@ -1447,6 +1677,8 @@ event.preventDefault();

handleKeyUp: function handleKeyUp(event) {
if (event.key === Keys.Space) {
event.preventDefault();
toggle();
}
if (event.key !== Keys.Tab) event.preventDefault();
if (event.key === Keys.Space) toggle();
},
// This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
handleKeyPress: function handleKeyPress(event) {
event.preventDefault();
}

@@ -1469,3 +1701,3 @@ };

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -1485,7 +1717,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) === null || _api$switchRef$value === void 0 ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) === null || _api$switchRef$value2 === void 0 ? void 0 : _api$switchRef$value2.focus();
handleClick: function handleClick() {
var el = dom(api.switchRef);
el == null ? void 0 : el.click();
el == null ? void 0 : el.focus({
preventScroll: true
});
}

@@ -1496,9 +1729,33 @@ };

function resolvePropValue$2(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var SwitchDescription = /*#__PURE__*/defineComponent({
name: 'SwitchDescription',
props: {
as: {
type: [Object, String],
"default": 'p'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el'
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchDescription');
var id = "headlessui-switch-description-" + useId();
return {
id: id,
el: api.descriptionRef
};
}
});
export { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Menu, MenuButton, MenuItem, MenuItems, Switch, SwitchGroup, SwitchLabel };
export { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Menu, MenuButton, MenuItem, MenuItems, Switch, SwitchDescription, SwitchGroup, SwitchLabel };
//# sourceMappingURL=headlessui.esm.js.map

920

dist/headlessui.umd.development.js

@@ -40,2 +40,44 @@ (function (global, factory) {

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it;
if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
it = o[Symbol.iterator]();
return it.next.bind(it);
}
function match(value, lookup) {

@@ -55,28 +97,89 @@ if (value in lookup) {

}).join(', ') + ".");
if (Error.captureStackTrace) Error.captureStackTrace(error, match);
throw error;
}
if (Error.captureStackTrace) {
Error.captureStackTrace(error, match);
var Features;
(function (Features) {
/** No features at all */
Features[Features["None"] = 0] = "None";
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
Features[Features["RenderStrategy"] = 1] = "RenderStrategy";
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Features[Features["Static"] = 2] = "Static";
})(Features || (Features = {}));
var RenderStrategy;
(function (RenderStrategy) {
RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
})(RenderStrategy || (RenderStrategy = {}));
function render(_ref) {
var _ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? true : _ref$visible,
_ref$features = _ref.features,
features = _ref$features === void 0 ? Features.None : _ref$features,
main = _objectWithoutPropertiesLoose(_ref, ["visible", "features"]);
// Visible always render
if (visible) return _render(main);
if (features & Features.Static) {
// When the `static` prop is passed as `true`, then the user is in control, thus we don't care about anything else
if (main.props["static"]) return _render(main);
}
throw error;
if (features & Features.RenderStrategy) {
var _main$props$unmount, _match;
var strategy = ((_main$props$unmount = main.props.unmount) != null ? _main$props$unmount : true) ? RenderStrategy.Unmount : RenderStrategy.Hidden;
return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
return null;
}, _match[RenderStrategy.Hidden] = function () {
return _render(_extends({}, main, {
props: _extends({}, main.props, {
hidden: true,
style: {
display: 'none'
}
})
}));
}, _match));
} // No features enabled, just render
return _render(main);
}
function render(_ref) {
var _slots$default;
function _render(_ref2) {
var props = _ref2.props,
attrs = _ref2.attrs,
slots = _ref2.slots,
slot = _ref2.slot;
var props = _ref.props,
attrs = _ref.attrs,
slots = _ref.slots,
slot = _ref.slot;
var _omit = omit(props, ['unmount', 'static']),
as = _omit.as,
passThroughProps = _objectWithoutPropertiesLoose(_omit, ["as"]);
var as = props.as,
passThroughProps = _objectWithoutPropertiesLoose(props, ["as"]);
var children = slots["default"] == null ? void 0 : slots["default"](slot);
var children = (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, slot);
if (as === 'template') {
if (Object.keys(passThroughProps).length > 0 || 'class' in attrs) {
var _ref2 = children !== null && children !== void 0 ? children : [],
firstChild = _ref2[0],
other = _ref2.slice(1);
var _ref3 = children != null ? children : [],
firstChild = _ref3[0],
other = _ref3.slice(1);

@@ -93,2 +196,17 @@ if (other.length > 0) throw new Error('You should only render 1 child or use the `as="..."` prop');

function omit(object, keysToOmit) {
if (keysToOmit === void 0) {
keysToOmit = [];
}
var clone = Object.assign({}, object);
for (var _iterator = _createForOfIteratorHelperLoose(keysToOmit), _step; !(_step = _iterator()).done;) {
var key = _step.value;
if (key in clone) delete clone[key];
}
return clone;
}
var id = 0;

@@ -122,2 +240,97 @@

function assertNever(x) {
throw new Error('Unexpected object: ' + x);
}
var Focus;
(function (Focus) {
/** Focus the first non-disabled item. */
Focus[Focus["First"] = 0] = "First";
/** Focus the previous non-disabled item. */
Focus[Focus["Previous"] = 1] = "Previous";
/** Focus the next non-disabled item. */
Focus[Focus["Next"] = 2] = "Next";
/** Focus the last non-disabled item. */
Focus[Focus["Last"] = 3] = "Last";
/** Focus a specific item based on the `id` of the item. */
Focus[Focus["Specific"] = 4] = "Specific";
/** Focus no items at all. */
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
function calculateActiveIndex(action, resolvers) {
var items = resolvers.resolveItems();
if (items.length <= 0) return null;
var currentActiveIndex = resolvers.resolveActiveIndex();
var activeIndex = currentActiveIndex != null ? currentActiveIndex : -1;
var nextActiveIndex = function () {
switch (action.focus) {
case Focus.First:
return items.findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
case Focus.Previous:
{
var idx = items.slice().reverse().findIndex(function (item, idx, all) {
if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
if (idx === -1) return idx;
return items.length - 1 - idx;
}
case Focus.Next:
return items.findIndex(function (item, idx) {
if (idx <= activeIndex) return false;
return !resolvers.resolveDisabled(item);
});
case Focus.Last:
{
var _idx = items.slice().reverse().findIndex(function (item) {
return !resolvers.resolveDisabled(item);
});
if (_idx === -1) return _idx;
return items.length - 1 - _idx;
}
case Focus.Specific:
return items.findIndex(function (item) {
return resolvers.resolveId(item) === action.id;
});
case Focus.Nothing:
return null;
default:
assertNever(action);
}
}();
return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
}
function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
function dom(ref) {
var _ref$value$$el;
if (ref == null) return null;
if (ref.value == null) return null;
return (_ref$value$$el = ref.value.$el) != null ? _ref$value$$el : ref.value;
}
var MenuStates;

@@ -130,19 +343,14 @@

var Focus;
function nextFrame(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["FirstItem"] = 0] = "FirstItem";
Focus[Focus["PreviousItem"] = 1] = "PreviousItem";
Focus[Focus["NextItem"] = 2] = "NextItem";
Focus[Focus["LastItem"] = 3] = "LastItem";
Focus[Focus["SpecificItem"] = 4] = "SpecificItem";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus || (Focus = {}));
var MenuContext = /*#__PURE__*/Symbol('MenuContext');
function useMenuContext(component) {
var context = vue.inject(MenuContext);
var context = vue.inject(MenuContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Menu /> component.");

@@ -172,41 +380,2 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useMenuContext);

var activeItemIndex = vue.ref(null);
function calculateActiveItemIndex(focus, id) {
var _activeItemIndex$valu, _match;
if (items.value.length <= 0) return null;
var currentActiveItemIndex = (_activeItemIndex$valu = activeItemIndex.value) !== null && _activeItemIndex$valu !== void 0 ? _activeItemIndex$valu : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus.FirstItem] = function () {
return items.value.findIndex(function (item) {
return !item.dataRef.disabled;
});
}, _match[Focus.PreviousItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item, idx, all) {
if (currentActiveItemIndex !== -1 && all.length - idx - 1 >= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.NextItem] = function () {
return items.value.findIndex(function (item, idx) {
if (idx <= currentActiveItemIndex) return false;
return !item.dataRef.disabled;
});
}, _match[Focus.LastItem] = function () {
var idx = items.value.slice().reverse().findIndex(function (item) {
return !item.dataRef.disabled;
});
if (idx === -1) return idx;
return items.value.length - 1 - idx;
}, _match[Focus.SpecificItem] = function () {
return items.value.findIndex(function (item) {
return item.id === id;
});
}, _match[Focus.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeItemIndex.value;
return nextActiveIndex;
}
var api = {

@@ -220,3 +389,4 @@ menuState: menuState,

closeMenu: function closeMenu() {
return menuState.value = MenuStates.Closed;
menuState.value = MenuStates.Closed;
activeItemIndex.value = null;
},

@@ -227,3 +397,21 @@ openMenu: function openMenu() {

goToItem: function goToItem(focus, id) {
var nextActiveItemIndex = calculateActiveItemIndex(focus, id);
var nextActiveItemIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return items.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeItemIndex.value;
},
resolveId: function resolveId(item) {
return item.id;
},
resolveDisabled: function resolveDisabled(item) {
return item.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeItemIndex.value === nextActiveItemIndex) return;

@@ -238,7 +426,3 @@ searchQuery.value = '';

});
if (match === -1 || match === activeItemIndex.value) {
return;
}
if (match === -1 || match === activeItemIndex.value) return;
activeItemIndex.value = match;

@@ -276,21 +460,19 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (menuState.value !== MenuStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(itemsRef)) == null ? void 0 : _dom2.contains(target))) api.closeMenu();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_itemsRef$value = itemsRef.value) === null || _itemsRef$value === void 0 ? void 0 : _itemsRef$value.contains(event.target))) {
api.closeMenu();
}
if (!event.defaultPrevented) vue.nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
vue.onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -315,2 +497,6 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

props: {
disabled: {
type: Boolean,
"default": false
},
as: {

@@ -322,3 +508,3 @@ type: [Object, String],

render: function render$1() {
var _api$itemsRef$value;
var _dom4;

@@ -334,7 +520,6 @@ var api = useMenuContext('MenuButton');

'aria-haspopup': true,
'aria-controls': (_api$itemsRef$value = api.itemsRef.value) === null || _api$itemsRef$value === void 0 ? void 0 : _api$itemsRef$value.id,
'aria-controls': (_dom4 = dom(api.itemsRef)) == null ? void 0 : _dom4.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -348,3 +533,3 @@ return render({

},
setup: function setup() {
setup: function setup(props) {
var api = useMenuContext('MenuButton');

@@ -362,6 +547,8 @@ var id = "headlessui-menu-button-" + useId();

vue.nextTick(function () {
var _api$itemsRef$value2;
var _dom5;
(_api$itemsRef$value2 = api.itemsRef.value) === null || _api$itemsRef$value2 === void 0 ? void 0 : _api$itemsRef$value2.focus();
api.goToItem(Focus.FirstItem);
(_dom5 = dom(api.itemsRef)) == null ? void 0 : _dom5.focus({
preventScroll: true
});
api.goToItem(Focus.First);
});

@@ -374,6 +561,8 @@ break;

vue.nextTick(function () {
var _api$itemsRef$value3;
var _dom6;
(_api$itemsRef$value3 = api.itemsRef.value) === null || _api$itemsRef$value3 === void 0 ? void 0 : _api$itemsRef$value3.focus();
api.goToItem(Focus.LastItem);
(_dom6 = dom(api.itemsRef)) == null ? void 0 : _dom6.focus({
preventScroll: true
});
api.goToItem(Focus.Last);
});

@@ -384,9 +573,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value;
var _dom7;
return (_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
return (_dom7 = dom(api.buttonRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
});

@@ -396,6 +589,8 @@ } else {

api.openMenu();
vue.nextTick(function () {
var _api$itemsRef$value4;
nextFrame(function () {
var _dom8;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_dom8 = dom(api.itemsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
});

@@ -405,8 +600,2 @@ }

function handleFocus() {
var _api$itemsRef$value5;
if (api.menuState.value === MenuStates.Open) (_api$itemsRef$value5 = api.itemsRef.value) === null || _api$itemsRef$value5 === void 0 ? void 0 : _api$itemsRef$value5.focus();
}
return {

@@ -416,4 +605,3 @@ id: id,

handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus
handleClick: handleClick
};

@@ -431,14 +619,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value2;
var _api$items$value$api$, _dom9;
var api = useMenuContext('MenuItems'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.menuState.value === MenuStates.Closed) return null;
var api = useMenuContext('MenuItems');
var slot = {

@@ -448,6 +634,6 @@ open: api.menuState.value === MenuStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) === null || _api$items$value$api$ === void 0 ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.id,
'aria-activedescendant': api.activeItemIndex.value === null ? undefined : (_api$items$value$api$ = api.items.value[api.activeItemIndex.value]) == null ? void 0 : _api$items$value$api$.id,
'aria-labelledby': (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'menu',

@@ -457,2 +643,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -462,3 +649,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -470,3 +659,19 @@ },

var searchDebounce = vue.ref(null);
vue.watchEffect(function () {
var container = dom(api.itemsRef);
if (!container) return;
if (api.menuState.value !== MenuStates.Open) return;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
acceptNode: function acceptNode(node) {
if (node.getAttribute('role') === 'menuitem') return NodeFilter.FILTER_REJECT;
if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
});
while (walker.nextNode()) {
walker.currentNode.setAttribute('role', 'none');
}
});
function handleKeyDown(event) {

@@ -488,3 +693,2 @@ if (searchDebounce.value) clearTimeout(searchDebounce.value);

event.preventDefault();
api.closeMenu();

@@ -495,9 +699,12 @@ if (api.activeItemIndex.value !== null) {

var _id = api.items.value[api.activeItemIndex.value].id;
(_document$getElementB = document.getElementById(_id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value3;
var _dom10;
return (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.focus();
return (_dom10 = dom(api.buttonRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -508,7 +715,7 @@ break;

event.preventDefault();
return api.goToItem(Focus.NextItem);
return api.goToItem(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToItem(Focus.PreviousItem);
return api.goToItem(Focus.Previous);

@@ -518,3 +725,3 @@ case Keys.Home:

event.preventDefault();
return api.goToItem(Focus.FirstItem);
return api.goToItem(Focus.First);

@@ -524,3 +731,3 @@ case Keys.End:

event.preventDefault();
return api.goToItem(Focus.LastItem);
return api.goToItem(Focus.Last);

@@ -531,5 +738,7 @@ case Keys.Escape:

vue.nextTick(function () {
var _api$buttonRef$value4;
var _dom11;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom11 = dom(api.buttonRef)) == null ? void 0 : _dom11.focus({
preventScroll: true
});
});

@@ -598,3 +807,3 @@ break;

var textValue = (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.toLowerCase().trim();
var textValue = (_document$getElementB2 = document.getElementById(id)) == null ? void 0 : (_document$getElementB3 = _document$getElementB2.textContent) == null ? void 0 : _document$getElementB3.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -608,3 +817,14 @@ });

});
vue.watchEffect(function () {
if (api.menuState.value !== MenuStates.Open) return;
if (!active.value) return;
vue.nextTick(function () {
var _document$getElementB4;
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'
});
});
});
function handleClick(event) {

@@ -614,5 +834,7 @@ if (disabled) return event.preventDefault();

vue.nextTick(function () {
var _api$buttonRef$value5;
var _dom12;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.focus({
preventScroll: true
});
});

@@ -623,12 +845,12 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;

@@ -652,4 +874,6 @@ if (!active.value) return;

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -666,8 +890,2 @@ return render({

function resolvePropValue(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var ListboxStates;

@@ -680,19 +898,14 @@

var Focus$1;
function nextFrame$1(cb) {
requestAnimationFrame(function () {
return requestAnimationFrame(cb);
});
}
(function (Focus) {
Focus[Focus["First"] = 0] = "First";
Focus[Focus["Previous"] = 1] = "Previous";
Focus[Focus["Next"] = 2] = "Next";
Focus[Focus["Last"] = 3] = "Last";
Focus[Focus["Specific"] = 4] = "Specific";
Focus[Focus["Nothing"] = 5] = "Nothing";
})(Focus$1 || (Focus$1 = {}));
var ListboxContext = /*#__PURE__*/Symbol('ListboxContext');
function useListboxContext(component) {
var context = vue.inject(ListboxContext);
var context = vue.inject(ListboxContext, null);
if (context === undefined) {
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <Listbox /> component.");

@@ -709,2 +922,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

name: 'Listbox',
emits: ['update:modelValue'],
props: {

@@ -715,4 +929,8 @@ as: {

},
disabled: {
type: [Boolean],
"default": false
},
modelValue: {
type: [Object, String],
type: [Object, String, Number, Boolean],
"default": null

@@ -726,3 +944,4 @@ }

var passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue"]);
var disabled = props.disabled,
passThroughProps = _objectWithoutPropertiesLoose(props, ["modelValue", "disabled"]);

@@ -739,41 +958,2 @@ var listboxState = vue.ref(ListboxStates.Closed);

});
function calculateActiveOptionIndex(focus, id) {
var _activeOptionIndex$va, _match;
if (options.value.length <= 0) return null;
var currentActiveOptionIndex = (_activeOptionIndex$va = activeOptionIndex.value) !== null && _activeOptionIndex$va !== void 0 ? _activeOptionIndex$va : -1;
var nextActiveIndex = match(focus, (_match = {}, _match[Focus$1.First] = function () {
return options.value.findIndex(function (option) {
return !option.dataRef.disabled;
});
}, _match[Focus$1.Previous] = function () {
var idx = options.value.slice().reverse().findIndex(function (option, idx, all) {
if (currentActiveOptionIndex !== -1 && all.length - idx - 1 >= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Next] = function () {
return options.value.findIndex(function (option, idx) {
if (idx <= currentActiveOptionIndex) return false;
return !option.dataRef.disabled;
});
}, _match[Focus$1.Last] = function () {
var idx = options.value.slice().reverse().findIndex(function (option) {
return !option.dataRef.disabled;
});
if (idx === -1) return idx;
return options.value.length - 1 - idx;
}, _match[Focus$1.Specific] = function () {
return options.value.findIndex(function (option) {
return option.id === id;
});
}, _match[Focus$1.Nothing] = function () {
return null;
}, _match));
if (nextActiveIndex === -1) return activeOptionIndex.value;
return nextActiveIndex;
}
var api = {

@@ -785,2 +965,3 @@ listboxState: listboxState,

optionsRef: optionsRef,
disabled: disabled,
options: options,

@@ -790,9 +971,34 @@ searchQuery: searchQuery,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},
openListbox: function openListbox() {
return listboxState.value = ListboxStates.Open;
if (disabled) return;
if (listboxState.value === ListboxStates.Open) return;
listboxState.value = ListboxStates.Open;
},
goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
var nextActiveOptionIndex = calculateActiveIndex(focus === Focus.Specific ? {
focus: Focus.Specific,
id: id
} : {
focus: focus
}, {
resolveItems: function resolveItems() {
return options.value;
},
resolveActiveIndex: function resolveActiveIndex() {
return activeOptionIndex.value;
},
resolveId: function resolveId(option) {
return option.id;
},
resolveDisabled: function resolveDisabled(option) {
return option.dataRef.disabled;
}
});
if (searchQuery.value === '' && activeOptionIndex.value === nextActiveOptionIndex) return;

@@ -803,2 +1009,4 @@ searchQuery.value = '';

search: function search(value) {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
searchQuery.value += value;

@@ -808,10 +1016,9 @@ var match = options.value.findIndex(function (option) {

});
if (match === -1 || match === activeOptionIndex.value) {
return;
}
if (match === -1 || match === activeOptionIndex.value) return;
activeOptionIndex.value = match;
},
clearSearch: function clearSearch() {
if (disabled) return;
if (listboxState.value === ListboxStates.Closed) return;
if (searchQuery.value === '') return;
searchQuery.value = '';

@@ -844,2 +1051,3 @@ },

select: function select(value) {
if (disabled) return;
emit('update:modelValue', value);

@@ -850,21 +1058,19 @@ }

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _dom, _dom2, _dom3;
var target = event.target;
var active = document.activeElement;
if (listboxState.value !== ListboxStates.Open) return;
if ((_buttonRef$value = buttonRef.value) === null || _buttonRef$value === void 0 ? void 0 : _buttonRef$value.contains(event.target)) return;
if ((_dom = dom(buttonRef)) == null ? void 0 : _dom.contains(target)) return;
if (!((_dom2 = dom(optionsRef)) == null ? void 0 : _dom2.contains(target))) api.closeListbox();
if (active !== document.body && (active == null ? void 0 : active.contains(target))) return; // Keep focus on newly clicked/focused element
if (!((_optionsRef$value = optionsRef.value) === null || _optionsRef$value === void 0 ? void 0 : _optionsRef$value.contains(event.target))) {
api.closeListbox();
}
if (!event.defaultPrevented) vue.nextTick(function () {
var _buttonRef$value2;
return (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
if (!event.defaultPrevented) (_dom3 = dom(buttonRef)) == null ? void 0 : _dom3.focus({
preventScroll: true
});
}
window.addEventListener('click', handler);
window.addEventListener('mousedown', handler);
vue.onUnmounted(function () {
return window.removeEventListener('click', handler);
return window.removeEventListener('mousedown', handler);
});

@@ -876,3 +1082,4 @@ }); // @ts-expect-error Types of property 'dataRef' are incompatible.

var slot = {
open: listboxState.value === ListboxStates.Open
open: listboxState.value === ListboxStates.Open,
disabled: disabled
};

@@ -900,3 +1107,4 @@ return render({

var slot = {
open: api.listboxState.value === ListboxStates.Open
open: api.listboxState.value === ListboxStates.Open,
disabled: api.disabled
};

@@ -906,3 +1114,3 @@ var propsWeControl = {

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -922,6 +1130,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$buttonRef$value;
handleClick: function handleClick() {
var _dom4;
(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_dom4 = dom(api.buttonRef)) == null ? void 0 : _dom4.focus({
preventScroll: true
});
}

@@ -941,3 +1151,3 @@ };

render: function render$1() {
var _api$optionsRef$value;
var _dom5, _dom6;

@@ -947,3 +1157,3 @@ var api = useListboxContext('ListboxButton');

open: api.listboxState.value === ListboxStates.Open,
focused: this.focused
disabled: api.disabled
};

@@ -955,9 +1165,8 @@ var propsWeControl = {

'aria-haspopup': true,
'aria-controls': (_api$optionsRef$value = api.optionsRef.value) === null || _api$optionsRef$value === void 0 ? void 0 : _api$optionsRef$value.id,
'aria-controls': (_dom5 = dom(api.optionsRef)) == null ? void 0 : _dom5.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeydown: this.handleKeyDown,
onClick: this.handleClick
};

@@ -974,3 +1183,2 @@ return render({

var id = "headlessui-listbox-button-" + useId();
var focused = vue.ref(false);

@@ -986,6 +1194,8 @@ function handleKeyDown(event) {

vue.nextTick(function () {
var _api$optionsRef$value2;
var _dom7;
(_api$optionsRef$value2 = api.optionsRef.value) === null || _api$optionsRef$value2 === void 0 ? void 0 : _api$optionsRef$value2.focus();
if (!api.value.value) api.goToOption(Focus$1.First);
(_dom7 = dom(api.optionsRef)) == null ? void 0 : _dom7.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -998,6 +1208,8 @@ break;

vue.nextTick(function () {
var _api$optionsRef$value3;
var _dom8;
(_api$optionsRef$value3 = api.optionsRef.value) === null || _api$optionsRef$value3 === void 0 ? void 0 : _api$optionsRef$value3.focus();
if (!api.value.value) api.goToOption(Focus$1.Last);
(_dom8 = dom(api.optionsRef)) == null ? void 0 : _dom8.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -1008,9 +1220,13 @@ break;

function handlePointerUp(event) {
function handleClick(event) {
if (api.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value2;
var _dom9;
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
return (_dom9 = dom(api.buttonRef)) == null ? void 0 : _dom9.focus({
preventScroll: true
});
});

@@ -1020,6 +1236,8 @@ } else {

api.openListbox();
vue.nextTick(function () {
var _api$optionsRef$value4;
nextFrame$1(function () {
var _dom10;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_dom10 = dom(api.optionsRef)) == null ? void 0 : _dom10.focus({
preventScroll: true
});
});

@@ -1029,21 +1247,7 @@ }

function handleFocus() {
var _api$optionsRef$value5;
if (api.listboxState.value === ListboxStates.Open) return (_api$optionsRef$value5 = api.optionsRef.value) === null || _api$optionsRef$value5 === void 0 ? void 0 : _api$optionsRef$value5.focus();
focused.value = true;
}
function handleBlur() {
focused.value = false;
}
return {
id: id,
el: api.buttonRef,
focused: focused,
handleKeyDown: handleKeyDown,
handlePointerUp: handlePointerUp,
handleFocus: handleFocus,
handleBlur: handleBlur
handleClick: handleClick
};

@@ -1063,14 +1267,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
var _api$options$value$ap, _dom$id, _dom11, _dom12;
var api = useListboxContext('ListboxOptions'); // `static` is a reserved keyword, therefore aliasing it...
var _this$$props = this.$props,
isStatic = _this$$props["static"],
passThroughProps = _objectWithoutPropertiesLoose(_this$$props, ["static"]);
if (!isStatic && api.listboxState.value === ListboxStates.Closed) return null;
var api = useListboxContext('ListboxOptions');
var slot = {

@@ -1080,6 +1282,6 @@ open: api.listboxState.value === ListboxStates.Open

var propsWeControl = {
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) === null || _api$options$value$ap === void 0 ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id) !== null && _api$labelRef$value$i !== void 0 ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) === null || _api$buttonRef$value3 === void 0 ? void 0 : _api$buttonRef$value3.id,
'aria-activedescendant': api.activeOptionIndex.value === null ? undefined : (_api$options$value$ap = api.options.value[api.activeOptionIndex.value]) == null ? void 0 : _api$options$value$ap.id,
'aria-labelledby': (_dom$id = (_dom11 = dom(api.labelRef)) == null ? void 0 : _dom11.id) != null ? _dom$id : (_dom12 = dom(api.buttonRef)) == null ? void 0 : _dom12.id,
id: this.id,
onKeyDown: this.handleKeyDown,
onKeydown: this.handleKeyDown,
role: 'listbox',

@@ -1089,2 +1291,3 @@ tabIndex: 0,

};
var passThroughProps = this.$props;
return render({

@@ -1094,3 +1297,5 @@ props: _extends({}, passThroughProps, propsWeControl),

attrs: this.$attrs,
slots: this.$slots
slots: this.$slots,
features: Features.RenderStrategy | Features.Static,
visible: slot.open
});

@@ -1119,3 +1324,2 @@ },

event.preventDefault();
api.closeListbox();

@@ -1127,6 +1331,9 @@ if (api.activeOptionIndex.value !== null) {

api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value4;
var _dom13;
return (_api$buttonRef$value4 = api.buttonRef.value) === null || _api$buttonRef$value4 === void 0 ? void 0 : _api$buttonRef$value4.focus();
return (_dom13 = dom(api.buttonRef)) == null ? void 0 : _dom13.focus({
preventScroll: true
});
});

@@ -1137,7 +1344,7 @@ break;

event.preventDefault();
return api.goToOption(Focus$1.Next);
return api.goToOption(Focus.Next);
case Keys.ArrowUp:
event.preventDefault();
return api.goToOption(Focus$1.Previous);
return api.goToOption(Focus.Previous);

@@ -1147,3 +1354,3 @@ case Keys.Home:

event.preventDefault();
return api.goToOption(Focus$1.First);
return api.goToOption(Focus.First);

@@ -1153,3 +1360,3 @@ case Keys.End:

event.preventDefault();
return api.goToOption(Focus$1.Last);
return api.goToOption(Focus.Last);

@@ -1160,5 +1367,7 @@ case Keys.Escape:

vue.nextTick(function () {
var _api$buttonRef$value5;
var _dom14;
return (_api$buttonRef$value5 = api.buttonRef.value) === null || _api$buttonRef$value5 === void 0 ? void 0 : _api$buttonRef$value5.focus();
return (_dom14 = dom(api.buttonRef)) == null ? void 0 : _dom14.focus({
preventScroll: true
});
});

@@ -1237,3 +1446,3 @@ break;

var textValue = (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.toLowerCase().trim();
var textValue = (_document$getElementB = document.getElementById(id)) == null ? void 0 : (_document$getElementB2 = _document$getElementB.textContent) == null ? void 0 : _document$getElementB2.toLowerCase().trim();
if (textValue !== undefined) dataRef.value.textValue = textValue;

@@ -1248,14 +1457,20 @@ });

vue.onMounted(function () {
var _document$getElementB3, _document$getElementB4;
vue.watch([api.listboxState, selected], function () {
var _document$getElementB3;
if (!selected.value) return;
api.goToOption(Focus$1.Specific, id);
(_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3.focus) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.call(_document$getElementB3);
if (api.listboxState.value !== ListboxStates.Open) return;
if (!selected.value) return;
api.goToOption(Focus.Specific, id);
(_document$getElementB3 = document.getElementById(id)) == null ? void 0 : _document$getElementB3.focus == null ? void 0 : _document$getElementB3.focus();
}, {
immediate: true
});
});
vue.watchEffect(function () {
if (api.listboxState.value !== ListboxStates.Open) return;
if (!active.value) return;
vue.nextTick(function () {
var _document$getElementB5, _document$getElementB6;
var _document$getElementB4;
return (_document$getElementB5 = document.getElementById(id)) === null || _document$getElementB5 === void 0 ? void 0 : (_document$getElementB6 = _document$getElementB5.scrollIntoView) === null || _document$getElementB6 === void 0 ? void 0 : _document$getElementB6.call(_document$getElementB5, {
return (_document$getElementB4 = document.getElementById(id)) == null ? void 0 : _document$getElementB4.scrollIntoView == null ? void 0 : _document$getElementB4.scrollIntoView({
block: 'nearest'

@@ -1271,5 +1486,7 @@ });

vue.nextTick(function () {
var _api$buttonRef$value6;
var _dom15;
return (_api$buttonRef$value6 = api.buttonRef.value) === null || _api$buttonRef$value6 === void 0 ? void 0 : _api$buttonRef$value6.focus();
return (_dom15 = dom(api.buttonRef)) == null ? void 0 : _dom15.focus({
preventScroll: true
});
});

@@ -1279,16 +1496,16 @@ }

function handleFocus() {
if (disabled) return api.goToOption(Focus$1.Nothing);
api.goToOption(Focus$1.Specific, id);
if (disabled) return api.goToOption(Focus.Nothing);
api.goToOption(Focus.Specific, id);
}
function handlePointerMove() {
function handleMove() {
if (disabled) return;
if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}
function handlePointerLeave() {
function handleLeave() {
if (disabled) return;
if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1306,3 +1523,3 @@

tabIndex: -1,
"class": resolvePropValue$1(className, slot),
"class": resolvePropValue(className, slot),
'aria-disabled': disabled === true ? true : undefined,

@@ -1312,4 +1529,6 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

onFocus: handleFocus,
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave
onPointermove: handleMove,
onMousemove: handleMove,
onPointerleave: handleLeave,
onMouseleave: handleLeave
};

@@ -1324,10 +1543,4 @@ return render({

}
}); // ---
});
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var GroupContext = /*#__PURE__*/Symbol('GroupContext');

@@ -1361,5 +1574,7 @@

var labelRef = vue.ref(null);
var descriptionRef = vue.ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
labelRef: labelRef,
descriptionRef: descriptionRef
};

@@ -1380,2 +1595,3 @@ vue.provide(GroupContext, api);

name: 'Switch',
emits: ['update:modelValue'],
props: {

@@ -1406,6 +1622,11 @@ as: {

var labelledby = vue.computed(function () {
var _api$labelRef$value;
var _dom;
return api === null || api === void 0 ? void 0 : (_api$labelRef$value = api.labelRef.value) === null || _api$labelRef$value === void 0 ? void 0 : _api$labelRef$value.id;
return (_dom = dom(api == null ? void 0 : api.labelRef)) == null ? void 0 : _dom.id;
});
var describedby = vue.computed(function () {
var _dom2;
return (_dom2 = dom(api == null ? void 0 : api.descriptionRef)) == null ? void 0 : _dom2.id;
});
var slot = {

@@ -1419,8 +1640,17 @@ checked: this.$props.modelValue

tabIndex: 0,
"class": resolvePropValue$2(className, slot),
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
'aria-describedby': describedby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp
onKeyup: this.handleKeyUp,
onKeypress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({

@@ -1444,3 +1674,3 @@ props: _extends({}, this.$props, propsWeControl),

id: id,
el: api === null || api === void 0 ? void 0 : api.switchRef,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {

@@ -1451,6 +1681,8 @@ event.preventDefault();

handleKeyUp: function handleKeyUp(event) {
if (event.key === Keys.Space) {
event.preventDefault();
toggle();
}
if (event.key !== Keys.Tab) event.preventDefault();
if (event.key === Keys.Space) toggle();
},
// This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
handleKeyPress: function handleKeyPress(event) {
event.preventDefault();
}

@@ -1473,3 +1705,3 @@ };

ref: 'el',
onPointerUp: this.handlePointerUp
onClick: this.handleClick
};

@@ -1489,7 +1721,8 @@ return render({

el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) === null || _api$switchRef$value === void 0 ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) === null || _api$switchRef$value2 === void 0 ? void 0 : _api$switchRef$value2.focus();
handleClick: function handleClick() {
var el = dom(api.switchRef);
el == null ? void 0 : el.click();
el == null ? void 0 : el.focus({
preventScroll: true
});
}

@@ -1500,7 +1733,31 @@ };

function resolvePropValue$2(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var SwitchDescription = /*#__PURE__*/vue.defineComponent({
name: 'SwitchDescription',
props: {
as: {
type: [Object, String],
"default": 'p'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el'
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchDescription');
var id = "headlessui-switch-description-" + useId();
return {
id: id,
el: api.descriptionRef
};
}
});

@@ -1517,2 +1774,3 @@ exports.Listbox = Listbox;

exports.Switch = Switch;
exports.SwitchDescription = SwitchDescription;
exports.SwitchGroup = SwitchGroup;

@@ -1519,0 +1777,0 @@ exports.SwitchLabel = SwitchLabel;

2

dist/headlessui.umd.production.min.js

@@ -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,u={},i=Object.keys(e);for(o=0;o<i.length;o++)t.indexOf(n=i[o])>=0||(u[n]=e[n]);return u}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,i=new Array(o>2?o-2:0),r=2;r<o;r++)i[r-2]=arguments[r];return"function"==typeof n?n.apply(void 0,i):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 i(e){var n,u=e.props,i=e.attrs,r=e.slots,a=e.slot,l=u.as,s=o(u,["as"]),c=null===(n=r.default)||void 0===n?void 0:n.call(r,a);if("template"===l){if(Object.keys(s).length>0||"class"in i){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(l,s,c)}var r,a,l,s=0;function c(){return++s}!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"}(r||(r={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(a||(a={})),function(e){e[e.FirstItem=0]="FirstItem",e[e.PreviousItem=1]="PreviousItem",e[e.NextItem=2]="NextItem",e[e.LastItem=3]="LastItem",e[e.SpecificItem=4]="SpecificItem",e[e.Nothing=5]="Nothing"}(l||(l={}));var d=Symbol("MenuContext");function v(e){var n=t.inject(d);if(void 0===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,v),o}return n}var f,p,h=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,s=t.ref(a.Closed),c=t.ref(null),v=t.ref(null),f=t.ref([]),p=t.ref(""),h=t.ref(null),m={menuState:s,buttonRef:c,itemsRef:v,items:f,searchQuery:p,activeItemIndex:h,closeMenu:function(){return s.value=a.Closed},openMenu:function(){return s.value=a.Open},goToItem:function(e,t){var n=function(e,t){var n,o;if(f.value.length<=0)return null;var i=null!==(n=h.value)&&void 0!==n?n:-1,r=u(e,((o={})[l.FirstItem]=function(){return f.value.findIndex((function(e){return!e.dataRef.disabled}))},o[l.PreviousItem]=function(){var e=f.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==i&&n.length-t-1>=i||e.dataRef.disabled)}));return-1===e?e:f.value.length-1-e},o[l.NextItem]=function(){return f.value.findIndex((function(e,t){return!(t<=i||e.dataRef.disabled)}))},o[l.LastItem]=function(){var e=f.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:f.value.length-1-e},o[l.SpecificItem]=function(){return f.value.findIndex((function(e){return e.id===t}))},o[l.Nothing]=function(){return null},o));return-1===r?h.value:r}(e,t);""===p.value&&h.value===n||(p.value="",h.value=n)},search:function(e){p.value+=e;var t=f.value.findIndex((function(e){return e.dataRef.textValue.startsWith(p.value)&&!e.dataRef.disabled}));-1!==t&&t!==h.value&&(h.value=t)},clearSearch:function(){p.value=""},registerItem:function(e,t){f.value.push({id:e,dataRef:t})},unregisterItem: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)}};return t.onMounted((function(){function e(e){var n,o;s.value===a.Open&&((null===(n=c.value)||void 0===n?void 0:n.contains(e.target))||((null===(o=v.value)||void 0===o?void 0:o.contains(e.target))||m.closeMenu(),e.defaultPrevented||t.nextTick((function(){var e;return null===(e=c.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("click",e),t.onUnmounted((function(){return window.removeEventListener("click",e)}))})),t.provide(d,m),function(){return i({props:e,slot:{open:s.value===a.Open},slots:o,attrs:r})}}}),m=t.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=v("MenuButton"),o={open:t.menuState.value===a.Open},u={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=t.itemsRef.value)||void 0===e?void 0:e.id,"aria-expanded":t.menuState.value===a.Open||void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onPointerUp:this.handlePointerUp};return i({props:n({},this.$props,u),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=v("MenuButton");return{id:"headlessui-menu-button-"+c(),el:e.buttonRef,handleKeyDown:function(n){switch(n.key){case r.Space:case r.Enter:case r.ArrowDown:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.FirstItem)}));break;case r.ArrowUp:n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;null===(t=e.itemsRef.value)||void 0===t||t.focus(),e.goToItem(l.LastItem)}))}},handlePointerUp:function(n){e.menuState.value===a.Open?(e.closeMenu(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}))):(n.preventDefault(),e.openMenu(),t.nextTick((function(){var t;return null===(t=e.itemsRef.value)||void 0===t?void 0:t.focus()})))},handleFocus:function(){var t;e.menuState.value===a.Open&&(null===(t=e.itemsRef.value)||void 0===t||t.focus())}}}}),b=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,t,u=v("MenuItems"),r=this.$props,l=r.static,s=o(r,["static"]);if(!l&&u.menuState.value===a.Closed)return null;var c={open:u.menuState.value===a.Open};return i({props:n({},s,{"aria-activedescendant":null===u.activeItemIndex.value||null===(e=u.items.value[u.activeItemIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null===(t=u.buttonRef.value)||void 0===t?void 0:t.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"}),slot:c,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=v("MenuItems"),n="headlessui-menu-items-"+c(),o=t.ref(null);return{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case r.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case r.Enter:var u;n.preventDefault(),e.closeMenu(),null!==e.activeItemIndex.value&&(null===(u=document.getElementById(e.items.value[e.activeItemIndex.value].id))||void 0===u||u.click()),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case r.ArrowDown:return n.preventDefault(),e.goToItem(l.NextItem);case r.ArrowUp:return n.preventDefault(),e.goToItem(l.PreviousItem);case r.Home:case r.PageUp:return n.preventDefault(),e.goToItem(l.FirstItem);case r.End:case r.PageDown:return n.preventDefault(),e.goToItem(l.LastItem);case r.Escape:n.preventDefault(),e.closeMenu(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case r.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),x=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 u=o.slots,r=o.attrs,a=v("MenuItem"),s="headlessui-menu-item-"+c(),d=e.disabled,f=e.className,p=void 0===f?e.class:f,h=t.computed((function(){return null!==a.activeItemIndex.value&&a.items.value[a.activeItemIndex.value].id===s})),m=t.ref({disabled:d,textValue:""});function b(e){if(d)return e.preventDefault();a.closeMenu(),t.nextTick((function(){var e;return null===(e=a.buttonRef.value)||void 0===e?void 0:e.focus()}))}function x(){if(d)return a.goToItem(l.Nothing);a.goToItem(l.SpecificItem,s)}function I(){d||h.value||a.goToItem(l.SpecificItem,s)}function y(){d||h.value&&a.goToItem(l.Nothing)}return t.onMounted((function(){var e,t,n=null===(e=document.getElementById(s))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(m.value.textValue=n)})),t.onMounted((function(){return a.registerItem(s,m)})),t.onUnmounted((function(){return a.unregisterItem(s)})),function(){var t={active:h.value,disabled:d},o={id:s,role:"menuitem",tabIndex:-1,class:g(p,t),"aria-disabled":!0===d||void 0,onClick:b,onFocus:x,onPointerMove:I,onPointerLeave:y};return i({props:n({},e,o),slot:t,attrs:r,slots:u})}}});function g(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(f||(f={})),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"}(p||(p={}));var I=Symbol("ListboxContext");function y(e){var n=t.inject(I);if(void 0===n){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,y),o}return n}var w=t.defineComponent({name:"Listbox",props:{as:{type:[Object,String],default:"template"},modelValue:{type:[Object,String],default:null}},setup:function(e,n){var r=n.slots,a=n.attrs,l=n.emit,s=o(e,["modelValue"]),c=t.ref(f.Closed),d=t.ref(null),v=t.ref(null),h=t.ref(null),m=t.ref([]),b=t.ref(""),x=t.ref(null),g=t.computed((function(){return e.modelValue})),y={listboxState:c,value:g,labelRef:d,buttonRef:v,optionsRef:h,options:m,searchQuery:b,activeOptionIndex:x,closeListbox:function(){return c.value=f.Closed},openListbox:function(){return c.value=f.Open},goToOption:function(e,t){var n=function(e,t){var n,o;if(m.value.length<=0)return null;var i=null!==(n=x.value)&&void 0!==n?n:-1,r=u(e,((o={})[p.First]=function(){return m.value.findIndex((function(e){return!e.dataRef.disabled}))},o[p.Previous]=function(){var e=m.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==i&&n.length-t-1>=i||e.dataRef.disabled)}));return-1===e?e:m.value.length-1-e},o[p.Next]=function(){return m.value.findIndex((function(e,t){return!(t<=i||e.dataRef.disabled)}))},o[p.Last]=function(){var e=m.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:m.value.length-1-e},o[p.Specific]=function(){return m.value.findIndex((function(e){return e.id===t}))},o[p.Nothing]=function(){return null},o));return-1===r?x.value:r}(e,t);""===b.value&&x.value===n||(b.value="",x.value=n)},search:function(e){b.value+=e;var t=m.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(b.value)}));-1!==t&&t!==x.value&&(x.value=t)},clearSearch:function(){b.value=""},registerOption:function(e,t){m.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=m.value.slice(),n=null!==x.value?t[x.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),m.value=t,x.value=o===x.value||null===n?null:t.indexOf(n)},select:function(e){l("update:modelValue",e)}};return t.onMounted((function(){function e(e){var n,o;c.value===f.Open&&((null===(n=v.value)||void 0===n?void 0:n.contains(e.target))||((null===(o=h.value)||void 0===o?void 0:o.contains(e.target))||y.closeListbox(),e.defaultPrevented||t.nextTick((function(){var e;return null===(e=v.value)||void 0===e?void 0:e.focus()}))))}window.addEventListener("click",e),t.onUnmounted((function(){return window.removeEventListener("click",e)}))})),t.provide(I,y),function(){return i({props:s,slot:{open:c.value===f.Open},slots:r,attrs:a})}}}),O=t.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e={open:y("ListboxLabel").listboxState.value===f.Open};return i({props:n({},this.$props,{id:this.id,ref:"el",onPointerUp:this.handlePointerUp}),slot:e,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=y("ListboxLabel");return{id:"headlessui-listbox-label-"+c(),el:e.labelRef,handlePointerUp:function(){var t;null===(t=e.buttonRef.value)||void 0===t||t.focus()}}}}),S=t.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=y("ListboxButton"),o={open:t.listboxState.value===f.Open,focused:this.focused},u={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null===(e=t.optionsRef.value)||void 0===e?void 0:e.id,"aria-expanded":t.listboxState.value===f.Open||void 0,"aria-labelledby":t.labelRef.value?[t.labelRef.value.id,this.id].join(" "):void 0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onPointerUp:this.handlePointerUp};return i({props:n({},this.$props,u),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=y("ListboxButton"),n="headlessui-listbox-button-"+c(),o=t.ref(!1);return{id:n,el:e.buttonRef,focused:o,handleKeyDown:function(n){switch(n.key){case r.Space:case r.Enter:case r.ArrowDown:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null===(t=e.optionsRef.value)||void 0===t||t.focus(),e.value.value||e.goToOption(p.First)}));break;case r.ArrowUp:n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;null===(t=e.optionsRef.value)||void 0===t||t.focus(),e.value.value||e.goToOption(p.Last)}))}},handlePointerUp:function(n){e.listboxState.value===f.Open?(e.closeListbox(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}))):(n.preventDefault(),e.openListbox(),t.nextTick((function(){var t;return null===(t=e.optionsRef.value)||void 0===t?void 0:t.focus()})))},handleFocus:function(){var t;if(e.listboxState.value===f.Open)return null===(t=e.optionsRef.value)||void 0===t?void 0:t.focus();o.value=!0},handleBlur:function(){o.value=!1}}}}),k=t.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1}},render:function(){var e,t,u,r,a=y("ListboxOptions"),l=this.$props,s=l.static,c=o(l,["static"]);if(!s&&a.listboxState.value===f.Closed)return null;var d={open:a.listboxState.value===f.Open};return i({props:n({},c,{"aria-activedescendant":null===a.activeOptionIndex.value||null===(e=a.options.value[a.activeOptionIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null!==(t=null===(u=a.labelRef.value)||void 0===u?void 0:u.id)&&void 0!==t?t:null===(r=a.buttonRef.value)||void 0===r?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"}),slot:d,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=y("ListboxOptions"),n="headlessui-listbox-options-"+c(),o=t.ref(null);return{id:n,el:e.optionsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case r.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case r.Enter:n.preventDefault(),e.closeListbox(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case r.ArrowDown:return n.preventDefault(),e.goToOption(p.Next);case r.ArrowUp:return n.preventDefault(),e.goToOption(p.Previous);case r.Home:case r.PageUp:return n.preventDefault(),e.goToOption(p.First);case r.End:case r.PageDown:return n.preventDefault(),e.goToOption(p.Last);case r.Escape:n.preventDefault(),e.closeListbox(),t.nextTick((function(){var t;return null===(t=e.buttonRef.value)||void 0===t?void 0:t.focus()}));break;case r.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),R=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 u=o.slots,r=o.attrs,a=y("ListboxOption"),l="headlessui-listbox-option-"+c(),s=e.disabled,d=e.className,v=void 0===d?e.class:d,f=e.value,h=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(f)})),b=t.ref({disabled:s,value:f,textValue:""});function x(e){if(s)return e.preventDefault();a.select(f),a.closeListbox(),t.nextTick((function(){var e;return null===(e=a.buttonRef.value)||void 0===e?void 0:e.focus()}))}function g(){if(s)return a.goToOption(p.Nothing);a.goToOption(p.Specific,l)}function I(){s||h.value||a.goToOption(p.Specific,l)}function w(){s||h.value&&a.goToOption(p.Nothing)}return t.onMounted((function(){var e,t,n=null===(e=document.getElementById(l))||void 0===e||null===(t=e.textContent)||void 0===t?void 0:t.toLowerCase().trim();void 0!==n&&(b.value.textValue=n)})),t.onMounted((function(){return a.registerOption(l,b)})),t.onUnmounted((function(){return a.unregisterOption(l)})),t.onMounted((function(){var e,t;m.value&&(a.goToOption(p.Specific,l),null===(e=document.getElementById(l))||void 0===e||null===(t=e.focus)||void 0===t||t.call(e))})),t.watchEffect((function(){h.value&&t.nextTick((function(){var e,t;return null===(e=document.getElementById(l))||void 0===e||null===(t=e.scrollIntoView)||void 0===t?void 0:t.call(e,{block:"nearest"})}))})),function(){var t={active:h.value,selected:m.value,disabled:s},o={id:l,role:"option",tabIndex:-1,class:T(v,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===m.value?m.value:void 0,onClick:x,onFocus:g,onPointerMove:I,onPointerLeave:w};return i({props:n({},e,o),slot:t,attrs:r,slots:u})}}});function T(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}var L=Symbol("GroupContext");function D(e){var n=t.inject(L,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,D),o}return n}var E=t.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,u=n.attrs,r=t.ref(null),a=t.ref(null);return t.provide(L,{switchRef:r,labelRef:a}),function(){return i({props:e,slot:{},slots:o,attrs:u})}}}),P=t.defineComponent({name:"Switch",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(L,null),o=this.$props,u=o.className,r=void 0===u?o.class:u,a=t.computed((function(){var t;return null==e||null===(t=e.labelRef.value)||void 0===t?void 0:t.id})),l={checked:this.$props.modelValue},s={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:M(r,l),"aria-checked":this.$props.modelValue,"aria-labelledby":a.value,onClick:this.handleClick,onKeyUp:this.handleKeyUp};return i({props:n({},this.$props,s),slot:l,attrs:this.$attrs,slots:this.$slots})},setup:function(e,n){var o=n.emit,u=t.inject(L,null);function i(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+c(),el:null==u?void 0:u.switchRef,handleClick:function(e){e.preventDefault(),i()},handleKeyUp:function(e){e.key===r.Space&&(e.preventDefault(),i())}}}}),C=t.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return i({props:n({},this.$props,{id:this.id,ref:"el",onPointerUp:this.handlePointerUp}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=D("SwitchLabel");return{id:"headlessui-switch-label-"+c(),el:e.labelRef,handlePointerUp:function(){var t,n;null===(t=e.switchRef.value)||void 0===t||t.click(),null===(n=e.switchRef.value)||void 0===n||n.focus()}}}});function M(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}e.Listbox=w,e.ListboxButton=S,e.ListboxLabel=O,e.ListboxOption=R,e.ListboxOptions=k,e.Menu=h,e.MenuButton=m,e.MenuItem=x,e.MenuItems=b,e.Switch=P,e.SwitchGroup=E,e.SwitchLabel=C,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){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 u=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(u,i),u}var l,u;function a(e){var t,r,a=e.visible,c=void 0===a||a,d=e.features,f=void 0===d?l.None:d,p=o(e,["visible","features"]);return c||f&l.Static&&p.props.static?s(p):f&l.RenderStrategy?i(null==(t=p.props.unmount)||t?u.Unmount:u.Hidden,((r={})[u.Unmount]=function(){return null},r[u.Hidden]=function(){return s(n({},p,{props:n({},p.props,{hidden:!0,style:{display:"none"}})}))},r)):s(p)}function s(e){var n=e.attrs,i=e.slots,l=e.slot,u=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),i=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=i()).done;){var l=n.value;l in o&&delete o[l]}return o}(e.props,["unmount","static"]),a=u.as,s=o(u,["as"]),c=null==i.default?void 0:i.default(l);if("template"===a){if(Object.keys(s).length>0||"class"in n){var d=null!=c?c:[],f=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(f,s)}return c}return t.h(a,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"}(u||(u={}));var c,d,f,p=0;function v(){return++p}function b(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 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 i=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===i?i:n.length-1-i;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===i?o:i}function m(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}function h(e){var t;return null==e||null==e.value?null:null!=(t=e.value.$el)?t:e.value}!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"}(f||(f={}));var y=Symbol("MenuContext");function S(e){var n=t.inject(y,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}return n}var x,g=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,i=t.ref(f.Closed),l=t.ref(null),u=t.ref(null),s=t.ref([]),c=t.ref(""),p=t.ref(null),v={menuState:i,buttonRef:l,itemsRef:u,items:s,searchQuery:c,activeItemIndex:p,closeMenu:function(){i.value=f.Closed,p.value=null},openMenu:function(){return i.value=f.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 p.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===c.value&&p.value===n||(c.value="",p.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!==p.value&&(p.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!==p.value?t[p.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),s.value=t,p.value=o===p.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,a=document.activeElement;i.value===f.Open&&((null==(t=h(l))?void 0:t.contains(r))||((null==(n=h(u))?void 0:n.contains(r))||v.closeMenu(),a!==document.body&&(null==a?void 0:a.contains(r))||e.defaultPrevented||null==(o=h(l))||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),t.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),t.provide(y,v),function(){return a({props:e,slot:{open:i.value===f.Open},slots:o,attrs:r})}}}),w=t.defineComponent({props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=S("MenuButton"),o={open:t.menuState.value===f.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=h(t.itemsRef))?void 0:e.id,"aria-expanded":t.menuState.value===f.Open||void 0,onKeydown:this.handleKeyDown,onClick:this.handleClick};return a({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var n=S("MenuButton");return{id:"headlessui-menu-button-"+v(),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=h(n.itemsRef))||e.focus({preventScroll:!0}),n.goToItem(d.First)}));break;case c.ArrowUp:e.preventDefault(),n.openMenu(),t.nextTick((function(){var e;null==(e=h(n.itemsRef))||e.focus({preventScroll:!0}),n.goToItem(d.Last)}))}},handleClick:function(o){var r;e.disabled||(n.menuState.value===f.Open?(n.closeMenu(),t.nextTick((function(){var e;return null==(e=h(n.buttonRef))?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),n.openMenu(),r=function(){var e;return null==(e=h(n.itemsRef))?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),O=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=S("MenuItems"),r={open:o.menuState.value===f.Open},i={"aria-activedescendant":null===o.activeItemIndex.value||null==(e=o.items.value[o.activeItemIndex.value])?void 0:e.id,"aria-labelledby":null==(t=h(o.buttonRef))?void 0:t.id,id:this.id,onKeydown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return a({props:n({},this.$props,i),slot:r,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:r.open})},setup:function(){var e=S("MenuItems"),n="headlessui-menu-items-"+v(),o=t.ref(null);return t.watchEffect((function(){var t=h(e.itemsRef);if(t&&e.menuState.value===f.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=h(e.buttonRef))?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=h(e.buttonRef))?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))}}}}}),I=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,i=o.attrs,l=S("MenuItem"),u="headlessui-menu-item-"+v(),s=e.disabled,c=e.className,p=void 0===c?e.class:c,b=t.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===u})),y=t.ref({disabled:s,textValue:""});function x(e){if(s)return e.preventDefault();l.closeMenu(),t.nextTick((function(){var e;return null==(e=h(l.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function g(){if(s)return l.goToItem(d.Nothing);l.goToItem(d.Specific,u)}function w(){s||b.value||l.goToItem(d.Specific,u)}function O(){s||b.value&&l.goToItem(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(u))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(y.value.textValue=n)})),t.onMounted((function(){return l.registerItem(u,y)})),t.onUnmounted((function(){return l.unregisterItem(u)})),t.watchEffect((function(){l.menuState.value===f.Open&&b.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(u))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:b.value,disabled:s},o={id:u,role:"menuitem",tabIndex:-1,class:m(p,t),"aria-disabled":!0===s||void 0,onClick:x,onFocus:g,onPointermove:w,onMousemove:w,onPointerleave:O,onMouseleave:O};return a({props:n({},e,o),slot:t,attrs:i,slots:r})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(x||(x={}));var k=Symbol("ListboxContext");function R(e){var n=t.inject(k,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,R),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,i=n.attrs,l=n.emit,u=e.disabled,s=o(e,["modelValue","disabled"]),c=t.ref(x.Closed),f=t.ref(null),p=t.ref(null),v=t.ref(null),m=t.ref([]),y=t.ref(""),S=t.ref(null),g=t.computed((function(){return e.modelValue})),w={listboxState:c,value:g,labelRef:f,buttonRef:p,optionsRef:v,disabled:u,options:m,searchQuery:y,activeOptionIndex:S,closeListbox:function(){u||c.value!==x.Closed&&(c.value=x.Closed,S.value=null)},openListbox:function(){u||c.value!==x.Open&&(c.value=x.Open)},goToOption:function(e,t){if(!u&&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 S.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===y.value&&S.value===n||(y.value="",S.value=n)}},search:function(e){if(!u&&c.value!==x.Closed){y.value+=e;var t=m.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(y.value)}));-1!==t&&t!==S.value&&(S.value=t)}},clearSearch:function(){u||c.value!==x.Closed&&""!==y.value&&(y.value="")},registerOption:function(e,t){m.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=m.value.slice(),n=null!==S.value?t[S.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),m.value=t,S.value=o===S.value||null===n?null:t.indexOf(n)},select:function(e){u||l("update:modelValue",e)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,i=document.activeElement;c.value===x.Open&&((null==(t=h(p))?void 0:t.contains(r))||((null==(n=h(v))?void 0:n.contains(r))||w.closeListbox(),i!==document.body&&(null==i?void 0:i.contains(r))||e.defaultPrevented||null==(o=h(p))||o.focus({preventScroll:!0})))}window.addEventListener("mousedown",e),t.onUnmounted((function(){return window.removeEventListener("mousedown",e)}))})),t.provide(k,w),function(){return a({props:s,slot:{open:c.value===x.Open,disabled:u},slots:r,attrs:i})}}}),D=t.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e=R("ListboxLabel"),t={open:e.listboxState.value===x.Open,disabled:e.disabled};return a({props:n({},this.$props,{id:this.id,ref:"el",onClick:this.handleClick}),slot:t,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=R("ListboxLabel");return{id:"headlessui-listbox-label-"+v(),el:e.labelRef,handleClick:function(){var t;null==(t=h(e.buttonRef))||t.focus({preventScroll:!0})}}}}),C=t.defineComponent({name:"ListboxButton",props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t,o=R("ListboxButton"),r={open:o.listboxState.value===x.Open,disabled:o.disabled},i={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=h(o.optionsRef))?void 0:e.id,"aria-expanded":o.listboxState.value===x.Open||void 0,"aria-labelledby":o.labelRef.value?[null==(t=h(o.labelRef))?void 0:t.id,this.id].join(" "):void 0,disabled:o.disabled,onKeydown:this.handleKeyDown,onClick:this.handleClick};return a({props:n({},this.$props,i),slot:r,attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=R("ListboxButton");return{id:"headlessui-listbox-button-"+v(),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=h(e.optionsRef))||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=h(e.optionsRef))||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=h(e.buttonRef))?void 0:t.focus({preventScroll:!0})}))):(n.preventDefault(),e.openListbox(),o=function(){var t;return null==(t=h(e.optionsRef))?void 0:t.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(o)}))))}}}}),E=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=R("ListboxOptions"),u={open:i.listboxState.value===x.Open},s={"aria-activedescendant":null===i.activeOptionIndex.value||null==(e=i.options.value[i.activeOptionIndex.value])?void 0:e.id,"aria-labelledby":null!=(t=null==(o=h(i.labelRef))?void 0:o.id)?t:null==(r=h(i.buttonRef))?void 0:r.id,id:this.id,onKeydown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return a({props:n({},this.$props,s),slot:u,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:u.open})},setup:function(){var e=R("ListboxOptions"),n="headlessui-listbox-options-"+v(),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=h(e.buttonRef))?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=h(e.buttonRef))?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))}}}}}),L=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,l=R("ListboxOption"),u="headlessui-listbox-option-"+v(),s=e.disabled,c=e.className,f=void 0===c?e.class:c,p=e.value,b=t.computed((function(){return null!==l.activeOptionIndex.value&&l.options.value[l.activeOptionIndex.value].id===u})),y=t.computed((function(){return t.toRaw(l.value.value)===t.toRaw(p)})),S=t.ref({disabled:s,value:p,textValue:""});function g(e){if(s)return e.preventDefault();l.select(p),l.closeListbox(),t.nextTick((function(){var e;return null==(e=h(l.buttonRef))?void 0:e.focus({preventScroll:!0})}))}function w(){if(s)return l.goToOption(d.Nothing);l.goToOption(d.Specific,u)}function O(){s||b.value||l.goToOption(d.Specific,u)}function I(){s||b.value&&l.goToOption(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(u))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(S.value.textValue=n)})),t.onMounted((function(){return l.registerOption(u,S)})),t.onUnmounted((function(){return l.unregisterOption(u)})),t.onMounted((function(){t.watch([l.listboxState,y],(function(){var e;l.listboxState.value===x.Open&&y.value&&(l.goToOption(d.Specific,u),null==(e=document.getElementById(u))||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(u))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:b.value,selected:y.value,disabled:s},o={id:u,role:"option",tabIndex:-1,class:m(f,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===y.value?y.value:void 0,onClick:g,onFocus:w,onPointermove:O,onMousemove:O,onPointerleave:I,onMouseleave:I};return a({props:n({},e,o),slot:t,attrs:i,slots:r})}}}),j=Symbol("GroupContext");function M(e){var n=t.inject(j,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 N=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),l=t.ref(null),u=t.ref(null);return t.provide(j,{switchRef:i,labelRef:l,descriptionRef:u}),function(){return a({props:e,slot:{},slots:o,attrs:r})}}}),A=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(j,null),o=this.$props,r=o.className,i=void 0===r?o.class:r,l=t.computed((function(){var t;return null==(t=h(null==e?void 0:e.labelRef))?void 0:t.id})),u=t.computed((function(){var t;return null==(t=h(null==e?void 0:e.descriptionRef))?void 0:t.id})),s={checked:this.$props.modelValue},c={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:m(i,s),"aria-checked":this.$props.modelValue,"aria-labelledby":l.value,"aria-describedby":u.value,onClick:this.handleClick,onKeyup:this.handleKeyUp,onKeypress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(c,{type:"button"}),a({props:n({},this.$props,c),slot:s,attrs:this.$attrs,slots:this.$slots})},setup:function(e,n){var o=n.emit,r=t.inject(j,null);function i(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+v(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),i()},handleKeyUp:function(e){e.key!==c.Tab&&e.preventDefault(),e.key===c.Space&&i()},handleKeyPress:function(e){e.preventDefault()}}}}),$=t.defineComponent({name:"SwitchLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){return a({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-"+v(),el:e.labelRef,handleClick:function(){var t=h(e.switchRef);null==t||t.click(),null==t||t.focus({preventScroll:!0})}}}}),F=t.defineComponent({name:"SwitchDescription",props:{as:{type:[Object,String],default:"p"}},render:function(){return a({props:n({},this.$props,{id:this.id,ref:"el"}),slot:{},attrs:this.$attrs,slots:this.$slots})},setup:function(){var e=M("SwitchDescription");return{id:"headlessui-switch-description-"+v(),el:e.descriptionRef}}});e.Listbox=T,e.ListboxButton=C,e.ListboxLabel=D,e.ListboxOption=L,e.ListboxOptions=E,e.Menu=g,e.MenuButton=w,e.MenuItem=I,e.MenuItems=O,e.Switch=A,e.SwitchDescription=F,e.SwitchGroup=N,e.SwitchLabel=$,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=headlessui.umd.production.min.js.map

20

dist/test-utils/accessibility-assertions.d.ts

@@ -7,4 +7,8 @@ export declare function getMenuButton(): HTMLElement | null;

export declare enum MenuState {
Open = 0,
Closed = 1
/** The menu is visible to the user. */
Visible = 0,
/** The menu is **not** visible to the user. It's still in the DOM, but it is hidden. */
InvisibleHidden = 1,
/** The menu is **not** visible to the user. It's not in the DOM, it is unmounted. */
InvisibleUnmounted = 2
}

@@ -35,4 +39,8 @@ export declare function assertMenuButton(options: {

export declare enum ListboxState {
Open = 0,
Closed = 1
/** The listbox is visible to the user. */
Visible = 0,
/** The listbox is **not** visible to the user. It's still in the DOM, but it is hidden. */
InvisibleHidden = 1,
/** The listbox is **not** visible to the user. It's not in the DOM, it is unmounted. */
InvisibleUnmounted = 2
}

@@ -76,4 +84,8 @@ export declare function assertListbox(options: {

label?: string;
description?: string;
}, switchElement?: 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 assertActiveElement(element: HTMLElement | null): void;
export declare function assertHidden(element: HTMLElement | null): void;
export declare function assertVisible(element: HTMLElement | null): void;

12

dist/test-utils/interactions.d.ts

@@ -1,2 +0,2 @@

export declare const Keys: Record<string, Partial<KeyboardEvent>>;
export declare let Keys: Record<string, Partial<KeyboardEvent>>;
export declare function shift(event: Partial<KeyboardEvent>): {

@@ -47,5 +47,9 @@ shiftKey: boolean;

export declare function word(input: string): Partial<KeyboardEvent>[];
export declare function type(events: Partial<KeyboardEvent>[]): Promise<void>;
export declare function press(event: Partial<KeyboardEvent>): Promise<void>;
export declare function click(element: Document | Element | Window | null): Promise<void>;
export declare function type(events: Partial<KeyboardEvent>[], element?: Element | null): Promise<void>;
export declare function press(event: Partial<KeyboardEvent>, element?: Element | null): Promise<void>;
export declare enum MouseButton {
Left = 0,
Right = 2
}
export declare function click(element: Document | Element | Window | null, button?: MouseButton): Promise<void>;
export declare function focus(element: Document | Element | Window | null): Promise<void>;

@@ -52,0 +56,0 @@ export declare function mouseEnter(element: Document | Element | Window | null): Promise<void>;

24

dist/utils/render.d.ts
import { Slots } from 'vue';
export declare function render({ props, attrs, slots, slot, }: {
export declare enum Features {
/** No features at all */
None = 0,
/**
* When used, this will allow us to use one of the render strategies.
*
* **The render strategies are:**
* - **Unmount** _(Will unmount the component.)_
* - **Hidden** _(Will hide the component using the [hidden] attribute.)_
*/
RenderStrategy = 1,
/**
* When used, this will allow the user of our component to be in control. This can be used when
* you want to transition based on some state.
*/
Static = 2
}
export declare function render({ visible, features, ...main }: {
props: Record<string, any>;

@@ -7,2 +24,5 @@ slot: Record<string, any>;

slots: Slots;
} & {
features?: Features;
visible?: boolean;
}): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

@@ -12,2 +32,2 @@ [key: string]: any;

[key: string]: any;
}>[] | undefined;
}>[] | null | undefined;

17

package.json
{
"name": "@headlessui/vue",
"version": "0.2.0",
"version": "0.3.0-4648332",
"main": "dist/index.js",

@@ -23,6 +23,7 @@ "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",
"prepublishOnly": "npm run build",
"build": "../../scripts/build.sh",
"watch": "../../scripts/watch.sh",
"test": "../../scripts/test.sh",

@@ -32,3 +33,3 @@ "lint": "../../scripts/lint.sh"

"peerDependencies": {
"vue": "^3.0.0-rc.13"
"vue": "^3.0.0"
},

@@ -39,10 +40,8 @@ "devDependencies": {

"@types/debounce": "^1.2.0",
"@types/node": "^14.11.2",
"@vue/compiler-sfc": "3.0.0",
"@vue/test-utils": "^2.0.0-beta.6",
"husky": "^4.3.0",
"@vue/compiler-sfc": "3.0.1",
"@vue/test-utils": "^2.0.0-beta.7",
"vite": "^1.0.0-rc.4",
"vue": "^3.0.0-rc.13",
"vue-router": "^4.0.0-beta.12"
"vue": "^3.0.0",
"vue-router": "^4.0.0-beta.13"
}
}

1151

README.md

@@ -32,5 +32,5 @@ <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)

@@ -52,1146 +52,1 @@ ### Roadmap

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. |
##### 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-2)
- [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-2)
### 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. |
##### Slot props
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### 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. |
#### ListboxLabel
```vue
<ListboxLabel>Enable notifications</ListboxLabel>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | ------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `ListboxLabel` should render as. |
#### 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. |
##### 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 h-6 rounded-full w-8"
: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 h-6 rounded-full w-8"
: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. |
#### Switch.Label
```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. |
#### Switch.Group
```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. |
dist/headlessui.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.esm.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.umd.development.js.map

Sorry, the diff of this file is not supported yet

dist/headlessui.umd.production.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc