Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@headlessui/vue

Package Overview
Dependencies
Maintainers
2
Versions
681
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.1.4-alpha.1 to 0.2.0-4459689

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

21

dist/components/listbox/listbox.d.ts

@@ -8,3 +8,3 @@ import { Ref } from 'vue';

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

@@ -16,3 +16,3 @@ };

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

@@ -39,2 +39,6 @@ modelValue: null;

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

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

el: Ref<HTMLButtonElement | null>;
focused: Ref<boolean>;
handleKeyDown: (event: KeyboardEvent) => void;
handlePointerUp: (event: MouseEvent) => void;
handleFocus: () => void;
handleBlur: () => 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;
}>;

@@ -67,2 +70,6 @@ export declare const ListboxOptions: import("vue").DefineComponent<{

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

@@ -74,5 +81,7 @@ id: string;

as: string;
unmount: boolean;
static: boolean;
} & {}>, {
as: string;
unmount: boolean;
static: boolean;

@@ -105,3 +114,3 @@ }>;

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

@@ -108,0 +117,0 @@ value: null;

17

dist/components/menu/menu.d.ts

@@ -11,3 +11,3 @@ import { Ref } from 'vue';

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

@@ -18,2 +18,6 @@ } & {}>, {

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

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

handlePointerUp: (event: MouseEvent) => void;
handleFocus: () => 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;
}>;

@@ -44,2 +49,6 @@ export declare const MenuItems: import("vue").DefineComponent<{

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

@@ -51,5 +60,7 @@ id: string;

as: string;
unmount: boolean;
static: boolean;
} & {}>, {
as: string;
unmount: boolean;
static: boolean;

@@ -78,3 +89,3 @@ }>;

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

20

dist/components/switch/switch.d.ts

@@ -11,3 +11,3 @@ import { Ref } from 'vue';

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

@@ -26,2 +26,10 @@ } & {}>, {

};
class: {
type: (StringConstructor | FunctionConstructor)[];
required: false;
};
className: {
type: (StringConstructor | FunctionConstructor)[];
required: false;
};
}, {

@@ -31,7 +39,11 @@ id: string;

handleClick(event: MouseEvent): void;
handleKeyDown(event: KeyboardEvent): void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
handleKeyUp(event: KeyboardEvent): void;
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;
modelValue: null;
} & {}>, {
} & {
class?: string | Function | undefined;
className?: string | Function | undefined;
}>, {
as: string;

@@ -38,0 +50,0 @@ modelValue: null;

893

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,89 @@

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

@@ -130,19 +335,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 +372,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 +381,4 @@ menuState: menuState,

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

@@ -227,3 +389,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 +418,3 @@ searchQuery.value = '';

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

@@ -276,13 +452,14 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _buttonRef$value, _itemsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_itemsRef$value = itemsRef.value) == null ? void 0 : _itemsRef$value.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))) {
var _buttonRef$value2;
api.closeMenu();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -312,2 +489,6 @@

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

@@ -330,6 +511,5 @@ type: [Object, String],

'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': (_api$itemsRef$value = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp

@@ -344,3 +524,3 @@ };

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

@@ -360,4 +540,6 @@ var id = "headlessui-menu-button-" + useId();

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

@@ -372,4 +554,6 @@ break;

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

@@ -381,11 +565,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value;
return (_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openMenu();
vue.nextTick(function () {
nextFrame(function () {
var _api$itemsRef$value4;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_api$itemsRef$value4 = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value4.focus({
preventScroll: true
});
});

@@ -395,8 +590,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 {

@@ -406,4 +595,3 @@ id: id,

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

@@ -421,14 +609,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value;
var _api$items$value$api$, _api$buttonRef$value2;
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 = {

@@ -438,4 +624,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$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.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': (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.id,
id: this.id,

@@ -447,2 +633,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -452,3 +639,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -477,3 +666,2 @@ },

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

@@ -484,10 +672,13 @@ 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();
vue.nextTick(function () {
var _api$buttonRef$value2;
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value3;
return (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.focus({
preventScroll: true
});
}
});
break;

@@ -497,7 +688,7 @@

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

@@ -507,3 +698,3 @@ case Keys.Home:

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

@@ -513,3 +704,3 @@ case Keys.End:

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

@@ -520,5 +711,7 @@ case Keys.Escape:

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

@@ -587,3 +780,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;

@@ -602,5 +795,7 @@ });

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

@@ -611,3 +806,3 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -618,3 +813,3 @@

if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -654,8 +849,2 @@

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

@@ -668,19 +857,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.");

@@ -697,2 +881,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

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

@@ -704,3 +889,3 @@ as: {

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

@@ -726,41 +911,2 @@ }

});
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 = {

@@ -776,3 +922,4 @@ listboxState: listboxState,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},

@@ -783,3 +930,21 @@ openListbox: function openListbox() {

goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
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;

@@ -794,7 +959,3 @@ searchQuery.value = '';

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

@@ -835,13 +996,14 @@ },

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _buttonRef$value, _optionsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_optionsRef$value = optionsRef.value) == null ? void 0 : _optionsRef$value.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))) {
var _buttonRef$value2;
api.closeListbox();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -904,3 +1066,5 @@

(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
}

@@ -914,2 +1078,6 @@ };

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

@@ -925,4 +1093,3 @@ type: [Object, String],

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

@@ -934,8 +1101,6 @@ 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': (_api$optionsRef$value = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp

