@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

package/dist/components/VvDialog/VvDialog.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=o(e.vue,e.vue$1,e.core)}(this,(function(e,o,t){"use strict";const n={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}};var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{});const a=Symbol.for("volver");const s=e.defineComponent({name:"VvIcon",props:n,setup(t){const n=t,r=e.ref(!0),l=e.inject(a),{modifiers:i}=e.toRefs(n),s=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-icon",i),u=e.computed((()=>n.provider||(null==l?void 0:l.iconsProvider))),c=e.computed((()=>{const e=n.name??"",t=`@${u.value}:${n.prefix}:${n.name}`;return o.iconExists(e)?e:o.iconExists(t)?t:(null==l?void 0:l.iconsCollections.find((t=>{const n=`@${u.value}:${t.prefix}:${e}`;if(o.iconExists(n))return n})))||e}));function d(e){const t=function(e){let o=null;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");o=(new e).window}return(o?new o.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),r=(null==t?void 0:t.innerHTML.trim())||"";t&&r&&o.addIcon(`@${u.value}:${n.prefix}:${n.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return l&&(n.src&&!o.iconExists(`@${u.value}:${n.prefix}:${n.name}`)?(r.value=!1,l.fetchIcon(n.src).then((e=>{e&&(d(e),r.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):n.svg&&d(n.svg)),(t,n)=>e.unref(r)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(s)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:t.rotate,color:t.color,onLoad:t.onLoad,icon:e.unref(c)}),null,16,["class"])):e.createCommentVNode("",!0)}});Boolean,Boolean,Boolean;l.before;const u={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const c={...u,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},d={key:0,class:"vv-dialog__header"},f={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:c,emits:["open","close","update:modelValue"],setup(o,{expose:n,emit:r}){const l=o,i=e.ref(!1),a=e.computed({get:()=>l.modelValue??i.value,set(e){void 0===l.modelValue&&(i.value=e),r("update:modelValue",e)}}),u=e.ref(!0),c=e.ref(null),p=e.computed((()=>{const{id:e}=l;return{id:e,open:u.value}})),m=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),g=e.computed((()=>`vv-dialog--${l.transition}`)),h={"before-enter":()=>{u.value=!0,r("open")},"after-leave":()=>{u.value=!1,r("close")}};function y(){a.value=!1}return t.onClickOutside(c,(()=>{l.autoClose&&(a.value=!1)})),n({close:y,open:function(){a.value=!0}}),t.onKeyStroke("Escape",(e=>{a.value&&(e.preventDefault(),y())})),(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(g)},e.toHandlers(h)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(p),{class:e.unref(m)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:c,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",d,[e.renderSlot(o.$slots,"header",{},(()=>[e.createTextVNode(e.toDisplayString(o.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:y},[e.createVNode(s,{name:"close"})],32)]))])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(a)]])])),_:3},16,["name"]))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=o(e.vue,e.vue$1,e.core)}(this,(function(e,o,t){"use strict";const n={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}};var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{});const a=Symbol.for("volver");const s=e.defineComponent({name:"VvIcon",props:n,setup(t){const n=t,r=e.computed((()=>"string"==typeof n.rotate?parseFloat(n.rotate):n.rotate)),l=e.ref(!0),i=e.inject(a),{modifiers:s}=e.toRefs(n),u=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-icon",s),c=e.computed((()=>n.provider||(null==i?void 0:i.iconsProvider))),d=e.computed((()=>{const e=n.name??"",t=`@${c.value}:${n.prefix}:${e}`;if(o.iconExists(t))return t;const r=null==i?void 0:i.iconsCollections.find((t=>{const n=`@${c.value}:${t.prefix}:${e}`;return o.iconExists(n)}));return r?`@${c.value}:${r.prefix}:${e}`:e}));function f(e){const t=function(e){let o;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");o=(new e).window}return(o?new o.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),r=(null==t?void 0:t.innerHTML.trim())||"";t&&r&&o.addIcon(`@${c.value}:${n.prefix}:${n.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&n.src&&!o.iconExists(`@${c.value}:${n.prefix}:${n.name}`)&&(l.value=!1,i.fetchIcon(n.src).then((e=>{e&&(f(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),n.svg&&f(n.svg),(t,n)=>e.unref(l)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:e.unref(r),color:t.color,onLoad:t.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}});Boolean,Boolean,Boolean;l.before;const u={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const c={...u,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1}},d={key:0,class:"vv-dialog__header"},f={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:c,emits:["open","close","update:modelValue"],setup(o,{expose:n,emit:r}){const l=o,i=e.ref(),a=e.ref(!1),u=e.computed({get:()=>l.modelValue??a.value,set(e){void 0===l.modelValue&&(a.value=e),r("update:modelValue",e)}}),c=e.ref(null),p=e.computed((()=>{const{id:e}=l;return{id:e}})),m=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),g=e.computed((()=>`vv-dialog--${l.transition}`)),h={"before-enter":()=>{var e;null==(e=i.value)||e.showModal(),r("open")},"after-leave":()=>{var e;null==(e=i.value)||e.close(),r("close")}};function y(){u.value=!1}return t.onClickOutside(c,(()=>{l.keepOpen||(u.value=!1)})),n({close:y,open:function(){u.value=!0}}),t.onKeyStroke("Escape",(e=>{u.value&&(e.preventDefault(),y())})),(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(g)},e.toHandlers(h)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(p),{ref_key:"dialogEl",ref:i,class:e.unref(m)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:c,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",d,[e.renderSlot(o.$slots,"header",{},(()=>[e.createTextVNode(e.toDisplayString(o.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:y},[e.createVNode(s,{name:"close"})],32)]))])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(u)]])])),_:3},16,["name"]))}})}));

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

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     size: StringConstructor;
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -28,7 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     size: StringConstructor;
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -37,12 +37,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
-    autoClose: boolean;
     transition: string;
-}>, {
-    header: (_: {}) => any;
-    default: (_: {}) => any;
-    footer: (_: {}) => any;
+    keepOpen: boolean;
+}, {}>, {
+    header?(_: {}): any;
+    default?(_: {}): any;
+    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -23,9 +23,9 @@ export declare const VvDialogProps: {
      */
     size: StringConstructor;
     /**
-     * Close dialog on click outside
+     * Keep open dialog on click outside
      */
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };

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

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, Fragment, provide, unref, toRefs, useAttrs, ref, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, mergeProps, vShow } from "vue";
+import { computed, defineComponent, provide, h, Fragment, unref, toRefs, useAttrs, ref, 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 { nanoid } from "nanoid";
 import { useVModel, onClickOutside, useFocusWithin, onKeyStroke } from "@vueuse/core";
@@ -49,8 +49,12 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   AnchorTarget2["_top"] = "_top";
   return AnchorTarget2;
 })(AnchorTarget || {});
-const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -206,11 +210,11 @@ const DropdownProps = {
     default: false
   },
   /**
-   * Close dropdown on click outside
+   * Keep open dropdown on click outside
    */
-  autoClose: {
+  keepOpen: {
     type: Boolean,
-    default: true
+    default: false
   },
   /**
    * Autofocus first item on dropdown open
@@ -278,19 +282,14 @@ function useProvideDropdownTrigger({
   const bus = mitt();
   const component = defineComponent({
     name: "VvDropdownTriggerProvider",
-    provide() {
-      return {
-        [INJECTION_KEY_DROPDOWN_TRIGGER]: {
-          reference,
-          id,
-          expanded,
-          aria,
-          bus
-        }
-      };
-    },
     setup() {
-      return {};
+      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+        reference,
+        id,
+        expanded,
+        aria,
+        bus
+      });
     },
     render() {
       var _a, _b;
@@ -346,8 +345,14 @@ const __default__ = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvDropdownProps,
-  emits: ["update:modelValue"],
-  setup(__props, { expose, emit }) {
+  emits: [
+    "update:modelValue",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse"
+  ],
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -492,7 +497,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
-    expose({ toggle, show, hide, init });
+    __expose({ toggle, show, hide, init });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -508,7 +513,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -617,6 +622,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         activeElement.click();
       }
     });
+    const onTransitionBeforeEnter = () => {
+      emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+    };
+    const onTransitionAfterLeave = () => {
+      emit(expanded.value ? "afterExpand" : "afterCollapse");
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(VvDropdownTriggerProvider), null, {
@@ -625,7 +636,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        createVNode(Transition, { name: _ctx.transitionName }, {
+        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers({
+          beforeEnter: onTransitionBeforeEnter,
+          onAfterLeave: onTransitionAfterLeave
+        })), {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
               ref_key: "floatingEl",
@@ -641,7 +655,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "vv-dropdown__arrow"
               }, null, 4)) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-              createElementVNode("ul", mergeProps(unref(attrs), {
+              createElementVNode("div", mergeProps(unref(attrs), {
                 id: unref(hasId),
                 ref_key: "listEl",
                 ref: listEl,
@@ -660,7 +674,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["name"])
+        }, 16, ["name"])
       ], 64);
     };
   }

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("nanoid"),require("@vueuse/core"),require("mitt")):"function"==typeof define&&define.amd?define(["vue","@floating-ui/vue","nanoid","@vueuse/core","mitt"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdown=t(e.vue,e.vue$1,e.nanoid,e.core,e.mitt)}(this,(function(e,t,o,l,a){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(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))(n||{}),u=(e=>(e.before="before",e.after="after",e))(u||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),d=(e=>(e.listbox="listbox",e.menu="menu",e))(d||{}),s=(e=>(e.option="option",e.presentation="presentation",e))(s||{});const f=Symbol.for("dropdownTrigger"),p=Symbol.for("dropdownItem"),c=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});u.before;const v={id:[String,Number]},m={placement:{type:String,default:r.bottom,validator:e=>Object.values(r).includes(e)||Object.values(n).includes(e)},strategy:{type:String,default:"absolute",validator:e=>["fixed","absolute"].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},autoClose:{type:Boolean,default:!0},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean}};i.button;const b={...v,...c,...m,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:d.menu,validator:e=>Object.values(d).includes(e)}};const h=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:b,emits:["update:modelValue"],setup(r,{expose:n,emit:u}){const i=r,{id:c}=e.toRefs(i),v=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(c),m=e.useAttrs(),b=e.ref("auto"),g=e.ref("auto"),y=e.ref(null),x=e.ref(null),w=e.ref(null),S=e.ref(null),E=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.computed((()=>{const e=[];if(i.autoPlacement?"boolean"==typeof i.autoPlacement?e.push(t.autoPlacement()):e.push(t.autoPlacement(i.autoPlacement)):i.flip&&("boolean"==typeof i.flip?e.push(t.flip()):e.push(t.flip(i.flip))),i.shift&&("boolean"==typeof i.shift?e.push(t.shift()):e.push(t.shift(i.shift))),i.size){const o=({availableWidth:e,availableHeight:t})=>{b.value=`${e}px`,g.value=`${t}px`};"boolean"==typeof i.size?e.push(t.size({apply:o})):e.push(t.size({...i.size,apply:o}))}return i.offset&&(e.push(t.offset(Number(i.offset))),["string","number"].includes(typeof i.offset)?e.push(t.offset(Number(i.offset))):e.push(t.offset(i.offset))),i.arrow&&e.push(t.arrow({element:w})),e})),{x:$,y:B,strategy:P,middlewareData:z,placement:O}=t.useFloating(E,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:k}),V=e.computed((()=>({position:P.value,top:`${B.value??0}px`,left:`${$.value??0}px`,maxWidth:b.value,maxHeight:g.value,width:i.triggerWidth&&E.value?`${E.value.offsetWidth}px`:void 0}))),j=e.computed((()=>O.value.split("-")[0])),A=e.computed((()=>({top:"bottom",right:"left",bottom:"top",left:"right"}[j.value]??"bottom"))),N=e.computed((()=>{var e,t,o,l;return["bottom","top"].includes(A.value)?{right:`${(null==(e=z.value.arrow)?void 0:e.x)??0}px`,[A.value]:-((null==(t=w.value)?void 0:t.offsetWidth)??0)/2+"px"}:{top:`${(null==(o=z.value.arrow)?void 0:o.y)??0}px`,[A.value]:-((null==(l=w.value)?void 0:l.offsetWidth)??0)/2+"px"}})),D=l.useVModel(i,"modelValue",u),C=e.ref(!1),_=e.computed({get:()=>D.value??C.value,set:e=>{void 0!==D.value?D.value=e:C.value=e}}),R=()=>{_.value=!0},T=()=>{_.value=!1},W=()=>{_.value=!_.value},q=e=>{E.value=e};n({toggle:W,show:R,hide:T,init:q}),e.watch(_,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Q(x.value);e.length>0&&e[0].focus()}))})),l.onClickOutside(x,(()=>{i.autoClose&&(_.value=!1)}),{ignore:[E]});const F=e.computed((()=>{var e,t;return(null==(t=null==(e=E.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),K=e.computed((()=>({"aria-controls":v.value,"aria-haspopup":!0,"aria-expanded":_.value}))),{component:H,bus:M}=function({reference:t,id:o,expanded:l,aria:r}){const n=a(),u=e.defineComponent({name:"VvDropdownTriggerProvider",provide:()=>({[f]:{reference:t,id:o,expanded:l,aria:r,bus:n}}),setup:()=>({}),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:E,id:v,expanded:_,aria:K});M.on("click",W);const{role:U,modifiers:I}=e.toRefs(i),{itemRole:G}=function({role:t,expanded:o}){const l=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:l,expanded:o}),{itemRole:l}}({role:U,expanded:_}),J=function(t,o,l){return e.computed((()=>{const a={[t]:!0},r="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return r&&Array.isArray(r)&&r.forEach((e=>{e&&(a[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{a[`${t}--${o}`]=e.unref(l.value[o])})),a}))}("vv-dropdown",I,e.computed((()=>({arrow:i.arrow})))),{focused:L}=l.useFocusWithin(x);function Q(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"))):[]}return l.onKeyStroke("Escape",(e=>{_.value&&(e.preventDefault(),T())})),l.onKeyStroke("ArrowDown",(t=>{_.value&&L.value&&(t.preventDefault(),e.nextTick((()=>{if(L.value){const e=Q(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus():e[0].focus()}})))})),l.onKeyStroke("ArrowUp",(t=>{_.value&&L.value&&(t.preventDefault(),e.nextTick((()=>{if(L.value){const e=Q(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus():e[e.length-1].focus()}})))})),l.onKeyStroke([" ","Enter"],(e=>{if(_.value&&L.value){e.preventDefault();document.activeElement.click()}})),(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(H),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:q,show:R,hide:T,toggle:W,expanded:e.unref(_),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,{name:t.transitionName},{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(V)),class:e.normalizeClass(e.unref(J))},[i.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:w,style:e.normalizeStyle(e.unref(N)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)}))),e.createElementVNode("ul",e.mergeProps(e.unref(m),{id:e.unref(v),ref_key:"listEl",ref:S,tabindex:e.unref(_)?void 0:-1,role:e.unref(U),"aria-labelledby":e.unref(F),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(G)})))],16,h),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)})))],6),[[e.vShow,e.unref(_)]])])),_:3},8,["name"])],64))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@floating-ui/vue"),require("nanoid"),require("@vueuse/core"),require("mitt")):"function"==typeof define&&define.amd?define(["vue","@floating-ui/vue","nanoid","@vueuse/core","mitt"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdown=t(e.vue,e.vue$1,e.nanoid,e.core,e.mitt)}(this,(function(e,t,o,a,r){"use strict";var l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),n=(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))(n||{}),u=(e=>(e.before="before",e.after="after",e))(u||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),d=(e=>(e.listbox="listbox",e.menu="menu",e))(d||{}),s=(e=>(e.option="option",e.presentation="presentation",e))(s||{});const f=Symbol.for("dropdownTrigger"),p=Symbol.for("dropdownItem"),c=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});u.before;const v={id:[String,Number]},m={placement:{type:String,default:l.bottom,validator:e=>Object.values(l).includes(e)||Object.values(n).includes(e)},strategy:{type:String,default:"absolute",validator:e=>["fixed","absolute"].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}};i.button;const b={...v,...c,...m,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:d.menu,validator:e=>Object.values(d).includes(e)}};const h=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:b,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse"],setup(l,{expose:n,emit:u}){const i=l,{id:c}=e.toRefs(i),v=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(c),m=e.useAttrs(),b=e.ref("auto"),g=e.ref("auto"),y=e.ref(null),x=e.ref(null),w=e.ref(null),E=e.ref(null),S=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.computed((()=>{const e=[];if(i.autoPlacement?"boolean"==typeof i.autoPlacement?e.push(t.autoPlacement()):e.push(t.autoPlacement(i.autoPlacement)):i.flip&&("boolean"==typeof i.flip?e.push(t.flip()):e.push(t.flip(i.flip))),i.shift&&("boolean"==typeof i.shift?e.push(t.shift()):e.push(t.shift(i.shift))),i.size){const o=({availableWidth:e,availableHeight:t})=>{b.value=`${e}px`,g.value=`${t}px`};"boolean"==typeof i.size?e.push(t.size({apply:o})):e.push(t.size({...i.size,apply:o}))}return i.offset&&(e.push(t.offset(Number(i.offset))),["string","number"].includes(typeof i.offset)?e.push(t.offset(Number(i.offset))):e.push(t.offset(i.offset))),i.arrow&&e.push(t.arrow({element:w})),e})),{x:P,y:$,strategy:B,middlewareData:O,placement:z}=t.useFloating(S,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:k}),A=e.computed((()=>({position:B.value,top:`${$.value??0}px`,left:`${P.value??0}px`,maxWidth:b.value,maxHeight:g.value,width:i.triggerWidth&&S.value?`${S.value.offsetWidth}px`:void 0}))),V=e.computed((()=>z.value.split("-")[0])),j=e.computed((()=>({top:"bottom",right:"left",bottom:"top",left:"right"}[V.value]??"bottom"))),C=e.computed((()=>{var e,t,o,a;return["bottom","top"].includes(j.value)?{right:`${(null==(e=O.value.arrow)?void 0:e.x)??0}px`,[j.value]:-((null==(t=w.value)?void 0:t.offsetWidth)??0)/2+"px"}:{top:`${(null==(o=O.value.arrow)?void 0:o.y)??0}px`,[j.value]:-((null==(a=w.value)?void 0:a.offsetWidth)??0)/2+"px"}})),N=a.useVModel(i,"modelValue",u),D=e.ref(!1),_=e.computed({get:()=>N.value??D.value,set:e=>{void 0!==N.value?N.value=e:D.value=e}}),R=()=>{_.value=!0},T=()=>{_.value=!1},W=()=>{_.value=!_.value},q=e=>{S.value=e};n({toggle:W,show:R,hide:T,init:q}),e.watch(_,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Q(x.value);e.length>0&&e[0].focus()}))})),a.onClickOutside(x,(()=>{i.keepOpen||(_.value=!1)}),{ignore:[S]});const F=e.computed((()=>{var e,t;return(null==(t=null==(e=S.value)?void 0:e.getAttribute)?void 0:t.call(e,"id"))??void 0})),K=e.computed((()=>({"aria-controls":v.value,"aria-haspopup":!0,"aria-expanded":_.value}))),{component:H,bus:M}=function({reference:t,id:o,expanded:a,aria:l}){const n=r(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(f,{reference:t,id:o,expanded:a,aria:l,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:S,id:v,expanded:_,aria:K});M.on("click",W);const{role:U,modifiers:I}=e.toRefs(i),{itemRole:L}=function({role:t,expanded:o}){const a=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:a,expanded:o}),{itemRole:a}}({role:U,expanded:_}),G=function(t,o,a){return e.computed((()=>{const r={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),a&&Object.keys(a.value).forEach((o=>{r[`${t}--${o}`]=e.unref(a.value[o])})),r}))}("vv-dropdown",I,e.computed((()=>({arrow:i.arrow})))),{focused:J}=a.useFocusWithin(x);function Q(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"))):[]}a.onKeyStroke("Escape",(e=>{_.value&&(e.preventDefault(),T())})),a.onKeyStroke("ArrowDown",(t=>{_.value&&J.value&&(t.preventDefault(),e.nextTick((()=>{if(J.value){const e=Q(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus():e[0].focus()}})))})),a.onKeyStroke("ArrowUp",(t=>{_.value&&J.value&&(t.preventDefault(),e.nextTick((()=>{if(J.value){const e=Q(x.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus():e[e.length-1].focus()}})))})),a.onKeyStroke([" ","Enter"],(e=>{if(_.value&&J.value){e.preventDefault();document.activeElement.click()}}));const X=()=>{u(_.value?"beforeExpand":"beforeCollapse")},Y=()=>{u(_.value?"afterExpand":"afterCollapse")};return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(e.unref(H),null,{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({init:q,show:R,hide:T,toggle:W,expanded:e.unref(_),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers({beforeEnter:X,onAfterLeave:Y})),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(A)),class:e.normalizeClass(e.unref(G))},[i.arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"arrowEl",ref:w,style:e.normalizeStyle(e.unref(C)),class:"vv-dropdown__arrow"},null,4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)}))),e.createElementVNode("div",e.mergeProps(e.unref(m),{id:e.unref(v),ref_key:"listEl",ref:E,tabindex:e.unref(_)?void 0:-1,role:e.unref(U),"aria-labelledby":e.unref(F),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(_)})))],6),[[e.vShow,e.unref(_)]])])),_:3},16,["name"])],64))}})}));

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

@@ -90,7 +90,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -108,7 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     show: () => void;
     hide: () => void;
     init: (el: HTMLElement) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse")[], "update:modelValue" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: undefined;
@@ -200,7 +200,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -215,8 +215,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     id: (StringConstructor | NumberConstructor)[];
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onBeforeExpand?: ((...args: any[]) => any) | undefined;
+    onBeforeCollapse?: ((...args: any[]) => any) | undefined;
+    onAfterExpand?: ((...args: any[]) => any) | undefined;
+    onAfterCollapse?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: boolean;
     shift: boolean | Partial<import("@floating-ui/vue").ShiftOptions & {
         rootBoundary: import("@floating-ui/vue").RootBoundary;
         elementContext: import("@floating-ui/vue").ElementContext;
@@ -225,6 +228,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
     reference: HTMLElement | null;
+    modelValue: boolean;
     role: "listbox" | "menu";
     flip: boolean | Partial<import("@floating-ui/vue").FlipOptions & {
         rootBoundary: import("@floating-ui/vue").RootBoundary;
@@ -233,9 +237,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
-    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
-    strategy: "fixed" | "absolute";
-    offset: string | import("@floating-ui/vue").OffsetOptions | undefined;
     size: boolean | Partial<{
         apply: (args: {
             x: number;
@@ -258,6 +259,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
+    placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+    strategy: "fixed" | "absolute";
+    offset: string | import("@floating-ui/vue").OffsetOptions | undefined;
     autoPlacement: boolean | Partial<import("@floating-ui/vue").AutoPlacementOptions & {
         rootBoundary: import("@floating-ui/vue").RootBoundary;
         elementContext: import("@floating-ui/vue").ElementContext;
@@ -266,11 +270,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
     arrow: boolean;
-    autoClose: boolean;
+    keepOpen: boolean;
     autofocusFirst: boolean;
     triggerWidth: boolean;
-}>, {
-    default: (_: {
+}, {}>, {
+    default?(_: {
         init: (el: HTMLElement) => void;
         show: () => void;
         hide: () => void;
@@ -281,16 +285,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
             'aria-haspopup': boolean;
             'aria-expanded': boolean;
         };
-    }) => any;
-    before: (_: {
+    }): any;
+    before?(_: {
         expanded: boolean;
-    }) => any;
-    items: (_: {
+    }): any;
+    items?(_: {
         role: import("../../constants").DropdownItemRole;
-    }) => any;
-    after: (_: {
+    }): any;
+    after?(_: {
         expanded: boolean;
-    }) => any;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts

@@ -6,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     href: StringConstructor;
     target: {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     href: StringConstructor;
     target: {
@@ -50,8 +50,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     rel: string;
     active: boolean;
     pressed: boolean;
-}>, {
-    default: (_: {}) => any;
+}, {}>, {
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts

@@ -1,5 +1,5 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
-    default: (_: {}) => any;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts

@@ -2,5 +2,5 @@ declare const _default: import("vue").DefineComponent<{
     label: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: (StringConstructor | NumberConstructor)[];
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts

@@ -36,13 +36,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     unselectable: boolean;
     selected: boolean;
-}>, {
-    default: (_: {}) => any;
-    hint: (_: {
+}, {}>, {
+    default?(_: {}): any;
+    hint?(_: {
         disabled: boolean;
         selected: boolean;
         unselectable: boolean;
-    }) => any;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -101,7 +101,7 @@ export declare const VvDropdownProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    autoClose: {
+    keepOpen: {
         type: BooleanConstructor;
         default: boolean;
     };

package/dist/components/VvDropdownAction/VvDropdownAction.es.js

@@ -51,9 +51,15 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   return AnchorTarget2;
 })(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
-const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -202,11 +208,11 @@ const ModifiersProps = {
     default: false
   },
   /**
-   * Close dropdown on click outside
+   * Keep open dropdown on click outside
    */
-  autoClose: {
+  keepOpen: {
     type: Boolean,
-    default: true
+    default: false
   },
   /**
    * Autofocus first item on dropdown open
@@ -258,11 +264,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const volver = useVolver();
     const element = ref(null);
-    expose({ $el: element });
+    __expose({ $el: element });
     const {
       reference: dropdownTriggerReference,
       bus: dropdownEventBus,
@@ -297,7 +303,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const toReturn = {
         ...dropdownAria == null ? void 0 : dropdownAria.value,
         "aria-pressed": pressed.value ? true : void 0,
-        role
+        role: role == null ? void 0 : role.value
       };
       switch (hasTag.value) {
         case ActionTag.a:
@@ -365,7 +371,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -387,7 +393,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
         ref_key: "element",
         ref: element,
         class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]

package/dist/components/VvDropdownAction/VvDropdownAction.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownAction=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),a=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(a||{}),s=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(s||{});const i=Symbol.for("volver"),d=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),f=Symbol.for("dropdownAction"),p={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(s).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:Boolean},m={active:Boolean},b={pressed:Boolean},y={label:[String,Number]},g={modifiers:[String,Array]};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const k={...v,...y,...b,...m,...p,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},h=k;const x=e.defineComponent({name:"VvAction",props:h,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=e.inject(i),a=e.ref(null);o({$el:a});const{reference:s,bus:c,aria:p,expanded:v}=e.inject(d,{});e.watch((()=>a.value),(e=>{s&&(s.value=e)}));const m=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(f,{}),y=e.computed((()=>{switch(!0){case n.disabled:return u.button;case void 0!==n.to:return(null==l?void 0:l.nuxt)?u.nuxtLink:u.routerLink;case void 0!==n.href:return u.a;default:return u.button}})),g=e.computed((()=>{const e={...null==p?void 0:p.value,"aria-pressed":!!m.value||void 0,role:b};switch(y.value){case u.a:return{...e,href:n.href,target:n.target,rel:n.rel};case u.routerLink:case u.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),k=e=>{n.disabled?e.preventDefault():(null==c||c.emit("click",e),r("click",e))},h=e=>{null==c||c.emit("mouseover",e),r("mouseover",e)},x=e=>{null==c||c.emit("mouseleave",e),r("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.mergeProps(e.unref(g),{ref_key:"element",ref:a,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:k,onMouseoverPassive:h,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const B=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:r,expanded:n}=e.inject(c,{}),l=e.ref(null);!function({expanded:t}){e.provide(f,{role:a.menuitem,expanded:t})}({expanded:n});const u=o.useElementHover(l),{focused:s}=o.useFocus(l),{focused:i}=o.useFocusWithin(l);return e.watch(u,(e=>{e&&(s.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(i)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...k,...g},setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-dropdown-action",r);return(t,o)=>(e.openBlock(),e.createBlock(B,null,{default:e.withCtx((()=>[e.createVNode(x,e.mergeProps({disabled:t.disabled,pressed:t.pressed,active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{class:e.unref(n)}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"])])),_:3}))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownAction=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),a=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(a||{}),i=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(i||{});const s=Symbol.for("volver"),d=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),f=Symbol.for("dropdownAction"),p={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(i).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:Boolean},m={active:Boolean},b={pressed:Boolean},y={label:[String,Number]},g={modifiers:[String,Array]};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const k={...v,...y,...b,...m,...p,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},h=k;const x=e.defineComponent({name:"VvAction",props:h,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=e.inject(s),a=e.ref(null);o({$el:a});const{reference:i,bus:c,aria:p,expanded:v}=e.inject(d,{});e.watch((()=>a.value),(e=>{i&&(i.value=e)}));const m=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(f,{}),y=e.computed((()=>{switch(!0){case n.disabled:return u.button;case void 0!==n.to:return(null==l?void 0:l.nuxt)?u.nuxtLink:u.routerLink;case void 0!==n.href:return u.a;default:return u.button}})),g=e.computed((()=>{const e={...null==p?void 0:p.value,"aria-pressed":!!m.value||void 0,role:null==b?void 0:b.value};switch(y.value){case u.a:return{...e,href:n.href,target:n.target,rel:n.rel};case u.routerLink:case u.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),k=e=>{n.disabled?e.preventDefault():(null==c||c.emit("click",e),r("click",e))},h=e=>{null==c||c.emit("mouseover",e),r("mouseover",e)},x=e=>{null==c||c.emit("mouseleave",e),r("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.mergeProps(e.unref(g),{ref_key:"element",ref:a,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:k,onMouseoverPassive:h,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const B=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:r,expanded:n}=e.inject(c,{}),l=e.ref(null);!function({expanded:t}){e.provide(f,{role:e.ref(a.menuitem),expanded:t})}({expanded:n});const u=o.useElementHover(l),{focused:i}=o.useFocus(l),{focused:s}=o.useFocusWithin(l);return e.watch(u,(e=>{e&&(i.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(i)||e.unref(s)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...k,...g},setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-dropdown-action",r);return(t,o)=>(e.openBlock(),e.createBlock(B,null,{default:e.withCtx((()=>[e.createVNode(x,e.mergeProps({disabled:t.disabled,pressed:t.pressed,active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{class:e.unref(n)}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"])])),_:3}))}})}));

package/dist/components/VvDropdownItem/VvDropdownItem.es.js

@@ -1,4 +1,4 @@
-import { inject, provide, defineComponent, ref, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
 var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
@@ -7,8 +7,12 @@ var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
-const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
-const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
@@ -16,7 +20,7 @@ function useProvideDropdownAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ActionRoles.menuitem,
+    role: ref(ActionRoles.menuitem),
     expanded
   });
 }
@@ -38,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
         ref_key: "element",
         ref: element,
         class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]

package/dist/components/VvDropdownItem/VvDropdownItem.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,n){"use strict";var t=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(t||{});const u=Symbol.for("dropdownItem"),r=Symbol.for("dropdownAction");return e.defineComponent({name:"VvDropdownItem",setup(o){const{role:i,expanded:d}=e.inject(u,{}),l=e.ref(null);!function({expanded:o}){e.provide(r,{role:t.menuitem,expanded:o})}({expanded:d});const s=n.useElementHover(l),{focused:f}=n.useFocus(l),{focused:c}=n.useFocusWithin(l);return e.watch(s,(e=>{e&&(f.value=!0)})),(o,n)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(i)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(f)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,n){"use strict";var t=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(t||{});const u=Symbol.for("dropdownItem"),r=Symbol.for("dropdownAction");return e.defineComponent({name:"VvDropdownItem",setup(o){const{role:d,expanded:i}=e.inject(u,{}),l=e.ref(null);!function({expanded:o}){e.provide(r,{role:e.ref(t.menuitem),expanded:o})}({expanded:i});const f=n.useElementHover(l),{focused:s}=n.useFocus(l),{focused:c}=n.useFocusWithin(l);return e.watch(f,(e=>{e&&(s.value=!0)})),(o,n)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(d)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));

package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js

@@ -177,11 +177,11 @@ const LabelProps = {
     default: false
   },
   /**
-   * Close dropdown on click outside
+   * Keep open dropdown on click outside
    */
-  autoClose: {
+  keepOpen: {
     type: Boolean,
-    default: true
+    default: false
   },
   /**
    * Autofocus first item on dropdown open