mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
Merged to props and events
This commit is contained in:
parent
92f00f41c6
commit
32ade392aa
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user