96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<template>
|
|
<v-container class="py-0 my-0">
|
|
<v-dialog
|
|
v-model="confirmationDialogKey"
|
|
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="{ isHovering , props}">
|
|
<v-btn
|
|
class="text-uppercase body-font ma-2 button-background"
|
|
v-bind="props"
|
|
size="large"
|
|
rounded="0"
|
|
@click="onAction(false)"
|
|
:variant="isHovering ? 'outlined' : 'outlined'"
|
|
:class="
|
|
isHovering ? ' bg-white text-primary' : 'bg-primary'
|
|
"
|
|
>CANCEL</v-btn>
|
|
</v-hover>
|
|
<v-hover v-slot:default="{ isHovering , props }">
|
|
<v-btn
|
|
class="text-uppercase body-font ma-2 button-background text-white"
|
|
:variant="isHovering ? 'outlined' : 'outlined'"
|
|
:class="
|
|
isHovering ? ' textColor' : 'bgColor'
|
|
"
|
|
v-bind="props"
|
|
size="large"
|
|
rounded="0"
|
|
@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: "ConfirmationDialogForm",
|
|
props: ["confirmationDialog", "confirmationDetails"],
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
components: {},
|
|
computed: {
|
|
confirmationDialogKey(){
|
|
return this.confirmationDialog
|
|
}
|
|
},
|
|
methods: {
|
|
onAction: function(action) {
|
|
this.$emit("actionRemove", { submit: action });
|
|
}
|
|
},
|
|
created() {}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.bgColor{
|
|
background-color: red;
|
|
}
|
|
.textColor{
|
|
background-color: white !important;
|
|
color: red !important;
|
|
}
|
|
</style>
|
|
|
|
|