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

fix: dot vertical (person card)

Browse source
This commit is contained in:
puriphatt 2024-04-19 10:54:12 +07:00
parent f7514e64a5
commit 9011126e8f
1 changed files with 55 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/home/PersonCard.vue
View file

@ -68,56 +68,75 @@ defineEmits<{
size="sm" size="sm"
@click.stop="" @click.stop=""
> >
<q-menu :offset="[0, 10]" style="width: 130px"> <q-menu class="bordered">
<q-list> <q-list v-close-popup>
<q-item <q-item
clickable clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('enterCard', 'INFO', v.id)"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
dense
clickable
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('updateCard', 'FORM', v.id)" @click="$emit('updateCard', 'FORM', v.id)"
v-close-popup v-close-popup
> >
<q-item-section class="col-4">
<q-icon <q-icon
class="full-width"
name="mdi-pencil-outline" name="mdi-pencil-outline"
color="positive" class="col-3"
size="xs" size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/> />
</q-item-section> <span class="col-9 q-px-md flex items-center">
<q-item-section class="text-caption">
{{ $t('edit') }} {{ $t('edit') }}
</q-item-section> </span>
</q-item> </q-item>
<q-item <q-item
dense
clickable clickable
@click="$emit('deleteCard', v.id)" @click="$emit('deleteCard', v.id)"
v-close-popup v-close-popup
> >
<q-item-section class="col-4">
<q-icon <q-icon
class="full-width"
name="mdi-trash-can-outline" name="mdi-trash-can-outline"
color="negative"
size="xs" size="xs"
class="col-3 app-text-negative"
/> />
</q-item-section> <span class="col-9 q-px-md flex items-center">
<q-item-section class="text-caption">
{{ $t('delete') }} {{ $t('delete') }}
</q-item-section> </span>
</q-item> </q-item>
<q-item clickable> <q-item dense>
<q-item-section class="col-4"> <q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle <q-toggle
dense dense
color="primary" size="sm"
size="xs"
@click="$emit('toggleStatus', v.id)" @click="$emit('toggleStatus', v.id)"
:model-value="!v.disabled" :model-value="!v.disabled"
val="xs" val="xs"
padding="none" padding="none"
:label="
v.disabled
? $t('switchOnLabel')
: $t('switchOffLabel')
"
/> />
</q-item-section> </div>
<q-item-section class="text-caption">
{{ v.disabled ? 'เปิดสถานะ' : 'ปิดสถานะ' }}
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>