@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

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 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 v(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&&(v(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),n.svg&&v(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("v-if",!0)}});Boolean,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"],v={key:0,class:"vv-dialog__header"},f={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,o;(null==(e=i.value)?void 0:e.open)||null==(o=i.value)||o.showModal(),r("open"),r("before-enter")},"after-leave":()=>{var e,o;(null==(e=i.value)?void 0:e.open)&&(null==(o=i.value)||o.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),{persisted:""}),{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",v,[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("v-if",!0),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",p,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("v-if",!0)],512)],16,d),[[e.vShow,e.unref(u)]])])),_:3},16,["name"]))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=t(e.vue,e.core)}(this,function(e,t){"use strict";var o=(e=>(e.local="local",e.session="session",e))(o||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{});const i={modifiers:{type:[String,Array],default:void 0}};r.before;const s={id:[String,Number]};l.bottom,n.button,a.button,o.local;const u={...i,...s,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1},labelClose:{type:String,default:"Close"}};const d={key:0,class:"vv-dialog__header"},c=["aria-label","title"],f={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:u,emits:["open","close","update:modelValue","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(o,{expose:l,emit:r}){const n=o,a=r,i=e.ref(),s=t.useVModel(n,"modelValue",a),u=e.ref(!1),p=e.computed({get:()=>s.value??u.value,set:e=>{void 0!==s.value?s.value=e:u.value=e}}),m=e.ref(null),{modifiers:b}=e.toRefs(n),g=function(t,o,l){return e.computed(()=>{const r={[t]:!0},n="string"==typeof o?.value?o.value.split(" "):o?.value;return n&&Array.isArray(n)&&n.forEach(e=>{e&&(r[`${t}--${e}`]=!0)}),l&&Object.keys(l.value).forEach(o=>{r[`${t}--${o}`]=e.unref(l.value[o])}),r})}("vv-dialog",b,e.computed(()=>n.size?{[n.size]:!!n.size}:{})),k=e.computed(()=>{const{id:e}=n;return{id:e}}),y=e.computed(()=>`vv-dialog--${n.transition}`),h={"before-enter":()=>{i.value?.open||i.value?.showModal(),a("open"),a("beforeEnter")},"after-leave":()=>{i.value?.open&&i.value?.close(),a("close"),a("afterLeave")},enter:()=>{a("enter")},"after-enter":()=>{a("afterEnter")},"enter-cancelled":()=>{a("enterCancelled")},"before-leave":()=>{a("beforeLeave")},leave:()=>{a("leave")},"leave-cancelled":()=>{a("leaveCancelled")}};function C(){p.value=!1}function E(){n.keepOpen||C()}return t.onClickOutside(m,()=>{n.keepOpen||C()}),l({close:C,open:function(){p.value=!0}}),(t,o)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(y)},e.toHandlers(h),{persisted:""}),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(k),{ref_key:"dialogEl",ref:i,class:e.unref(g),onCancel:e.withModifiers(E,["stop","prevent"])}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:m,class:"vv-dialog__wrapper"},[t.$slots.header||t.title?(e.openBlock(),e.createElementBlock("header",d,[e.renderSlot(t.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(t.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":t.labelClose,title:t.labelClose,class:"vv-dialog__close",onClickPassive:C},null,40,c)])])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",f,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("v-if",!0)],512)],16),[[e.vShow,e.unref(p)]])]),_:3},16,["name"]))}})});

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

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

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

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

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

@@ -1,8 +1,12 @@
-import { computed, defineComponent, provide, h, Fragment, unref, toRefs, useAttrs, ref, onMounted, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, vShow } from "vue";
+import { computed, useId, defineComponent, h, Fragment, provide, unref, toRefs, useAttrs, ref, onMounted, watch, createElementBlock, openBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, vShow, nextTick } from "vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { uid } from "uid";
-import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke } from "@vueuse/core";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke } from "@vueuse/core";
 import mitt from "mitt";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -37,6 +41,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
   DropdownRole2["listbox"] = "listbox";
   DropdownRole2["menu"] = "menu";
