Merged to props and events

This commit is contained in:
zackbcom 2021-01-05 12:43:28 -06:00
parent 92f00f41c6
commit 32ade392aa
2 changed files with 112 additions and 46 deletions

View File

@ -3,10 +3,24 @@
<template v-slot:extension> <template v-slot:extension>
<v-col></v-col> <v-col></v-col>
<div v-if="open"> <div v-if="open">
<v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe"> <v-btn
class="mr-2"
fab
dark
small
color="error"
@click="deleteRecipeConfrim"
>
<v-icon>mdi-delete</v-icon> <v-icon>mdi-delete</v-icon>
<Confirmation ref="confirm" />
</v-btn> </v-btn>
<Confirmation
title="Delete Recpie"
message="Are you sure you want to delete this recipie?"
color="error"
icon="mdi-alert-circle"
ref="deleteRecipieConfirm"
v-on:confirm="deleteRecipe()"
/>
<v-btn class="mr-2" fab dark small color="success" @click="save"> <v-btn class="mr-2" fab dark small color="success" @click="save">
<v-icon>mdi-content-save</v-icon> <v-icon>mdi-content-save</v-icon>
@ -26,11 +40,12 @@
export default { export default {
props: { props: {
open: { open: {
default: true, type: Boolean,
}, default: true
}
}, },
components: { components: {
Confirmation: () => import("../UI/Confirmation"), Confirmation: () => import("../UI/Confirmation")
}, },
methods: { methods: {
editor() { editor() {
@ -39,21 +54,16 @@ export default {
save() { save() {
this.$emit("save"); this.$emit("save");
}, },
async deleteRecipe() { deleteRecipeConfrim() {
if ( this.$refs.deleteRecipieConfirm.open();
await this.$refs.confirm.open( },
"Delete Recpie", deleteRecipe() {
"Are you sure you want to delete this recipie?", this.$emit("delete");
{ color: "error", icon: "mdi-alert-circle" }
)
) {
this.$emit("delete");
}
}, },
json() { json() {
this.$emit("json"); this.$emit("json");
}, }
}, }
}; };
</script> </script>

View File

@ -1,14 +1,15 @@
<template> <template>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"
:max-width="options.width" :max-width="width"
:style="{ zIndex: options.zIndex }" :style="{ zIndex: zIndex }"
@click:outside="cancel" @click:outside="cancel"
@keydown.esc="cancel" @keydown.esc="cancel"
> >
<v-card> <v-card>
<v-toolbar v-if="Boolean(title)" :color="options.color" dense flat> <v-toolbar v-if="Boolean(title)" :color="color" dense flat>
<v-icon v-if="Boolean(options.icon)" left> {{ options.icon }}</v-icon> <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
<v-toolbar-title v-text="title" /> <v-toolbar-title v-text="title" />
</v-toolbar> </v-toolbar>
@ -21,51 +22,106 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="grey" text @click="cancel"> Cancel </v-btn> <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
<v-btn :color="options.color" text @click="confirm"> Confirm </v-btn> <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
/**
* Confirmation Component used to add a second validaion step to an action.
* @version 1.0.1
* @author [zackbcom](https://github.com/zackbcom)
* @since Version 1.0.0
*/
export default { export default {
name: "Confirmation", name: "Confirmation",
data: () => ({ props: {
dialog: false, // Wether to show or not /**
resolve: null, * Message to be in body.
reject: null, */
message: null, message: String,
title: null, /**
options: { * Optional Title message to be used in title.
color: "error", */
icon: "mdi-alert-circle", title: String,
width: 400, /**
zIndex: 200, * Optional Icon to be used in title.
noconfirm: false, */
icon: {
type: String,
default: "mid-alert-circle"
}, },
/**
* Color theme of the component. Chose one of the defined theme colors.
* @values primary, secondary, accent, success, info, warning, error
*/
color: {
type: String,
default: "error"
},
/**
* Define the max width of the component.
*/
width: {
type: Number,
default: 400
},
/**
* zIndex of the component.
*/
zIndex: {
type: Number,
default: 200
}
},
data: () => ({
/**
* Keep state of open or closed
*/
dialog: false
}), }),
methods: { methods: {
open(title, message, options) { /**
* Sets the modal to be visiable.
*/
open() {
this.dialog = true; this.dialog = true;
this.title = title;
this.message = message;
this.options = Object.assign(this.options, options);
return new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
}, },
/**
* Cancel button handler.
*/
cancel() { cancel() {
this.resolve(false); /**
* Cancel event.
*
* @event Cancel
* @property {string} content content of the first prop passed to the event
*/
this.$emit("cancel");
//Hide Modal
this.dialog = false; this.dialog = false;
}, },
/**
* confirm button handler.
*/
confirm() { confirm() {
this.resolve(true); /**
* confirm event.
*
* @event confirm
* @property {string} content content of the first prop passed to the event
*/
this.$emit("confirm");
//Hide Modal
this.dialog = false; this.dialog = false;
}, }
}, }
}; };
</script> </script>