97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string;
|
|
message: string;
|
|
color?: string;
|
|
icon?: string;
|
|
actionText?: string;
|
|
cancelText?: string;
|
|
persistent?: 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: 80%"
|
|
>
|
|
<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
|
|
flat
|
|
size="sm"
|
|
padding="none"
|
|
color="grey"
|
|
icon="mdi-close"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
|
|
<q-card-section class="column items-center q-pa-sm">
|
|
<div class="column q-mt-md items-center">
|
|
<span class="text-bold block">{{ title }}</span>
|
|
<span class="block">{{ message }}</span>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions
|
|
:class="{ 'no-padding': !action || !cancel }"
|
|
align="right"
|
|
v-if="action || cancel"
|
|
>
|
|
<q-btn
|
|
id="btn-cancel-dialog"
|
|
v-if="cancel"
|
|
:class="{ 'full-width': !action }"
|
|
@click="cancel"
|
|
:label="cancelText || $t('cancel')"
|
|
:color="color || 'primary'"
|
|
v-close-popup
|
|
flat
|
|
/>
|
|
|
|
<q-btn
|
|
id="btn-ok-dialog"
|
|
:class="{ 'full-width': !cancel }"
|
|
v-if="action"
|
|
@click="action"
|
|
:label="actionText || $t('ok')"
|
|
:color="color || 'primary'"
|
|
v-close-popup
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.box-icon {
|
|
position: absolute;
|
|
top: -40px;
|
|
right: 37.5%;
|
|
z-index: 999;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
</style>
|