Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-04-07 21:45:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: script setup components (#7299)

Browse Source
This commit is contained in:
Kuchenpirat
2026-03-23 21:18:25 +01:00
committed by GitHub
parent 3ad2d9155d
commit 5ab6e98f9e
47 changed files with 1721 additions and 2453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
frontend/components/global/BaseButton.vue
View File

@@ -32,191 +32,168 @@
</v-btn>
</template>
<script lang="ts">
<script setup lang="ts">
import { useUserApi } from "~/composables/api";
export default defineNuxtComponent({
name: "BaseButton",
props: {
// Types
cancel: {
type: Boolean,
default: false,
},
create: {
type: Boolean,
default: false,
},
update: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
save: {
type: Boolean,
default: false,
},
delete: {
type: Boolean,
default: false,
},
// Download
download: {
type: Boolean,
default: false,
},
downloadUrl: {
type: String,
default: "",
},
// 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,
},
color: {
type: String,
default: null,
},
text: {
type: String,
default: null,
},
icon: {
type: String,
default: null,
},
iconRight: {
type: Boolean,
default: false,
},
const props = defineProps({
cancel: {
type: Boolean,
default: false,
},
setup(props) {
const i18n = useI18n();
const { $globals } = useNuxtApp();
const buttonOptions = {
create: {
text: i18n.t("general.create"),
icon: $globals.icons.createAlt,
color: "success",
},
update: {
text: i18n.t("general.update"),
icon: $globals.icons.edit,
color: "success",
},
save: {
text: i18n.t("general.save"),
icon: $globals.icons.save,
color: "success",
},
edit: {
text: i18n.t("general.edit"),
icon: $globals.icons.edit,
color: "info",
},
delete: {
text: i18n.t("general.delete"),
icon: $globals.icons.delete,
color: "error",
},
cancel: {
text: i18n.t("general.cancel"),
icon: $globals.icons.close,
color: "grey",
},
download: {
text: i18n.t("general.download"),
icon: $globals.icons.download,
color: "info",
},
};
const btnAttrs = computed(() => {
if (props.delete) {
return buttonOptions.delete;
}
else if (props.update) {
return buttonOptions.update;
}
else if (props.edit) {
return buttonOptions.edit;
}
else if (props.cancel) {
return buttonOptions.cancel;
}
else if (props.save) {
return buttonOptions.save;
}
else if (props.download) {
return buttonOptions.download;
}
return buttonOptions.create;
});
const buttonStyles = {
defaults: {
text: false,
outlined: false,
},
secondary: {
text: false,
outlined: true,
},
minor: {
text: true,
outlined: false,
},
};
const btnStyle = computed(() => {
if (props.secondary) {
return buttonStyles.secondary;
}
else if (props.minor || props.cancel) {
return buttonStyles.minor;
}
return buttonStyles.defaults;
});
const api = useUserApi();
function downloadFile() {
api.utils.download(props.downloadUrl);
}
return {
btnAttrs,
btnStyle,
downloadFile,
};
create: {
type: Boolean,
default: false,
},
update: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
save: {
type: Boolean,
default: false,
},
delete: {
type: Boolean,
default: false },
download: {
type: Boolean,
default: false,
},
downloadUrl: {
type: String,
default: "",
},
loading: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
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,
},
color: {
type: String,
default: null,
},
text: {
type: String,
default: null,
},
icon: {
type: String,
default: null,
},
iconRight: {
type: Boolean,
default: false,
},
});
const i18n = useI18n();
const { $globals } = useNuxtApp();
const buttonOptions = {
create: {
text: i18n.t("general.create"),
icon: $globals.icons.createAlt,
color: "success",
},
update: {
text: i18n.t("general.update"),
icon: $globals.icons.edit,
color: "success",
},
save: {
text: i18n.t("general.save"),
icon: $globals.icons.save,
color: "success",
},
edit: {
text: i18n.t("general.edit"),
icon: $globals.icons.edit,
color: "info",
},
delete: {
text: i18n.t("general.delete"),
icon: $globals.icons.delete,
color: "error",
},
cancel: {
text: i18n.t("general.cancel"),
icon: $globals.icons.close,
color: "grey",
},
download: {
text: i18n.t("general.download"),
icon: $globals.icons.download,
color: "info",
},
};
const btnAttrs = computed(() => {
if (props.delete) {
return buttonOptions.delete;
}
if (props.update) {
return buttonOptions.update;
}
if (props.edit) {
return buttonOptions.edit;
}
if (props.cancel) {
return buttonOptions.cancel;
}
if (props.save) {
return buttonOptions.save;
}
if (props.download) {
return buttonOptions.download;
}
return buttonOptions.create;
});
const buttonStyles = {
defaults: { text: false, outlined: false },
secondary: { text: false, outlined: true },
minor: { text: true, outlined: false },
};
const btnStyle = computed(() => {
if (props.secondary) {
return buttonStyles.secondary;
}
if (props.minor || props.cancel) {
return buttonStyles.minor;
}
return buttonStyles.defaults;
});
const api = useUserApi();
function downloadFile() {
api.utils.download(props.downloadUrl);
}
</script>