125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
branch: {
|
|
icon: string;
|
|
count: number;
|
|
label: string;
|
|
color:
|
|
| 'pink'
|
|
| 'purple'
|
|
| 'green'
|
|
| 'orange'
|
|
| 'cyan'
|
|
| 'yellow'
|
|
| 'red'
|
|
| 'magenta';
|
|
}[];
|
|
dark?: boolean;
|
|
labelI18n?: boolean;
|
|
}>(),
|
|
{
|
|
labelI18n: false,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row no-wrap" style="gap: var(--size-4)" :class="{ dark }">
|
|
<div
|
|
v-for="v in props.branch"
|
|
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)"
|
|
text-color="white"
|
|
:icon="v.icon"
|
|
/>
|
|
</div>
|
|
<div class="col-6 justify-center column">
|
|
<div class="col-6 ellipsis text-bold" style="width: 100%">
|
|
{{ labelI18n ? $t(v.label) : v.label }}
|
|
<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__orange {
|
|
--_color: var(--orange-5-hsl);
|
|
}
|
|
|
|
.stat-card__magenta {
|
|
--_color: var(--pink-8-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__magenta {
|
|
--_color: var(--pink-7-hsl);
|
|
}
|
|
</style>
|