@volverjs/ui-vue/dist/components/VvDropdown/VvDropdown.es.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import{computed as e,useId as t,defineComponent as o,h as a,Fragment as l,provide as r,unref as n,toRefs as u,useAttrs as i,ref as s,onMounted as f,watch as d,createElementBlock as p,openBlock as v,createVNode as c,withCtx as b,renderSlot as m,normalizeProps as g,guardReactiveProps as h,Transition as y,mergeProps as x,toHandlers as w,withDirectives as E,createElementVNode as S,normalizeClass as $,normalizeStyle as O,createCommentVNode as k,vShow as j,nextTick as A}from"vue";import{autoPlacement as B,flip as C,shift as P,size as _,offset as D,arrow as L,useFloating as N,autoUpdate as F}from"@floating-ui/vue";import{useMutationObserver as V,useVModel as W,onClickOutside as z,useFocusWithin as H,useElementHover as R,onKeyStroke as T}from"@vueuse/core";import q from"mitt";var I=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(I||{}),M=/* @__PURE__ */(e=>(e.absolute="absolute",e.fixed="fixed",e))(M||{}),U=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(U||{}),G=/* @__PURE__ */(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))(G||{}),J=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(J||{}),K=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(K||{}),Q=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(Q||{}),X=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(X||{}),Y=/* @__PURE__ */(e=>(e.option="option",e.presentation="presentation",e))(Y||{});const Z=Symbol.for("dropdownTrigger"),ee=Symbol.for("dropdownItem"),te={modifiers:{type:[String,Array],default:void 0}};J.before;const oe={id:[String,Number]},ae={placement:{type:String,default:U.bottom,validator:e=>Object.values(U).includes(e)||Object.values(G).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(M).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}};K.button,Q.button,I.local;const le={...oe,...ae,...te,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:X.menu,validator:e=>Object.values(X).includes(e)}};const re=["id","tabindex","role","aria-labelledby"],ne=/* @__PURE__ */o({name:"VvDropdown",inheritAttrs:!1,props:le,emits:["update:modelValue","beforeEnter","afterLeave","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(I,{expose:G,emit:J}){const K=I,Q=J,{id:te}=u(K),oe=function(o){return e(()=>String(o?.value||t()))}(te),ae=i(),le=s("auto"),ne=s("auto"),ue=s(),ie=s(),se=s(),fe=s(),de=e({get:()=>K.reference??ue.value,set:e=>{ue.value=e}}),pe=s(!1);f(()=>{V(ie.value,()=>{pe.value="true"===window.getComputedStyle(ie.value).getPropertyValue("--dropdown-custom-position")?.trim()},{attributeFilter:["style"],window:window})});const ve=e(()=>{const e=[];if(K.autoPlacement?"boolean"==typeof K.autoPlacement?e.push(B()):e.push(B(K.autoPlacement)):K.flip&&("boolean"==typeof K.flip?e.push(C({fallbackStrategy:"initialPlacement"})):e.push(C(K.flip))),K.shift&&("boolean"==typeof K.shift?e.push(P()):e.push(P(K.shift))),K.size){const t=({availableWidth:e,availableHeight:t})=>{le.value=`${e}px`,ne.value=`${t}px`};"boolean"==typeof K.size?e.push(_({apply:t})):e.push(_({...K.size,apply:t}))}return K.offset&&(e.push(D(Number(K.offset))),["string","number"].includes(typeof K.offset)?e.push(D(Number(K.offset))):e.push(D(K.offset))),K.arrow&&e.push(L({element:se})),e}),{x:ce,y:be,middlewareData:me,placement:ge,strategy:he}=N(de,ie,{whileElementsMounted:(...e)=>F(...e,{animationFrame:K.strategy===M.fixed}),placement:e(()=>K.placement),strategy:e(()=>K.strategy),middleware:ve}),ye=e(()=>{if(pe.value)return;const e=K.triggerWidth&&de.value?`${de.value?.offsetWidth}px`:void 0;return{position:he.value,top:`${be.value??0}px`,left:`${ce.value??0}px`,maxWidth:e?void 0:le.value,maxHeight:ne.value,width:e}}),xe=e(()=>ge.value.split("-")[0]),we=e(()=>{if(pe.value)return;const e={[U.top]:U.bottom,[U.right]:U.left,[U.bottom]:U.top,[U.left]:U.right}[xe.value];return{left:void 0!==me.value.arrow?.x?`${me.value.arrow?.x}px`:void 0,top:void 0!==me.value.arrow?.y?`${me.value.arrow?.y}px`:void 0,[e]:-(se.value?.offsetWidth??0)/2+"px"}}),Ee=W(K,"modelValue",Q),Se=s(!1),$e=e({get:()=>Ee.value??Se.value,set:e=>{void 0!==Ee.value?Ee.value=e:Se.value=e}});function Oe(){$e.value=!0}function ke(){$e.value=!1}function je(){$e.value=!$e.value}function Ae(e){de.value=e}z(ie,()=>{!K.keepOpen&&$e.value&&($e.value=!1)},{ignore:[de]});const Be=e(()=>de.value?.getAttribute?.("id")??void 0),Ce=e(()=>({"aria-controls":oe.value,"aria-haspopup":!0,"aria-expanded":$e.value})),{component:Pe,bus:_e}=function({reference:e,id:t,expanded:n,aria:u}){const i=q(),s=o({name:"VvDropdownTriggerProvider",setup(){r(Z,{reference:e,id:t,expanded:n,aria:u,bus:i})},render(){return a(l,{},this.$slots.default?.())}});return{bus:i,component:s}}({reference:de,id:oe,expanded:$e,aria:Ce});_e.on("click",je);const{role:De,modifiers:Le}=u(K),Ne=function(t,o,a){return e(()=>{const e={[t]:!0},l="string"==typeof o?.value?o.value.split(" "):o?.value;return l&&Array.isArray(l)&&l.forEach(o=>{o&&(e[`${t}--${o}`]=!0)}),a&&Object.keys(a.value).forEach(o=>{e[`${t}--${o}`]=n(a.value[o])}),e})}("vv-dropdown",Le,e(()=>({arrow:K.arrow}))),{focused:Fe}=H(ie);function Ve(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")):[]}function We(){A(()=>{const e=Ve(ie.value);e.length>0&&e[0].focus({preventScroll:!0})})}function ze(){A(()=>{if(Fe.value){const e=Ve(ie.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})}})}function He(){A(()=>{if(Fe.value){const e=Ve(ie.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})}})}d($e,e=>{e&&K.autofocusFirst&&We()}),G({toggle:je,show:Oe,hide:ke,init:Ae,focusFirst:We,focusFirstListElement:function(){A(()=>{const e=Ve(fe.value);e.length>0&&e[0].focus({preventScroll:!0})})},focusNext:ze,focusPrev:He,customPosition:pe});const Re=R(ie),{itemRole:Te}=function({role:t,...o}){const a=e(()=>t.value===X.listbox?Y.option:Y.presentation);return r(ee,{role:a,...o}),{itemRole:a}}({role:De,expanded:$e,focused:Fe,hovered:Re});T("Escape",e=>{$e.value&&(e.preventDefault(),ke())}),T("ArrowDown",e=>{$e.value&&Fe.value&&(e.preventDefault(),ze())}),T("ArrowUp",e=>{$e.value&&Fe.value&&(e.preventDefault(),He())}),T([" ","Enter"],e=>{const t=e.target;$e.value&&Fe.value&&t&&t?.click()});const qe={"before-enter":()=>{Q($e.value?"beforeExpand":"beforeCollapse"),Q("beforeEnter")},"after-leave":()=>{Q($e.value?"afterExpand":"afterCollapse"),Q("afterLeave")},enter:()=>{Q("enter")},"after-enter":()=>{Q("afterEnter")},"enter-cancelled":()=>{Q("enterCancelled")},"before-leave":()=>{Q("beforeLeave")},leave:()=>{Q("leave")},"leave-cancelled":()=>{Q("leaveCancelled")}};return(e,t)=>(v(),p(l,null,[c(n(Pe),null,{default:b(()=>[m(e.$slots,"default",g(h({init:Ae,show:Oe,hide:ke,toggle:je,expanded:n($e),aria:n(Ce)})))]),_:3}),c(y,x({name:e.transitionName},w(qe),{persisted:""}),{default:b(()=>[E(S("div",{ref_key:"floatingEl",ref:ie,style:O(n(ye)),class:$(n(Ne))},[K.arrow?(v(),p("div",{key:0,ref_key:"arrowEl",ref:se,style:O(n(we)),class:"vv-dropdown__arrow"},null,4)):k("v-if",!0),m(e.$slots,"before",g(h({expanded:n($e)}))),S("div",x(n(ae),{id:n(oe),ref_key:"listEl",ref:fe,tabindex:n($e)?void 0:-1,role:n(De),"aria-labelledby":n(Be),class:"vv-dropdown__list"}),[m(e.$slots,"items",g(h({role:n(Te)})))],16,re),m(e.$slots,"after",g(h({expanded:n($e)})))],6),[[j,n($e)]])]),_:3},16,["name"])],64))}});export{ne as default};