UNPKG

@volverjs/ui-vue

Version:

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

2 lines (1 loc) 3.98 kB
import{computed as e,inject as t,defineComponent as r,getCurrentInstance as a,ref as o,watch as l,resolveComponent as s,createBlock as n,openBlock as u,resolveDynamicComponent as i,unref as c,mergeProps as d,withCtx as v,renderSlot as b,createTextVNode as p,toDisplayString as f,toRefs as m,createElementBlock as g,normalizeClass as y,createElementVNode as k,Fragment as _,renderList as h,createVNode as L}from"vue";var S=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(S||{}),x=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(x||{}),$=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))($||{}),A=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(A||{}),B=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(B||{});const w=Symbol.for("volver"),M=Symbol.for("dropdownTrigger"),P=Symbol.for("dropdownAction"),T={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},j={disabled:{type:Boolean,default:!1}},C={active:{type:Boolean,default:!1}},E={current:{type:Boolean,default:!1}},O={pressed:{type:Boolean,default:!1}},V={label:{type:[String,Number],default:void 0}},D={modifiers:{type:[String,Array],default:void 0}};$.before,x.bottom;const I={...j,...V,...O,...C,...E,...T,type:{type:String,default:A.button,validator:e=>Object.values(A).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:B.button}};S.local;const N={...D,routes:Array};const q=/* @__PURE__ */r({name:"VvAction",props:I,emits:["click","mouseover","mouseleave"],setup(r,{expose:m,emit:g}){const y=r,k=g,_=a(),h=t(w,void 0),L=o(null);m({$el:L});const{reference:S,bus:x,aria:$,expanded:A}=t(M,{});l(()=>L.value,e=>{S&&(S.value=e)});const T=e(()=>y.pressed||A?.value),{role:j}=t(P,{}),C=e(()=>{switch(!0){case y.disabled:return B.button;case void 0!==y.to:return h?.nuxt?s(B.nuxtLink):B.routerLink;case void 0!==y.href:return B.a;default:return y.defaultTag}}),E=e(()=>{const e={...$?.value,ariaPressed:!!T.value||void 0,ariaLabel:y.ariaLabel,role:j?.value};switch(C.value){case B.a:return{...e,href:y.href,target:y.target,rel:y.rel};case B.routerLink:case B.nuxtLink:return{...e,to:y.to,target:y.target};case B.button:return{...e,type:y.type,disabled:y.disabled};default:return e}});function O(e){y.disabled?e.preventDefault():_?.vnode.props?.onClick?k("click",e):x?.emit("click",e)}function V(e){_?.vnode.props?.onMouseover?k("mouseover",e):x?.emit("mouseover",e)}function D(e){_?.vnode.props?.onMouseleave?k("mouseleave",e):x?.emit("mouseleave",e)}return(e,t)=>(u(),n(i(c(C)),d(c(E),{ref_key:"element",ref:L,class:{active:e.active,pressed:c(T),disabled:e.disabled,current:e.current},onClickPassive:O,onMouseoverPassive:V,onMouseleavePassive:D}),{default:v(()=>[b(e.$slots,"default",{},()=>[p(f(e.label),1)])]),_:3},16,["class"]))}}),z={class:"vv-breadcrumb__list"},F=["content"],G=/* @__PURE__ */r({name:"VvBreadcrumb",props:N,setup(t){const r=t,{modifiers:a}=m(r),o=function(t,r){return e(()=>{const e={[t]:!0},a="string"==typeof r?.value?r.value.split(" "):r?.value;return a&&Array.isArray(a)&&a.forEach(r=>{r&&(e[`${t}--${r}`]=!0)}),e})}("vv-breadcrumb",a),l=e(()=>r.routes?.length??0),s=e=>e===l.value-1;return(e,t)=>(u(),g("nav",{class:y(c(o)),"aria-label":"breadcrumbs"},[k("ol",z,[(u(!0),g(_,null,h(e.routes,({label:t,...r},a)=>(u(),g("li",{key:`${t}-${a}`,class:y(s(a)?"vv-breadcrumb__item-active":"vv-breadcrumb__item"),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[L(q,d({ref_for:!0},r,{class:s(a)?"vv-breadcrumb__label":"vv-breadcrumb__link","aria-current":s(a)?"page":void 0,itemprop:"item","default-tag":"span"}),{default:v(()=>[b(e.$slots,"label",d({ref_for:!0},{...r,index:a,label:t,isLast:s(a)}),()=>[p(f(t),1)])]),_:2},1040,["class","aria-current"]),k("meta",{itemprop:"position",content:`${a+1}`},null,8,F)],2))),128))])],2))}});export{G as default};