139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
confirmationQuestion: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
isDialogVisible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
confirmTitle: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
confirmMsg: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
cancelTitle: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
cancelMsg: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:isDialogVisible", "confirm"]);
|
|
|
|
const unsubscribed = ref(false);
|
|
const cancelled = ref(false);
|
|
|
|
const updateModelValue = (val) => {
|
|
emit("update:isDialogVisible", val);
|
|
};
|
|
|
|
const onConfirmation = () => {
|
|
emit("confirm", true);
|
|
updateModelValue(false);
|
|
unsubscribed.value = true;
|
|
};
|
|
|
|
const onCancel = () => {
|
|
emit("confirm", false);
|
|
emit("update:isDialogVisible", false);
|
|
cancelled.value = true;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 👉 Confirm Dialog -->
|
|
<VDialog
|
|
max-width="500"
|
|
:model-value="props.isDialogVisible"
|
|
@update:model-value="updateModelValue"
|
|
>
|
|
<VCard class="text-center px-10 py-6">
|
|
<VCardText>
|
|
<VBtn
|
|
icon
|
|
variant="outlined"
|
|
color="warning"
|
|
class="my-4"
|
|
size="x-large"
|
|
>
|
|
<span class="text-4xl">!</span>
|
|
</VBtn>
|
|
|
|
<h6 class="text-lg font-weight-medium">
|
|
{{ props.confirmationQuestion }}
|
|
</h6>
|
|
</VCardText>
|
|
|
|
<VCardText class="d-flex align-center justify-center gap-4">
|
|
<VBtn variant="elevated" @click="onConfirmation">
|
|
Confirm
|
|
</VBtn>
|
|
|
|
<VBtn color="secondary" variant="outlined" @click="onCancel">
|
|
Cancel
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
|
|
<!-- Unsubscribed -->
|
|
<VDialog v-model="unsubscribed" max-width="500">
|
|
<VCard>
|
|
<VCardText class="text-center px-10 py-6">
|
|
<VBtn
|
|
icon
|
|
variant="outlined"
|
|
color="success"
|
|
class="my-4"
|
|
size="x-large"
|
|
>
|
|
<span class="text-xl">
|
|
<VIcon icon="ri-check-line" />
|
|
</span>
|
|
</VBtn>
|
|
|
|
<h1 class="text-h4 mb-4">
|
|
{{ props.confirmTitle }}
|
|
</h1>
|
|
|
|
<p>{{ props.confirmMsg }}</p>
|
|
|
|
<VBtn color="success" @click="unsubscribed = false"> Ok </VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
|
|
<!-- Cancelled -->
|
|
<VDialog v-model="cancelled" max-width="500">
|
|
<VCard>
|
|
<VCardText class="text-center px-10 py-6">
|
|
<VBtn
|
|
icon
|
|
variant="outlined"
|
|
color="error"
|
|
class="my-4"
|
|
size="x-large"
|
|
>
|
|
<span class="text-2xl font-weight-light">X</span>
|
|
</VBtn>
|
|
|
|
<h1 class="text-h4 mb-4">
|
|
{{ props.cancelTitle }}
|
|
</h1>
|
|
|
|
<p>{{ props.cancelMsg }}</p>
|
|
|
|
<VBtn color="success" @click="cancelled = false"> Ok </VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|