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>
<v-col></v-col>
<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>
<Confirmation ref="confirm" />
</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-icon>mdi-content-save</v-icon>
@ -26,11 +40,12 @@
export default {
props: {
open: {
default: true,
},
type: Boolean,
default: true
}
},
components: {
Confirmation: () => import("../UI/Confirmation"),
Confirmation: () => import("../UI/Confirmation")
},
methods: {
editor() {
@ -39,21 +54,16 @@ export default {
save() {
this.$emit("save");
},
async deleteRecipe() {
if (
await this.$refs.confirm.open(
"Delete Recpie",
"Are you sure you want to delete this recipie?",
{ color: "error", icon: "mdi-alert-circle" }
)
) {
this.$emit("delete");
}
deleteRecipeConfrim() {
this.$refs.deleteRecipieConfirm.open();
},
deleteRecipe() {
this.$emit("delete");
},
json() {
this.$emit("json");
},
},
}
}
};
</script>

View File

@ -1,14 +1,15 @@
<template>
<v-dialog
v-model="dialog"
:max-width="options.width"
:style="{ zIndex: options.zIndex }"
:max-width="width"
:style="{ zIndex: zIndex }"
@click:outside="cancel"
@keydown.esc="cancel"
>
<v-card>
<v-toolbar v-if="Boolean(title)" :color="options.color" dense flat>
<v-icon v-if="Boolean(options.icon)" left> {{ options.icon }}</v-icon>
<v-toolbar v-if="Boolean(title)" :color="color" dense flat>
<v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
<v-toolbar-title v-text="title" />
</v-toolbar>
@ -21,51 +22,106 @@
<v-card-actions>
<v-spacer></v-spacer>
<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>
</v-dialog>
</template>
<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 {
name: "Confirmation",
data: () => ({
dialog: false, // Wether to show or not
resolve: null,
reject: null,
message: null,
title: null,
options: {
color: "error",
icon: "mdi-alert-circle",
width: 400,
zIndex: 200,
noconfirm: false,
props: {
/**
* Message to be in body.
*/
message: String,
/**
* Optional Title message to be used in title.
*/
title: String,
/**
* Optional Icon to be used in title.
*/
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: {
open(title, message, options) {
/**
* Sets the modal to be visiable.
*/
open() {
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() {
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;
},
/**
* confirm button handler.
*/
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;
},
},
}
}
};
</script>