@fifteen/design-system-vue/dist/cjs/components/FLogo.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const u=require("./FSvgImage.js");;/* empty css            */const e=require("vue"),s=require("../utils/getCssColor.js"),d=require("../utils/genSize.js"),p=require("../assets/logos/fifteen_horizontal.js"),f=require("../assets/logos/fifteen_vertical.js"),r=require("../assets/logos/fifteen_text-only.js"),m=require("../assets/logos/fifteen_image-only.js"),g=require("../assets/logos/fifteen_half-image-only.js"),h={class:"FLogo"},_=e.defineComponent({__name:"FLogo",props:{variant:{default:"horizontal"},color:{default:"primary"},width:{default:"auto"},height:{default:"auto"},productName:{default:""},productNameColor:{default:void 0}},setup(n){const t=n,l={horizontal:p.default,vertical:f.default,"image-only":m.default,"half-image-only":g.default,"text-only":r.default,product:r.default},a=e.computed(()=>l[t.variant]),i=e.computed(()=>({"--FLogo--productNameColor":s.getCssColor(t.productNameColor??t.color),"--FLogo--productNameFontSize":d.genSize(t.width,.104)}));return(o,v)=>{const c=u;return e.openBlock(),e.createElementBlock("div",h,[e.createVNode(c,{component:e.unref(a),width:o.width,height:o.height,"fill-color":o.color},null,8,["component","width","height","fill-color"]),o.variant==="product"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"FLogo__productName",style:e.normalizeStyle(e.unref(i))},e.toDisplayString(o.productName),5)):e.createCommentVNode("",!0)])}}});module.exports=_;