90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import AppBox from 'components/app/AppBox.vue';
|
|
|
|
const selector = defineModel('selector');
|
|
|
|
defineProps<{
|
|
list: {
|
|
label: string;
|
|
count: number;
|
|
}[];
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<AppBox bordered>
|
|
<q-list>
|
|
<q-item
|
|
v-for="v in list"
|
|
:key="v.label"
|
|
:class="v.count === 0 ? 'disable-item' : ''"
|
|
:clickable="v.count > 0"
|
|
:active="selector === v.label"
|
|
:active-class="
|
|
selector === v.label
|
|
? $q.dark.isActive
|
|
? 'active dark'
|
|
: 'active'
|
|
: ''
|
|
"
|
|
@click="selector = v.label"
|
|
>
|
|
<div class="row full-width justify-between">
|
|
<div>
|
|
{{ $t(v.label) }}
|
|
</div>
|
|
<div class="dot text-weight-bold">{{ v.count }}</div>
|
|
</div>
|
|
</q-item>
|
|
</q-list>
|
|
</AppBox>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.active {
|
|
color: hsl(var(--info-fg)) !important;
|
|
background-color: hsl(var(--info-bg));
|
|
border-radius: var(--radius-3);
|
|
|
|
.dot {
|
|
background-color: hsla(var(--info-bg));
|
|
border: 1px solid hsl(var(--info-bg));
|
|
color: white;
|
|
}
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--info-bg));
|
|
}
|
|
}
|
|
|
|
.q-item {
|
|
align-items: center;
|
|
border-radius: var(--radius-3);
|
|
border: 1px solid transparent;
|
|
padding: 6px 16px;
|
|
min-height: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.disable-item {
|
|
color: hsl(var(--text-mute));
|
|
|
|
.dot {
|
|
color: hsl(var(--text-mute));
|
|
border: 1px solid transparent;
|
|
background-color: hsla(var(--text-mute) / 0.1);
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: hsla(var(--info-bg) / 0.1);
|
|
border: 1px solid transparent;
|
|
color: hsl(var(--info-bg));
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|