retailer-vue/src/components/common/ConfirmationDialog.vue

77 lines
2.2 KiB
Vue

<template>
<v-container class="py-0 my-0">
<v-dialog
v-model="confirmationDialog"
origin="left top"
hide-overlay
persistent
max-width="1100px"
flat
>
<v-card tile>
<v-card-title>
<v-row no-gutters>
<v-col cols="11">
<p
class="body mt-7 mb-0 fontcolor-black-light"
>{{confirmationDetails.confirmationMessage}}</p>
</v-col>
<v-col cols="1" class="text-right">
<router-link to class="text-decoration-none black--text fontcolor-black-light">
<div @click="onAction(false)">X</div>
</router-link>
</v-col>
</v-row>
</v-card-title>
<v-card-actions class="px-4">
<v-row no-gutters>
<v-col cols="12">
<v-hover v-slot:default="{ hover }">
<v-btn
class="text-uppercase body-font ma-2 button-background"
tile
large
depressed
:outlined="hover"
:color="hover?'white':'primary'"
:class="hover?'primary--text':'white--text'"
@click="onAction(false)"
>CANCEL</v-btn>
</v-hover>
<v-hover v-slot:default="{ hover }">
<v-btn
class="text-uppercase body-font ma-2 button-background"
:outlined="hover"
:color="hover?'white':'error'"
:class="hover?'error--text':'white--text'"
tile
large
depressed
@click="onAction(true)"
>OK</v-btn>
</v-hover>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-container>
</template>
<script>
export default {
name: "ConfirmationDialog",
props: ["confirmationDialog", "confirmationDetails"],
data: () => ({
//confirmationDialog:false
}),
components: {},
computed: {},
methods: {
onAction: function(action) {
this.$emit("actionRemove", { submit: action });
}
},
created() {}
};
</script>