108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string;
|
|
message: string;
|
|
color?: string;
|
|
icon?: string;
|
|
actionText?: string;
|
|
cancelText?: string;
|
|
persistent?: boolean;
|
|
enablei18n?: boolean;
|
|
action?: (...args: unknown[]) => void;
|
|
cancel?: (...args: unknown[]) => void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<q-dialog ref="dialogRef" :persistent="persistent || false">
|
|
<q-card
|
|
class="q-pt-sm"
|
|
style="overflow: visible; min-width: 300px; max-width: 90%"
|
|
>
|
|
<div
|
|
class="box-icon q-pa-sm"
|
|
v-if="icon"
|
|
style="display: flex; align-items: center"
|
|
>
|
|
<q-avatar
|
|
size="60px"
|
|
font-size="25px"
|
|
style="background-color: var(--surface-1)"
|
|
:text-color="color || 'primary'"
|
|
>
|
|
<q-icon
|
|
style="padding: 12px; border: 2px solid; border-radius: 50%"
|
|
:name="icon"
|
|
/>
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div class="text-right q-px-sm">
|
|
<q-btn
|
|
id="`btn-close-dialog`"
|
|
class="btn-close-dialog"
|
|
flat
|
|
size="sm"
|
|
padding="none"
|
|
color="grey"
|
|
icon="mdi-close"
|
|
v-close-popup
|
|
@click="cancel"
|
|
/>
|
|
</div>
|
|
|
|
<q-card-section class="column items-center q-pa-sm">
|
|
<div class="column q-mt-md items-center">
|
|
<span class="text-bold block">
|
|
{{ enablei18n ? $t(title) : title }}
|
|
</span>
|
|
<span class="block q-px-sm text-center" style="max-width: 400px">
|
|
{{ enablei18n ? $t(message) : message }}
|
|
</span>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions class="justify-center" v-if="action || cancel">
|
|
<q-btn
|
|
id="btn-cancel-dialog"
|
|
v-if="cancel"
|
|
unelevated
|
|
class="col btn-cancel-dialog bordered"
|
|
style="
|
|
color: hsl(var(--negative-bg));
|
|
border-color: hsl(var(--negative-bg));
|
|
"
|
|
:class="{ 'full-width': !action }"
|
|
@click="cancel"
|
|
:label="cancelText || $t('general.cancel')"
|
|
v-close-popup
|
|
/>
|
|
|
|
<q-btn
|
|
id="btn-ok-dialog"
|
|
unelevated
|
|
class="col btn-ok-dialog"
|
|
:class="{ 'full-width': !cancel }"
|
|
v-if="action"
|
|
@click="action"
|
|
:label="actionText || $t('general.ok')"
|
|
:color="color || 'primary'"
|
|
v-close-popup
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.box-icon {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 999;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
</style>
|