35 lines
776 B
Vue
35 lines
776 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const $props = defineProps({
|
|
colors: {
|
|
type: String,
|
|
default: '{"value": []}',
|
|
},
|
|
});
|
|
|
|
const colorArray = computed(() => JSON.parse($props.colors)?.value);
|
|
const maxHeight = 30;
|
|
const colorHeight = maxHeight / colorArray.value?.length;
|
|
</script>
|
|
<template>
|
|
<div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
|
|
<div
|
|
v-for="(color, index) in colorArray"
|
|
:key="index"
|
|
:style="{
|
|
backgroundColor: `#${color}`,
|
|
height: `${colorHeight}px`,
|
|
}"
|
|
>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.color-div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|