@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 1.12 kB
JavaScript
;const i=require("./FLink.js");;/* empty css */const e=require("vue"),c=require("../utils/getCssColor.js"),p=["data-separator"],u={key:1},m=e.defineComponent({__name:"FBreadcrumbs",props:{items:{},color:{default:""},activeItemColor:{default:"primary"},separator:{default:">"}},setup(s){const o=s,a=e.computed(()=>({"--fbreadcrumbs--color":c.getCssColor(o.color),"--fbreadcrumbs--active-item-color":c.getCssColor(o.activeItemColor)}));return(r,_)=>{const l=i;return e.openBlock(),e.createElementBlock("div",{class:"FBreadcrumbs",style:e.normalizeStyle(e.unref(a))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(t,n)=>(e.openBlock(),e.createElementBlock("span",{class:"FBreadcrumbs__item",key:n,"data-separator":r.separator},[t.href?(e.openBlock(),e.createBlock(l,{key:0,location:t.href,"hover-color":r.activeItemColor,"hide-arrow":"",uppercase:""},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text),1)]),_:2},1032,["location","hover-color"])):(e.openBlock(),e.createElementBlock("span",u,e.toDisplayString(t.text),1))],8,p))),128))],4)}}});module.exports=m;