@volverjs/ui-vue 0.0.10-beta.9 → 0.0.11

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

@@ -1,11 +1,11 @@
-import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } from "vue";
+import { inject, defineComponent, getCurrentInstance, ref, watch, computed, resolveComponent, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
-var Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -13,17 +13,6 @@ var Side = /* @__PURE__ */ ((Side2) => {
   Side2["bottom"] = "bottom";
   return Side2;
 })(Side || {});
-var Placement = /* @__PURE__ */ ((Placement2) => {
-  Placement2["topStart"] = "top-start";
-  Placement2["topEnd"] = "top-end";
-  Placement2["bottomStart"] = "bottom-start";
-  Placement2["bottomEnd"] = "bottom-end";
-  Placement2["leftStart"] = "left-start";
-  Placement2["leftEnd"] = "left-end";
-  Placement2["rightStart"] = "right-start";
-  Placement2["rightEnd"] = "right-end";
-  return Placement2;
-})(Placement || {});
 var Position = /* @__PURE__ */ ((Position2) => {
   Position2["before"] = "before";
   Position2["after"] = "after";
@@ -48,13 +37,11 @@ var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
@@ -80,10 +67,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -96,51 +80,62 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
   /**
    * VvIcon position
    */
   iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
+    default: Position.before
   }
 });
 ({
@@ -148,91 +143,7 @@ const ModifiersProps = {
    * Dropdown placement
    */
   placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
-  /**
-   * Dropdown strategy
-   */
-  strategy: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).includes(value)
-  },
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String
-  },
-  /**
-   * Offset of the dropdown from the trigger
-   * @see https://floating-ui.com/docs/offset
-   */
-  offset: {
-    type: [Number, String, Object],
-    default: 0
-  },
-  /**
-   * Move dropdown to the side if there is no space in the default position
-   * @see https://floating-ui.com/docs/shift
-   */
-  shift: {
-    type: [Boolean, Object],
-    default: false
-  },
-  /**
-   * Flip dropdown position if there is no space in the default position
-   * @see https://floating-ui.com/docs/flip
-   */
-  flip: {
-    type: [Boolean, Object],
-    default: true
-  },
-  /**
-   * Size of the dropdown
-   * @see https://floating-ui.com/docs/size
-   */
-  size: {
-    type: [Boolean, Object],
-    default: () => ({ padding: 10 })
-  },
-  /**
-   * Automatically change the position of the dropdown
-   * @see https://floating-ui.com/docs/autoPlacement
-   */
-  autoPlacement: {
-    type: [Boolean, Object],
-    default: false
-  },
-  /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
-   */
-  arrow: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on click outside
-   */
-  keepOpen: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Autofocus first item on dropdown open
-   */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean
+    default: Side.bottom
   }
 });
 const ActionProps = {
@@ -265,10 +176,15 @@ const ActionProps = {
     default: ActionTag.button
   }
 };
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
 const VvActionEvents = ["click", "mouseover", "mouseleave"];
 const VvActionProps = ActionProps;
 function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
+  return inject(INJECTION_KEY_VOLVER, void 0);
 }
 function useInjectedDropdownTrigger() {
   return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
@@ -279,15 +195,17 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$2 = {
+const __default__$1 = {
   name: "VvAction"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+  ...__default__$1,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
+    const instance = getCurrentInstance();
     const volver = useVolver();
     const element = ref(null);
     __expose({ $el: element });
@@ -306,7 +224,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     );
     const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+      return props.pressed || dropdownExpanded?.value;
     });
     const { role } = useInjectedDropdownAction();
     const hasTag = computed(() => {
@@ -314,7 +232,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         case props.disabled:
           return ActionTag.button;
         case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+          return volver?.nuxt ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink;
         case props.href !== void 0:
           return ActionTag.a;
         default:
@@ -323,10 +241,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     });
     const hasProps = computed(() => {
       const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ...dropdownAria?.value,
         ariaPressed: pressed.value ? true : void 0,
         ariaLabel: props.ariaLabel,
-        role: role == null ? void 0 : role.value
+        role: role?.value
       };
       switch (hasTag.value) {
         case ActionTag.a:
@@ -353,22 +271,31 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           return toReturn;
       }
     });
-    const onClick = (e) => {
+    function onClick(e) {
       if (props.disabled) {
         e.preventDefault();
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-      emit("click", e);
-    };
-    const onMouseover = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-      emit("mouseover", e);
-    };
-    const onMouseleave = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-      emit("mouseleave", e);
-    };
+      if (instance?.vnode.props?.onClick) {
+        emit("click", e);
+        return;
+      }
+      dropdownEventBus?.emit("click", e);
+    }
+    function onMouseover(e) {
+      if (instance?.vnode.props?.onMouseover) {
+        emit("mouseover", e);
+        return;
+      }
+      dropdownEventBus?.emit("mouseover", e);
+    }
+    function onMouseleave(e) {
+      if (instance?.vnode.props?.onMouseleave) {
+        emit("mouseleave", e);
+        return;
+      }
+      dropdownEventBus?.emit("mouseleave", e);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
         ref_key: "element",
@@ -398,7 +325,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function useProvideDropdownAction({
+({
+  /**
+   * Dropdown role
+   */
+  role: {
+    default: DropdownRole.menu
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+function useDropdownProvideAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
@@ -406,20 +347,22 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const __default__$1 = {
+const __default__ = {
   name: "VvDropdownItem"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+  ...__default__,
+  props: VvDropdownItemProps,
   setup(__props) {
+    const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
-    useProvideDropdownAction({ expanded });
+    useDropdownProvideAction({ expanded });
     const hovered = useElementHover(element);
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (newValue) {
+      if (newValue && props.focusOnHover) {
         focused.value = true;
       }
     });
@@ -445,7 +388,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) => {
@@ -455,19 +398,11 @@ function useModifiers(prefix, modifiers, others) {
         });
       }
     }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
     return toReturn;
   });
 }
-const __default__ = {
-  name: "VvDropdownAction"
-};
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+  __name: "VvDropdownAction",
   props: {
     ...ActionProps,
     ...ModifiersProps

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

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

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

@@ -1,22 +1,106 @@
-import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import { inject, provide, ref, defineComponent, watch, createElementBlock, openBlock, mergeProps, unref, renderSlot } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  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 ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["button"] = "button";
   ActionRoles2["link"] = "link";
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
 const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
   "dropdownItem"
 );
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
+({
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    default: Position.before
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    default: Side.bottom
+  }
+});
+({
+  /**
+   * Button type
+   */
+  type: {
+    default: ButtonType.button
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
+({
+  /**
+   * Dropdown role
+   */
+  role: {
+    default: DropdownRole.menu
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-function useProvideDropdownAction({
+function useDropdownProvideAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
@@ -29,15 +113,17 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
+  props: VvDropdownItemProps,
   setup(__props) {
+    const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
-    useProvideDropdownAction({ expanded });
+    useDropdownProvideAction({ expanded });
     const hovered = useElementHover(element);
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (newValue) {
+      if (newValue && props.focusOnHover) {
         focused.value = true;
       }
     });

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

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