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

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