mirror of
https://codeberg.org/yeentown/barkey
synced 2024-12-04 16:47:26 +00:00
52 lines
987 B
Vue
52 lines
987 B
Vue
|
<template>
|
||
|
|
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" @closed="emit('closed')">
|
||
|
|
<div v-if="title" class="qpcyisrl">
|
||
|
|
<div class="title">{{ title }}</div>
|
||
|
|
<div v-for="x in series" class="series">
|
||
|
|
<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
|
||
|
|
<span>{{ x.text }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</MkTooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { } from 'vue';
|
||
|
|
import MkTooltip from './ui/tooltip.vue';
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
showing: boolean;
|
||
|
|
x: number;
|
||
|
|
y: number;
|
||
|
|
title: string;
|
||
|
|
series: {
|
||
|
|
backgroundColor: string;
|
||
|
|
borderColor: string;
|
||
|
|
text: string;
|
||
|
|
}[];
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(ev: 'closed'): void;
|
||
|
|
}>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.qpcyisrl {
|
||
|
|
> .title {
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .series {
|
||
|
|
> .color {
|
||
|
|
display: inline-block;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-width: 1px;
|
||
|
|
border-style: solid;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|