60 lines
1.5 KiB
Vue
60 lines
1.5 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-pa-sm" style="min-width: 300px; max-width: 80%">
|
||
|
|
<q-card-section class="row q-pa-sm">
|
||
|
|
<div
|
||
|
|
class="q-pr-md"
|
||
|
|
v-if="icon"
|
||
|
|
style="display: flex; align-items: center"
|
||
|
|
>
|
||
|
|
<q-avatar
|
||
|
|
:icon="icon"
|
||
|
|
size="xl"
|
||
|
|
font-size="25px"
|
||
|
|
color="grey-2"
|
||
|
|
:text-color="color || 'primary'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col text-dark">
|
||
|
|
<span class="text-bold block">{{ title }}</span>
|
||
|
|
<span class="block">{{ message }}</span>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
<q-card-actions align="right" v-if="action || cancel">
|
||
|
|
<q-btn
|
||
|
|
id="btn-cancel-dialog"
|
||
|
|
v-if="cancel"
|
||
|
|
@click="cancel"
|
||
|
|
:label="cancelText || $t('cancel')"
|
||
|
|
:color="color || 'primary'"
|
||
|
|
v-close-popup
|
||
|
|
flat
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
id="btn-ok-dialog"
|
||
|
|
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"></style>
|