@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

@@ -1,7 +1,7 @@
 import type { Option } from '../../types/generic';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     noResultsLabel: {
@@ -57,8 +57,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownModifiers: {
         type: globalThis.PropType<string | string[]>;
     };
-    autoOpen: BooleanConstructor;
-    autoClose: BooleanConstructor;
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: (StringConstructor | NumberConstructor)[];
     placement: {
         type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
@@ -148,7 +154,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -184,9 +190,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -198,7 +204,7 @@ 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<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     noResultsLabel: {
@@ -254,8 +260,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     dropdownModifiers: {
         type: globalThis.PropType<string | string[]>;
     };
-    autoOpen: BooleanConstructor;
-    autoClose: BooleanConstructor;
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: (StringConstructor | NumberConstructor)[];
     placement: {
         type: globalThis.PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
@@ -345,7 +357,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -381,9 +393,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -396,8 +408,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | number | boolean | unknown[] | Record<string, any>;
-    disabled: boolean;
     shift: boolean | Partial<import("@floating-ui/core").ShiftOptions & {
         rootBoundary: import("@floating-ui/core").RootBoundary;
         elementContext: import("@floating-ui/core").ElementContext;
@@ -405,8 +415,12 @@ 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 & {
         rootBoundary: import("@floating-ui/core").RootBoundary;
         elementContext: import("@floating-ui/core").ElementContext;
@@ -417,19 +431,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     iconPosition: "before" | "after";
     loading: boolean;
     loadingLabel: string;
-    unselectable: boolean;
     multiple: boolean;
     readonly: boolean;
     hintLabel: string;
     invalid: boolean;
     valid: boolean;
-    tabindex: string | number;
-    labelKey: string | Function;
-    valueKey: string | Function;
-    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";
-    offset: string | import("@floating-ui/core").OffsetOptions | undefined;
     size: boolean | Partial<{
         apply: (args: {
             x: number;
@@ -452,6 +458,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         padding: import("@floating-ui/core").Padding;
         boundary: import("@floating-ui/dom").Boundary;
     }> | undefined;
+    labelKey: string | Function;
+    valueKey: string | Function;
+    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";
+    offset: string | import("@floating-ui/core").OffsetOptions | undefined;
     autoPlacement: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
         rootBoundary: import("@floating-ui/core").RootBoundary;
         elementContext: import("@floating-ui/core").ElementContext;
@@ -460,7 +472,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         boundary: import("@floating-ui/dom").Boundary;
     }> | undefined;
     arrow: boolean;
-    autoClose: boolean;
+    keepOpen: boolean;
     autofocusFirst: boolean;
     triggerWidth: boolean;
     deselectHintLabel: string;
@@ -477,55 +489,55 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     badges: boolean;
     badgeModifiers: string | string[];
     autoOpen: boolean;
-}>, {
-    'dropdown::before': (_: {}) => any;
-    before: (_: {
+}, {}>, {
+    "dropdown::before"?(_: {}): any;
+    before?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-    }) => any;
-    value: (_: {
+    }): any;
+    value?(_: {
         selectedOptions: (string | Option)[];
         onInput: (option: string | Option) => void;
-    }) => any;
-    after: (_: {
+    }): any;
+    after?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-    }) => any;
-    option: (_: {
+    }): any;
+    option?(_: {
         option: string | Option;
         selectedOptions: (string | Option)[];
         selected: boolean;
         disabled: boolean;
-    }) => any;
-    'no-options': (_: {}) => any;
-    'no-results': (_: {}) => any;
-    'dropdown::after': (_: {}) => any;
-    hint: (_: {
+    }): any;
+    "no-options"?(_: {}): any;
+    "no-results"?(_: {}): any;
+    "dropdown::after"?(_: {}): any;
+    hint?(_: {
         modelValue: any;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
-    }) => any;
-    loading: (_: {
+    }): any;
+    loading?(_: {
         modelValue: any;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
-    }) => any;
-    valid: (_: {
+    }): any;
+    valid?(_: {
         modelValue: any;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
-    }) => any;
-    invalid: (_: {
+    }): any;
+    invalid?(_: {
         modelValue: any;
         valid: boolean;
         invalid: boolean;
         loading: boolean;
-    }) => any;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -5,7 +5,7 @@ export declare const VvComboboxProps: {
      * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
      */
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     /**
@@ -118,11 +118,17 @@ export declare const VvComboboxProps: {
     /**
      * Open dropdown on focus
      */
-    autoOpen: BooleanConstructor;
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
-     * Close dropdown on select (not multiple)
+     * Keep open dropdown on single select
      */
-    autoClose: BooleanConstructor;
+    keepOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: (StringConstructor | NumberConstructor)[];
     placement: {
         type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
@@ -212,7 +218,7 @@ export declare const VvComboboxProps: {
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: PropType<"before" | "after">;
@@ -250,9 +256,9 @@ export declare const VvComboboxProps: {
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;

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

@@ -403,11 +403,11 @@ const IdProps = {
     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
@@ -461,9 +461,9 @@ const VvDialogProps = {
    */
   size: String,
   /**
-   * Close dialog on click outside
+   * Keep open dialog on click outside
    */
-  autoClose: { type: Boolean, default: true }
+  keepOpen: { type: Boolean, default: false }
 };
 const _hoisted_1 = {
   key: 0,
@@ -481,8 +481,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvDialogProps,
   emits: VvDialogEvents,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
+    const dialogEl = ref();
     const localModelValue = ref(false);
     const modelValue = computed({
       get() {
@@ -495,13 +496,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const htmlAttrIsOpen = ref(true);
     const modalWrapper = ref(null);
     const dialogAttrs = computed(() => {
       const { id } = props;
       return {
-        id,
-        open: htmlAttrIsOpen.value
+        id
       };
     });
     const dialogClass = computed(() => {
@@ -513,16 +512,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const transitioName = computed(() => `vv-dialog--${props.transition}`);
     const dialogTransitionHandlers = {
       "before-enter": () => {
-        htmlAttrIsOpen.value = true;
+        var _a;
+        (_a = dialogEl.value) == null ? void 0 : _a.showModal();
         emit("open");
       },
       "after-leave": () => {
-        htmlAttrIsOpen.value = false;
+        var _a;
+        (_a = dialogEl.value) == null ? void 0 : _a.close();
         emit("close");
       }
     };
     onClickOutside(modalWrapper, () => {
-      if (props.autoClose) {
+      if (!props.keepOpen) {
         modelValue.value = false;
       }
     });
@@ -532,7 +533,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function open() {
       modelValue.value = true;
     }
-    expose({ close, open });
+    __expose({ close, open });
     onKeyStroke("Escape", (e) => {
       if (modelValue.value) {
         e.preventDefault();
@@ -542,7 +543,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
-          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), { class: unref(dialogClass) }), [
+          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
+            ref_key: "dialogEl",
+            ref: dialogEl,
+            class: unref(dialogClass)
+          }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,

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 u=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:u}=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",u),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(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 c={...s,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)}}),s=e.ref(!0),c=e.ref(null),p=e.computed((()=>{const{id:e}=l;return{id:e,open:s.value}})),m=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),g=e.computed((()=>`vv-dialog--${l.transition}`)),h={"before-enter":()=>{s.value=!0,r("open")},"after-leave":()=>{s.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(u,{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, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, 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;
@@ -353,7 +352,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "afterExpand",
     "afterCollapse"
   ],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
@@ -498,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(() => {
@@ -514,7 +513,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onClickOutside(
       floatingEl,
       () => {
-        if (props.autoClose) {
+        if (!props.keepOpen) {
           expanded.value = false;
         }
       },
@@ -617,7 +616,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     onKeyStroke([" ", "Enter"], (e) => {
-      if (expanded.value && focused.value) {
+      if (expanded.value && focused.value && e.target !== document.activeElement) {
         e.preventDefault();
         const activeElement = document.activeElement;
         activeElement.click();
@@ -656,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,

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,a,l){"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","beforeExpand","beforeCollapse","afterExpand","afterCollapse"],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),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:z,placement:C}=t.useFloating(S,x,{whileElementsMounted:t.autoUpdate,placement:e.computed((()=>i.placement)),strategy:e.computed((()=>i.strategy)),middleware:k}),O=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}))),A=e.computed((()=>C.value.split("-")[0])),V=e.computed((()=>({top:"bottom",right:"left",bottom:"top",left:"right"}[A.value]??"bottom"))),j=e.computed((()=>{var e,t,o,a;return["bottom","top"].includes(V.value)?{right:`${(null==(e=z.value.arrow)?void 0:e.x)??0}px`,[V.value]:-((null==(t=w.value)?void 0:t.offsetWidth)??0)/2+"px"}:{top:`${(null==(o=z.value.arrow)?void 0:o.y)??0}px`,[V.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.autoClose&&(_.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:r}){const n=l(),u=e.defineComponent({name:"VvDropdownTriggerProvider",provide:()=>({[f]:{reference:t,id:o,expanded:a,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: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 l={[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&&(l[`${t}--${e}`]=!0)})),a&&Object.keys(a.value).forEach((o=>{l[`${t}--${o}`]=e.unref(a.value[o])})),l}))}("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(O)),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(j)),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: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))}})}));
+!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.target!==document.activeElement){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))}})}));