175 lines
3.3 KiB
Vue
175 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
branch: {
|
|
hidden?: boolean;
|
|
icon: string;
|
|
count: number;
|
|
label: string;
|
|
color:
|
|
| 'pink'
|
|
| 'purple'
|
|
| 'green'
|
|
| 'orange'
|
|
| 'dark-orange'
|
|
| 'cyan'
|
|
| 'yellow'
|
|
| 'light-yellow'
|
|
| 'red'
|
|
| 'magenta'
|
|
| 'blue'
|
|
| 'lime'
|
|
| 'light-purple'
|
|
| 'light-green'
|
|
| 'gray';
|
|
}[];
|
|
dark?: boolean;
|
|
textSize?: string;
|
|
labelI18n?: boolean;
|
|
}>(),
|
|
{
|
|
labelI18n: false,
|
|
textSize: '12px',
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
|
|
<div
|
|
v-for="v in branch.filter((v) => !v.hidden)"
|
|
class="no-padding stat-card"
|
|
:class="{ [`stat-card__${v.color}`]: true }"
|
|
:key="v.label"
|
|
>
|
|
<div class="stat-card__content row items-center q-pa-sm">
|
|
<div class="col-4 text-center">
|
|
<q-avatar size="lg" style="background-color: hsla(0 0% 100% /0.2)">
|
|
<Icon :icon="v.icon" width="24px" />
|
|
</q-avatar>
|
|
</div>
|
|
<div class="col-6 justify-center column">
|
|
<div
|
|
class="col-6 ellipsis text-bold text-caption"
|
|
style="width: 100%"
|
|
>
|
|
<span :style="`font-size: ${textSize}`">
|
|
{{ labelI18n ? $t(v.label) : v.label }}
|
|
</span>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="bottom middle"
|
|
:offset="[10, 10]"
|
|
>
|
|
{{ labelI18n ? $t(v.label) : v.label }}
|
|
</q-tooltip>
|
|
</div>
|
|
|
|
<div class="col-6">{{ v.count }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stat-card {
|
|
border-radius: var(--radius-2);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.stat-card__content {
|
|
z-index: 2;
|
|
color: hsla(var(--gray-0-hsl) / 1);
|
|
background: hsla(var(--_color) / 1);
|
|
height: 100%;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.stat-card__purple {
|
|
--_color: var(--violet-11-hsl);
|
|
}
|
|
|
|
.stat-card__pink {
|
|
--_color: var(--pink-6-hsl);
|
|
}
|
|
|
|
.stat-card__green {
|
|
--_color: var(--teal-10-hsl);
|
|
}
|
|
|
|
.stat-card__cyan {
|
|
--_color: var(--cyan-7-hsl);
|
|
}
|
|
|
|
.stat-card__red {
|
|
--_color: var(--red-6-hsl);
|
|
}
|
|
|
|
.stat-card__yellow {
|
|
--_color: var(--orange-4-hsl);
|
|
}
|
|
|
|
.stat-card__light-yellow {
|
|
--_color: var(--yellow-6-hsl);
|
|
}
|
|
|
|
.stat-card__orange {
|
|
--_color: var(--orange-5-hsl);
|
|
}
|
|
|
|
.stat-card__dark-orange {
|
|
--_color: var(--orange-10-hsl);
|
|
}
|
|
|
|
.stat-card__magenta {
|
|
--_color: var(--pink-8-hsl);
|
|
}
|
|
|
|
.stat-card__lime {
|
|
--_color: var(--jungle-8-hsl);
|
|
}
|
|
|
|
.stat-card__light-green {
|
|
--_color: var(--green-8-hsl);
|
|
}
|
|
|
|
.stat-card__light-purple {
|
|
--_color: var(--purple-7-hsl);
|
|
}
|
|
|
|
.stat-card__blue {
|
|
--_color: var(--blue-6-hsl);
|
|
}
|
|
|
|
.stat-card__gray {
|
|
--_color: var(--gray-6-hsl);
|
|
}
|
|
|
|
.dark .stat-card__purple {
|
|
--_color: var(--violet-10-hsl);
|
|
}
|
|
|
|
.dark .stat-card__green {
|
|
--_color: var(--teal-8-hsl);
|
|
}
|
|
|
|
.dark .stat-card__orange {
|
|
--_color: var(--orange-6-hsl);
|
|
}
|
|
|
|
.dark.stat-card__dark-orange {
|
|
--_color: var(--orange-11-hsl);
|
|
}
|
|
|
|
.dark .stat-card__magenta {
|
|
--_color: var(--pink-7-hsl);
|
|
}
|
|
|
|
.dark .stat-card__blue {
|
|
--_color: var(--blue-10-hsl);
|
|
}
|
|
</style>
|