Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-27 17:19:40 +02:00
Code Issues Releases Activity

TheButton global component (#425)

Browse source 
Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-05-24 10:12:46 -08:00 • committed by GitHub
parent fd1b54ae70
commit 034a21e203
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 283 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

158
frontend/src/components/UI/Buttons/TheButton.vue Normal file
View file

@ -0,0 +1,158 @@
<template>
<v-btn
:color="btnAttrs.color"
:small="small"
:x-small="xSmall"
:loading="loading"
@click="$emit('click')"
:outlined="btnStyle.outlined"
:text="btnStyle.text"
>
<v-icon left>
<slot name="icon">
{{ btnAttrs.icon }}
</slot>
</v-icon>
<slot>
{{ btnAttrs.text }}
</slot>
</v-btn>
</template>
<script>
export default {
name: "theButton",
props: {
// Types
cancel: {
type: Boolean,
default: false,
},
create: {
type: Boolean,
default: false,
},
update: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
delete: {
type: Boolean,
default: false,
},
// Property
loading: {
type: Boolean,
default: false,
},
// Styles
small: {
type: Boolean,
default: false,
},
xSmall: {
type: Boolean,
default: false,
},
secondary: {
type: Boolean,
default: false,
},
minor: {
type: Boolean,
default: false,
},
},
data() {
return {
buttonOptions: {
create: {
text: this.$t("general.create"),
icon: this.$globals.icons.create,
color: "success",
},
update: {
text: this.$t("general.update"),
icon: this.$globals.icons.update,
color: "success",
},
save: {
text: this.$t("general.save"),
icon: this.$globals.icons.save,
color: "success",
},
edit: {
text: this.$t("general.edit"),
icon: this.$globals.icons.edit,
color: "info",
},
delete: {
text: this.$t("general.delete"),
icon: this.$globals.icons.delete,
color: "error",
},
cancel: {
text: this.$t("general.cancel"),
icon: this.$globals.icons.close,
color: "grey",
},
},
buttonStyles: {
defaults: {
text: false,
outlined: false,
},
secondary: {
text: false,
outlined: true,
},
minor: {
outlined: false,
text: true,
},
},
};
},
computed: {
btnAttrs() {
if (this.delete) {
return this.buttonOptions.delete;
} else if (this.update) {
return this.buttonOptions.update;
} else if (this.edit) {
return this.buttonOptions.edit;
} else if (this.cancel) {
this.setMinor();
return this.buttonOptions.cancel;
} else if (this.save) {
return this.buttonOptions.save;
}
return this.buttonOptions.create;
},
btnStyle() {
if (this.secondary) {
return this.buttonStyles.secondary;
} else if (this.minor) {
return this.buttonStyles.minor;
}
return this.buttonStyles.defaults;
},
},
methods: {
setMinor() {
this.buttonStyles.defaults = this.buttonStyles.minor;
},
setSecondary() {
this.buttonStyles.defaults = this.buttonStyles.secondary;
},
},
};
</script>
<style lang="scss" scoped>
</style>