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

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

"use strict";const e=require("vue"),o=require("../utils/genSize.js"),u=require("../utils/getCssColor.js"),g=require("../composables/useLazyImage.js"),m={class:"FBackgroundImage"},f=e.defineComponent({__name:"FBackgroundImage",props:{src:{},height:{default:"100%"},width:{default:"100%"},position:{default:"initial"},size:{},repeat:{default:"no-repeat"},blendMode:{default:"normal"},color:{default:"none"},loading:{default:"lazy"},placeholder:{default:""}},setup(l){const a=l,r=e.ref(),{isInit:t,isLoaded:c}=g.useLazyImage(r,a.src),d=e.computed(()=>a.loading!=="lazy"||t.value?a.src:""),n=e.computed(()=>({"--fbackgroundimage--src":`url(${d.value})`,"--fbackgroundimage--height":o.genSize(a.height),"--fbackgroundimage--width":o.genSize(a.width),"--fbackgroundimage--color":u.getCssColor(a.color),"--fbackgroundimage--position":o.genSize(a.position),"--fbackgroundimage--size":o.genSize(a.size),"--fbackgroundimage--repeat":o.genSize(a.repeat),"--fbackgroundimage--blend-mode":o.genSize(a.blendMode),"--fbackgroundimage--placeholder":`url(${a.placeholder})`})),i=e.computed(()=>({"FBackgroundImage__placeholder--loaded":c.value}));return(s,p)=>(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("div",{class:"FBackgroundImage__image",ref_key:"backgroundImageRef",ref:r,style:e.normalizeStyle(e.unref(n))},null,4),s.placeholder?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["FBackgroundImage__placeholder",e.unref(i)]),style:e.normalizeStyle(e.unref(n))},null,6)):e.createCommentVNode("",!0)]))}});module.exports=f;