@volverjs/ui-vue 0.0.10-beta.24 → 0.0.10-beta.26

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

@@ -1,8 +1,13 @@
 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 { 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";
@@ -54,13 +59,6 @@ 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"
 );
@@ -82,11 +80,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -298,6 +292,14 @@ const DropdownProps = {
     default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 const VvDropdownProps = {
   ...IdProps,
   ...DropdownProps,
@@ -356,14 +358,14 @@ function useProvideDropdownTrigger({
 }
 function useProvideDropdownItem({
   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 };
 }
@@ -629,7 +631,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,
@@ -698,6 +699,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useProvideDropdownItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
     onKeyStroke("Escape", (e) => {
       if (expanded.value) {
         e.preventDefault();

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

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

@@ -16,19 +16,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: import("../../constants").ActionTag;
     };
-    /**
-     * @description Define component classes with BEM style.
-     * @returns {Array} The component classes.
-     */
     to: {
         type: (ObjectConstructor | StringConstructor)[];
     };
     href: StringConstructor;
-    target: {
-        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
-        default: undefined;
-        validator: (value: import("../../constants").AnchorTarget) => boolean;
-    };
+    target: StringConstructor;
     rel: {
         type: StringConstructor;
         default: string;
@@ -71,19 +63,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: import("../../constants").ActionTag;
     };
-    /**
-     * @description Define component classes with BEM style.
-     * @returns {Array} The component classes.
-     */
     to: {
         type: (ObjectConstructor | StringConstructor)[];
     };
     href: StringConstructor;
-    target: {
-        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
-        default: undefined;
-        validator: (value: import("../../constants").AnchorTarget) => boolean;
-    };
+    target: StringConstructor;
     rel: {
         type: StringConstructor;
         default: string;
@@ -113,7 +97,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     modifiers: string | string[];
     type: "button" | "submit" | "reset";
-    target: "_blank" | "_self" | "_parent" | "_top";
     ariaLabel: string;
     defaultTag: string;
     rel: string;

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

@@ -1,4 +1,16 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    focusOnHover: boolean;
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -8,6 +8,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     selectedHintLabel: {
         type: StringConstructor;
     };
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modifiers: {
         type: globalThis.PropType<string | string[]>;
         default: undefined;
@@ -34,6 +38,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     selectedHintLabel: {
         type: StringConstructor;
     };
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modifiers: {
         type: globalThis.PropType<string | string[]>;
         default: undefined;
@@ -54,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     modifiers: string | string[];
     unselectable: boolean;
+    focusOnHover: boolean;
     selected: boolean;
 }, {}>, {
     default?(_: {}): any;

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

@@ -189,3 +189,40 @@ export declare const VvDropdownProps: {
     };
     id: (StringConstructor | NumberConstructor)[];
 };
+export declare const VvDropdownItemProps: {
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const VvDropdownOptionProps: {
+    deselectHintLabel: {
+        type: StringConstructor;
+    };
+    selectHintLabel: {
+        type: StringConstructor;
+    };
+    selectedHintLabel: {
+        type: StringConstructor;
+    };
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};

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

@@ -1,6 +1,11 @@
 import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } 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 Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -48,13 +53,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,11 +83,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -165,7 +164,14 @@ const ModifiersProps = {
     validation: (value) => Object.values(Position).includes(value)
   }
 });
-({
+const IdProps = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
@@ -258,7 +264,7 @@ const ModifiersProps = {
     type: Boolean,
     default: false
   }
-});
+};
 const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
@@ -289,6 +295,14 @@ const ActionProps = {
     default: ActionTag.button
   }
 };
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 const VvActionEvents = ["click", "mouseover", "mouseleave"];
 const VvActionProps = ActionProps;
 function useVolver() {
@@ -423,6 +437,39 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+({
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
 function useProvideDropdownAction({
   expanded
 }) {
@@ -436,7 +483,9 @@ const __default__$1 = {
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
+  props: VvDropdownItemProps,
   setup(__props) {
+    const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
     useProvideDropdownAction({ expanded });
@@ -444,7 +493,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (newValue) {
+      if (newValue && props.focusOnHover) {
         focused.value = true;
       }
     });

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,default:void 0,validator:e=>Object.values(i).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:{type:Boolean,default:!1}},m={active:{type:Boolean,default:!1}},b={current:{type:Boolean,default:!1}},y={pressed:{type:Boolean,default:!1}},g={label:{type:[String,Number],default:void 0}},k={modifiers:{type:[String,Array],default:void 0}};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const h={...v,...g,...y,...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=r,u=e.inject(s),i=e.ref(null);o({$el:i});const{reference:c,bus:p,aria:v,expanded:m}=e.inject(d,{});e.watch((()=>i.value),(e=>{c&&(c.value=e)}));const b=e.computed((()=>n.pressed||(null==m?void 0:m.value))),{role:y}=e.inject(f,{}),g=e.computed((()=>{switch(!0){case n.disabled:return a.button;case void 0!==n.to:return(null==u?void 0:u.nuxt)?a.nuxtLink:a.routerLink;case void 0!==n.href:return a.a;default:return n.defaultTag}})),k=e.computed((()=>{const e={...null==v?void 0:v.value,ariaPressed:!!b.value||void 0,ariaLabel:n.ariaLabel,role:null==y?void 0:y.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}})),h=e=>{n.disabled?e.preventDefault():(null==p||p.emit("click",e),l("click",e))},x=e=>{null==p||p.emit("mouseover",e),l("mouseover",e)},B=e=>{null==p||p.emit("mouseleave",e),l("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(k),{ref_key:"element",ref:i,class:{active:t.active,pressed:e.unref(b),disabled:t.disabled,current:t.current},onClickPassive:h,onMouseoverPassive:x,onMouseleavePassive:B}),{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.absolute="absolute",e.fixed="fixed",e))(n||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),a=(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))(a||{}),u=(e=>(e.before="before",e.after="after",e))(u||{}),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||{}),d=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(d||{}),c=(e=>(e.listbox="listbox",e.menu="menu",e))(c||{});const f=Symbol.for("volver"),p=Symbol.for("dropdownTrigger"),v=Symbol.for("dropdownItem"),m=Symbol.for("dropdownAction"),b={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},y={disabled:{type:Boolean,default:!1}},g={active:{type:Boolean,default:!1}},h={current:{type:Boolean,default:!1}},k={pressed:{type:Boolean,default:!1}},x={label:{type:[String,Number],default:void 0}},S={modifiers:{type:[String,Array],default:void 0}};u.before;l.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const B={...y,...x,...k,...g,...h,...b,type:{type:String,default:i.button,validator:e=>Object.values(i).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:s.button}};r.local;const w=B;const L=e.defineComponent({name:"VvAction",props:w,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=r,a=e.inject(f),u=e.ref(null);o({$el:u});const{reference:i,bus:d,aria:c,expanded:v}=e.inject(p,{});e.watch((()=>u.value),(e=>{i&&(i.value=e)}));const b=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:y}=e.inject(m,{}),g=e.computed((()=>{switch(!0){case n.disabled:return s.button;case void 0!==n.to:return(null==a?void 0:a.nuxt)?s.nuxtLink:s.routerLink;case void 0!==n.href:return s.a;default:return n.defaultTag}})),h=e.computed((()=>{const e={...null==c?void 0:c.value,ariaPressed:!!b.value||void 0,ariaLabel:n.ariaLabel,role:null==y?void 0:y.value};switch(g.value){case s.a:return{...e,href:n.href,target:n.target,rel:n.rel};case s.routerLink:case s.nuxtLink:return{...e,to:n.to,target:n.target};case s.button:return{...e,type:n.type,disabled:n.disabled};default:return e}})),k=e=>{n.disabled?e.preventDefault():(null==d||d.emit("click",e),l("click",e))},x=e=>{null==d||d.emit("mouseover",e),l("mouseover",e)},S=e=>{null==d||d.emit("mouseleave",e),l("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(h),{ref_key:"element",ref:u,class:{active:t.active,pressed:e.unref(b),disabled:t.disabled,current:t.current},onClickPassive:k,onMouseoverPassive:x,onMouseleavePassive:S}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});Boolean,c.menu;const j={focusOnHover:{type:Boolean,default:!1}};const C=e.defineComponent({name:"VvDropdownItem",props:j,setup(t){const r=t,{role:n,expanded:l}=e.inject(v,{}),a=e.ref(null);!function({expanded:t}){e.provide(m,{role:e.ref(d.menuitem),expanded:t})}({expanded:l});const u=o.useElementHover(a),{focused:i}=o.useFocus(a),{focused:s}=o.useFocusWithin(a);return e.watch(u,(e=>{e&&r.focusOnHover&&(i.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(n)},{ref_key:"element",ref:a,class:["vv-dropdown__item",{"focus-visible":e.unref(i)||e.unref(s)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...B,...S},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(C,null,{default:e.withCtx((()=>[e.createVNode(L,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}))}})}));