update(background): use bgColor on extra rect

This commit is contained in:
Braks
2022-03-23 06:47:57 +01:00
parent 65d079db20
commit d9c67bef60
@@ -58,11 +58,9 @@ export default {
:style="{ :style="{
height: `${props.height > 100 ? 100 : props.height}%`, height: `${props.height > 100 ? 100 : props.height}%`,
width: `${props.width > 100 ? 100 : props.width}%`, width: `${props.width > 100 ? 100 : props.width}%`,
backgroundColor: props.bgColor ?? '#fff',
}" }"
> >
<pattern <pattern
v-if="props.variant !== BackgroundVariant.None"
:id="patternId" :id="patternId"
:x="background.xOffset" :x="background.xOffset"
:y="background.yOffset" :y="background.yOffset"
@@ -76,6 +74,9 @@ export default {
<template v-else-if="props.variant === BackgroundVariant.Dots"> <template v-else-if="props.variant === BackgroundVariant.Dots">
<circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" /> <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
</template> </template>
<svg height="100" width="100">
<rect width="100%" height="100%" :fill="props.bgColor" />
</svg>
</pattern> </pattern>
<rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" /> <rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" />
<slot></slot> <slot></slot>