github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-07-07 05:22:18 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(frontend): 🏗️ scafold pages and componenets folder

Browse source 
Setup the file structure for components, pages, layouts, api, and all new frontend structure
This commit is contained in:
hay-kot 2021-07-31 14:45:28 -08:00
parent 8d3db89327
commit 91f56b42de
47 changed files with 1027 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

164
frontend/components/global/BaseButton.vue Normal file
View file

@ -0,0 +1,164 @@
<template>
<v-btn
:color="btnAttrs.color"
:small="small"
:x-small="xSmall"
:loading="loading"
:disabled="disabled"
:outlined="btnStyle.outlined"
:text="btnStyle.text"
:to="to"
@click="$emit('click')"
>
<v-icon left>
<slot name="icon">
{{ btnAttrs.icon }}
</slot>
</v-icon>
<slot name="default">
{{ btnAttrs.text }}
</slot>
</v-btn>
</template>
<script>
export default {
name: "BaseButton",
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,
},
disabled: {
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,
},
to: {
type: String,
default: null,
},
},
data() {
return {
buttonOptions: {
create: {
text: "Create",
icon: "mdi-plus",
color: "success",
},
update: {
text: "Update",
icon: "mdi-edit",
color: "success",
},
save: {
text: "Save",
icon: "mdi-save",
color: "success",
},
edit: {
text: "Edit",
icon: "mdi-square-edit-outline",
color: "info",
},
delete: {
text: "Delete",
icon: "mdi-delete",
color: "error",
},
cancel: {
text: "Cancel",
icon: "mdi-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>