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-e73d09b

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

912

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
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,4 +634,4 @@ 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,

@@ -457,2 +643,3 @@ onKeyDown: this.handleKeyDown,

};
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,
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
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,4 +1282,4 @@ 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,

@@ -1089,2 +1291,3 @@ onKeyDown: this.handleKeyDown,

};
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)}))))}}}}),L=n.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var t,n,r,l,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))}}}}}),C=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})}}}),E=Symbol("GroupContext");function M(e){var t=n.inject(E,null);if(null===t){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,M),o}return t}var j=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(E,{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(E,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(E,null);function l(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+f(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),l()},handleKeyUp:function(e){e.key!==s.Tab&&e.preventDefault(),e.key===s.Space&&l()},handleKeyPress:function(e){e.preventDefault()}}}}),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=M("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=M("SwitchDescription");return{id:"headlessui-switch-description-"+f(),el:e.descriptionRef}}});exports.Listbox=R,exports.ListboxButton=D,exports.ListboxLabel=T,exports.ListboxOption=C,exports.ListboxOptions=L,exports.Menu=S,exports.MenuButton=g,exports.MenuItem=O,exports.MenuItems=w,exports.Switch=N,exports.SwitchDescription=$,exports.SwitchGroup=j,exports.SwitchLabel=A;
//# sourceMappingURL=headlessui.cjs.production.min.js.map

915

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
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,4 +630,4 @@ 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,

@@ -453,2 +639,3 @@ onKeyDown: this.handleKeyDown,

};
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,
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
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,4 +1278,4 @@ 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,

@@ -1085,2 +1287,3 @@ onKeyDown: this.handleKeyDown,

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

912

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
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,4 +634,4 @@ 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,

@@ -457,2 +643,3 @@ onKeyDown: this.handleKeyDown,

};
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,
'aria-labelledby': api.labelRef.value ? [(_dom6 = dom(api.labelRef)) == null ? void 0 : _dom6.id, this.id].join(' ') : undefined,
disabled: api.disabled,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp
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,4 +1282,4 @@ 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,

