@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 4.46 kB
JavaScript
!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}))}})});