@@ -950,6 +1115,5 @@ };

},
setup: function setup() {
setup: function setup(props) {
var api = useListboxContext('ListboxButton');
var id = "headlessui-listbox-button-" + useId();
var focused = vue.ref(false);

@@ -967,4 +1131,6 @@ function handleKeyDown(event) {

(_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);
(_api$optionsRef$value2 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value2.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -979,4 +1145,6 @@ break;

(_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);
(_api$optionsRef$value3 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value3.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -988,11 +1156,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value2;
return (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openListbox();
vue.nextTick(function () {
nextFrame$1(function () {
var _api$optionsRef$value4;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_api$optionsRef$value4 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value4.focus({
preventScroll: true
});
});

@@ -1002,21 +1181,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
handlePointerUp: handlePointerUp
};

@@ -1036,14 +1201,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$value2;
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
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 = {

@@ -1053,4 +1216,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$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.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': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id) != null ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.id,
id: this.id,

@@ -1062,2 +1225,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -1067,3 +1231,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -1092,3 +1258,2 @@ },

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

@@ -1098,9 +1263,12 @@ if (api.activeOptionIndex.value !== null) {

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

@@ -1110,7 +1278,7 @@

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

@@ -1120,3 +1288,3 @@ case Keys.Home:

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

@@ -1126,3 +1294,3 @@ case Keys.End:

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

@@ -1133,5 +1301,7 @@ case Keys.Escape:

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

@@ -1200,3 +1370,3 @@ break;

var selected = vue.computed(function () {
return api.value.value === value;
return vue.toRaw(api.value.value) === vue.toRaw(value);
});

@@ -1211,3 +1381,3 @@ var dataRef = vue.ref({

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;

@@ -1222,14 +1392,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'

@@ -1245,5 +1421,7 @@ });

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

@@ -1253,4 +1431,4 @@ }

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

@@ -1261,3 +1439,3 @@

if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}

@@ -1268,3 +1446,3 @@

if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1282,3 +1460,3 @@

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

@@ -1299,10 +1477,176 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

}
});
var GroupContext = /*#__PURE__*/Symbol('GroupContext');
function useGroupContext(component) {
var context = vue.inject(GroupContext, null);
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <SwitchGroup /> component.");
if (Error.captureStackTrace) Error.captureStackTrace(err, useGroupContext);
throw err;
}
return context;
} // ---
var SwitchGroup = /*#__PURE__*/vue.defineComponent({
name: 'SwitchGroup',
props: {
as: {
type: [Object, String],
"default": 'template'
}
},
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs;
var switchRef = vue.ref(null);
var labelRef = vue.ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
};
vue.provide(GroupContext, api);
return function () {
return render({
props: props,
slot: {},
slots: slots,
attrs: attrs
});
};
}
}); // ---
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var Switch = /*#__PURE__*/vue.defineComponent({
name: 'Switch',
emits: ['update:modelValue'],
props: {
as: {
type: [Object, String],
"default": 'button'
},
modelValue: {
type: [Object, Boolean],
"default": null
},
"class": {
type: [String, Function],
required: false
},
className: {
type: [String, Function],
required: false
}
},
render: function render$1() {
var api = vue.inject(GroupContext, null);
var _this$$props = this.$props,
defaultClass = _this$$props["class"],
_this$$props$classNam = _this$$props.className,
className = _this$$props$classNam === void 0 ? defaultClass : _this$$props$classNam;
var labelledby = vue.computed(function () {
var _api$labelRef$value;
return api == null ? void 0 : (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id;
});
var slot = {
checked: this.$props.modelValue
};
var propsWeControl = {
id: this.id,
ref: api === null ? undefined : api.switchRef,
role: 'switch',
tabIndex: 0,
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp,
onKeyPress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({
props: _extends({}, this.$props, propsWeControl),
slot: slot,
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup(props, _ref2) {
var emit = _ref2.emit;
var api = vue.inject(GroupContext, null);
var id = "headlessui-switch-" + useId();
function toggle() {
emit('update:modelValue', !props.modelValue);
}
return {
id: id,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {
event.preventDefault();
toggle();
},
handleKeyUp: function handleKeyUp(event) {
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();
}
};
}
}); // ---
var SwitchLabel = /*#__PURE__*/vue.defineComponent({
name: 'SwitchLabel',
props: {
as: {
type: [Object, String],
"default": 'label'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el',
onPointerUp: this.handlePointerUp
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchLabel');
var id = "headlessui-switch-label-" + useId();
return {
id: id,
el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) == null ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) == null ? void 0 : _api$switchRef$value2.focus({
preventScroll: true
});
}
};
}
});
exports.Listbox = Listbox;

@@ -1317,2 +1661,5 @@ exports.ListboxButton = ListboxButton;

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

894

dist/headlessui.esm.js

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

import { cloneVNode, h, defineComponent, ref, onMounted, onUnmounted, provide, computed, inject, nextTick, watchEffect } from 'vue';
import { cloneVNode, h, defineComponent, ref, onMounted, onUnmounted, provide, computed, inject, nextTick, toRaw, watch, watchEffect } 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,89 @@

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

@@ -126,19 +331,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 +368,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 +377,4 @@ menuState: menuState,

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

@@ -223,3 +385,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 +414,3 @@ searchQuery.value = '';

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

@@ -272,13 +448,14 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _buttonRef$value, _itemsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_itemsRef$value = itemsRef.value) == null ? void 0 : _itemsRef$value.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))) {
var _buttonRef$value2;
api.closeMenu();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -308,2 +485,6 @@

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

@@ -326,6 +507,5 @@ type: [Object, String],

'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': (_api$itemsRef$value = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp

@@ -340,3 +520,3 @@ };

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

@@ -356,4 +536,6 @@ var id = "headlessui-menu-button-" + useId();

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

@@ -368,4 +550,6 @@ break;

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

@@ -377,11 +561,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
nextTick(function () {
var _api$buttonRef$value;
return (_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openMenu();
nextTick(function () {
nextFrame(function () {
var _api$itemsRef$value4;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_api$itemsRef$value4 = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value4.focus({
preventScroll: true
});
});

@@ -391,8 +586,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 {

@@ -402,4 +591,3 @@ id: id,

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

@@ -417,14 +605,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value;
var _api$items$value$api$, _api$buttonRef$value2;
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 = {

@@ -434,4 +620,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$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.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': (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.id,
id: this.id,

@@ -443,2 +629,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -448,3 +635,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -473,3 +662,2 @@ },

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

@@ -480,10 +668,13 @@ 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();
nextTick(function () {
var _api$buttonRef$value2;
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
api.closeMenu();
nextTick(function () {
var _api$buttonRef$value3;
return (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.focus({
preventScroll: true
});
}
});
break;

@@ -493,7 +684,7 @@

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

@@ -503,3 +694,3 @@ case Keys.Home:

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

@@ -509,3 +700,3 @@ case Keys.End:

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

@@ -516,5 +707,7 @@ case Keys.Escape:

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

@@ -583,3 +776,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;

@@ -598,5 +791,7 @@ });

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

@@ -607,3 +802,3 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -614,3 +809,3 @@

if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -650,8 +845,2 @@

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

@@ -664,19 +853,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.");

@@ -693,2 +877,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

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

@@ -700,3 +885,3 @@ as: {

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

@@ -722,41 +907,2 @@ }

});
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 = {

@@ -772,3 +918,4 @@ listboxState: listboxState,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},

@@ -779,3 +926,21 @@ openListbox: function openListbox() {

goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
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;

@@ -790,7 +955,3 @@ searchQuery.value = '';

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

@@ -831,13 +992,14 @@ },

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _buttonRef$value, _optionsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_optionsRef$value = optionsRef.value) == null ? void 0 : _optionsRef$value.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))) {
var _buttonRef$value2;
api.closeListbox();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -900,3 +1062,5 @@

(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
}

@@ -910,2 +1074,6 @@ };

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

@@ -921,4 +1089,3 @@ type: [Object, String],

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

@@ -930,8 +1097,6 @@ 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': (_api$optionsRef$value = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp

@@ -946,6 +1111,5 @@ };

},
setup: function setup() {
setup: function setup(props) {
var api = useListboxContext('ListboxButton');
var id = "headlessui-listbox-button-" + useId();
var focused = ref(false);

@@ -963,4 +1127,6 @@ function handleKeyDown(event) {

(_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);
(_api$optionsRef$value2 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value2.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -975,4 +1141,6 @@ break;

(_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);
(_api$optionsRef$value3 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value3.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -984,11 +1152,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
nextTick(function () {
var _api$buttonRef$value2;
return (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openListbox();
nextTick(function () {
nextFrame$1(function () {
var _api$optionsRef$value4;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_api$optionsRef$value4 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value4.focus({
preventScroll: true
});
});

@@ -998,21 +1177,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
handlePointerUp: handlePointerUp
};

@@ -1032,14 +1197,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$value2;
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
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 = {

@@ -1049,4 +1212,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$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.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': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id) != null ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.id,
id: this.id,

@@ -1058,2 +1221,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -1063,3 +1227,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -1088,3 +1254,2 @@ },

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

@@ -1094,9 +1259,12 @@ if (api.activeOptionIndex.value !== null) {

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

@@ -1106,7 +1274,7 @@

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

@@ -1116,3 +1284,3 @@ case Keys.Home:

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

@@ -1122,3 +1290,3 @@ case Keys.End:

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

@@ -1129,5 +1297,7 @@ case Keys.Escape:

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

@@ -1196,3 +1366,3 @@ break;

var selected = computed(function () {
return api.value.value === value;
return toRaw(api.value.value) === toRaw(value);
});

@@ -1207,3 +1377,3 @@ var dataRef = ref({

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;

@@ -1218,14 +1388,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'

@@ -1241,5 +1417,7 @@ });

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

@@ -1249,4 +1427,4 @@ }

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

@@ -1257,3 +1435,3 @@

if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}

@@ -1264,3 +1442,3 @@

if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1278,3 +1456,3 @@

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

@@ -1295,11 +1473,177 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

}
});
var GroupContext = /*#__PURE__*/Symbol('GroupContext');
function useGroupContext(component) {
var context = inject(GroupContext, null);
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <SwitchGroup /> component.");
if (Error.captureStackTrace) Error.captureStackTrace(err, useGroupContext);
throw err;
}
return context;
} // ---
var SwitchGroup = /*#__PURE__*/defineComponent({
name: 'SwitchGroup',
props: {
as: {
type: [Object, String],
"default": 'template'
}
},
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs;
var switchRef = ref(null);
var labelRef = ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
};
provide(GroupContext, api);
return function () {
return render({
props: props,
slot: {},
slots: slots,
attrs: attrs
});
};
}
}); // ---
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var Switch = /*#__PURE__*/defineComponent({
name: 'Switch',
emits: ['update:modelValue'],
props: {
as: {
type: [Object, String],
"default": 'button'
},
modelValue: {
type: [Object, Boolean],
"default": null
},
"class": {
type: [String, Function],
required: false
},
className: {
type: [String, Function],
required: false
}
},
render: function render$1() {
var api = inject(GroupContext, null);
var _this$$props = this.$props,
defaultClass = _this$$props["class"],
_this$$props$classNam = _this$$props.className,
className = _this$$props$classNam === void 0 ? defaultClass : _this$$props$classNam;
var labelledby = computed(function () {
var _api$labelRef$value;
export { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Menu, MenuButton, MenuItem, MenuItems };
return api == null ? void 0 : (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id;
});
var slot = {
checked: this.$props.modelValue
};
var propsWeControl = {
id: this.id,
ref: api === null ? undefined : api.switchRef,
role: 'switch',
tabIndex: 0,
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp,
onKeyPress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({
props: _extends({}, this.$props, propsWeControl),
slot: slot,
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup(props, _ref2) {
var emit = _ref2.emit;
var api = inject(GroupContext, null);
var id = "headlessui-switch-" + useId();
function toggle() {
emit('update:modelValue', !props.modelValue);
}
return {
id: id,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {
event.preventDefault();
toggle();
},
handleKeyUp: function handleKeyUp(event) {
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();
}
};
}
}); // ---
var SwitchLabel = /*#__PURE__*/defineComponent({
name: 'SwitchLabel',
props: {
as: {
type: [Object, String],
"default": 'label'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el',
onPointerUp: this.handlePointerUp
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchLabel');
var id = "headlessui-switch-label-" + useId();
return {
id: id,
el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) == null ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) == null ? void 0 : _api$switchRef$value2.focus({
preventScroll: true
});
}
};
}
});
export { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Menu, MenuButton, MenuItem, MenuItems, Switch, SwitchGroup, SwitchLabel };
//# sourceMappingURL=headlessui.esm.js.map

893

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,89 @@

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

@@ -130,19 +335,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 +372,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 +381,4 @@ menuState: menuState,

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

@@ -227,3 +389,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 +418,3 @@ searchQuery.value = '';

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

@@ -276,13 +452,14 @@ },

function handler(event) {
var _buttonRef$value, _itemsRef$value;
var _buttonRef$value, _itemsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_itemsRef$value = itemsRef.value) == null ? void 0 : _itemsRef$value.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))) {
var _buttonRef$value2;
api.closeMenu();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -312,2 +489,6 @@

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

@@ -330,6 +511,5 @@ type: [Object, String],

'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': (_api$itemsRef$value = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value.id,
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onPointerUp: this.handlePointerUp

@@ -344,3 +524,3 @@ };

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

@@ -360,4 +540,6 @@ var id = "headlessui-menu-button-" + useId();

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

@@ -372,4 +554,6 @@ break;

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

@@ -381,11 +565,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.menuState.value === MenuStates.Open) {
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value;
return (_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openMenu();
vue.nextTick(function () {
nextFrame(function () {
var _api$itemsRef$value4;
return (_api$itemsRef$value4 = api.itemsRef.value) === null || _api$itemsRef$value4 === void 0 ? void 0 : _api$itemsRef$value4.focus();
return (_api$itemsRef$value4 = api.itemsRef.value) == null ? void 0 : _api$itemsRef$value4.focus({
preventScroll: true
});
});

@@ -395,8 +590,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 {

@@ -406,4 +595,3 @@ id: id,

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

@@ -421,14 +609,12 @@ }

"default": false
},
unmount: {
type: Boolean,
"default": true
}
},
render: function render$1() {
var _api$items$value$api$, _api$buttonRef$value;
var _api$items$value$api$, _api$buttonRef$value2;
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 = {

@@ -438,4 +624,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$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.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': (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.id,
id: this.id,

@@ -447,2 +633,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -452,3 +639,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -477,3 +666,2 @@ },

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

@@ -484,10 +672,13 @@ 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();
vue.nextTick(function () {
var _api$buttonRef$value2;
(_document$getElementB = document.getElementById(_id)) == null ? void 0 : _document$getElementB.click();
}
return (_api$buttonRef$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.focus();
api.closeMenu();
vue.nextTick(function () {
var _api$buttonRef$value3;
return (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.focus({
preventScroll: true
});
}
});
break;

@@ -497,7 +688,7 @@

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

@@ -507,3 +698,3 @@ case Keys.Home:

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

@@ -513,3 +704,3 @@ case Keys.End:

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

@@ -520,5 +711,7 @@ case Keys.Escape:

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

@@ -587,3 +780,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;

@@ -602,5 +795,7 @@ });

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

@@ -611,3 +806,3 @@ }

if (disabled) return api.goToItem(Focus.Nothing);
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -618,3 +813,3 @@

if (active.value) return;
api.goToItem(Focus.SpecificItem, id);
api.goToItem(Focus.Specific, id);
}

@@ -654,8 +849,2 @@

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

@@ -668,19 +857,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.");

@@ -697,2 +881,3 @@ if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext);

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

@@ -704,3 +889,3 @@ as: {

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

@@ -726,41 +911,2 @@ }

});
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 = {

@@ -776,3 +922,4 @@ listboxState: listboxState,

closeListbox: function closeListbox() {
return listboxState.value = ListboxStates.Closed;
listboxState.value = ListboxStates.Closed;
activeOptionIndex.value = null;
},

@@ -783,3 +930,21 @@ openListbox: function openListbox() {

goToOption: function goToOption(focus, id) {
var nextActiveOptionIndex = calculateActiveOptionIndex(focus, id);
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;

@@ -794,7 +959,3 @@ searchQuery.value = '';

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

@@ -835,13 +996,14 @@ },

function handler(event) {
var _buttonRef$value, _optionsRef$value;
var _buttonRef$value, _optionsRef$value, _buttonRef$value2;
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 ((_buttonRef$value = buttonRef.value) == null ? void 0 : _buttonRef$value.contains(target)) return;
if (!((_optionsRef$value = optionsRef.value) == null ? void 0 : _optionsRef$value.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))) {
var _buttonRef$value2;
api.closeListbox();
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) === null || _buttonRef$value2 === void 0 ? void 0 : _buttonRef$value2.focus();
}
if (!event.defaultPrevented) (_buttonRef$value2 = buttonRef.value) == null ? void 0 : _buttonRef$value2.focus({
preventScroll: true
});
}

