refactor: handle btn on dialog

This commit is contained in:
Thanaphon Frappet 2024-12-24 13:19:18 +07:00
parent 29a0269453
commit 1792f60055
2 changed files with 43 additions and 38 deletions

View file

@ -21,6 +21,7 @@ defineProps<{
edit?: boolean; edit?: boolean;
hideFooter?: boolean; hideFooter?: boolean;
hideDelete?: boolean; hideDelete?: boolean;
hideBtn?: boolean;
readonly?: boolean; readonly?: boolean;
saveAmount?: number; saveAmount?: number;
@ -68,44 +69,46 @@ const currentTab = defineModel<string>('currentTab');
}" }"
> >
<div class="row items-center"> <div class="row items-center">
<div v-if="!readonly && isEdit && edit" class="row"> <templatez v-if="!hideBtn">
<q-btn <div v-if="!readonly && isEdit && edit" class="row">
round <q-btn
flat round
id="closeDialog" flat
icon="mdi-arrow-left" id="closeDialog"
padding="xs" icon="mdi-arrow-left"
class="q-mr-md" padding="xs"
:class="{ dark: $q.dark.isActive }" class="q-mr-md"
style="color: var(--brand-1)" :class="{ dark: $q.dark.isActive }"
@click="undo" style="color: var(--brand-1)"
/> @click="undo"
<div style="width: 31.98px"></div> />
</div> <div style="width: 31.98px"></div>
<div v-if="!readonly && !isEdit && edit"> </div>
<q-btn <div v-if="!readonly && !isEdit && edit">
round <q-btn
flat round
id="editDialog" flat
icon="mdi-pencil-outline" id="editDialog"
padding="xs" icon="mdi-pencil-outline"
class="q-mr-md" padding="xs"
:class="{ dark: $q.dark.isActive }" class="q-mr-md"
style="color: var(--brand-1)" :class="{ dark: $q.dark.isActive }"
@click="editData" style="color: var(--brand-1)"
/> @click="editData"
<q-btn />
v-if="edit && !hideDelete" <q-btn
round v-if="edit && !hideDelete"
flat round
id="deleteDialog" flat
icon="mdi-trash-can-outline" id="deleteDialog"
padding="xs" icon="mdi-trash-can-outline"
:class="{ dark: $q.dark.isActive }" padding="xs"
style="color: hsl(var(--negative-bg))" :class="{ dark: $q.dark.isActive }"
@click="deleteData" style="color: hsl(var(--negative-bg))"
/> @click="deleteData"
</div> />
</div>
</templatez>
<div style="width: 31.98px"></div> <div style="width: 31.98px"></div>
<div class="col text-subtitle1 text-weight-bold text-center"> <div class="col text-subtitle1 text-weight-bold text-center">

View file

@ -21,6 +21,7 @@ type Props = {
readonly?: boolean; readonly?: boolean;
autoSave?: boolean; autoSave?: boolean;
data?: Data; data?: Data;
hideBtn?: boolean;
}; };
type HandleProps = { type HandleProps = {
@ -106,6 +107,7 @@ async function change(e: Event) {
weight="90%" weight="90%"
hide-close-event hide-close-event
hide-delete hide-delete
hide-btn
edit edit
:title :title
:is-edit :is-edit