chamomind/jws-frontend
chamomind/jws-frontend
7
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

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

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