@@ -904,3 +1066,5 @@

(_api$buttonRef$value = api.buttonRef.value) === null || _api$buttonRef$value === void 0 ? void 0 : _api$buttonRef$value.focus();
(_api$buttonRef$value = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value.focus({
preventScroll: true
});
}

@@ -914,2 +1078,6 @@ };

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

@@ -925,4 +1093,3 @@ type: [Object, String],

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

@@ -934,8 +1101,6 @@ 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': (_api$optionsRef$value = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value.id,
'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
'aria-labelledby': api.labelRef.value ? [api.labelRef.value.id, this.id].join(' ') : undefined,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onPointerUp: this.handlePointerUp

@@ -950,6 +1115,5 @@ };

},
setup: function setup() {
setup: function setup(props) {
var api = useListboxContext('ListboxButton');
var id = "headlessui-listbox-button-" + useId();
var focused = vue.ref(false);

@@ -967,4 +1131,6 @@ function handleKeyDown(event) {

(_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);
(_api$optionsRef$value2 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value2.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.First);
});

@@ -979,4 +1145,6 @@ break;

(_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);
(_api$optionsRef$value3 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value3.focus({
preventScroll: true
});
if (!api.value.value) api.goToOption(Focus.Last);
});

@@ -988,11 +1156,22 @@ break;