@@ -47,95 +58,27 @@ var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
   DropdownItemRole2["presentation"] = "presentation";
   return DropdownItemRole2;
 })(DropdownItemRole || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
 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.
-   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-   */
-  to: {
-    type: [String, Object]
-  },
-  /**
-   * Anchor href
-   */
-  href: String,
-  /**
-   * Anchor target
-   */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const CurrentProps = {
-  /**
-   * Whether the item is current
-   */
-  current: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
-};
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
   /**
    * VvIcon position
    */
   iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
+    default: Position.before
   }
 });
 const IdProps = {
@@ -166,7 +109,8 @@ const DropdownProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -234,30 +178,27 @@ const DropdownProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 };
 ({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
   /**
    * Button type
    */
   type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+    default: ButtonType.button
   },
   /**
-   * Button aria-label
+   * Default tag for the action
    */
-  ariaLabel: {
-    type: String,
-    default: void 0
+  defaultTag: {
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    default: StorageType.local
   }
 });
 const VvDropdownProps = {
@@ -287,8 +228,10 @@ const VvDropdownProps = {
     validator: (value) => Object.values(DropdownRole).includes(value)
   }
 };
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
-function useProvideDropdownTrigger({
+function useUniqueId(id) {
+  return computed(() => String(id?.value || useId()));
+}
+function useDropdownProvideTrigger({
   reference,
   id,
   expanded,
@@ -307,8 +250,7 @@ function useProvideDropdownTrigger({
       });
     },
     render() {
-      var _a, _b;
-      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+      return h(Fragment, {}, this.$slots.default?.());
     }
   });
   return {
@@ -316,16 +258,16 @@ function useProvideDropdownTrigger({
     component
   };
 }
-function useProvideDropdownItem({
+function useDropdownProvideItem({
   role,
-  expanded
+  ...others
 }) {
   const itemRole = computed(
     () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
   provide(INJECTION_KEY_DROPDOWN_ITEM, {
     role: itemRole,
-    expanded
+    ...others
   });
   return { itemRole };
 }
@@ -334,7 +276,7 @@ function useModifiers(prefix, modifiers, others) {
     const toReturn = {
       [prefix]: true
     };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
     if (modifiersArray) {
       if (Array.isArray(modifiersArray)) {
         modifiersArray.forEach((modifier) => {
@@ -362,6 +304,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
+    "beforeEnter",
+    "afterLeave",
     "beforeExpand",
     "beforeCollapse",
     "afterExpand",
@@ -369,23 +313,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "before-enter",
     "after-leave",
     "enter",
-    "after-enter",
-    "enter-cancelled",
-    "before-leave",
+    "afterEnter",
+    "enterCancelled",
+    "beforeLeave",
     "leave",
-    "leave-cancelled"
+    "leaveCancelled"
   ],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { id } = toRefs(props);
     const hasId = useUniqueId(id);
     const attrs = useAttrs();
     const maxWidth = ref("auto");
     const maxHeight = ref("auto");
-    const localReferenceEl = ref(null);
+    const localReferenceEl = ref();
     const floatingEl = ref();
-    const arrowEl = ref(null);
-    const listEl = ref(null);
+    const arrowEl = ref();
+    const listEl = ref();
     const referenceEl = computed({
       get: () => props.reference ?? localReferenceEl.value,
       set: (newValue) => {
@@ -397,8 +342,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       useMutationObserver(
         floatingEl.value,
         () => {
-          var _a;
-          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+          hasCustomPosition.value = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")?.trim() === "true";
         },
         {
           attributeFilter: ["style"],
@@ -485,11 +429,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const dropdownPlacement = computed(() => {
-      var _a;
       if (hasCustomPosition.value) {
         return void 0;
       }
-      const width = props.triggerWidth && referenceEl.value ? `${(_a = referenceEl.value) == null ? void 0 : _a.offsetWidth}px` : void 0;
+      const width = props.triggerWidth && referenceEl.value ? `${referenceEl.value?.offsetWidth}px` : void 0;
       return {
         position: strategy.value,
         top: `${y.value ?? 0}px`,
@@ -503,7 +446,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => placement.value.split("-")[0]
     );
     const arrowPlacement = computed(() => {
-      var _a, _b, _c, _d, _e;
       if (hasCustomPosition.value) {
         return void 0;
       }
@@ -514,9 +456,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [Side.left]: Side.right
       }[side.value];
       return {
-        left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
-        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
-        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
+        left: middlewareData.value.arrow?.x !== void 0 ? `${middlewareData.value.arrow?.x}px` : void 0,
+        top: middlewareData.value.arrow?.y !== void 0 ? `${middlewareData.value.arrow?.y}px` : void 0,
+        [staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`
       };
     });
     const modelValue = useVModel(props, "modelValue", emit);
@@ -531,39 +473,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         modelValue.value = newValue;
       }
     });
-    const show = () => {
+    function show() {
       expanded.value = true;
-    };
-    const hide = () => {
+    }
+    function hide() {
       expanded.value = false;
-    };
-    const toggle = () => {
+    }
+    function toggle() {
       expanded.value = !expanded.value;
-    };
-    const init = (el) => {
+    }
+    function init(el) {
       referenceEl.value = el;
-    };
-    __expose({
-      toggle,
-      show,
-      hide,
-      init,
-      customPosition: hasCustomPosition
-    });
-    watch(expanded, (newValue) => {
-      if (newValue && props.autofocusFirst) {
-        nextTick(() => {
-          const focusableElements = getKeyboardFocusableElements(
-            floatingEl.value
-          );
-          if (focusableElements.length > 0) {
-            focusableElements[0].focus({
-              preventScroll: true
-            });
-          }
-        });
-      }
-    });
+    }
     onClickOutside(
       floatingEl,
       () => {
@@ -574,15 +495,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { ignore: [referenceEl] }
     );
     const hasAriaLabelledby = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+      return referenceEl.value?.getAttribute?.("id") ?? void 0;
     });
     const referenceAria = computed(() => ({
       "aria-controls": hasId.value,
       "aria-haspopup": true,
       "aria-expanded": expanded.value
     }));
-    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
       reference: referenceEl,
       id: hasId,
       expanded,
@@ -590,7 +510,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     bus.on("click", toggle);
     const { role, modifiers } = toRefs(props);
-    const { itemRole } = useProvideDropdownItem({ role, expanded });
     const bemCssClasses = useModifiers(
       "vv-dropdown",
       modifiers,
@@ -611,7 +530,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
       );
     }
-    const focusNext = () => {
+    function focusFirst() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          floatingEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
+    function focusFirstListElement() {
+      nextTick(() => {
+        const focusableElements = getKeyboardFocusableElements(
+          listEl.value
+        );
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus({
+            preventScroll: true
+          });
+        }
+      });
+    }
+    function focusNext() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -634,8 +577,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
-    const focusPrev = () => {
+    }
+    function focusPrev() {
       nextTick(() => {
         if (focused.value) {
           const focusableElements = getKeyboardFocusableElements(
@@ -658,7 +601,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       });
-    };
+    }
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        focusFirst();
+      }
+    });
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      focusFirst,
+      focusFirstListElement,
+      focusNext,
+      focusPrev,
+      customPosition: hasCustomPosition
+    });
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useDropdownProvideItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
     onKeyStroke("Escape", (e) => {
       if (expanded.value) {
         e.preventDefault();
@@ -680,35 +646,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onKeyStroke([" ", "Enter"], (e) => {
       const htmlEl = e.target;
       if (expanded.value && focused.value && htmlEl) {
-        htmlEl == null ? void 0 : htmlEl.click();
+        htmlEl?.click();
       }
     });
     const dropdownTransitionHandlers = {
       "before-enter": () => {
         emit(expanded.value ? "beforeExpand" : "beforeCollapse");
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
         emit(expanded.value ? "afterExpand" : "afterCollapse");
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("leave-cancelled");
+        emit("leaveCancelled");
       }
     };
     return (_ctx, _cache) => {