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

RecipePageOrganizers use v-model instead of prop and turn into script setup

Browse source
This commit is contained in:
Kuchenpirat 2025-06-19 10:13:25 +00:00
commit d141b0e6e5
2 changed files with 6 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View file

@ -49,7 +49,7 @@
--> -->
<v-col v-if="!isCookMode || isEditForm" cols="12" sm="12" md="4" lg="4"> <v-col v-if="!isCookMode || isEditForm" cols="12" sm="12" md="4" lg="4">
<RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" /> <RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" />
<RecipePageOrganizers v-if="$vuetify.display.mdAndUp" :recipe="recipe" @item-selected="chipClicked" /> <RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" @item-selected="chipClicked" />
</v-col> </v-col>
<v-divider v-if="$vuetify.display.mdAndUp && !isCookMode" class="my-divider" :vertical="true" /> <v-divider v-if="$vuetify.display.mdAndUp && !isCookMode" class="my-divider" :vertical="true" />
@ -71,7 +71,7 @@
</BaseButton> </BaseButton>
</div> </div>
<div v-if="!$vuetify.display.mdAndUp"> <div v-if="!$vuetify.display.mdAndUp">
<RecipePageOrganizers :recipe="recipe" /> <RecipePageOrganizers v-model="recipe" />
</div> </div>
<RecipeNotes v-model="recipe.notes" :edit="isEditForm" /> <RecipeNotes v-model="recipe.notes" :edit="isEditForm" />
</v-col> </v-col>

29
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
View file

@ -85,8 +85,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageState } from "~/composables/recipe-page/shared-state";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue"; import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue";
@ -94,27 +94,6 @@ import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
import RecipeChips from "@/components/Domain/Recipe/RecipeChips.vue"; import RecipeChips from "@/components/Domain/Recipe/RecipeChips.vue";
import RecipeAssets from "@/components/Domain/Recipe/RecipeAssets.vue"; import RecipeAssets from "@/components/Domain/Recipe/RecipeAssets.vue";
export default defineNuxtComponent({ const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
components: { const { isEditForm } = usePageState(recipe.value.slug);
RecipeOrganizerSelector,
RecipeNutrition,
RecipeChips,
RecipeAssets,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
},
setup(props) {
const { user } = usePageUser();
const { isEditForm } = usePageState(props.recipe.slug);
return {
isEditForm,
user,
};
},
});
</script> </script>