function handlePointerUp(event) {
if (props.disabled) return;
if (api.listboxState.value === ListboxStates.Open) {
api.closeListbox();
vue.nextTick(function () {
var _api$buttonRef$value2;
return (_api$buttonRef$value2 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value2.focus({
preventScroll: true
});
});
} else {
event.preventDefault();
api.openListbox();
vue.nextTick(function () {
nextFrame$1(function () {
var _api$optionsRef$value4;
return (_api$optionsRef$value4 = api.optionsRef.value) === null || _api$optionsRef$value4 === void 0 ? void 0 : _api$optionsRef$value4.focus();
return (_api$optionsRef$value4 = api.optionsRef.value) == null ? void 0 : _api$optionsRef$value4.focus({
preventScroll: true
});
});

@@ -1002,21 +1181,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
handlePointerUp: handlePointerUp
};

@@ -1036,14 +1201,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$value2;
var _api$options$value$ap, _api$labelRef$value$i, _api$labelRef$value, _api$buttonRef$value3;
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 = {

@@ -1053,4 +1216,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$value2 = api.buttonRef.value) === null || _api$buttonRef$value2 === void 0 ? void 0 : _api$buttonRef$value2.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': (_api$labelRef$value$i = (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id) != null ? _api$labelRef$value$i : (_api$buttonRef$value3 = api.buttonRef.value) == null ? void 0 : _api$buttonRef$value3.id,
id: this.id,

@@ -1062,2 +1225,3 @@ onKeyDown: this.handleKeyDown,

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

@@ -1067,3 +1231,5 @@ props: _extends({}, passThroughProps, propsWeControl),

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

@@ -1092,3 +1258,2 @@ },

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

@@ -1098,9 +1263,12 @@ if (api.activeOptionIndex.value !== null) {

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

@@ -1110,7 +1278,7 @@

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

@@ -1120,3 +1288,3 @@ case Keys.Home:

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

@@ -1126,3 +1294,3 @@ case Keys.End:

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

@@ -1133,5 +1301,7 @@ case Keys.Escape:

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

@@ -1200,3 +1370,3 @@ break;

var selected = vue.computed(function () {
return api.value.value === value;
return vue.toRaw(api.value.value) === vue.toRaw(value);
});

@@ -1211,3 +1381,3 @@ var dataRef = vue.ref({

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;

@@ -1222,14 +1392,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'

@@ -1245,5 +1421,7 @@ });

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

@@ -1253,4 +1431,4 @@ }

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

@@ -1261,3 +1439,3 @@

if (active.value) return;
api.goToOption(Focus$1.Specific, id);
api.goToOption(Focus.Specific, id);
}

@@ -1268,3 +1446,3 @@

if (!active.value) return;
api.goToOption(Focus$1.Nothing);
api.goToOption(Focus.Nothing);
}

@@ -1282,3 +1460,3 @@

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

@@ -1299,10 +1477,176 @@ 'aria-selected': selected.value === true ? selected.value : undefined,

}
});
var GroupContext = /*#__PURE__*/Symbol('GroupContext');
function useGroupContext(component) {
var context = vue.inject(GroupContext, null);
if (context === null) {
var err = new Error("<" + component + " /> is missing a parent <SwitchGroup /> component.");
if (Error.captureStackTrace) Error.captureStackTrace(err, useGroupContext);
throw err;
}
return context;
} // ---
var SwitchGroup = /*#__PURE__*/vue.defineComponent({
name: 'SwitchGroup',
props: {
as: {
type: [Object, String],
"default": 'template'
}
},
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs;
var switchRef = vue.ref(null);
var labelRef = vue.ref(null);
var api = {
switchRef: switchRef,
labelRef: labelRef
};
vue.provide(GroupContext, api);
return function () {
return render({
props: props,
slot: {},
slots: slots,
attrs: attrs
});
};
}
}); // ---
function resolvePropValue$1(property, bag) {
if (property === undefined) return undefined;
if (typeof property === 'function') return property(bag);
return property;
}
var Switch = /*#__PURE__*/vue.defineComponent({
name: 'Switch',
emits: ['update:modelValue'],
props: {
as: {
type: [Object, String],
"default": 'button'
},
modelValue: {
type: [Object, Boolean],
"default": null
},
"class": {
type: [String, Function],
required: false
},
className: {
type: [String, Function],
required: false
}
},
render: function render$1() {
var api = vue.inject(GroupContext, null);
var _this$$props = this.$props,
defaultClass = _this$$props["class"],
_this$$props$classNam = _this$$props.className,
className = _this$$props$classNam === void 0 ? defaultClass : _this$$props$classNam;
var labelledby = vue.computed(function () {
var _api$labelRef$value;
return api == null ? void 0 : (_api$labelRef$value = api.labelRef.value) == null ? void 0 : _api$labelRef$value.id;
});
var slot = {
checked: this.$props.modelValue
};
var propsWeControl = {
id: this.id,
ref: api === null ? undefined : api.switchRef,
role: 'switch',
tabIndex: 0,
"class": resolvePropValue(className, slot),
'aria-checked': this.$props.modelValue,
'aria-labelledby': labelledby.value,
onClick: this.handleClick,
onKeyUp: this.handleKeyUp,
onKeyPress: this.handleKeyPress
};
if (this.$props.as === 'button') {
Object.assign(propsWeControl, {
type: 'button'
});
}
return render({
props: _extends({}, this.$props, propsWeControl),
slot: slot,
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup(props, _ref2) {
var emit = _ref2.emit;
var api = vue.inject(GroupContext, null);
var id = "headlessui-switch-" + useId();
function toggle() {
emit('update:modelValue', !props.modelValue);
}
return {
id: id,
el: api == null ? void 0 : api.switchRef,
handleClick: function handleClick(event) {
event.preventDefault();
toggle();
},
handleKeyUp: function handleKeyUp(event) {
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();
}
};
}
}); // ---
var SwitchLabel = /*#__PURE__*/vue.defineComponent({
name: 'SwitchLabel',
props: {
as: {
type: [Object, String],
"default": 'label'
}
},
render: function render$1() {
var propsWeControl = {
id: this.id,
ref: 'el',
onPointerUp: this.handlePointerUp
};
return render({
props: _extends({}, this.$props, propsWeControl),
slot: {},
attrs: this.$attrs,
slots: this.$slots
});
},
setup: function setup() {
var api = useGroupContext('SwitchLabel');
var id = "headlessui-switch-label-" + useId();
return {
id: id,
el: api.labelRef,
handlePointerUp: function handlePointerUp() {
var _api$switchRef$value, _api$switchRef$value2;
(_api$switchRef$value = api.switchRef.value) == null ? void 0 : _api$switchRef$value.click();
(_api$switchRef$value2 = api.switchRef.value) == null ? void 0 : _api$switchRef$value2.focus({
preventScroll: true
});
}
};
}
});
exports.Listbox = Listbox;

@@ -1317,2 +1661,5 @@ exports.ListboxButton = ListboxButton;

exports.MenuItems = MenuItems;
exports.Switch = Switch;
exports.SwitchGroup = SwitchGroup;
exports.SwitchLabel = SwitchLabel;

@@ -1319,0 +1666,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

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),a=2;a<o;a++)i[a-2]=arguments[a];return"function"==typeof n?n.apply(void 0,i):n}var r=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(r,u),r}function i(e){var n,u=e.props,i=e.attrs,a=e.slots,r=e.slot,l=u.as,s=o(u,["as"]),c=null===(n=a.default)||void 0===n?void 0:n.call(a,r);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 a,r,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"}(a||(a={})),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"}(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,m=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,a=n.attrs,s=t.ref(r.Closed),c=t.ref(null),v=t.ref(null),f=t.ref([]),p=t.ref(""),m=t.ref(null),b={menuState:s,buttonRef:c,itemsRef:v,items:f,searchQuery:p,activeItemIndex:m,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,o;if(f.value.length<=0)return null;var i=null!==(n=m.value)&&void 0!==n?n:-1,a=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===a?m.value:a}(e,t);""===p.value&&m.value===n||(p.value="",m.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!==m.value&&(m.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!==m.value?t[m.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),f.value=t,m.value=o===m.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var t,n,o;s.value===r.Open&&((null===(t=c.value)||void 0===t?void 0:t.contains(e.target))||(null===(n=v.value)||void 0===n?void 0:n.contains(e.target))||(b.closeMenu(),e.defaultPrevented||null===(o=c.value)||void 0===o||o.focus()))}window.addEventListener("click",e),t.onUnmounted((function(){return window.removeEventListener("click",e)}))})),t.provide(d,b),function(){return i({props:e,slot:{open:s.value===r.Open},slots:o,attrs:a})}}}),b=t.defineComponent({props:{as:{type:[Object,String],default:"button"}},render:function(){var e,t=v("MenuButton"),o={open:t.menuState.value===r.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===r.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 a.Space:case a.Enter:case a.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 a.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===r.Open?e.closeMenu():(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===r.Open&&(null===(t=e.itemsRef.value)||void 0===t||t.focus())}}}}),h=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1}},render:function(){var e,t,u=v("MenuItems"),a=this.$props,l=a.static,s=o(a,["static"]);if(!l&&u.menuState.value===r.Closed)return null;var c={open:u.menuState.value===r.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 a.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case a.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 a.ArrowDown:return n.preventDefault(),e.goToItem(l.NextItem);case a.ArrowUp:return n.preventDefault(),e.goToItem(l.PreviousItem);case a.Home:case a.PageUp:return n.preventDefault(),e.goToItem(l.FirstItem);case a.End:case a.PageDown:return n.preventDefault(),e.goToItem(l.LastItem);case a.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 a.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,a=o.attrs,r=v("MenuItem"),s="headlessui-menu-item-"+c(),d=e.disabled,f=e.className,p=void 0===f?e.class:f,m=t.computed((function(){return null!==r.activeItemIndex.value&&r.items.value[r.activeItemIndex.value].id===s})),b=t.ref({disabled:d,textValue:""});function h(e){if(d)return e.preventDefault();r.closeMenu(),t.nextTick((function(){var e;return null===(e=r.buttonRef.value)||void 0===e?void 0:e.focus()}))}function x(){if(d)return r.goToItem(l.Nothing);r.goToItem(l.SpecificItem,s)}function I(){d||m.value||r.goToItem(l.SpecificItem,s)}function y(){d||m.value&&r.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&&(b.value.textValue=n)})),t.onMounted((function(){return r.registerItem(s,b)})),t.onUnmounted((function(){return r.unregisterItem(s)})),function(){var t={active:m.value,disabled:d},o={id:s,role:"menuitem",tabIndex:-1,class:g(p,t),"aria-disabled":!0===d||void 0,onClick:h,onFocus:x,onPointerMove:I,onPointerLeave:y};return i({props:n({},e,o),slot:t,attrs:a,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 O=t.defineComponent({name:"Listbox",props:{as:{type:[Object,String],default:"template"},modelValue:{type:[Object,String],default:null}},setup:function(e,n){var a=n.slots,r=n.attrs,l=n.emit,s=o(e,["modelValue"]),c=t.ref(f.Closed),d=t.ref(null),v=t.ref(null),m=t.ref(null),b=t.ref([]),h=t.ref(""),x=t.ref(null),g=t.computed((function(){return e.modelValue})),y={listboxState:c,value:g,labelRef:d,buttonRef:v,optionsRef:m,options:b,searchQuery:h,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(b.value.length<=0)return null;var i=null!==(n=x.value)&&void 0!==n?n:-1,a=u(e,((o={})[p.First]=function(){return b.value.findIndex((function(e){return!e.dataRef.disabled}))},o[p.Previous]=function(){var e=b.value.slice().reverse().findIndex((function(e,t,n){return!(-1!==i&&n.length-t-1>=i||e.dataRef.disabled)}));return-1===e?e:b.value.length-1-e},o[p.Next]=function(){return b.value.findIndex((function(e,t){return!(t<=i||e.dataRef.disabled)}))},o[p.Last]=function(){var e=b.value.slice().reverse().findIndex((function(e){return!e.dataRef.disabled}));return-1===e?e:b.value.length-1-e},o[p.Specific]=function(){return b.value.findIndex((function(e){return e.id===t}))},o[p.Nothing]=function(){return null},o));return-1===a?x.value:a}(e,t);""===h.value&&x.value===n||(h.value="",x.value=n)},search:function(e){h.value+=e;var t=b.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(h.value)}));-1!==t&&t!==x.value&&(x.value=t)},clearSearch:function(){h.value=""},registerOption:function(e,t){b.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=b.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),b.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 t,n,o;c.value===f.Open&&((null===(t=v.value)||void 0===t?void 0:t.contains(e.target))||(null===(n=m.value)||void 0===n?void 0:n.contains(e.target))||(y.closeListbox(),e.defaultPrevented||null===(o=v.value)||void 0===o||o.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:a,attrs:r})}}}),w=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 a.Space:case a.Enter:case a.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 a.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():(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}}}}),L=t.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1}},render:function(){var e,t,u,a,r=y("ListboxOptions"),l=this.$props,s=l.static,c=o(l,["static"]);if(!s&&r.listboxState.value===f.Closed)return null;var d={open:r.listboxState.value===f.Open};return i({props:n({},c,{"aria-activedescendant":null===r.activeOptionIndex.value||null===(e=r.options.value[r.activeOptionIndex.value])||void 0===e?void 0:e.id,"aria-labelledby":null!==(t=null===(u=r.labelRef.value)||void 0===u?void 0:u.id)&&void 0!==t?t:null===(a=r.buttonRef.value)||void 0===a?void 0:a.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 a.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case a.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 a.ArrowDown:return n.preventDefault(),e.goToOption(p.Next);case a.ArrowUp:return n.preventDefault(),e.goToOption(p.Previous);case a.Home:case a.PageUp:return n.preventDefault(),e.goToOption(p.First);case a.End:case a.PageDown:return n.preventDefault(),e.goToOption(p.Last);case a.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 a.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),T=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,a=o.attrs,r=y("ListboxOption"),l="headlessui-listbox-option-"+c(),s=e.disabled,d=e.className,v=void 0===d?e.class:d,f=e.value,m=t.computed((function(){return null!==r.activeOptionIndex.value&&r.options.value[r.activeOptionIndex.value].id===l})),b=t.computed((function(){return r.value.value===f})),h=t.ref({disabled:s,value:f,textValue:""});function x(e){if(s)return e.preventDefault();r.select(f),r.closeListbox(),t.nextTick((function(){var e;return null===(e=r.buttonRef.value)||void 0===e?void 0:e.focus()}))}function g(){if(s)return r.goToOption(p.Nothing);r.goToOption(p.Specific,l)}function I(){s||m.value||r.goToOption(p.Specific,l)}function O(){s||m.value&&r.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&&(h.value.textValue=n)})),t.onMounted((function(){return r.registerOption(l,h)})),t.onUnmounted((function(){return r.unregisterOption(l)})),t.onMounted((function(){var e,t;b.value&&(r.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(){m.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:m.value,selected:b.value,disabled:s},o={id:l,role:"option",tabIndex:-1,class:k(v,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===b.value?b.value:void 0,onClick:x,onFocus:g,onPointerMove:I,onPointerLeave:O};return i({props:n({},e,o),slot:t,attrs:a,slots:u})}}});function k(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}e.Listbox=O,e.ListboxButton=S,e.ListboxLabel=w,e.ListboxOption=T,e.ListboxOptions=L,e.Menu=m,e.MenuButton=b,e.MenuItem=x,e.MenuItems=h,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={},u=Object.keys(e);for(o=0;o<u.length;o++)t.indexOf(n=u[o])>=0||(r[n]=e[n]);return r}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function u(e,t){if(e in t){for(var n=t[e],o=arguments.length,r=new Array(o>2?o-2:0),l=2;l<o;l++)r[l-2]=arguments[l];return"function"==typeof n?n.apply(void 0,r):n}var a=new Error('Tried to handle "'+e+'" but there is no handler defined. Only defined handlers are: '+Object.keys(t).map((function(e){return'"'+e+'"'})).join(", ")+".");throw Error.captureStackTrace&&Error.captureStackTrace(a,u),a}var l,a;function i(e){var t,r,i=e.visible,c=void 0===i||i,d=e.features,v=void 0===d?l.None:d,f=o(e,["visible","features"]);return c||v&l.Static&&f.props.static?s(f):v&l.RenderStrategy?u(null==(t=f.props.unmount)||t?a.Unmount:a.Hidden,((r={})[a.Unmount]=function(){return null},r[a.Hidden]=function(){return s(n({},f,{props:n({},f.props,{hidden:!0,style:{display:"none"}})}))},r)):s(f)}function s(e){var n=e.attrs,u=e.slots,l=e.slot,a=function(e,t){void 0===t&&(t=[]);for(var n,o=Object.assign({},e),u=function(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return r(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,void 0):void 0}}(e))){n&&(e=n);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=e[Symbol.iterator]()).next.bind(n)}(t);!(n=u()).done;){var l=n.value;l in o&&delete o[l]}return o}(e.props,["unmount","static"]),i=a.as,s=o(a,["as"]),c=null==u.default?void 0:u.default(l);if("template"===i){if(Object.keys(s).length>0||"class"in n){var d=null!=c?c:[],v=d[0];if(d.slice(1).length>0)throw new Error('You should only render 1 child or use the `as="..."` prop');return t.cloneVNode(v,s)}return c}return t.h(i,s,c)}!function(e){e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static"}(l||(l={})),function(e){e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden"}(a||(a={}));var c,d,v,f=0;function p(){return++f}function b(e,t){var n=t.resolveItems();if(n.length<=0)return null;var o=t.resolveActiveIndex(),r=null!=o?o:-1,u=function(){switch(e.focus){case d.First:return n.findIndex((function(e){return!t.resolveDisabled(e)}));case d.Previous:var o=n.slice().reverse().findIndex((function(e,n,o){return!(-1!==r&&o.length-n-1>=r||t.resolveDisabled(e))}));return-1===o?o:n.length-1-o;case d.Next:return n.findIndex((function(e,n){return!(n<=r||t.resolveDisabled(e))}));case d.Last:var u=n.slice().reverse().findIndex((function(e){return!t.resolveDisabled(e)}));return-1===u?u:n.length-1-u;case d.Specific:return n.findIndex((function(n){return t.resolveId(n)===e.id}));case d.Nothing:return null;default:!function(e){throw new Error("Unexpected object: "+e)}(e)}}();return-1===u?o:u}function m(e,t){if(void 0!==e)return"function"==typeof e?e(t):e}!function(e){e.Space=" ",e.Enter="Enter",e.Escape="Escape",e.Backspace="Backspace",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Home="Home",e.End="End",e.PageUp="PageUp",e.PageDown="PageDown",e.Tab="Tab"}(c||(c={})),function(e){e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing"}(d||(d={})),function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(v||(v={}));var h=Symbol("MenuContext");function y(e){var n=t.inject(h,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Menu /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,y),o}return n}var x,S=t.defineComponent({props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,u=t.ref(v.Closed),l=t.ref(null),a=t.ref(null),s=t.ref([]),c=t.ref(""),f=t.ref(null),p={menuState:u,buttonRef:l,itemsRef:a,items:s,searchQuery:c,activeItemIndex:f,closeMenu:function(){u.value=v.Closed,f.value=null},openMenu:function(){return u.value=v.Open},goToItem:function(e,t){var n=b(e===d.Specific?{focus:d.Specific,id:t}:{focus:e},{resolveItems:function(){return s.value},resolveActiveIndex:function(){return f.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===c.value&&f.value===n||(c.value="",f.value=n)},search:function(e){c.value+=e;var t=s.value.findIndex((function(e){return e.dataRef.textValue.startsWith(c.value)&&!e.dataRef.disabled}));-1!==t&&t!==f.value&&(f.value=t)},clearSearch:function(){c.value=""},registerItem:function(e,t){s.value.push({id:e,dataRef:t})},unregisterItem:function(e){var t=s.value.slice(),n=null!==f.value?t[f.value]:null,o=t.findIndex((function(t){return t.id===e}));-1!==o&&t.splice(o,1),s.value=t,f.value=o===f.value||null===n?null:t.indexOf(n)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,i=document.activeElement;u.value===v.Open&&((null==(t=l.value)?void 0:t.contains(r))||((null==(n=a.value)?void 0:n.contains(r))||p.closeMenu(),i!==document.body&&(null==i?void 0:i.contains(r))||e.defaultPrevented||null==(o=l.value)||o.focus({preventScroll:!0})))}window.addEventListener("click",e),t.onUnmounted((function(){return window.removeEventListener("click",e)}))})),t.provide(h,p),function(){return i({props:e,slot:{open:u.value===v.Open},slots:o,attrs:r})}}}),g=t.defineComponent({props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=y("MenuButton"),o={open:t.menuState.value===v.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.itemsRef.value)?void 0:e.id,"aria-expanded":t.menuState.value===v.Open||void 0,onKeyDown:this.handleKeyDown,onPointerUp:this.handlePointerUp};return i({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var n=y("MenuButton");return{id:"headlessui-menu-button-"+p(),el:n.buttonRef,handleKeyDown:function(e){switch(e.key){case c.Space:case c.Enter:case c.ArrowDown:e.preventDefault(),n.openMenu(),t.nextTick((function(){var e;null==(e=n.itemsRef.value)||e.focus({preventScroll:!0}),n.goToItem(d.First)}));break;case c.ArrowUp:e.preventDefault(),n.openMenu(),t.nextTick((function(){var e;null==(e=n.itemsRef.value)||e.focus({preventScroll:!0}),n.goToItem(d.Last)}))}},handlePointerUp:function(o){var r;e.disabled||(n.menuState.value===v.Open?(n.closeMenu(),t.nextTick((function(){var e;return null==(e=n.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),n.openMenu(),r=function(){var e;return null==(e=n.itemsRef.value)?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),w=t.defineComponent({props:{as:{type:[Object,String],default:"div"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o=y("MenuItems"),r={open:o.menuState.value===v.Open},u={"aria-activedescendant":null===o.activeItemIndex.value||null==(e=o.items.value[o.activeItemIndex.value])?void 0:e.id,"aria-labelledby":null==(t=o.buttonRef.value)?void 0:t.id,id:this.id,onKeyDown:this.handleKeyDown,role:"menu",tabIndex:0,ref:"el"};return i({props:n({},this.$props,u),slot:r,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:r.open})},setup:function(){var e=y("MenuItems"),n="headlessui-menu-items-"+p(),o=t.ref(null);return{id:n,el:e.itemsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case c.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case c.Enter:var r;n.preventDefault(),null!==e.activeItemIndex.value&&(null==(r=document.getElementById(e.items.value[e.activeItemIndex.value].id))||r.click()),e.closeMenu(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.ArrowDown:return n.preventDefault(),e.goToItem(d.Next);case c.ArrowUp:return n.preventDefault(),e.goToItem(d.Previous);case c.Home:case c.PageUp:return n.preventDefault(),e.goToItem(d.First);case c.End:case c.PageDown:return n.preventDefault(),e.goToItem(d.Last);case c.Escape:n.preventDefault(),e.closeMenu(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),O=t.defineComponent({props:{as:{type:[Object,String],default:"template"},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,u=o.attrs,l=y("MenuItem"),a="headlessui-menu-item-"+p(),s=e.disabled,c=e.className,v=void 0===c?e.class:c,f=t.computed((function(){return null!==l.activeItemIndex.value&&l.items.value[l.activeItemIndex.value].id===a})),b=t.ref({disabled:s,textValue:""});function h(e){if(s)return e.preventDefault();l.closeMenu(),t.nextTick((function(){var e;return null==(e=l.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function x(){if(s)return l.goToItem(d.Nothing);l.goToItem(d.Specific,a)}function S(){s||f.value||l.goToItem(d.Specific,a)}function g(){s||f.value&&l.goToItem(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(a))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(b.value.textValue=n)})),t.onMounted((function(){return l.registerItem(a,b)})),t.onUnmounted((function(){return l.unregisterItem(a)})),function(){var t={active:f.value,disabled:s},o={id:a,role:"menuitem",tabIndex:-1,class:m(v,t),"aria-disabled":!0===s||void 0,onClick:h,onFocus:x,onPointerMove:S,onPointerLeave:g};return i({props:n({},e,o),slot:t,attrs:u,slots:r})}}});!function(e){e[e.Open=0]="Open",e[e.Closed=1]="Closed"}(x||(x={}));var I=Symbol("ListboxContext");function k(e){var n=t.inject(I,null);if(null===n){var o=new Error("<"+e+" /> is missing a parent <Listbox /> component.");throw Error.captureStackTrace&&Error.captureStackTrace(o,k),o}return n}var R=t.defineComponent({name:"Listbox",emits:["update:modelValue"],props:{as:{type:[Object,String],default:"template"},modelValue:{type:[Object,String,Number,Boolean],default:null}},setup:function(e,n){var r=n.slots,u=n.attrs,l=n.emit,a=o(e,["modelValue"]),s=t.ref(x.Closed),c=t.ref(null),v=t.ref(null),f=t.ref(null),p=t.ref([]),m=t.ref(""),h=t.ref(null),y=t.computed((function(){return e.modelValue})),S={listboxState:s,value:y,labelRef:c,buttonRef:v,optionsRef:f,options:p,searchQuery:m,activeOptionIndex:h,closeListbox:function(){s.value=x.Closed,h.value=null},openListbox:function(){return s.value=x.Open},goToOption:function(e,t){var n=b(e===d.Specific?{focus:d.Specific,id:t}:{focus:e},{resolveItems:function(){return p.value},resolveActiveIndex:function(){return h.value},resolveId:function(e){return e.id},resolveDisabled:function(e){return e.dataRef.disabled}});""===m.value&&h.value===n||(m.value="",h.value=n)},search:function(e){m.value+=e;var t=p.value.findIndex((function(e){return!e.dataRef.disabled&&e.dataRef.textValue.startsWith(m.value)}));-1!==t&&t!==h.value&&(h.value=t)},clearSearch:function(){m.value=""},registerOption:function(e,t){p.value.push({id:e,dataRef:t})},unregisterOption:function(e){var t=p.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),p.value=t,h.value=o===h.value||null===n?null:t.indexOf(n)},select:function(e){l("update:modelValue",e)}};return t.onMounted((function(){function e(e){var t,n,o,r=e.target,u=document.activeElement;s.value===x.Open&&((null==(t=v.value)?void 0:t.contains(r))||((null==(n=f.value)?void 0:n.contains(r))||S.closeListbox(),u!==document.body&&(null==u?void 0:u.contains(r))||e.defaultPrevented||null==(o=v.value)||o.focus({preventScroll:!0})))}window.addEventListener("click",e),t.onUnmounted((function(){return window.removeEventListener("click",e)}))})),t.provide(I,S),function(){return i({props:a,slot:{open:s.value===x.Open},slots:r,attrs:u})}}}),D=t.defineComponent({name:"ListboxLabel",props:{as:{type:[Object,String],default:"label"}},render:function(){var e={open:k("ListboxLabel").listboxState.value===x.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=k("ListboxLabel");return{id:"headlessui-listbox-label-"+p(),el:e.labelRef,handlePointerUp:function(){var t;null==(t=e.buttonRef.value)||t.focus({preventScroll:!0})}}}}),T=t.defineComponent({name:"ListboxButton",props:{disabled:{type:Boolean,default:!1},as:{type:[Object,String],default:"button"}},render:function(){var e,t=k("ListboxButton"),o={open:t.listboxState.value===x.Open},r={ref:"el",id:this.id,type:"button","aria-haspopup":!0,"aria-controls":null==(e=t.optionsRef.value)?void 0:e.id,"aria-expanded":t.listboxState.value===x.Open||void 0,"aria-labelledby":t.labelRef.value?[t.labelRef.value.id,this.id].join(" "):void 0,onKeyDown:this.handleKeyDown,onPointerUp:this.handlePointerUp};return i({props:n({},this.$props,r),slot:o,attrs:this.$attrs,slots:this.$slots})},setup:function(e){var n=k("ListboxButton");return{id:"headlessui-listbox-button-"+p(),el:n.buttonRef,handleKeyDown:function(e){switch(e.key){case c.Space:case c.Enter:case c.ArrowDown:e.preventDefault(),n.openListbox(),t.nextTick((function(){var e;null==(e=n.optionsRef.value)||e.focus({preventScroll:!0}),n.value.value||n.goToOption(d.First)}));break;case c.ArrowUp:e.preventDefault(),n.openListbox(),t.nextTick((function(){var e;null==(e=n.optionsRef.value)||e.focus({preventScroll:!0}),n.value.value||n.goToOption(d.Last)}))}},handlePointerUp:function(o){var r;e.disabled||(n.listboxState.value===x.Open?(n.closeListbox(),t.nextTick((function(){var e;return null==(e=n.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))):(o.preventDefault(),n.openListbox(),r=function(){var e;return null==(e=n.optionsRef.value)?void 0:e.focus({preventScroll:!0})},requestAnimationFrame((function(){return requestAnimationFrame(r)}))))}}}}),L=t.defineComponent({name:"ListboxOptions",props:{as:{type:[Object,String],default:"ul"},static:{type:Boolean,default:!1},unmount:{type:Boolean,default:!0}},render:function(){var e,t,o,r,u=k("ListboxOptions"),a={open:u.listboxState.value===x.Open},s={"aria-activedescendant":null===u.activeOptionIndex.value||null==(e=u.options.value[u.activeOptionIndex.value])?void 0:e.id,"aria-labelledby":null!=(t=null==(o=u.labelRef.value)?void 0:o.id)?t:null==(r=u.buttonRef.value)?void 0:r.id,id:this.id,onKeyDown:this.handleKeyDown,role:"listbox",tabIndex:0,ref:"el"};return i({props:n({},this.$props,s),slot:a,attrs:this.$attrs,slots:this.$slots,features:l.RenderStrategy|l.Static,visible:a.open})},setup:function(){var e=k("ListboxOptions"),n="headlessui-listbox-options-"+p(),o=t.ref(null);return{id:n,el:e.optionsRef,handleKeyDown:function(n){switch(o.value&&clearTimeout(o.value),n.key){case c.Space:if(""!==e.searchQuery.value)return n.preventDefault(),e.search(n.key);case c.Enter:n.preventDefault(),null!==e.activeOptionIndex.value&&e.select(e.options.value[e.activeOptionIndex.value].dataRef.value),e.closeListbox(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.ArrowDown:return n.preventDefault(),e.goToOption(d.Next);case c.ArrowUp:return n.preventDefault(),e.goToOption(d.Previous);case c.Home:case c.PageUp:return n.preventDefault(),e.goToOption(d.First);case c.End:case c.PageDown:return n.preventDefault(),e.goToOption(d.Last);case c.Escape:n.preventDefault(),e.closeListbox(),t.nextTick((function(){var t;return null==(t=e.buttonRef.value)?void 0:t.focus({preventScroll:!0})}));break;case c.Tab:return n.preventDefault();default:1===n.key.length&&(e.search(n.key),o.value=setTimeout((function(){return e.clearSearch()}),350))}}}}}),E=t.defineComponent({name:"ListboxOption",props:{as:{type:[Object,String],default:"li"},value:{type:[Object,String],default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Function],required:!1},className:{type:[String,Function],required:!1}},setup:function(e,o){var r=o.slots,u=o.attrs,l=k("ListboxOption"),a="headlessui-listbox-option-"+p(),s=e.disabled,c=e.className,v=void 0===c?e.class:c,f=e.value,b=t.computed((function(){return null!==l.activeOptionIndex.value&&l.options.value[l.activeOptionIndex.value].id===a})),h=t.computed((function(){return t.toRaw(l.value.value)===t.toRaw(f)})),y=t.ref({disabled:s,value:f,textValue:""});function S(e){if(s)return e.preventDefault();l.select(f),l.closeListbox(),t.nextTick((function(){var e;return null==(e=l.buttonRef.value)?void 0:e.focus({preventScroll:!0})}))}function g(){if(s)return l.goToOption(d.Nothing);l.goToOption(d.Specific,a)}function w(){s||b.value||l.goToOption(d.Specific,a)}function O(){s||b.value&&l.goToOption(d.Nothing)}return t.onMounted((function(){var e,t,n=null==(e=document.getElementById(a))||null==(t=e.textContent)?void 0:t.toLowerCase().trim();void 0!==n&&(y.value.textValue=n)})),t.onMounted((function(){return l.registerOption(a,y)})),t.onUnmounted((function(){return l.unregisterOption(a)})),t.onMounted((function(){t.watch([l.listboxState,h],(function(){var e;l.listboxState.value===x.Open&&h.value&&(l.goToOption(d.Specific,a),null==(e=document.getElementById(a))||null==e.focus||e.focus())}),{immediate:!0})})),t.watchEffect((function(){l.listboxState.value===x.Open&&b.value&&t.nextTick((function(){var e;return null==(e=document.getElementById(a))||null==e.scrollIntoView?void 0:e.scrollIntoView({block:"nearest"})}))})),function(){var t={active:b.value,selected:h.value,disabled:s},o={id:a,role:"option",tabIndex:-1,class:m(v,t),"aria-disabled":!0===s||void 0,"aria-selected":!0===h.value?h.value:void 0,onClick:S,onFocus:g,onPointerMove:w,onPointerLeave:O};return i({props:n({},e,o),slot:t,attrs:u,slots:r})}}}),P=Symbol("GroupContext");function j(e){var n=t.inject(P,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 U=t.defineComponent({name:"SwitchGroup",props:{as:{type:[Object,String],default:"template"}},setup:function(e,n){var o=n.slots,r=n.attrs,u=t.ref(null),l=t.ref(null);return t.provide(P,{switchRef:u,labelRef:l}),function(){return i({props:e,slot:{},slots:o,attrs:r})}}}),C=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(P,null),o=this.$props,r=o.className,u=void 0===r?o.class:r,l=t.computed((function(){var t;return null==e||null==(t=e.labelRef.value)?void 0:t.id})),a={checked:this.$props.modelValue},s={id:this.id,ref:null===e?void 0:e.switchRef,role:"switch",tabIndex:0,class:m(u,a),"aria-checked":this.$props.modelValue,"aria-labelledby":l.value,onClick:this.handleClick,onKeyUp:this.handleKeyUp,onKeyPress:this.handleKeyPress};return"button"===this.$props.as&&Object.assign(s,{type:"button"}),i({props:n({},this.$props,s),slot:a,attrs:this.$attrs,slots:this.$slots})},setup:function(e,n){var o=n.emit,r=t.inject(P,null);function u(){o("update:modelValue",!e.modelValue)}return{id:"headlessui-switch-"+p(),el:null==r?void 0:r.switchRef,handleClick:function(e){e.preventDefault(),u()},handleKeyUp:function(e){e.key!==c.Tab&&e.preventDefault(),e.key===c.Space&&u()},handleKeyPress:function(e){e.preventDefault()}}}}),M=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=j("SwitchLabel");return{id:"headlessui-switch-label-"+p(),el:e.labelRef,handlePointerUp:function(){var t,n;null==(t=e.switchRef.value)||t.click(),null==(n=e.switchRef.value)||n.focus({preventScroll:!0})}}}});e.Listbox=R,e.ListboxButton=T,e.ListboxLabel=D,e.ListboxOption=E,e.ListboxOptions=L,e.Menu=S,e.MenuButton=g,e.MenuItem=O,e.MenuItems=w,e.Switch=C,e.SwitchGroup=U,e.SwitchLabel=M,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=headlessui.umd.production.min.js.map

1

dist/index.d.ts
export * from './components/menu/menu';
export * from './components/listbox/listbox';
export * from './components/switch/switch';

19

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
}

