Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00
Code Issues Releases Activity

feat: Migrate to Nuxt 3 framework (#5184)

Browse source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh 2025-06-20 00:09:12 +07:00 • committed by GitHub
parent 89ab7fac25
commit c24d532608
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
403 changed files with 23959 additions and 19557 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/components/Domain/Recipe/RecipeSuggestion.vue
View file

@ -12,23 +12,23 @@
/>
</v-col>
<div v-for="(organizer, idx) in missingOrganizers" :key="idx">
<v-col
v-if="organizer.show"
cols="12"
>
<v-col v-if="organizer.show" cols="12">
<div class="d-flex flex-row flex-wrap align-center pt-2">
<v-icon class="ma-0 pa-0">{{ organizer.icon }}</v-icon>
<v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content;">
{{ $tc("recipe-finder.missing") }}:
<v-icon class="ma-0 pa-0">
{{ organizer.icon }}
</v-icon>
<v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content">
{{ $t("recipe-finder.missing") }}:
</v-card-text>
<v-chip
v-for="item in organizer.items"
:key="item.item.id"
label
color="secondary custom-transparent"
class="mr-2 my-1"
class="mr-2 my-1 pl-1"
variant="flat"
>
<v-checkbox dark :ripple="false" @click="handleCheckbox(item)">
<v-checkbox dark :ripple="false" hide-details @click="handleCheckbox(item)">
<template #label>
{{ organizer.getLabel(item.item) }}
</template>
@ -42,9 +42,8 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, useContext } from "@nuxtjs/composition-api";
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
interface Organizer {
type: "food" | "tool";
@ -52,7 +51,7 @@ interface Organizer {
selected: boolean;
}
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeCardMobile },
props: {
recipe: {
@ -73,27 +72,31 @@ export default defineComponent({
},
},
setup(props, context) {
const { $globals } = useContext();
const { $globals } = useNuxtApp();
const missingOrganizers = computed(() => [
{
type: "food",
show: props.missingFoods?.length,
icon: $globals.icons.foods,
items: props.missingFoods ? props.missingFoods.map((food) => {
return reactive({type: "food", item: food, selected: false} as Organizer);
}) : [],
items: props.missingFoods
? props.missingFoods.map((food) => {
return reactive({ type: "food", item: food, selected: false } as Organizer);
})
: [],
getLabel: (item: IngredientFood) => item.pluralName || item.name,
},
{
type: "tool",
show: props.missingTools?.length,
icon: $globals.icons.tools,
items: props.missingTools ? props.missingTools.map((tool) => {
return reactive({type: "tool", item: tool, selected: false} as Organizer);
}) : [],
items: props.missingTools
? props.missingTools.map((tool) => {
return reactive({ type: "tool", item: tool, selected: false } as Organizer);
})
: [],
getLabel: (item: RecipeTool) => item.name,
}
])
},
]);
function handleCheckbox(organizer: Organizer) {
if (props.disableCheckbox) {
@ -113,6 +116,6 @@ export default defineComponent({
missingOrganizers,
handleCheckbox,
};
}
},
});
</script>