@@ -1089,2 +1291,3 @@ onKeyDown: this.handleKeyDown,

};
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})}}}}),L=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)}))))}}}}),C=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))}}}}}),E=t.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,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})}}}),M=Symbol("GroupContext");function j(e){var n=t.inject(M,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <SwitchGroup /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,j),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(M,{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(M,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(M,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=j("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=j("SwitchDescription");return{id:"headlessui-switch-description-"+v(),el:e.descriptionRef}}});e.Listbox=T,e.ListboxButton=L,e.ListboxLabel=D,e.ListboxOption=E,e.ListboxOptions=C,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;

11

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

@@ -27,2 +27,3 @@ "typings": "dist/index.d.ts",

"build": "../../scripts/build.sh",
"watch": "../../scripts/watch.sh",
"test": "../../scripts/test.sh",

@@ -38,10 +39,8 @@ "lint": "../../scripts/lint.sh"

"@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-router": "^4.0.0-beta.13"
}
}

200

README.md

@@ -300,3 +300,3 @@ <h3 align="center">

| Prop | Type | Default | Description |
| ---- | ------------------- | --------------------------------- | ----------------------------------------------------- |
| :--- | :------------------ | :-------------------------------- | :---------------------------------------------------- |
| `as` | String \| Component | `template` _(no wrapper element_) | The element or component the `Menu` should render as. |

@@ -307,3 +307,3 @@

| Prop | Type | Description |
| ------ | ------- | -------------------------------- |
| :----- | :------ | :------------------------------- |
| `open` | Boolean | Whether or not the menu is open. |

@@ -323,3 +323,3 @@

| Prop | Type | Default | Description |
| ---- | ------------------- | -------- | ----------------------------------------------------------- |
| :--- | :------------------ | :------- | :---------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `MenuButton` should render as. |

@@ -330,3 +330,3 @@

| Prop | Type | Description |
| ------ | ------- | -------------------------------- |
| :----- | :------ | :------------------------------- |
| `open` | Boolean | Whether or not the menu is open. |

@@ -345,6 +345,7 @@

| 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. |
| Prop | Type | Default | Description |
| :-------- | :------------------ | :------ | :-------------------------------------------------------------------------------- |
| `as` | String \| Component | `div` | The element or component the `MenuItems` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. |

@@ -354,3 +355,3 @@ ##### Slot props

| Prop | Type | Description |
| ------ | ------- | -------------------------------- |
| :----- | :------ | :------------------------------- |
| `open` | Boolean | Whether or not the menu is open. |

@@ -371,3 +372,3 @@

| Prop | Type | Default | Description |
| ---------- | ------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |
| :--------- | :------------------ | :-------------------------------- | :------------------------------------------------------------------------------------ |
| `as` | String \| Component | `template` _(no wrapper element)_ | The element or component the `MenuItem` should render as. |

@@ -379,3 +380,3 @@ | `disabled` | Boolean | `false` | Whether or not the item should be disabled for keyboard navigation and ARIA purposes. |

| Prop | Type | Description |
| ---------- | ------- | ---------------------------------------------------------------------------------- |
| :--------- | :------ | :--------------------------------------------------------------------------------- |
| `active` | Boolean | Whether or not the item is the active/focused item in the list. |

@@ -390,3 +391,3 @@ | `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |

- [Basic example](#basic-example-2)
- [Basic example](#basic-example-1)
- [Styling the active and selected option](#styling-the-active-and-selected-option)

@@ -399,3 +400,3 @@ - [Showing/hiding the listbox](#showinghiding-the-listbox)

- [Rendering a different element for a component](#rendering-a-different-element-for-a-component-1)
- [Component API](#component-api-2)
- [Component API](#component-api-1)

@@ -413,3 +414,8 @@ ### Basic example

<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}

@@ -448,2 +454,3 @@ </ListboxOption>

const selectedPerson = ref(people[0])
return {

@@ -475,3 +482,9 @@ people,

<!-- 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">
<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 }">

@@ -515,2 +528,3 @@ <CheckmarkIcon v-show="selected" />

const selectedPerson = ref(people[0])
return {

@@ -693,3 +707,8 @@ people,

<!-- Disabled options will be skipped by keyboard navigation. -->
<ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
<span :class="{ 'opacity-75': person.unavailable }">{{ person.name }}</span>

@@ -728,2 +747,3 @@ </ListboxOption>

const selectedPerson = ref(people[0])
return {

@@ -742,4 +762,2 @@ people,

```vue

@@ -759,3 +777,8 @@ <template>

<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}

@@ -795,2 +818,3 @@ </ListboxOption>

const selectedPerson = ref(people[0])
return {

@@ -852,2 +876,3 @@ people,

const selectedPerson = ref(people[0])
return {

@@ -906,2 +931,3 @@ people,

const selectedPerson = ref(people[0])
return {

@@ -916,3 +942,2 @@ people,

### Component API

@@ -963,2 +988,3 @@

const selectedPerson = ref(people[0])
return {

@@ -975,12 +1001,14 @@ people,

| 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. |
| Prop | Type | Default | Description |
| :--------- | :------------------ | :-------------------------------- | :------------------------------------------------------- |
| `as` | String \| Component | `template` _(no wrapper element_) | The element or component the `Listbox` should render as. |
| `v-model` | `T` | - | The selected value. |
| `disabled` | Boolean | `false` | Enable/Disable the `Listbox` component. |
##### Slot props
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
| Prop | Type | Description |
| :--------- | :------ | :-------------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
| `disabled` | Boolean | Whether or not the listbox is disabled. |

@@ -999,3 +1027,3 @@ #### ListboxButton

| Prop | Type | Default | Description |
| ---- | ------------------- | -------- | -------------------------------------------------------------- |
| :--- | :------------------ | :------- | :------------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `ListboxButton` should render as. |

@@ -1005,5 +1033,6 @@

| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
| Prop | Type | Description |
| :--------- | :------ | :-------------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
| `disabled` | Boolean | Whether or not the listbox is disabled. |

@@ -1019,5 +1048,12 @@ #### ListboxLabel

| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | ------------------------------------------------------------- |
| :--- | :------------------ | :------ | :------------------------------------------------------------ |
| `as` | String \| Component | `label` | The element or component the `ListboxLabel` should render as. |
##### Slot props
| Prop | Type | Description |
| :--------- | :------ | :-------------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
| `disabled` | Boolean | Whether or not the listbox is disabled. |
#### ListboxOptions

@@ -1034,6 +1070,7 @@

| 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. |
| Prop | Type | Default | Description |
| :-------- | :------------------ | :------ | :-------------------------------------------------------------------------------- |
| `as` | String \| Component | `ul` | The element or component the `ListboxOptions` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. |

@@ -1043,3 +1080,3 @@ ##### Slot props

| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| :----- | :------ | :---------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |

@@ -1055,7 +1092,7 @@

| 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. |
| 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. |

@@ -1065,3 +1102,3 @@ ##### Slot props

| Prop | Type | Description |
| ---------- | ------- | ------------------------------------------------------------------------------------ |
| :--------- | :------ | :----------------------------------------------------------------------------------- |
| `active` | Boolean | Whether or not the option is the active/focused option in the list. |

@@ -1083,3 +1120,3 @@ | `selected` | Boolean | Whether or not the option is the selected option in the list. |

Switches are built using the `Switch` component. Optionally you can also use the `SwitchGroup` and `SwitchLabel` components.
Switches are built using the `Switch` component. Optionally you can also use the `SwitchGroup`, `SwitchLabel` and `SwitchDescription` components.

@@ -1091,3 +1128,3 @@ ```vue

v-model="switchValue"
class="relative inline-flex h-6 rounded-full w-8"
class="relative inline-flex items-center h-6 rounded-full w-11"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"

@@ -1098,3 +1135,3 @@ v-slot="{ checked }"

class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
:class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
/>

@@ -1105,4 +1142,4 @@ </Switch>

<script>
import { ref } from "vue";
import { SwitchGroup, Switch, SwitchLabel } from "@headlessui/vue";
import { ref } from 'vue'
import { SwitchGroup, Switch, SwitchLabel, SwitchDescription } from '@headlessui/vue'

@@ -1114,11 +1151,12 @@ export default {

SwitchLabel,
SwitchDescription,
},
setup() {
const switchValue = ref(false);
const switchValue = ref(false)
return {
switchValue,
};
}
},
};
}
</script>

@@ -1141,3 +1179,3 @@ ```

v-model="switchValue"
class="relative inline-flex h-6 rounded-full w-8"
class="relative inline-flex items-center h-6 rounded-full w-11"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"

@@ -1148,3 +1186,3 @@ v-slot="{ checked }"

class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
:class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
/>

@@ -1156,4 +1194,4 @@ </Switch>

<script>
import { ref } from "vue";
import { SwitchGroup, Switch, SwitchLabel } from "@headlessui/vue";
import { ref } from 'vue'
import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue'

@@ -1167,9 +1205,9 @@ export default {

setup() {
const switchValue = ref(false);
const switchValue = ref(false)
return {
switchValue,
};
}
},
};
}
</script>

@@ -1191,16 +1229,15 @@ ```

| Prop | Type | Default | Description |
| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `Switch` should render as. |
| `v-model` | `T` | | The switch value. |
| 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 |
| ------ | ------- | ----------------------------------- |
| Prop | Type | Description |
| :-------- | :------ | :------------------------------------ |
| `checked` | Boolean | Whether or not the switch is checked. |
#### SwitchLabel
#### Switch.Label
```html

@@ -1217,10 +1254,27 @@ <SwitchGroup>

| Prop | Type | Default | Description |
| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
| Prop | Type | Default | Description |
| :--- | :------------------ | :------ | :----------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
#### Switch.Group
#### SwitchDescription
```html
<SwitchGroup>
<SwitchDescription>Enable notifications</SwitchDescription>
<Switch v-model="switchState">
<!-- ... -->
</Switch>
</SwitchGroup>
```
##### Props
| Prop | Type | Default | Description |
| :--- | :------------------ | :------ | :----------------------------------------------------------------- |
| `as` | String \| Component | `p` | The element or component the `SwitchDescription` should render as. |
#### SwitchGroup
```html
<SwitchGroup>
<SwitchLabel>Enable notifications</SwitchLabel>

@@ -1235,4 +1289,4 @@ <Switch v-model="switchState">

| Prop | Type | Default | Description |
| ---------- | ----------------------- | --------------------------------------- | -------------------------------------------------------- |
| `as` | String \| Component | `template` _(no wrapper element)_| The element or component the `SwitchGroup` should render as. |
| 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