@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/dist/components/VvDialog/VvDialog.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
     title: StringConstructor;
     modelValue: {
         type: BooleanConstructor;
@@ -13,11 +13,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    labelClose: {
+        type: StringConstructor;
+        default: string;
+    };
     id: (StringConstructor | NumberConstructor)[];
-}, {
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>, {
     close: () => void;
     open: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     title: StringConstructor;
     modelValue: {
         type: BooleanConstructor;
@@ -32,14 +40,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    labelClose: {
+        type: StringConstructor;
+        default: string;
+    };
     id: (StringConstructor | NumberConstructor)[];
-}>> & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
     modelValue: boolean;
+    modifiers: string | string[];
     transition: string;
     keepOpen: boolean;
-}, {}>, {
+    labelClose: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     header?(_: {}): any;
     default?(_: {}): any;
     footer?(_: {}): any;

package/dist/components/VvDialog/index.d.ts

@@ -20,6 +20,7 @@ export declare const VvDialogProps: {
     };
     /**
      * Dialog size
+     * @deprecated use modifiers instead
      */
     size: StringConstructor;
     /**
@@ -29,5 +30,16 @@ export declare const VvDialogProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Close button label
+     */
+    labelClose: {
+        type: StringConstructor;
+        default: string;
+    };
     id: (StringConstructor | NumberConstructor)[];
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
 };

package/dist/components/VvDropdown/VvDropdown.es.js

@@ -1,8 +1,12 @@
-import { computed, defineComponent, provide, h, Fragment, unref, toRefs, useAttrs, ref, onMounted, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, vShow } from "vue";
+import { computed, useId, defineComponent, provide, h, Fragment, unref, toRefs, useAttrs, ref, onMounted, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, vShow } from "vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { uid } from "uid";
-import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke } from "@vueuse/core";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke } from "@vueuse/core";
 import mitt from "mitt";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -37,6 +41,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
   DropdownRole2["listbox"] = "listbox";
   DropdownRole2["menu"] = "menu";
@@ -47,13 +58,6 @@ var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
   DropdownItemRole2["presentation"] = "presentation";
   return DropdownItemRole2;
 })(DropdownItemRole || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
@@ -75,10 +79,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -91,44 +92,65 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -166,7 +188,8 @@ const DropdownProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -234,7 +257,8 @@ const DropdownProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 };
 ({
@@ -258,8 +282,23 @@ const DropdownProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 const VvDropdownProps = {
   ...IdProps,
   ...DropdownProps,
@@ -287,8 +326,10 @@ const VvDropdownProps = {
     validator: (value) => Object.values(DropdownRole).includes(value)
   }
 };
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
-function useProvideDropdownTrigger({
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
+}
+function useDropdownProvideTrigger({
   reference,
   id,
   expanded,
@@ -316,16 +357,16 @@ function useProvideDropdownTrigger({
     component
   };
 }
-function useProvideDropdownItem({
+function useDropdownProvideItem({
   role,
-  expanded
+  ...others
 }) {
   const itemRole = computed(
     () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
   provide(INJECTION_KEY_DROPDOWN_ITEM, {
     role: itemRole,
-    expanded
+    ...others
   });
   return { itemRole };
 }
@@ -362,6 +403,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
@@ -369,23 +412,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "before-enter",
     "after-leave",
     "enter",
-    "after-enter",
-    "enter-cancelled",
-    "before-leave",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
     "leave",
-    "leave-cancelled"
+    "leaveCancelled"
   ],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
     const attrs = useAttrs();
     const maxWidth = ref("auto");
     const maxHeight = ref("auto");
-    const localReferenceEl = ref(null);
+    const localReferenceEl = ref();
     const floatingEl = ref();
-    const arrowEl = ref(null);
-    const listEl = ref(null);
+    const arrowEl = ref();
+    const listEl = ref();
     const referenceEl = computed({
       get: () => props.reference ?? localReferenceEl.value,
       set: (newValue) => {
@@ -531,18 +575,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         modelValue.value = newValue;
       }
     });
-    const show = () => {
+    function show() {
       expanded.value = true;
-    };
-    const hide = () => {
+    }
+    function hide() {
       expanded.value = false;
-    };
-    const toggle = () => {
+    }
+    function toggle() {
       expanded.value = !expanded.value;
-    };
-    const init = (el) => {
+    }
+    function init(el) {
       referenceEl.value = el;
-    };
+    }
     __expose({
       toggle,
       show,
@@ -582,7 +626,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "aria-haspopup": true,
       "aria-expanded": expanded.value
     }));
-    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
       reference: referenceEl,
       id: hasId,
       expanded,
@@ -590,7 +634,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     bus.on("click", toggle);
     const { role, modifiers } = toRefs(props);
-    const { itemRole } = useProvideDropdownItem({ role, expanded });
     const bemCssClasses = useModifiers(
       "vv-dropdown",
       modifiers,
@@ -611,7 +654,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
       );
     }
-    const focusNext = () => {
+    function focusNext() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -634,8 +677,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
-    const focusPrev = () => {
+    }
+    function focusPrev() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -658,7 +701,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
+    }
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useDropdownProvideItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
     onKeyStroke("Escape", (e) => {
       if (expanded.value) {
         e.preventDefault();
@@ -686,76 +736,96 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const dropdownTransitionHandlers = {
       "before-enter": () => {
         emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
         emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("leave-cancelled");
+        emit("leaveCancelled");
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(VvDropdownTriggerProvider), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
-          ]),
-          _: 3
-        }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", {
-              ref_key: "floatingEl",
-              ref: floatingEl,
-              style: normalizeStyle(unref(dropdownPlacement)),
-              class: normalizeClass(unref(bemCssClasses))
-            }, [
-              props.arrow ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "arrowEl",
-                ref: arrowEl,
-                style: normalizeStyle(unref(arrowPlacement)),
-                class: "vv-dropdown__arrow"
-              }, null, 4)) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-              createElementVNode("div", mergeProps(unref(attrs), {
-                id: unref(hasId),
-                ref_key: "listEl",
-                ref: listEl,
-                tabindex: !unref(expanded) ? -1 : void 0,
-                role: unref(role),
-                "aria-labelledby": unref(hasAriaLabelledby),
-                class: "vv-dropdown__list"
-              }), [
-                renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
-                  role: unref(itemRole)
-                })))
-              ], 16, _hoisted_1),
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
-            ], 6), [
-              [vShow, unref(expanded)]
-            ])
-          ]),
-          _: 3
-        }, 16, ["name"])
-      ], 64);
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });

