chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: selectorList color and space

Browse source
This commit is contained in:
puriphatt 2024-04-18 18:23:20 +07:00
parent dfe9a55bdb
commit f019c62351
1 changed files with 27 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/SelectorList.vue
View file

@ -16,7 +16,8 @@ defineProps<{
<q-item <q-item
v-for="v in list" v-for="v in list"
:key="v.label" :key="v.label"
clickable :class="v.count === 0 ? 'disable-item' : ''"
:clickable="v.count > 0"
:active="selector === v.label" :active="selector === v.label"
:active-class=" :active-class="
selector === v.label selector === v.label
@ -27,8 +28,12 @@ defineProps<{
" "
@click="selector = v.label" @click="selector = v.label"
> >
<q-item-section>{{ $t(v.label) }}</q-item-section> <div class="row full-width justify-between">
<div class="dot text-weight-bold">{{ v.count }}</div> <div>
{{ $t(v.label) }}
</div>
<div class="dot text-weight-bold">{{ v.count }}</div>
</div>
</q-item> </q-item>
</q-list> </q-list>
</AppBox> </AppBox>
@ -41,8 +46,9 @@ defineProps<{
border-radius: var(--radius-3); border-radius: var(--radius-3);
.dot { .dot {
color: var(--blue-6); background-color: hsla(var(--info-bg));
background-color: white; border: 1px solid hsl(var(--info-bg));
color: white;
} }
&.dark { &.dark {
@ -54,15 +60,28 @@ defineProps<{
.q-item { .q-item {
align-items: center; align-items: center;
border-radius: var(--radius-3); border-radius: var(--radius-3);
color: hsl(var(--stone-4-hsl));
border: 1px solid transparent; 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 { .dot {
height: 25px; height: 25px;
width: 25px; width: 25px;
background-color: hsl(var(--stone-4-hsl)); background-color: hsla(var(--info-bg) / 0.1);
color: white; border: 1px solid transparent;
color: hsl(var(--info-bg));
border-radius: 50%; border-radius: 50%;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;