126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useDialogPluginComponent } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
message: {
|
|
type: [String, Boolean],
|
|
default: null,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
promise: {
|
|
type: Function,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['confirm', 'cancel', ...useDialogPluginComponent.emits]);
|
|
defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
|
|
|
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
|
|
useDialogPluginComponent();
|
|
|
|
const title = props.title || t('Confirm');
|
|
const message =
|
|
props.message ||
|
|
(props.message !== false ? t('Are you sure you want to continue?') : false);
|
|
|
|
const isLoading = ref(false);
|
|
|
|
async function confirm() {
|
|
isLoading.value = true;
|
|
if (props.promise) {
|
|
try {
|
|
await props.promise(props.data);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
}
|
|
onDialogOK(props.data);
|
|
}
|
|
|
|
function cancel() {
|
|
emit('cancel');
|
|
onDialogCancel();
|
|
}
|
|
</script>
|
|
<template>
|
|
<QDialog ref="dialogRef" @hide="onDialogHide">
|
|
<QCard class="q-pa-sm">
|
|
<QCardSection class="row items-center q-pb-none">
|
|
<QAvatar
|
|
:icon="icon"
|
|
color="primary"
|
|
text-color="white"
|
|
size="xl"
|
|
v-if="icon"
|
|
/>
|
|
<span class="text-h6">{{ title }}</span>
|
|
<QSpace />
|
|
<QBtn
|
|
icon="close"
|
|
:disable="isLoading"
|
|
flat
|
|
round
|
|
dense
|
|
@click="cancel()"
|
|
/>
|
|
</QCardSection>
|
|
<QCardSection class="q-pb-none" data-cy="VnConfirm_message">
|
|
<span v-if="message !== false" v-html="message" />
|
|
</QCardSection>
|
|
<QCardSection class="row items-center q-pt-none">
|
|
<slot name="customHTML"></slot>
|
|
</QCardSection>
|
|
<QCardActions align="right">
|
|
<QBtn
|
|
:label="t('globals.cancel')"
|
|
color="primary"
|
|
:disable="isLoading"
|
|
flat
|
|
@click="cancel()"
|
|
data-cy="VnConfirm_cancel"
|
|
/>
|
|
<QBtn
|
|
:label="t('globals.confirm')"
|
|
:title="t('globals.confirm')"
|
|
color="primary"
|
|
:loading="isLoading"
|
|
@click="confirm()"
|
|
unelevated
|
|
autofocus
|
|
data-cy="VnConfirm_confirm"
|
|
/>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.q-card {
|
|
min-width: 350px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Confirm: Confirmar
|
|
Are you sure you want to continue?: ¿Seguro que quieres continuar?
|
|
</i18n>
|