61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
open: boolean
|
|
title: string
|
|
message: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
confirmClass?: string
|
|
pending?: boolean
|
|
}>(), {
|
|
confirmLabel: 'Conferma',
|
|
cancelLabel: 'Annulla',
|
|
confirmClass: 'btn-danger',
|
|
pending: false,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
cancel: []
|
|
confirm: []
|
|
}>()
|
|
|
|
const handleBackdropClick = (event: MouseEvent) => {
|
|
if (event.target === event.currentTarget && !props.pending) {
|
|
emit('cancel')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="open">
|
|
<div class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
|
|
<div
|
|
class="modal fade show d-block"
|
|
tabindex="-1"
|
|
style="z-index: 1050;"
|
|
@click="handleBackdropClick"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content shadow">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ title }}</h5>
|
|
<button type="button" class="btn-close" :disabled="pending" @click="emit('cancel')"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="mb-0">{{ message }}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" :disabled="pending" @click="emit('cancel')">
|
|
{{ cancelLabel }}
|
|
</button>
|
|
<button type="button" class="btn" :class="confirmClass" :disabled="pending" @click="emit('confirm')">
|
|
<span v-if="pending" class="spinner-border spinner-border-sm me-2"></span>
|
|
{{ confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|