@@ -66,2 +74,3 @@ export declare function assertListbox(options: {

export declare function getSwitch(): HTMLElement | null;
export declare function getSwitchLabel(): HTMLElement | null;
export declare enum SwitchState {

@@ -79,1 +88,3 @@ On = 0,

export declare function assertActiveElement(element: HTMLElement | null): void;
export declare function assertHidden(element: HTMLElement | null): void;
export declare function assertVisible(element: HTMLElement | null): void;

2

dist/test-utils/interactions.d.ts

@@ -47,3 +47,3 @@ export declare const Keys: Record<string, Partial<KeyboardEvent>>;

export declare function word(input: string): Partial<KeyboardEvent>[];
export declare function type(events: Partial<KeyboardEvent>[]): Promise<void>;
export declare function type(events: Partial<KeyboardEvent>[], element?: Element | null): Promise<void>;
export declare function press(event: Partial<KeyboardEvent>): Promise<void>;

@@ -50,0 +50,0 @@ export declare function click(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;

10

package.json
{
"name": "@headlessui/vue",
"version": "0.1.4-alpha.1",
"version": "0.2.0-4459689",
"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,9 @@ "lint": "../../scripts/lint.sh"

"@types/debounce": "^1.2.0",
"@types/node": "^14.11.2",
"@vue/compiler-sfc": "3.0.0-rc.13",
"@vue/test-utils": "^2.0.0-beta.6",
"@vue/compiler-sfc": "3.0.1",
"@vue/test-utils": "^2.0.0-beta.7",
"husky": "^4.3.0",
"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"
}
}

859

README.md

@@ -33,2 +33,4 @@ <h3 align="center">

- [Menu Button (Dropdown)](#menu-button-dropdown)
- [Listbox (Select)](#listbox-select)
- [Switch (Toggle)](#switch-toggle)

@@ -41,4 +43,2 @@ ### Roadmap

- Listboxes
- Toggles
- Modals

@@ -343,6 +343,7 @@ - Tabs

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

@@ -378,1 +379,847 @@ ##### Slot props

| `disabled` | Boolean | Whether or not the item is the disabled for keyboard navigation and ARIA purposes. |
## Listbox (Select)
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-listbox-example-mi67g?file=/src/App.vue)
The `Listbox` component and related child components are used to quickly build custom listbox components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
- [Basic example](#basic-example-1)
- [Styling the active and selected option](#styling-the-active-and-selected-option)
- [Showing/hiding the listbox](#showinghiding-the-listbox)
- [Using a custom label](#using-a-custom-label)
- [Disabling an option](#disabling-an-option)
- [Transitions](#transitions-1)
- [Rendering additional content](#rendering-additional-content-1)
- [Rendering a different element for a component](#rendering-a-different-element-for-a-component-1)
- [Component API](#component-api-1)
### Basic example
Listboxes are built using the `Listbox`, `ListboxButton`, `ListboxOptions`, `ListboxOption` and `ListboxLabel` components.
The `ListboxButton` will automatically open/close the `ListboxOptions` when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.
```vue
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<ListboxOptions>
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Styling the active and selected option
This is a headless component so there are no styles included by default. Instead, the components expose useful information via [scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) that you can use to apply the styles you'd like to apply yourself.
To style the active `ListboxOption` you can read the `active` slot prop, which tells you whether or not that listbox option is the option that is currently focused via the mouse or keyboard.
To style the selected `ListboxOption` you can read the `selected` slot prop, which tells you whether or not that listbox option is the option that is currently the `value` passed to the `Listbox`.
You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems. For the selected state, you might conditionally render a checkmark next to the seleted option.
```vue
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<ListboxOptions>
<!-- Use the `active` state to conditionally style the active option. -->
<!-- Use the `selected` state to conditionally style the selected option. -->
<ListboxOption
as="template"
v-slot="{ active, selected }"
v-for="person in people"
:key="person.id"
:value="person"
>
<li :class="{ 'bg-blue-500 text-white': active, 'bg-white text-black': !active }">
<CheckmarkIcon v-show="selected" />
{{ person.name }}
</li>
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
import CheckmarkIcon from './CheckmarkIcon'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
CheckmarkIcon,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Using a custom label
By default the `Listbox` will use the button contents as the label for screenreaders. However you can also render a custom `ListboxLabel` which will be automatically linked to the listbox with a generated ID.
```vue
<template>
<Listbox v-model="country">
<ListboxLabel>Country:</ListboxLabel>
<ListboxButton>{country}</ListboxButton>
<ListboxOptions>
<ListboxOption value="australia">Australia</ListboxOption>
<ListboxOption value="belgium">Belgium</ListboxOption>
<ListboxOption value="canada">Canada</ListboxOption>
<ListboxOption value="england">England</ListboxOption>
<!-- ... -->
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const country = ref('belgium')
return {
country,
}
},
}
</script>
```
### Showing/hiding the listbox
By default, your `ListboxOptions` instance will be shown/hidden automatically based on the internal `open` state tracked within the `Listbox` component itself.
```vue
<template>
<Listbox v-model="option">
<ListboxButton>{{ person.name }}</ListboxButton>
<!-- By default, this will automatically show/hide when the ListboxButton is pressed. -->
<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `ListboxOptions` instance to tell it to always render, and inspect the `open` slot prop provided by the `Listbox` to control which element is shown/hidden yourself.
```vue
<template>
<Listbox v-model="option" v-slot="{ open }">
<ListboxButton>{{ person.name }}</ListboxButton>
<div v-show="open">
<!-- Using `static`, `ListboxOptions` is always rendered and ignores the `open` state. -->
<ListboxOptions static>
<ListboxOption v-for="person in people" :key="person.id" :value="person">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</div>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Disabling an option
Use the `disabled` prop to disable a `ListboxOption`. This will make it unselectable via keyboard navigation, and it will be skipped when pressing the up/down arrows.
```vue
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<ListboxOptions>
<!-- Disabled options will be skipped by keyboard navigation. -->
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
<span :class="{ 'opacity-75': person.unavailable }">{{ person.name }}</span>
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Transitions
To animate the opening/closing of the menu panel, use Vue's built-in `transition` component. All you need to do is wrap your `ListboxOptions` instance in a `<transition>` element and the transition will be applied automatically.
```vue
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-out"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<ListboxOptions>
<ListboxOption
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</transition>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Rendering a different element for a component
By default, the `Listbox` and its subcomponents each render a default element that is sensible for that component.
For example, `ListboxLabel` renders a `label` by default, `ListboxButton` renders a `button` by default, `ListboxOptions` renders a `ul` and `ListboxOption` renders a `li` by default. `Listbox` interestingly _does not render an extra element_, and instead renders its children directly by default.
This is easy to change using the `as` prop, which exists on every component.
```vue
<template>
<Listbox as="div" v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<ListboxOptions as="div">
<ListboxOption as="span" v-for="person in people" :key="person.id" :value="person">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
To tell an element to render its children directly with no wrapper element, use `as="template"`.
```vue
<template>
<Listbox v-model="selectedPerson">
<!-- Render no wrapper, instead pass in a button manually. -->
<ListboxButton as="template">
<button>{{ selectedPerson.name }}</button>
</ListboxButton>
<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
### Component API
#### Listbox
```vue
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>
{{ selectedPerson.name }}
</ListboxButton>
<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
export default {
components: {
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption,
},
setup() {
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPerson = ref(people[0])
return {
people,
selectedPerson,
}
},
}
</script>
```
##### Props
| Prop | Type | Default | Description |
| --------- | ------------------- | --------------------------------- | -------------------------------------------------------- |
| `as` | String \| Component | `template` _(no wrapper element_) | The element or component the `Listbox` should render as. |
| `v-model` | `T` | | The selected value. |
##### Slot props
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### ListboxButton
```vue
<ListboxButton v-slot="{ open }">
<span>{{ selectedPerson.name }}</span>
<ChevronRightIcon class={`${open ? 'transform rotate-90' : ''}`} />
</ListboxButton>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | -------- | -------------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `ListboxButton` should render as. |
##### Slot props
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### ListboxLabel
```vue
<ListboxLabel>Enable notifications</ListboxLabel>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | ------------------------------------------------------------- |
| `as` | String \| Component | `label` | The element or component the `ListboxLabel` should render as. |
#### ListboxOptions
```vue
<ListboxOptions>
<ListboxOption value="option-a"><!-- ... --></ListboxOption>
<!-- ... -->
</ListboxOptions>
```
##### Props
| Prop | Type | Default | Description |
| --------- | ------------------- | ------- | --------------------------------------------------------------------------------- |
| `as` | String \| Component | `ul` | The element or component the `ListboxOptions` should render as. |
| `static` | Boolean | `false` | Whether the element should ignore the internally managed open/closed state. |
| `unmount` | Boolean | `true` | Whether the element should be unmounted or hidden based on the open/closed state. |
##### Slot props
| Prop | Type | Description |
| ------ | ------- | ----------------------------------- |
| `open` | Boolean | Whether or not the listbox is open. |
#### ListboxOption
```vue
<ListboxOption value="option-a">Option A</ListboxOption>
```
##### Props
| Prop | Type | Default | Description |
| ---------- | ------------------- | ------- | --------------------------------------------------------------------------------------- |
| `as` | String \| Component | `li` | The element or component the `ListboxOption` should render as. |
| `value` | `T` | | The option value. |
| `disabled` | Boolean | `false` | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
##### Slot props
| Prop | Type | Description |
| ---------- | ------- | ------------------------------------------------------------------------------------ |
| `active` | Boolean | Whether or not the option is the active/focused option in the list. |
| `selected` | Boolean | Whether or not the option is the selected option in the list. |
| `disabled` | Boolean | Whether or not the option is the disabled for keyboard navigation and ARIA purposes. |
## Switch (Toggle)
[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-switch-example-8ycp6?file=/src/App.vue)
The `Switch` component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support.
- [Basic example](#basic-example-2)
- [Using a custom label](#using-a-custom-label-1)
- [Component API](#component-api-2)
### Basic example
Switches are built using the `Switch` component. Optionally you can also use the `SwitchGroup` and `SwitchLabel` components.
```vue
<template>
<Switch
as="button"
v-model="switchValue"
class="relative inline-flex w-8 h-6 rounded-full"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
v-slot="{ checked }"
>
<span
class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
/>
</Switch>
</template>
<script>
import { ref } from 'vue'
import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue'
export default {
components: {
SwitchGroup,
Switch,
SwitchLabel,
},
setup() {
const switchValue = ref(false)
return {
switchValue,
}
},
}
</script>
```
### Using a custom label
By default the `Switch` will use the contents as the label for screenreaders. If you need more control, you can render a `SwitchLabel` outside of the `Switch`, as long as both the switch and label are within a parent `SwitchGroup`.
Clicking the label will toggle the switch state, like you'd expect from a native checkbox.
```vue
<template>
<SwitchGroup as="div" class="flex items-center space-x-4">
<SwitchLabel>Enable notifications</SwitchLabel>
<Switch
as="button"
v-model="switchValue"
class="relative inline-flex w-8 h-6 rounded-full"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
v-slot="{ checked }"
>
<span
class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
/>
</Switch>
</SwitchGroup>
</template>
<script>
import { ref } from 'vue'
import { SwitchGroup, Switch, SwitchLabel } from '@headlessui/vue'
export default {
components: {
SwitchGroup,
Switch,
SwitchLabel,
},
setup() {
const switchValue = ref(false)
return {
switchValue,
}
},
}
</script>
```
### Component API
#### Switch
```html
<Switch v-model="switchState">
<span class="sr-only">Enable notifications</span>
<!-- ... -->
</Switch>
```
##### Props
| Prop | Type | Default | Description |
| --------- | ------------------- | -------- | ------------------------------------------------------- |
| `as` | String \| Component | `button` | The element or component the `Switch` should render as. |
| `v-model` | `T` | | The switch value. |
##### Slot props
| Prop | Type | Description |
| --------- | ------- | ------------------------------------- |
| `checked` | Boolean | Whether or not the switch is checked. |
#### SwitchLabel
```html
<SwitchGroup>
<SwitchLabel>Enable notifications</SwitchLabel>
<Switch v-model="switchState">
<!-- ... -->
</Switch>
</SwitchGroup>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | ------- | ------------------------------------------------------------ |
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
#### SwitchGroup
```html
<SwitchGroup>
<SwitchLabel>Enable notifications</SwitchLabel>
<Switch v-model="switchState">
<!-- ... -->
</Switch>
</SwitchGroup>
```
##### Props
| Prop | Type | Default | Description |
| ---- | ------------------- | --------------------------------- | ------------------------------------------------------------ |
| `as` | String \| Component | `template` _(no wrapper element)_ | The element or component the `SwitchGroup` should render as. |
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