mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 20:45:23 +02:00
62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-btn text color="success" @click="dialog = true"> New </v-btn>
|
||
|
|
<v-dialog v-model="dialog" width="400">
|
||
|
|
<v-card>
|
||
|
|
<v-card-title> Add a New Theme </v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<v-text-field label="Theme Name" v-model="themeName"></v-text-field>
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-btn color="success" text @click="Select"> Create </v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
buttonText: String,
|
||
|
|
value: String,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialog: false,
|
||
|
|
themeName: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
color() {
|
||
|
|
this.updateColor();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
randomColor() {
|
||
|
|
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||
|
|
},
|
||
|
|
Select() {
|
||
|
|
const newTheme = {
|
||
|
|
name: this.themeName,
|
||
|
|
colors: {
|
||
|
|
primary: this.randomColor(),
|
||
|
|
accent: this.randomColor(),
|
||
|
|
secondary: this.randomColor(),
|
||
|
|
success: this.randomColor(),
|
||
|
|
info: this.randomColor(),
|
||
|
|
warning: this.randomColor(),
|
||
|
|
error: this.randomColor(),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
this.$emit("new-theme", newTheme);
|
||
|
|
this.dialog = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|