Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added Quick Validation to New Theme Modal

Browse Source
This commit is contained in:
zackbcom 2021-01-05 13:15:06 -06:00
parent 06ffa16a44
commit 1c6d38be9c
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/Admin/ThemeUI/NewTheme.vue
View File

@ -5,10 +5,18 @@
<v-card> <v-card>
<v-card-title> Add a New Theme </v-card-title> <v-card-title> Add a New Theme </v-card-title>
<v-card-text> <v-card-text>
<v-text-field label="Theme Name" v-model="themeName"></v-text-field> <v-text-field
label="Theme Name"
v-model="themeName"
:rules="[rules.required]"
></v-text-field>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="success" text @click="Select"> Create </v-btn> <v-spacer></v-spacer>
<v-btn color="grey" text @click="dialog = false"> Cancel </v-btn>
<v-btn color="success" text @click="Select" :disabled="!themeName">
Create
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
@ -19,19 +27,22 @@
export default { export default {
props: { props: {
buttonText: String, buttonText: String,
value: String, value: String
}, },
data() { data() {
return { return {
dialog: false, dialog: false,
themeName: "", themeName: "",
rules: {
required: val => !!val || "Required."
}
}; };
}, },
watch: { watch: {
color() { color() {
this.updateColor(); this.updateColor();
}, }
}, },
methods: { methods: {
randomColor() { randomColor() {
@ -47,14 +58,14 @@ export default {
success: this.randomColor(), success: this.randomColor(),
info: this.randomColor(), info: this.randomColor(),
warning: this.randomColor(), warning: this.randomColor(),
error: this.randomColor(), error: this.randomColor()
}, }
}; };
this.$emit("new-theme", newTheme); this.$emit("new-theme", newTheme);
this.dialog = false; this.dialog = false;
}, }
}, }
}; };
</script> </script>