package/dist/components/VvDropdown/VvDropdown.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@floating-ui/vue"),require("uid"),require("@vueuse/core"),require("mitt")):"function"==typeof define&&define.amd?define(["vue","@floating-ui/vue","uid","@vueuse/core","mitt"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdown=t(e.vue,e.vue$1,e.uid,e.core,e.mitt)}(this,(function(e,t,o,r,l){"use strict";var a=(e=>(e.absolute="absolute",e.fixed="fixed",e))(a||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),u=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(u||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),d=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(d||{}),s=(e=>(e.listbox="listbox",e.menu="menu",e))(s||{}),f=(e=>(e.option="option",e.presentation="presentation",e))(f||{});const p=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),v=(Boolean,Boolean,Boolean,Boolean,{modifiers:[String,Array]});i.before;const m={id:[String,Number]},b={placement:{type:String,default:n.bottom,validator:e=>Object.values(n).includes(e)||Object.values(u).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(a).includes(e)},transitionName:{type:String},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};d.button;const g={...m,...b,...v,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:s.menu,validator:e=>Object.values(s).includes(e)}};const h=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:g,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(u,{expose:i,emit:d}){const v=u,{id:m}=e.toRefs(v),b=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.uid()))))(m),g=e.useAttrs(),y=e.ref("auto"),x=e.ref("auto"),w=e.ref(null),S=e.ref(),E=e.ref(null),k=e.ref(null),P=e.computed({get:()=>v.reference??w.value,set:e=>{w.value=e}}),B=e.ref(!1);e.onMounted((()=>{r.useMutationObserver(S.value,(()=>{var e;B.value="true"===(null==(e=window.getComputedStyle(S.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim())}),{attributeFilter:["style"],window:window})}));const O=e.computed((()=>{const e=[];if(v.autoPlacement?"boolean"==typeof v.autoPlacement?e.push(t.autoPlacement()):e.push(t.autoPlacement(v.autoPlacement)):v.flip&&("boolean"==typeof v.flip?e.push(t.flip({fallbackStrategy:"initialPlacement"})):e.push(t.flip(v.flip))),v.shift&&("boolean"==typeof v.shift?e.push(t.shift()):e.push(t.shift(v.shift))),v.size){const o=({availableWidth:e,availableHeight:t})=>{y.value=`${e}px`,x.value=`${t}px`};"boolean"==typeof v.size?e.push(t.size({apply:o})):e.push(t.size({...v.size,apply:o}))}return v.offset&&(e.push(t.offset(Number(v.offset))),["string","number"].includes(typeof v.offset)?e.push(t.offset(Number(v.offset))):e.push(t.offset(v.offset))),v.arrow&&e.push(t.arrow({element:E})),e})),{x:$,y:z,middlewareData:V,placement:j,strategy:C}=t.useFloating(P,S,{whileElementsMounted:(...e)=>t.autoUpdate(...e,{animationFrame:v.strategy===a.fixed}),placement:e.computed((()=>v.placement)),strategy:e.computed((()=>v.strategy)),middleware:O}),A=e.computed((()=>{var e;if(B.value)return;const t=v.triggerWidth&&P.value?`${null==(e=P.value)?void 0:e.offsetWidth}px`:void 0;return{position:C.value,top:`${z.value??0}px`,left:`${$.value??0}px`,maxWidth:t?void 0:y.value,maxHeight:x.value,width:t}})),N=e.computed((()=>j.value.split("-")[0])),D=e.computed((()=>{var e,t,o,r,l;if(B.value)return;const a={[n.top]:n.bottom,[n.right]:n.left,[n.bottom]:n.top,[n.left]:n.right}[N.value];return{left:void 0!==(null==(e=V.value.arrow)?void 0:e.x)?`${null==(t=V.value.arrow)?void 0:t.x}px`:void 0,top:void 0!==(null==(o=V.value.arrow)?void 0:o.y)?`${null==(r=V.value.arrow)?void 0:r.y}px`:void 0,[a]:-((null==(l=E.value)?void 0:l.offsetWidth)??0)/2+"px"}})),_=r.useVModel(v,"modelValue",d),F=e.ref(!1),R=e.computed({get:()=>_.value??F.value,set:e=>{void 0!==_.value?_.value=e:F.value=e}}),T=()=>{R.value=!0},W=()=>{R.value=!1},q=()=>{R.value=!R.value},K=e=>{P.value=e};i({toggle:q,show:T,hide:W,init:K,customPosition:B}),e.watch(R,(t=>{t&&v.autofocusFirst&&e.nextTick((()=>{const e=Y(S.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),r.onClickOutside(S,(()=>{!v.keepOpen&&R.value&&(R.value=!1)}),{ignore:[P]});const M=e.computed((()=>{var e,t;return(null==(t=null==(e=P.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),H=e.computed((()=>({"aria-controls":b.value,"aria-haspopup":!0,"aria-expanded":R.value}))),{component:U,bus:I}=function({reference:t,id:o,expanded:r,aria:a}){const n=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(p,{reference:t,id:o,expanded:r,aria:a,bus:n})},render(){var t,o;return e.h(e.Fragment,{},null==(o=(t=this.$slots).default)?void 0:o.call(t))}});return{bus:n,component:u}}({reference:P,id:b,expanded:R,aria:H});I.on("click",q);const{role:G,modifiers:J}=e.toRefs(v),{itemRole:L}=function({role:t,expanded:o}){const r=e.computed((()=>t.value===s.listbox?f.option:f.presentation));return e.provide(c,{role:r,expanded:o}),{itemRole:r}}({role:G,expanded:R}),Q=function(t,o,r){return e.computed((()=>{const l={[t]:!0},a="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{l[`${t}--${o}`]=e.unref(r.value[o])})),l}))}("vv-dropdown",J,e.computed((()=>({arrow:v.arrow})))),{focused:X}=r.useFocusWithin(S);function Y(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter((e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden"))):[]}r.onKeyStroke("Escape",(e=>{R.value&&(e.preventDefault(),W())})),r.onKeyStroke("ArrowDown",(t=>{R.value&&X.value&&(t.preventDefault(),e.nextTick((()=>{if(X.value){const e=Y(S.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),r.onKeyStroke("ArrowUp",(t=>{R.value&&X.value&&(t.preventDefault(),e.nextTick((()=>{if(X.value){const e=Y(S.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),r.onKeyStroke([" ","Enter"],(e=>{const t=e.target;R.value&&X.value&&t&&(null==t||t.click())}));const Z={"before-enter":()=>{d(R.value?"beforeExpand":"beforeCollapse"),d("before-enter")},"after-leave":()=>{d(R.value?"afterExpand":"afterCollapse"),d("after-leave")},enter:()=>{d("enter")},"after-enter":()=>{d("after-enter")},"enter-cancelled":()=>{d("enter-cancelled")},"before-leave":()=>{d("before-leave")},leave:()=>{d("leave")},"leave-cancelled":()=>{d("leave-cancelled")}};return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(U),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:K,show:T,hide:W,toggle:q,expanded:e.unref(R),aria:e.unref(H)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers(Z)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:S,style:e.normalizeStyle(e.unref(A)),class:e.normalizeClass(e.unref(Q))},[v.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:E,style:e.normalizeStyle(e.unref(D)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(R)}))),e.createElementVNode("div",e.mergeProps(e.unref(g),{id:e.unref(b),ref_key:"listEl",ref:k,tabindex:e.unref(R)?void 0:-1,role:e.unref(G),"aria-labelledby":e.unref(M),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(L)})))],16,h),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(R)})))],6),[[e.vShow,e.unref(R)]])])),_:3},16,["name"])],64))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@floating-ui/vue"),require("@vueuse/core"),require("mitt")):"function"==typeof define&&define.amd?define(["vue","@floating-ui/vue","@vueuse/core","mitt"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdown=t(e.vue,e.vue$1,e.core,e.mitt)}(this,(function(e,t,o,r){"use strict";var l=(e=>(e.local="local",e.session="session",e))(l||{}),a=(e=>(e.absolute="absolute",e.fixed="fixed",e))(a||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),u=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(u||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),d=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(d||{}),s=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(s||{}),f=(e=>(e.listbox="listbox",e.menu="menu",e))(f||{}),p=(e=>(e.option="option",e.presentation="presentation",e))(p||{});const c=Symbol.for("dropdownTrigger"),v=Symbol.for("dropdownItem"),m=(Boolean,Boolean,Boolean,Boolean,{modifiers:{type:[String,Array],default:void 0}});i.before;const b={id:[String,Number]},g={placement:{type:String,default:n.bottom,validator:e=>Object.values(n).includes(e)||Object.values(u).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(a).includes(e)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}};d.button,s.button,l.local;const h={...b,...g,...m,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:f.menu,validator:e=>Object.values(f).includes(e)}};const y=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:h,emits:["update:modelValue","beforeEnter","afterLeave","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(l,{expose:u,emit:i}){const d=l,s=i,{id:m}=e.toRefs(d),b=function(t){return e.computed((()=>String((null==t?void 0:t.value)||e.useId())))}(m),g=e.useAttrs(),h=e.ref("auto"),x=e.ref("auto"),w=e.ref(),S=e.ref(),E=e.ref(),k=e.ref(),P=e.computed({get:()=>d.reference??w.value,set:e=>{w.value=e}}),B=e.ref(!1);e.onMounted((()=>{o.useMutationObserver(S.value,(()=>{var e;B.value="true"===(null==(e=window.getComputedStyle(S.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim())}),{attributeFilter:["style"],window:window})}));const O=e.computed((()=>{const e=[];if(d.autoPlacement?"boolean"==typeof d.autoPlacement?e.push(t.autoPlacement()):e.push(t.autoPlacement(d.autoPlacement)):d.flip&&("boolean"==typeof d.flip?e.push(t.flip({fallbackStrategy:"initialPlacement"})):e.push(t.flip(d.flip))),d.shift&&("boolean"==typeof d.shift?e.push(t.shift()):e.push(t.shift(d.shift))),d.size){const o=({availableWidth:e,availableHeight:t})=>{h.value=`${e}px`,x.value=`${t}px`};"boolean"==typeof d.size?e.push(t.size({apply:o})):e.push(t.size({...d.size,apply:o}))}return d.offset&&(e.push(t.offset(Number(d.offset))),["string","number"].includes(typeof d.offset)?e.push(t.offset(Number(d.offset))):e.push(t.offset(d.offset))),d.arrow&&e.push(t.arrow({element:E})),e})),{x:$,y:C,middlewareData:z,placement:V,strategy:j}=t.useFloating(P,S,{whileElementsMounted:(...e)=>t.autoUpdate(...e,{animationFrame:d.strategy===a.fixed}),placement:e.computed((()=>d.placement)),strategy:e.computed((()=>d.strategy)),middleware:O}),A=e.computed((()=>{var e;if(B.value)return;const t=d.triggerWidth&&P.value?`${null==(e=P.value)?void 0:e.offsetWidth}px`:void 0;return{position:j.value,top:`${C.value??0}px`,left:`${$.value??0}px`,maxWidth:t?void 0:h.value,maxHeight:x.value,width:t}})),N=e.computed((()=>V.value.split("-")[0])),D=e.computed((()=>{var e,t,o,r,l;if(B.value)return;const a={[n.top]:n.bottom,[n.right]:n.left,[n.bottom]:n.top,[n.left]:n.right}[N.value];return{left:void 0!==(null==(e=z.value.arrow)?void 0:e.x)?`${null==(t=z.value.arrow)?void 0:t.x}px`:void 0,top:void 0!==(null==(o=z.value.arrow)?void 0:o.y)?`${null==(r=z.value.arrow)?void 0:r.y}px`:void 0,[a]:-((null==(l=E.value)?void 0:l.offsetWidth)??0)/2+"px"}})),_=o.useVModel(d,"modelValue",s),F=e.ref(!1),R=e.computed({get:()=>_.value??F.value,set:e=>{void 0!==_.value?_.value=e:F.value=e}});function T(){R.value=!0}function W(){R.value=!1}function L(){R.value=!R.value}function q(e){P.value=e}u({toggle:L,show:T,hide:W,init:q,customPosition:B}),e.watch(R,(t=>{t&&d.autofocusFirst&&e.nextTick((()=>{const e=X(S.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),o.onClickOutside(S,(()=>{!d.keepOpen&&R.value&&(R.value=!1)}),{ignore:[P]});const H=e.computed((()=>{var e,t;return(null==(t=null==(e=P.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),K=e.computed((()=>({"aria-controls":b.value,"aria-haspopup":!0,"aria-expanded":R.value}))),{component:M,bus:I}=function({reference:t,id:o,expanded:l,aria:a}){const n=r(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(c,{reference:t,id:o,expanded:l,aria:a,bus:n})},render(){var t,o;return e.h(e.Fragment,{},null==(o=(t=this.$slots).default)?void 0:o.call(t))}});return{bus:n,component:u}}({reference:P,id:b,expanded:R,aria:K});I.on("click",L);const{role:U,modifiers:G}=e.toRefs(d),J=function(t,o,r){return e.computed((()=>{const l={[t]:!0},a="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{l[`${t}--${o}`]=e.unref(r.value[o])})),l}))}("vv-dropdown",G,e.computed((()=>({arrow:d.arrow})))),{focused:Q}=o.useFocusWithin(S);function X(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter((e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden"))):[]}const Y=o.useElementHover(S),{itemRole:Z}=function({role:t,...o}){const r=e.computed((()=>t.value===f.listbox?p.option:p.presentation));return e.provide(v,{role:r,...o}),{itemRole:r}}({role:U,expanded:R,focused:Q,hovered:Y});o.onKeyStroke("Escape",(e=>{R.value&&(e.preventDefault(),W())})),o.onKeyStroke("ArrowDown",(t=>{R.value&&Q.value&&(t.preventDefault(),e.nextTick((()=>{if(Q.value){const e=X(S.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),o.onKeyStroke("ArrowUp",(t=>{R.value&&Q.value&&(t.preventDefault(),e.nextTick((()=>{if(Q.value){const e=X(S.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),o.onKeyStroke([" ","Enter"],(e=>{const t=e.target;R.value&&Q.value&&t&&(null==t||t.click())}));const ee={"before-enter":()=>{s(R.value?"beforeExpand":"beforeCollapse"),s("beforeEnter")},"after-leave":()=>{s(R.value?"afterExpand":"afterCollapse"),s("afterLeave")},enter:()=>{s("enter")},"after-enter":()=>{s("afterEnter")},"enter-cancelled":()=>{s("enterCancelled")},"before-leave":()=>{s("beforeLeave")},leave:()=>{s("leave")},"leave-cancelled":()=>{s("leaveCancelled")}};return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(M),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:q,show:T,hide:W,toggle:L,expanded:e.unref(R),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers(ee),{persisted:""}),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:S,style:e.normalizeStyle(e.unref(A)),class:e.normalizeClass(e.unref(J))},[d.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:E,style:e.normalizeStyle(e.unref(D)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(R)}))),e.createElementVNode("div",e.mergeProps(e.unref(g),{id:e.unref(b),ref_key:"listEl",ref:k,tabindex:e.unref(R)?void 0:-1,role:e.unref(U),"aria-labelledby":e.unref(H),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(Z)})))],16,y),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(R)})))],6),[[e.vShow,e.unref(R)]])])),_:3},16,["name"])],64))}})}));