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

fix: change global dialog

Browse source
This commit is contained in:
puriphatt 2024-06-10 11:23:21 +00:00
parent 21e59f0df8
commit 1e51ad558c
1 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/GlobalDialog.vue
View file

@ -7,6 +7,7 @@ defineProps<{
actionText?: string; actionText?: string;
cancelText?: string; cancelText?: string;
persistent?: boolean; persistent?: boolean;
enablei18n?: boolean;
action?: (...args: unknown[]) => void; action?: (...args: unknown[]) => void;
cancel?: (...args: unknown[]) => void; cancel?: (...args: unknown[]) => void;
}>(); }>();
@ -15,7 +16,7 @@ defineProps<{
<q-dialog ref="dialogRef" :persistent="persistent || false"> <q-dialog ref="dialogRef" :persistent="persistent || false">
<q-card <q-card
class="q-pt-sm" class="q-pt-sm"
style="overflow: visible; min-width: 300px; max-width: 80%" style="overflow: visible; min-width: 300px; max-width: 90%"
> >
<div <div
class="box-icon q-pa-sm" class="box-icon q-pa-sm"
@ -37,6 +38,8 @@ defineProps<{
<div class="text-right q-px-sm"> <div class="text-right q-px-sm">
<q-btn <q-btn
id="`btn-close-dialog`"
class="btn-close-dialog"
flat flat
size="sm" size="sm"
padding="none" padding="none"
@ -48,33 +51,40 @@ defineProps<{
<q-card-section class="column items-center q-pa-sm"> <q-card-section class="column items-center q-pa-sm">
<div class="column q-mt-md items-center"> <div class="column q-mt-md items-center">
<span class="text-bold block">{{ title }}</span> <span class="text-bold block">
<span class="block">{{ message }}</span> {{ enablei18n ? $t(title) : title }}
</span>
<span class="block q-px-sm" style="max-width: 400px">
{{ enablei18n ? $t(message) : message }}
</span>
</div> </div>
</q-card-section> </q-card-section>
<q-card-actions <q-card-actions
:class="{ 'no-padding': !action || !cancel }" :class="{ 'no-padding': !action || !cancel }"
align="right" class="justify-center"
v-if="action || cancel" v-if="action || cancel"
> >
<q-btn <q-btn
id="btn-cancel-dialog" id="btn-cancel-dialog"
v-if="cancel" v-if="cancel"
class="col btn-cancel-dialog"
outline
:color="color || 'primary'"
:class="{ 'full-width': !action }" :class="{ 'full-width': !action }"
@click="cancel" @click="cancel"
:label="cancelText || $t('cancel')" :label="cancelText || $t('cancel')"
:color="color || 'primary'"
v-close-popup v-close-popup
flat
/> />
<q-btn <q-btn
id="btn-ok-dialog" id="btn-ok-dialog"
unelevated
class="col btn-ok-dialog"
:class="{ 'full-width': !cancel }" :class="{ 'full-width': !cancel }"
v-if="action" v-if="action"
@click="action" @click="action"
:label="actionText || $t('ok')" :label="actionText || $t('defaultDialog')"
:color="color || 'primary'" :color="color || 'primary'"
v-close-popup v-close-popup
/> />
@ -87,7 +97,8 @@ defineProps<{
.box-icon { .box-icon {
position: absolute; position: absolute;
top: -40px; top: -40px;
right: 37.5%; left: 50%;
transform: translateX(-50%);
z-index: 999; z-index: 999;
} }