@volverjs/ui-vue 0.0.9-beta.1 → 0.0.9-beta.10

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

@@ -1,5 +1,9 @@
 import type { Option } from '../../types/generic';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: {
         type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
@@ -28,8 +32,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     placeholder: StringConstructor;
     searchable: BooleanConstructor;
+    searchFunction: {
+        type: globalThis.PropType<(search: string, options?: (string | Option)[] | undefined) => (string | Option)[]>;
+        default: undefined;
+    };
     searchPlaceholder: {
         type: StringConstructor;
         default: string;
@@ -77,9 +89,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         validator: (value: "fixed" | "absolute") => boolean;
     };
-    transitionName: {
-        type: StringConstructor;
-    };
     offset: {
         type: globalThis.PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
         default: number;
@@ -204,6 +213,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: {
         type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
@@ -232,8 +245,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     placeholder: StringConstructor;
     searchable: BooleanConstructor;
+    searchFunction: {
+        type: globalThis.PropType<(search: string, options?: (string | Option)[] | undefined) => (string | Option)[]>;
+        default: undefined;
+    };
     searchPlaceholder: {
         type: StringConstructor;
         default: string;
@@ -281,9 +302,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         validator: (value: "fixed" | "absolute") => boolean;
     };
-    transitionName: {
-        type: StringConstructor;
-    };
     offset: {
         type: globalThis.PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
         default: number;
@@ -410,6 +428,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
+    disabled: boolean;
+    options: (string | Option)[];
+    floating: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     shift: boolean | Partial<import("@floating-ui/core").ShiftOptions & {
         rootBoundary: import("@floating-ui/core").RootBoundary;
         elementContext: import("@floating-ui/core").ElementContext;
@@ -417,10 +439,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/core").Padding;
         boundary: import("@floating-ui/dom").Boundary;
     }> | undefined;
-    disabled: boolean;
-    options: (string | Option)[];
-    floating: boolean;
-    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     tabindex: string | number;
     unselectable: boolean;
     flip: boolean | Partial<import("@floating-ui/core").FlipOptions & {
@@ -430,6 +448,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/core").Padding;
         boundary: import("@floating-ui/dom").Boundary;
     }> | undefined;
+    closeLabel: string;
     iconPosition: "before" | "after";
     loading: boolean;
     loadingLabel: string;
@@ -465,6 +484,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabledKey: string | Function;
     placement: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
     strategy: "fixed" | "absolute";
+    transitionName: string;
     offset: string | import("@floating-ui/core").OffsetOptions | undefined;
     autoPlacement: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
         rootBoundary: import("@floating-ui/core").RootBoundary;
@@ -484,6 +504,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     noOptionsLabel: string;
     deselectActionLabel: string;
     searchable: boolean;
+    searchFunction: (search: string, options?: (string | Option)[] | undefined) => (string | Option)[];
     searchPlaceholder: string;
     debounceSearch: string | number;
     separator: string;
@@ -518,25 +539,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "no-results"?(_: {}): any;
     "dropdown::after"?(_: {}): any;
     hint?(_: {
-        modelValue: any;
+        modelValue: unknown;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
     }): any;
     loading?(_: {
-        modelValue: any;
+        modelValue: unknown;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
     }): any;
     valid?(_: {
-        modelValue: any;
+        modelValue: unknown;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
     }): any;
     invalid?(_: {
-        modelValue: any;
+        modelValue: unknown;
         valid: boolean;
         invalid: boolean;
         loading: boolean;

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

@@ -1,6 +1,14 @@
 import type { PropType } from 'vue';
+import type { Option } from '../../types/generic';
 export declare const VvComboboxEvents: string[];
 export declare const VvComboboxProps: {
+    /**
+     * Dropdown show / hide transition name
+     */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
      */
@@ -50,6 +58,13 @@ export declare const VvComboboxProps: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Label close button
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Select input placeholder
      */
@@ -58,6 +73,13 @@ export declare const VvComboboxProps: {
      * Use input text to search on options
      */
     searchable: BooleanConstructor;
+    /**
+     * Search function to filter options
+     */
+    searchFunction: {
+        type: PropType<(search: string, options?: (Option | string)[]) => (Option | string)[]>;
+        default: undefined;
+    };
     /**
      * On searchable select is the input search placeholder
      */
@@ -141,9 +163,6 @@ export declare const VvComboboxProps: {
         default: string;
         validator: (value: "fixed" | "absolute") => boolean;
     };
-    transitionName: {
-        type: StringConstructor;
-    };
     offset: {
         type: PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
         default: number;
@@ -227,7 +246,7 @@ export declare const VvComboboxProps: {
         validation: (value: import("../../constants").Position) => boolean;
     };
     options: {
-        type: PropType<(string | import("../../types/generic").Option)[]>;
+        type: PropType<(string | Option)[]>;
         default: () => never[];
     };
     labelKey: {
@@ -243,9 +262,7 @@ export declare const VvComboboxProps: {
         default: string;
     };
     modifiers: PropType<string | string[]>;
-    readonly: BooleanConstructor; /**
-     * Manage modelValue as string[] or object[]
-     */
+    readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: {

package/dist/components/VvDialog/VvDialog.es.js

@@ -1,6 +1,6 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, Transition, toHandlers, withCtx, withDirectives, createElementVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, vShow } from "vue";
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, Transition, toHandlers, withCtx, withDirectives, createElementVNode, withModifiers, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, vShow } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { onClickOutside, onKeyStroke } from "@vueuse/core";
+import { useVModel, onClickOutside } from "@vueuse/core";
 const VvIconProps = {
   /**
    * Color
@@ -436,6 +436,13 @@ const IdProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 });
 const VvDialogEvents = [
@@ -477,12 +484,13 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1 = {
+const _hoisted_1 = ["onCancel"];
+const _hoisted_2 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_2 = { class: "vv-dialog__content" };
-const _hoisted_3 = {
+const _hoisted_3 = { class: "vv-dialog__content" };
+const _hoisted_4 = {
   key: 1,
   class: "vv-dialog__footer"
 };
@@ -496,16 +504,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const dialogEl = ref();
+    const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
-    const modelValue = computed({
-      get() {
-        return props.modelValue ?? localModelValue.value;
-      },
-      set(value) {
-        if (props.modelValue === void 0) {
-          localModelValue.value = value;
+    const isOpened = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
         }
-        emit("update:modelValue", value);
+        modelValue.value = newValue;
       }
     });
     const modalWrapper = ref(null);
@@ -556,36 +564,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     onClickOutside(modalWrapper, () => {
       if (!props.keepOpen) {
-        modelValue.value = false;
+        close();
       }
     });
     function close() {
-      modelValue.value = false;
+      isOpened.value = false;
     }
     function open() {
-      modelValue.value = true;
+      isOpened.value = true;
     }
     __expose({ close, open });
-    onKeyStroke("Escape", (e) => {
-      if (modelValue.value) {
-        e.preventDefault();
+    const onCancel = () => {
+      if (!props.keepOpen) {
         close();
       }
-    });
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
           withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
             ref_key: "dialogEl",
             ref: dialogEl,
-            class: unref(dialogClass)
+            class: unref(dialogClass),
+            onCancel: withModifiers(onCancel, ["stop", "prevent"])
           }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,
               class: "vv-dialog__wrapper"
             }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
+              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
                   createTextVNode(toDisplayString(_ctx.title) + " ", 1),
                   createElementVNode("button", {
@@ -598,15 +606,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
                 renderSlot(_ctx.$slots, "default")
               ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
             ], 512)
-          ], 16), [
-            [vShow, unref(modelValue)]
+          ], 16, _hoisted_1), [
+            [vShow, unref(isOpened)]
           ])
         ]),
         _: 3

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 r={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 n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{});const i=Symbol.for("volver");const c=e.defineComponent({name:"VvIcon",props:r,setup(t){const r=t,n=e.computed((()=>"string"==typeof r.rotate?parseFloat(r.rotate):r.rotate)),l=e.ref(!0),a=e.inject(i),{modifiers:c}=e.toRefs(r),s=function(o,t,r){return e.computed((()=>{const n={[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&&(n[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{n[`${o}--${t}`]=e.unref(r.value[t])})),n}))}("vv-icon",c),u=e.computed((()=>r.provider||(null==a?void 0:a.iconsProvider))),d=e.computed((()=>{const e=r.name??"",t=`@${u.value}:${r.prefix}:${e}`;if(o.iconExists(t))return t;const n=null==a?void 0:a.iconsCollections.find((t=>{const r=`@${u.value}:${t.prefix}:${e}`;return o.iconExists(r)}));return n?`@${u.value}:${n.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),n=(null==t?void 0:t.innerHTML.trim())||"";t&&n&&o.addIcon(`@${u.value}:${r.prefix}:${r.name}`,{body:n,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return a&&r.src&&!o.iconExists(`@${u.value}:${r.prefix}:${r.name}`)&&(l.value=!1,a.fetchIcon(r.src).then((e=>{e&&(f(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),r.svg&&f(r.svg),(t,r)=>e.unref(l)?(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:e.unref(n),color:t.color,onLoad:t.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}});Boolean,Boolean,Boolean;l.before;const s={id:[String,Number]};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button;const u={...s,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:u,emits:["open","close","update:modelValue","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(o,{expose:r,emit:n}){const l=o,a=e.ref(),i=e.ref(!1),s=e.computed({get:()=>l.modelValue??i.value,set(e){void 0===l.modelValue&&(i.value=e),n("update:modelValue",e)}}),u=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=a.value)||e.showModal(),n("open"),n("before-enter")},"after-leave":()=>{var e;null==(e=a.value)||e.close(),n("close"),n("after-leave")},enter:()=>{n("enter")},"after-enter":()=>{n("after-enter")},"enter-cancelled":()=>{n("enter-cancelled")},"before-leave":()=>{n("before-leave")},leave:()=>{n("leave")},"leave-cancelled":()=>{n("leave-cancelled")}};function b(){s.value=!1}return t.onClickOutside(u,(()=>{l.keepOpen||(s.value=!1)})),r({close:b,open:function(){s.value=!0}}),t.onKeyStroke("Escape",(e=>{s.value&&(e.preventDefault(),b())})),(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:a,class:e.unref(m)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:u,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:b},[e.createVNode(c,{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(s)]])])),_: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 c=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:c}=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",c),u=e.computed((()=>n.provider||(null==i?void 0:i.iconsProvider))),d=e.computed((()=>{const e=n.name??"",t=`@${u.value}:${n.prefix}:${e}`;if(o.iconExists(t))return t;const r=null==i?void 0:i.iconsCollections.find((t=>{const n=`@${u.value}:${t.prefix}:${e}`;return o.iconExists(n)}));return r?`@${u.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(`@${u.value}:${n.prefix}:${n.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&n.src&&!o.iconExists(`@${u.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(s)},{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 s={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const u={...s,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1}},d=["onCancel"],f={key:0,class:"vv-dialog__header"},v={class:"vv-dialog__content"},p={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:u,emits:["open","close","update:modelValue","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(o,{expose:n,emit:r}){const l=o,i=e.ref(),a=t.useVModel(l,"modelValue",r),s=e.ref(!1),u=e.computed({get:()=>a.value??s.value,set:e=>{void 0!==a.value?a.value=e:s.value=e}}),m=e.ref(null),g=e.computed((()=>{const{id:e}=l;return{id:e}})),h=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),b=e.computed((()=>`vv-dialog--${l.transition}`)),y={"before-enter":()=>{var e;null==(e=i.value)||e.showModal(),r("open"),r("before-enter")},"after-leave":()=>{var e;null==(e=i.value)||e.close(),r("close"),r("after-leave")},enter:()=>{r("enter")},"after-enter":()=>{r("after-enter")},"enter-cancelled":()=>{r("enter-cancelled")},"before-leave":()=>{r("before-leave")},leave:()=>{r("leave")},"leave-cancelled":()=>{r("leave-cancelled")}};function $(){u.value=!1}t.onClickOutside(m,(()=>{l.keepOpen||$()})),n({close:$,open:function(){u.value=!0}});const B=()=>{l.keepOpen||$()};return(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(b)},e.toHandlers(y)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(g),{ref_key:"dialogEl",ref:i,class:e.unref(h),onCancel:e.withModifiers(B,["stop","prevent"])}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:m,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",f,[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:$},[e.createVNode(c,{name:"close"})],32)]))])):e.createCommentVNode("",!0),e.createElementVNode("div",v,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",p,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16,d),[[e.vShow,e.unref(u)]])])),_:3},16,["name"]))}})}));

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

@@ -106,6 +106,12 @@ const LabelProps = {
    */
   label: [String, Number]
 };
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
 ({
   /**
    * VvIcon name or props
@@ -237,18 +243,19 @@ const DropdownProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 });
 const VvDropdownProps = {
   ...IdProps,
   ...DropdownProps,
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: {
-    type: [String, Array],
-    default: "mobile"
-  },
+  ...ModifiersProps,
   /**
    * Show / hide dropdown programmatically
    */
@@ -459,7 +466,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       referenceEl,
       floatingEl,
       {
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: (...args) => {
+          return autoUpdate(...args, {
+            animationFrame: props.strategy === "fixed"
+          });
+        },
         placement: computed(() => props.placement),
         strategy: computed(() => props.strategy),
         middleware
@@ -546,7 +557,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (!props.keepOpen) {
+        if (!props.keepOpen && expanded.value) {
           expanded.value = false;
         }
       },
@@ -584,7 +595,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return [
         ...element.querySelectorAll(
-          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
         )
       ].filter(
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")

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,r,l){"use strict";var a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),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");Boolean,Boolean,Boolean;u.before;const c={id:[String,Number]},v={placement:{type:String,default:a.bottom,validator:e=>Object.values(a).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 m={...c,...v,modifiers:{type:[String,Array],default:"mobile"},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 b=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:m,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(a,{expose:n,emit:u}){const i=a,{id:c}=e.toRefs(i),v=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(c),m=e.useAttrs(),g=e.ref("auto"),h=e.ref("auto"),y=e.ref(null),x=e.ref(),w=e.ref(null),S=e.ref(null),E=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.ref(!1);e.onMounted((()=>{r.useMutationObserver(x.value,(()=>{var e;k.value="true"===(null==(e=window.getComputedStyle(x.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim())}),{attributeFilter:["style"],window:window})}));const P=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})=>{g.value=`${e}px`,h.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:O,middlewareData:z,placement:V}=t.useFloating(E,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:P}),C=e.computed((()=>{if(!k.value)return{position:O.value,top:`${B.value??0}px`,left:`${$.value??0}px`,maxWidth:g.value,maxHeight:h.value,width:i.triggerWidth&&E.value?`${E.value.offsetWidth}px`:void 0}})),j=e.computed((()=>V.value.split("-")[0])),A=e.computed((()=>{var e,t,o,r,l;if(k.value)return;const a={top:"bottom",right:"left",bottom:"top",left:"right"}[j.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=w.value)?void 0:l.offsetWidth)??0)/2+"px"}})),N=r.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},F=()=>{_.value=!_.value},W=e=>{E.value=e};n({toggle:F,show:R,hide:T,init:W,customPosition:k}),e.watch(_,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Q(x.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),r.onClickOutside(x,(()=>{i.keepOpen||(_.value=!1)}),{ignore:[E]});const q=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:M,bus:H}=function({reference:t,id:o,expanded:r,aria:a}){const n=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(f,{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:E,id:v,expanded:_,aria:K});H.on("click",F);const{role:U,modifiers:I}=e.toRefs(i),{itemRole:G}=function({role:t,expanded:o}){const r=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:r,expanded:o}),{itemRole:r}}({role:U,expanded:_}),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",I,e.computed((()=>({arrow:i.arrow})))),{focused:L}=r.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"))):[]}r.onKeyStroke("Escape",(e=>{_.value&&(e.preventDefault(),T())})),r.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({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),r.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({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),r.onKeyStroke([" ","Enter"],(e=>{const t=e.target;_.value&&L.value&&t&&(null==t||t.click())}));const X={"before-enter":()=>{u(_.value?"beforeExpand":"beforeCollapse"),u("before-enter")},"after-leave":()=>{u(_.value?"afterExpand":"afterCollapse"),u("after-leave")},enter:()=>{u("enter")},"after-enter":()=>{u("after-enter")},"enter-cancelled":()=>{u("enter-cancelled")},"before-leave":()=>{u("before-leave")},leave:()=>{u("leave")},"leave-cancelled":()=>{u("leave-cancelled")}};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:W,show:R,hide:T,toggle:F,expanded:e.unref(_),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers(X)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(C)),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(A)),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:S,tabindex:e.unref(_)?void 0:-1,role:e.unref(U),"aria-labelledby":e.unref(q),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(G)})))],16,b),e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(_)})))],6),[[e.vShow,e.unref(_)]])])),_:3},16,["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,r,l){"use strict";var a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),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:a.bottom,validator:e=>Object.values(a).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,...m,...c,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 g=["id","tabindex","role","aria-labelledby"];return e.defineComponent({name:"VvDropdown",inheritAttrs:!1,props:b,emits:["update:modelValue","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(a,{expose:n,emit:u}){const i=a,{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"),h=e.ref("auto"),y=e.ref(null),x=e.ref(),w=e.ref(null),S=e.ref(null),E=e.computed({get:()=>i.reference??y.value,set:e=>{y.value=e}}),k=e.ref(!1);e.onMounted((()=>{r.useMutationObserver(x.value,(()=>{var e;k.value="true"===(null==(e=window.getComputedStyle(x.value).getPropertyValue("--dropdown-custom-position"))?void 0:e.trim())}),{attributeFilter:["style"],window:window})}));const P=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`,h.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:O,middlewareData:z,placement:V}=t.useFloating(E,x,{whileElementsMounted:(...e)=>t.autoUpdate(...e,{animationFrame:"fixed"===i.strategy}),placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:P}),C=e.computed((()=>{if(!k.value)return{position:O.value,top:`${B.value??0}px`,left:`${$.value??0}px`,maxWidth:b.value,maxHeight:h.value,width:i.triggerWidth&&E.value?`${E.value.offsetWidth}px`:void 0}})),j=e.computed((()=>V.value.split("-")[0])),A=e.computed((()=>{var e,t,o,r,l;if(k.value)return;const a={top:"bottom",right:"left",bottom:"top",left:"right"}[j.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=w.value)?void 0:l.offsetWidth)??0)/2+"px"}})),N=r.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}}),F=()=>{_.value=!0},R=()=>{_.value=!1},T=()=>{_.value=!_.value},W=e=>{E.value=e};n({toggle:T,show:F,hide:R,init:W,customPosition:k}),e.watch(_,(t=>{t&&i.autofocusFirst&&e.nextTick((()=>{const e=Q(x.value);e.length>0&&e[0].focus({preventScroll:!0})}))})),r.onClickOutside(x,(()=>{!i.keepOpen&&_.value&&(_.value=!1)}),{ignore:[E]});const q=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:M,bus:H}=function({reference:t,id:o,expanded:r,aria:a}){const n=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",setup(){e.provide(f,{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:E,id:v,expanded:_,aria:K});H.on("click",T);const{role:U,modifiers:I}=e.toRefs(i),{itemRole:G}=function({role:t,expanded:o}){const r=e.computed((()=>t.value===d.listbox?s.option:s.presentation));return e.provide(p,{role:r,expanded:o}),{itemRole:r}}({role:U,expanded:_}),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",I,e.computed((()=>({arrow:i.arrow})))),{focused:L}=r.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"))):[]}r.onKeyStroke("Escape",(e=>{_.value&&(e.preventDefault(),R())})),r.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({preventScroll:!0}):e[0].focus({preventScroll:!0})}})))})),r.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({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})))})),r.onKeyStroke([" ","Enter"],(e=>{const t=e.target;_.value&&L.value&&t&&(null==t||t.click())}));const X={"before-enter":()=>{u(_.value?"beforeExpand":"beforeCollapse"),u("before-enter")},"after-leave":()=>{u(_.value?"afterExpand":"afterCollapse"),u("after-leave")},enter:()=>{u("enter")},"after-enter":()=>{u("after-enter")},"enter-cancelled":()=>{u("enter-cancelled")},"before-leave":()=>{u("before-leave")},leave:()=>{u("leave")},"leave-cancelled":()=>{u("leave-cancelled")}};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:W,show:F,hide:R,toggle:T,expanded:e.unref(_),aria:e.unref(K)})))])),_:3}),e.createVNode(e.Transition,e.mergeProps({name:t.transitionName},e.toHandlers(X)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"floatingEl",ref:x,style:e.normalizeStyle(e.unref(C)),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(A)),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:S,tabindex:e.unref(_)?void 0:-1,role:e.unref(U),"aria-labelledby":e.unref(q),class:"vv-dropdown__list"}),[e.renderSlot(t.$slots,"items",e.normalizeProps(e.guardReactiveProps({role:e.unref(G)})))],16,g),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

@@ -1,9 +1,5 @@
 import type { Ref } from 'vue';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    modifiers: {
-        type: globalThis.PropType<string | string[]>;
-        default: string;
-    };
     modelValue: {
         type: BooleanConstructor;
         default: undefined;
@@ -17,6 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: import("../../constants").DropdownRole;
         validator: (value: import("../../constants").DropdownRole) => boolean;
     };
+    modifiers: globalThis.PropType<string | string[]>;
     placement: {
         type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
         default: import("../../constants").Side;
@@ -114,10 +111,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     init: (el: HTMLElement) => void;
     customPosition: Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "before-enter" | "after-leave" | "enter" | "after-enter" | "enter-cancelled" | "before-leave" | "leave" | "leave-cancelled" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse")[], "update:modelValue" | "before-enter" | "after-leave" | "enter" | "after-enter" | "enter-cancelled" | "before-leave" | "leave" | "leave-cancelled" | "beforeExpand" | "beforeCollapse" | "afterExpand" | "afterCollapse", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modifiers: {
-        type: globalThis.PropType<string | string[]>;
-        default: string;
-    };
     modelValue: {
         type: BooleanConstructor;
         default: undefined;
@@ -131,6 +124,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: import("../../constants").DropdownRole;
         validator: (value: import("../../constants").DropdownRole) => boolean;
     };
+    modifiers: globalThis.PropType<string | string[]>;
     placement: {
         type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
         default: import("../../constants").Side;
@@ -236,6 +230,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onAfterExpand?: ((...args: any[]) => any) | undefined;
     onAfterCollapse?: ((...args: any[]) => any) | undefined;
 }, {
+    reference: HTMLElement | null;
+    modelValue: boolean;
     shift: boolean | Partial<import("@floating-ui/vue").ShiftOptions & {
         rootBoundary: import("@floating-ui/vue").RootBoundary;
         elementContext: import("@floating-ui/vue").ElementContext;
@@ -243,9 +239,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/vue").Padding;
         boundary: import("@floating-ui/vue").Boundary;
     }> | undefined;
-    reference: HTMLElement | null;
-    modelValue: boolean;
-    modifiers: string | string[];
     role: "listbox" | "menu";
     flip: boolean | Partial<import("@floating-ui/vue").FlipOptions & {
         rootBoundary: import("@floating-ui/vue").RootBoundary;

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

@@ -5,6 +5,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: import("../../constants").ButtonType;
         validator: (value: import("../../constants").ButtonType) => boolean;
     };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
     to: {
         type: (ObjectConstructor | StringConstructor)[];
     };
@@ -28,6 +32,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: import("../../constants").ButtonType;
         validator: (value: import("../../constants").ButtonType) => boolean;
     };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
     to: {
         type: (ObjectConstructor | StringConstructor)[];
     };
@@ -47,6 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>>, {
     disabled: boolean;
     type: "button" | "submit" | "reset";
+    ariaLabel: string;
     rel: string;
     active: boolean;
     pressed: boolean;

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

@@ -1,13 +1,6 @@
 import type { PropType } from 'vue';
 import { DropdownRole } from '../../constants';
 export declare const VvDropdownProps: {
-    /**
-     * Component BEM modifiers
-     */
-    modifiers: {
-        type: PropType<string | string[]>;
-        default: string;
-    };
     /**
      * Show / hide dropdown programmatically
      */
@@ -30,6 +23,7 @@ export declare const VvDropdownProps: {
         default: DropdownRole;
         validator: (value: DropdownRole) => boolean;
     };
+    modifiers: PropType<string | string[]>;
     placement: {
         type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
         default: import("../../constants").Side;

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

@@ -241,6 +241,13 @@ const ActionProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 };
 const VvActionEvents = ["click", "mouseover", "mouseleave"];
@@ -302,7 +309,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const hasProps = computed(() => {
       const toReturn = {
         ...dropdownAria == null ? void 0 : dropdownAria.value,
-        "aria-pressed": pressed.value ? true : void 0,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
         role: role == null ? void 0 : role.value
       };
       switch (hasTag.value) {