@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 4.26 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvBreadcrumb=t(e.vue)}(this,function(e){"use strict";var t=(e=>(e.local="local",e.session="session",e))(t||{}),r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{});const l=Symbol.for("volver"),s=Symbol.for("dropdownTrigger"),i=Symbol.for("dropdownAction"),u={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},c={disabled:{type:Boolean,default:!1}},d={active:{type:Boolean,default:!1}},p={current:{type:Boolean,default:!1}},m={pressed:{type:Boolean,default:!1}},f={label:{type:[String,Number],default:void 0}},v={modifiers:{type:[String,Array],default:void 0}};o.before,r.bottom;const b={...c,...f,...m,...d,...p,...u,type:{type:String,default:n.button,validator:e=>Object.values(n).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:a.button}};t.local;const g={...v,routes:Array};const y=b;const k=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:r,emit:o}){const n=t,u=o,c=e.getCurrentInstance(),d=e.inject(l,void 0),p=e.ref(null);r({$el:p});const{reference:m,bus:f,aria:v,expanded:b}=e.inject(s,{});e.watch(()=>p.value,e=>{m&&(m.value=e)});const g=e.computed(()=>n.pressed||b?.value),{role:y}=e.inject(i,{}),k=e.computed(()=>{switch(!0){case n.disabled:return a.button;case void 0!==n.to:return d?.nuxt?e.resolveComponent(a.nuxtLink):a.routerLink;case void 0!==n.href:return a.a;default:return n.defaultTag}}),h=e.computed(()=>{const e={...v?.value,ariaPressed:!!g.value||void 0,ariaLabel:n.ariaLabel,role:y?.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 S(e){n.disabled?e.preventDefault():c?.vnode.props?.onClick?u("click",e):f?.emit("click",e)}function _(e){c?.vnode.props?.onMouseover?u("mouseover",e):f?.emit("mouseover",e)}function x(e){c?.vnode.props?.onMouseleave?u("mouseleave",e):f?.emit("mouseleave",e)}return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(h),{ref_key:"element",ref:p,class:{active:t.active,pressed:e.unref(g),disabled:t.disabled,current:t.current},onClickPassive:S,onMouseoverPassive:_,onMouseleavePassive:x}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},16,["class"]))}}),h={class:"vv-breadcrumb__list"},S=["content"];return e.defineComponent({name:"VvBreadcrumb",props:g,setup(t){const r=t,{modifiers:o}=e.toRefs(r),n=function(t,r){return e.computed(()=>{const e={[t]:!0},o="string"==typeof r?.value?r.value.split(" "):r?.value;return o&&Array.isArray(o)&&o.forEach(r=>{r&&(e[`${t}--${r}`]=!0)}),e})}("vv-breadcrumb",o),a=e.computed(()=>r.routes?.length??0),l=e=>e===a.value-1;return(t,r)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(n)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,({label:r,...o},n)=>(e.openBlock(),e.createElementBlock("li",{key:`${r}-${n}`,class:e.normalizeClass(l(n)?"vv-breadcrumb__item-active":"vv-breadcrumb__item"),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[e.createVNode(k,e.mergeProps({ref_for:!0},o,{class:l(n)?"vv-breadcrumb__label":"vv-breadcrumb__link","aria-current":l(n)?"page":void 0,itemprop:"item","default-tag":"span"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"label",e.mergeProps({ref_for:!0},{...o,index:n,label:r,isLast:l(n)}),()=>[e.createTextVNode(e.toDisplayString(r),1)])]),_:2},1040,["class","aria-current"]),e.createElementVNode("meta",{itemprop:"position",content:`${n+1}`},null,8,S)],2))),128))])],2))}})});