@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 1.41 kB
JavaScript
;const e=require("vue"),t=require("../utils/genSize.js"),s=require("../utils/getCssColor.js"),c=["aria-label","innerHTML"],i={key:1,class:"FSvgImage__content"},g=["src","alt"],m=["aria-label"],u=e.defineComponent({__name:"FSvgImage",props:{markup:{default:null},component:{type:[Function,Object,null],default:null},src:{default:""},alt:{default:""},width:{default:""},height:{default:""},strokeColor:{default:""},fillColor:{default:""},useSvgColors:{type:Boolean,default:!1}},setup(a){const o=a,n=e.computed(()=>({"FSvgImage--colored":!o.useSvgColors})),r=e.computed(()=>({"--fsvgimage--width":t.genSize(o.width),"--fsvgimage--height":t.genSize(o.height),"--fsvgimage--stroke-color":s.getCssColor(o.strokeColor),"--fsvgimage--fill-color":s.getCssColor(o.fillColor)}));return(l,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FSvgImage",e.unref(n)]),ref:"svgRef",style:e.normalizeStyle(e.unref(r))},[l.markup?(e.openBlock(),e.createElementBlock("div",{key:0,class:"FSvgImage__content",role:"img","aria-label":l.alt,innerHTML:l.markup},null,8,c)):l.src?(e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("img",{src:l.src,alt:l.alt},null,8,g)])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"FSvgImage__content",role:"img","aria-label":l.alt},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.component)))],8,m))],6))}});module.exports=u;