@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 3.05 kB
JavaScript
import{inject as e,defineComponent as t,getCurrentInstance as o,ref as r,watch as a,computed as l,resolveComponent as n,createBlock as s,openBlock as u,resolveDynamicComponent as i,unref as d,mergeProps as v,withCtx as c,renderSlot as f,createTextVNode as b,toDisplayString as p,createElementBlock as m,createVNode as g}from"vue";var y=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(y||{}),k=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(k||{}),S=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(S||{}),h=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(h||{}),L=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(L||{});const x=Symbol.for("volver"),_=Symbol.for("dropdownTrigger"),$=Symbol.for("dropdownAction"),w={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},B={disabled:{type:Boolean,default:!1}},M={active:{type:Boolean,default:!1}},P={current:{type:Boolean,default:!1}},A={pressed:{type:Boolean,default:!1}},T={label:{type:[String,Number],default:void 0}};S.before,k.bottom;const j={...B,...T,...A,...M,...P,...w,type:{type:String,default:h.button,validator:e=>Object.values(h).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:L.button}};y.local;const C=/* @__PURE__ */t({name:"VvAction",props:j,emits:["click","mouseover","mouseleave"],setup(t,{expose:m,emit:g}){const y=t,k=g,S=o(),h=e(x,void 0),w=r(null);m({$el:w});const{reference:B,bus:M,aria:P,expanded:A}=e(_,{});a(()=>w.value,e=>{B&&(B.value=e)});const T=l(()=>y.pressed||A?.value),{role:j}=e($,{}),C=l(()=>{switch(!0){case y.disabled:return L.button;case void 0!==y.to:return h?.nuxt?n(L.nuxtLink):L.routerLink;case void 0!==y.href:return L.a;default:return y.defaultTag}}),N=l(()=>{const e={...P?.value,ariaPressed:!!T.value||void 0,ariaLabel:y.ariaLabel,role:j?.value};switch(C.value){case L.a:return{...e,href:y.href,target:y.target,rel:y.rel};case L.routerLink:case L.nuxtLink:return{...e,to:y.to,target:y.target};case L.button:return{...e,type:y.type,disabled:y.disabled};default:return e}});function O(e){y.disabled?e.preventDefault():S?.vnode.props?.onClick?k("click",e):M?.emit("click",e)}function V(e){S?.vnode.props?.onMouseover?k("mouseover",e):M?.emit("mouseover",e)}function D(e){S?.vnode.props?.onMouseleave?k("mouseleave",e):M?.emit("mouseleave",e)}return(e,t)=>(u(),s(i(d(C)),v(d(N),{ref_key:"element",ref:w,class:{active:e.active,pressed:d(T),disabled:e.disabled,current:e.current},onClickPassive:O,onMouseoverPassive:V,onMouseleavePassive:D}),{default:c(()=>[f(e.$slots,"default",{},()=>[b(p(e.label),1)])]),_:3},16,["class"]))}}),N={class:"vv-nav__item",role:"presentation"},O=/* @__PURE__ */t({name:"VvNavItem",inheritAttrs:!1,setup:e=>(e,t)=>(u(),m("li",N,[f(e.$slots,"before"),g(C,v(e.$attrs,{class:"vv-nav__item-label",role:"menuitem"}),{default:c(()=>[f(e.$slots,"default")]),_:3},16),f(e.$slots,"after")]))});export{O as default};