Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 05:25:26 +02:00
Code Issues Releases Activity

chore: script setup #3 - recipe components (#5849)

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 20:37:02 +02:00 • committed by GitHub
parent f2b6512eb1
commit f26e74f0f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 2761 additions and 3642 deletions
Download patch file Download diff file Expand all files Collapse all files

82
frontend/components/Domain/Recipe/RecipeActionMenu.vue
View file

@ -18,7 +18,7 @@
<RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
<div v-if="loggedIn">
<v-tooltip v-if="canEdit" location="bottom" color="info">
<template #activator="{ props }">
<template #activator="{ props: tooltipProps }">
<v-btn
icon
variant="flat"
@ -26,7 +26,7 @@
size="small"
color="info"
class="ml-1"
v-bind="props"
v-bind="tooltipProps"
@click="$emit('edit', true)"
>
<v-icon size="x-large">
@ -86,7 +86,7 @@
</v-toolbar>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeContextMenu from "./RecipeContextMenu.vue";
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
@ -97,48 +97,29 @@ const DELETE_EVENT = "delete";
const CLOSE_EVENT = "close";
const JSON_EVENT = "json";
export default defineNuxtComponent({
components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
props: {
recipe: {
required: true,
type: Object as () => Recipe,
},
slug: {
required: true,
type: String,
},
recipeScale: {
type: Number,
default: 1,
},
open: {
required: true,
type: Boolean,
},
name: {
required: true,
type: String,
},
loggedIn: {
type: Boolean,
default: false,
},
recipeId: {
required: true,
type: String,
},
canEdit: {
type: Boolean,
default: false,
},
},
emits: ["print", "input", "delete", "close", "edit"],
setup(_, context) {
interface Props {
recipe: Recipe;
slug: string;
recipeScale?: number;
open: boolean;
name: string;
loggedIn?: boolean;
recipeId: string;
canEdit?: boolean;
}
withDefaults(defineProps<Props>(), {
recipeScale: 1,
loggedIn: false,
canEdit: false,
});
const emit = defineEmits(["print", "input", "delete", "close", "edit"]);
const deleteDialog = ref(false);
const i18n = useI18n();
const { $globals } = useNuxtApp();
const editorButtons = [
{
text: i18n.t("general.delete"),
@ -169,31 +150,22 @@ export default defineNuxtComponent({
function emitHandler(event: string) {
switch (event) {
case CLOSE_EVENT:
context.emit(CLOSE_EVENT);
context.emit("input", false);
emit("close");
emit("input", false);
break;
case DELETE_EVENT:
deleteDialog.value = true;
break;
default:
context.emit(event);
emit(event as any);
break;
}
}
function emitDelete() {
context.emit(DELETE_EVENT);
context.emit("input", false);
emit("delete");
emit("input", false);
}
return {
deleteDialog,
editorButtons,
emitHandler,
emitDelete,
};
},
});
</script>
<style scoped>

85
frontend/components/Domain/Recipe/RecipeCard.vue
View file

@ -2,11 +2,11 @@
<!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
<div>
<v-hover
v-slot="{ isHovering, props }"
v-slot="{ isHovering, props: hoverProps }"
:open-delay="50"
>
<v-card
v-bind="props"
v-bind="hoverProps"
:class="{ 'on-hover': isHovering }"
:style="{ cursor }"
:elevation="isHovering ? 12 : 2"
@ -100,7 +100,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeChips from "./RecipeChips.vue";
import RecipeContextMenu from "./RecipeContextMenu.vue";
@ -108,50 +108,31 @@ import RecipeCardImage from "./RecipeCardImage.vue";
import RecipeRating from "./RecipeRating.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state";
export default defineNuxtComponent({
components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
props: {
name: {
type: String,
required: true,
},
slug: {
type: String,
required: true,
},
description: {
type: String,
default: null,
},
rating: {
type: Number,
required: false,
default: 0,
},
ratingColor: {
type: String,
default: "secondary",
},
image: {
type: String,
required: false,
default: "abc123",
},
tags: {
type: Array,
default: () => [],
},
recipeId: {
required: true,
type: String,
},
imageHeight: {
type: Number,
default: 200,
},
},
emits: ["click", "delete"],
setup(props) {
interface Props {
name: string;
slug: string;
description?: string | null;
rating?: number;
ratingColor?: string;
image?: string;
tags?: Array<any>;
recipeId: string;
imageHeight?: number;
}
const props = withDefaults(defineProps<Props>(), {
description: null,
rating: 0,
ratingColor: "secondary",
image: "abc123",
tags: () => [],
imageHeight: 200,
});
defineEmits<{
click: [];
delete: [slug: string];
}>();
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
@ -162,15 +143,6 @@ export default defineNuxtComponent({
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
return {
isOwnGroup,
recipeRoute,
showRecipeContent,
cursor,
};
},
});
</script>
<style>
@ -195,6 +167,7 @@ export default defineNuxtComponent({
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
line-clamp: 8;
overflow: hidden;
}
</style>

74
frontend/components/Domain/Recipe/RecipeCardImage.vue
View file

@ -28,47 +28,32 @@
</div>
</template>
<script lang="ts">
import { useStaticRoutes, useUserApi } from "~/composables/api";
<script setup lang="ts">
import { useStaticRoutes } from "~/composables/api";
export default defineNuxtComponent({
props: {
tiny: {
type: Boolean,
default: null,
},
small: {
type: Boolean,
default: null,
},
large: {
type: Boolean,
default: null,
},
iconSize: {
type: [Number, String],
default: 100,
},
slug: {
type: String,
default: null,
},
recipeId: {
type: String,
required: true,
},
imageVersion: {
type: String,
default: null,
},
height: {
type: [Number, String],
default: "100%",
},
},
emits: ["click"],
setup(props) {
const api = useUserApi();
interface Props {
tiny?: boolean | null;
small?: boolean | null;
large?: boolean | null;
iconSize?: number | string;
slug?: string | null;
recipeId: string;
imageVersion?: string | null;
height?: number | string;
}
const props = withDefaults(defineProps<Props>(), {
tiny: null,
small: null,
large: null,
iconSize: 100,
slug: null,
imageVersion: null,
height: "100%",
});
defineEmits<{
click: [];
}>();
const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
@ -97,15 +82,6 @@ export default defineNuxtComponent({
return recipeImage(recipeId, props.imageVersion);
}
}
return {
api,
fallBackImage,
imageSize,
getImage,
};
},
});
</script>
<style scoped>

96
frontend/components/Domain/Recipe/RecipeCardMobile.vue
View file

@ -126,7 +126,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
import RecipeContextMenu from "./RecipeContextMenu.vue";
import RecipeCardImage from "./RecipeCardImage.vue";
@ -134,63 +134,34 @@ import RecipeRating from "./RecipeRating.vue";
import RecipeChips from "./RecipeChips.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state";
export default defineNuxtComponent({
components: {
RecipeFavoriteBadge,
RecipeContextMenu,
RecipeRating,
RecipeCardImage,
RecipeChips,
},
props: {
name: {
type: String,
required: true,
},
slug: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
rating: {
type: Number,
default: 0,
},
image: {
type: String,
required: false,
default: "abc123",
},
tags: {
type: Array,
default: () => [],
},
recipeId: {
type: String,
required: true,
},
vertical: {
type: Boolean,
default: false,
},
isFlat: {
type: Boolean,
default: false,
},
height: {
type: [Number],
default: 150,
},
disableHighlight: {
type: Boolean,
default: false,
},
},
emits: ["selected", "delete"],
setup(props) {
interface Props {
name: string;
slug: string;
description: string;
rating?: number;
image?: string;
tags?: Array<any>;
recipeId: string;
vertical?: boolean;
isFlat?: boolean;
height?: number;
disableHighlight?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
rating: 0,
image: "abc123",
tags: () => [],
vertical: false,
isFlat: false,
height: 150,
disableHighlight: false,
});
defineEmits<{
selected: [];
delete: [slug: string];
}>();
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
@ -201,15 +172,6 @@ export default defineNuxtComponent({
return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
});
const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
return {
isOwnGroup,
recipeRoute,
showRecipeContent,
cursor,
};
},
});
</script>
<style scoped>

102
frontend/components/Domain/Recipe/RecipeCardSection.vue
View file

@ -36,11 +36,11 @@
offset-y
start
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
variant="text"
:icon="$vuetify.display.xs"
v-bind="props"
v-bind="activatorProps"
:loading="sortLoading"
>
<v-icon :start="!$vuetify.display.xs">
@ -162,7 +162,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useThrottleFn } from "@vueuse/core";
import RecipeCard from "./RecipeCard.vue";
import RecipeCardMobile from "./RecipeCardMobile.vue";
@ -175,42 +175,30 @@ import type { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
const REPLACE_RECIPES_EVENT = "replaceRecipes";
const APPEND_RECIPES_EVENT = "appendRecipes";
export default defineNuxtComponent({
components: {
RecipeCard,
RecipeCardMobile,
},
props: {
disableToolbar: {
type: Boolean,
default: false,
},
disableSort: {
type: Boolean,
default: false,
},
icon: {
type: String,
default: null,
},
title: {
type: String,
default: null,
},
singleColumn: {
type: Boolean,
default: false,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
query: {
type: Object as () => RecipeSearchQuery,
default: null,
},
},
setup(props, context) {
interface Props {
disableToolbar?: boolean;
disableSort?: boolean;
icon?: string | null;
title?: string | null;
singleColumn?: boolean;
recipes?: Recipe[];
query?: RecipeSearchQuery | null;
}
const props = withDefaults(defineProps<Props>(), {
disableToolbar: false,
disableSort: false,
icon: null,
title: null,
singleColumn: false,
recipes: () => [],
query: null,
});
const emit = defineEmits<{
replaceRecipes: [recipes: Recipe[]];
appendRecipes: [recipes: Recipe[]];
}>();
const { $vuetify } = useNuxtApp();
const preferences = useUserSortPreferences();
@ -234,9 +222,7 @@ export default defineNuxtComponent({
return props.icon || $globals.icons.tags;
});
const state = reactive({
sortLoading: false,
});
const sortLoading = ref(false);
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
@ -251,7 +237,7 @@ export default defineNuxtComponent({
const router = useRouter();
const queryFilter = computed(() => {
return props.query.queryFilter || null;
return props.query?.queryFilter || null;
// TODO: allow user to filter out null values when ordering by a value that may be null (such as lastMade)
@ -290,7 +276,7 @@ export default defineNuxtComponent({
let lastQuery: string | undefined = JSON.stringify(props.query);
watch(
() => props.query,
async (newValue: RecipeSearchQuery | undefined) => {
async (newValue: RecipeSearchQuery | undefined | null) => {
const newValueString = JSON.stringify(newValue);
if (lastQuery !== newValueString) {
lastQuery = newValueString;
@ -315,7 +301,7 @@ export default defineNuxtComponent({
// since we doubled the first call, we also need to advance the page
page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
emit(REPLACE_RECIPES_EVENT, newRecipes);
}
const infiniteScroll = useThrottleFn(async () => {
@ -331,14 +317,14 @@ export default defineNuxtComponent({
hasMore.value = false;
}
if (newRecipes.length) {
context.emit(APPEND_RECIPES_EVENT, newRecipes);
emit(APPEND_RECIPES_EVENT, newRecipes);
}
loading.value = false;
}, 500);
async function sortRecipes(sortType: string) {
if (state.sortLoading || loading.value) {
if (sortLoading.value || loading.value) {
return;
}
@ -403,14 +389,14 @@ export default defineNuxtComponent({
page.value = 1;
hasMore.value = true;
state.sortLoading = true;
sortLoading.value = true;
loading.value = true;
// fetch new recipes
const newRecipes = await fetchRecipes();
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
emit(REPLACE_RECIPES_EVENT, newRecipes);
state.sortLoading = false;
sortLoading.value = false;
loading.value = false;
}
@ -426,22 +412,6 @@ export default defineNuxtComponent({
function toggleMobileCards() {
preferences.value.useMobileCards = !preferences.value.useMobileCards;
}
return {
...toRefs(state),
displayTitleIcon,
EVENTS,
infiniteScroll,
ready,
loading,
navigateRandom,
preferences,
sortRecipes,
toggleMobileCards,
useMobileCards,
};
},
});
</script>
<style>

66
frontend/components/Domain/Recipe/RecipeChips.vue
View file

@ -23,52 +23,31 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import type { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
export type UrlPrefixParam = "tags" | "categories" | "tools";
export default defineNuxtComponent({
props: {
truncate: {
type: Boolean,
default: false,
},
items: {
type: Array as () => RecipeCategory[] | RecipeTag[] | RecipeTool[],
default: () => [],
},
title: {
type: Boolean,
default: false,
},
urlPrefix: {
type: String as () => UrlPrefixParam,
default: "categories",
},
limit: {
type: Number,
default: 999,
},
small: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: null,
},
},
emits: ["item-selected"],
setup(props) {
const $auth = useMealieAuth();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
const baseRecipeRoute = computed<string>(() => {
return `/g/${groupSlug.value}`;
interface Props {
truncate?: boolean;
items?: RecipeCategory[] | RecipeTag[] | RecipeTool[];
title?: boolean;
urlPrefix?: UrlPrefixParam;
limit?: number;
small?: boolean;
maxWidth?: string | null;
}
const props = withDefaults(defineProps<Props>(), {
truncate: false,
items: () => [],
title: false,
urlPrefix: "categories",
limit: 999,
small: false,
maxWidth: null,
});
defineEmits(["item-selected"]);
function truncateText(text: string, length = 20, clamp = "...") {
if (!props.truncate) return text;
const node = document.createElement("div");
@ -76,13 +55,6 @@ export default defineNuxtComponent({
const content = node.textContent || "";
return content.length > length ? content.slice(0, length) + clamp : content;
}
return {
baseRecipeRoute,
truncateText,
};
},
});
</script>
<style></style>

183
frontend/components/Domain/Recipe/RecipeContextMenu.vue
View file

@ -55,12 +55,12 @@
max-width="290px"
min-width="auto"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-text-field
v-model="newMealdateString"
:label="$t('general.date')"
:prepend-icon="$globals.icons.calendar"
v-bind="props"
v-bind="activatorProps"
readonly
/>
</template>
@ -100,7 +100,7 @@
:open-on-hover="$vuetify.display.mdAndUp"
content-class="d-print-none"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
icon
:variant="fab ? 'flat' : undefined"
@ -108,7 +108,7 @@
:size="fab ? 'small' : undefined"
:color="fab ? 'info' : 'secondary'"
:fab="fab"
v-bind="props"
v-bind="activatorProps"
@click.prevent
>
<v-icon
@ -150,7 +150,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue";
import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
import RecipeDialogShare from "./RecipeDialogShare.vue";
@ -186,16 +186,22 @@ export interface ContextMenuItem {
isPublic: boolean;
}
export default defineNuxtComponent({
components: {
RecipeDialogAddToShoppingList,
RecipeDialogPrintPreferences,
RecipeDialogShare,
},
props: {
useItems: {
type: Object as () => ContextMenuIncludes,
default: () => ({
interface Props {
useItems?: ContextMenuIncludes;
appendItems?: ContextMenuItem[];
leadingItems?: ContextMenuItem[];
menuTop?: boolean;
fab?: boolean;
color?: string;
slug: string;
menuIcon?: string | null;
name: string;
recipe?: Recipe;
recipeId: string;
recipeScale?: number;
}
const props = withDefaults(defineProps<Props>(), {
useItems: () => ({
delete: true,
edit: true,
download: true,
@ -207,78 +213,41 @@ export default defineNuxtComponent({
share: true,
recipeActions: true,
}),
},
// Append items are added at the end of the useItems list
appendItems: {
type: Array as () => ContextMenuItem[],
default: () => [],
},
// Append items are added at the beginning of the useItems list
leadingItems: {
type: Array as () => ContextMenuItem[],
default: () => [],
},
menuTop: {
type: Boolean,
default: true,
},
fab: {
type: Boolean,
default: false,
},
color: {
type: String,
default: "primary",
},
slug: {
type: String,
required: true,
},
menuIcon: {
type: String,
default: null,
},
name: {
required: true,
type: String,
},
recipe: {
type: Object as () => Recipe,
default: undefined,
},
recipeId: {
required: true,
type: String,
},
recipeScale: {
type: Number,
default: 1,
},
},
emits: ["delete"],
setup(props, context) {
appendItems: () => [],
leadingItems: () => [],
menuTop: true,
fab: false,
color: "primary",
menuIcon: null,
recipe: undefined,
recipeScale: 1,
});
const emit = defineEmits<{
[key: string]: any;
delete: [slug: string];
}>();
const api = useUserApi();
const state = reactive({
printPreferencesDialog: false,
shareDialog: false,
recipeDeleteDialog: false,
mealplannerDialog: false,
shoppingListDialog: false,
recipeDuplicateDialog: false,
recipeName: props.name,
loading: false,
menuItems: [] as ContextMenuItem[],
newMealdate: new Date(),
newMealType: "dinner" as PlanEntryType,
pickerMenu: false,
});
const printPreferencesDialog = ref(false);
const shareDialog = ref(false);
const recipeDeleteDialog = ref(false);
const mealplannerDialog = ref(false);
const shoppingListDialog = ref(false);
const recipeDuplicateDialog = ref(false);
const recipeName = ref(props.name);
const loading = ref(false);
const menuItems = ref<ContextMenuItem[]>([]);
const newMealdate = ref(new Date());
const newMealType = ref<PlanEntryType>("dinner");
const pickerMenu = ref(false);
const newMealdateString = computed(() => {
// Format the date to YYYY-MM-DD in the same timezone as newMealdate
const year = state.newMealdate.getFullYear();
const month = String(state.newMealdate.getMonth() + 1).padStart(2, "0");
const day = String(state.newMealdate.getDate()).padStart(2, "0");
const year = newMealdate.value.getFullYear();
const month = String(newMealdate.value.getMonth() + 1).padStart(2, "0");
const day = String(newMealdate.value.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
});
@ -365,7 +334,7 @@ export default defineNuxtComponent({
};
// Add leading and Appending Items
state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems];
menuItems.value = [...menuItems.value, ...props.leadingItems, ...props.appendItems];
const icon = props.menuIcon || $globals.icons.dotsVertical;
@ -398,7 +367,7 @@ export default defineNuxtComponent({
const item = defaultItems[key];
if (item && (item.isPublic || isOwnGroup.value)) {
state.menuItems.push(item);
menuItems.value.push(item);
}
}
@ -438,7 +407,7 @@ export default defineNuxtComponent({
if (data?.slug) {
router.push(`/g/${groupSlug.value}`);
}
context.emit("delete", props.slug);
emit("delete", props.slug);
}
const download = useDownloader();
@ -454,7 +423,7 @@ export default defineNuxtComponent({
async function addRecipeToPlan() {
const { response } = await api.mealplans.createOne({
date: newMealdateString.value,
entryType: state.newMealType,
entryType: newMealType.value,
title: "",
text: "",
recipeId: props.recipeId,
@ -469,7 +438,7 @@ export default defineNuxtComponent({
}
async function duplicateRecipe() {
const { data } = await api.recipes.duplicateOne(props.slug, state.recipeName);
const { data } = await api.recipes.duplicateOne(props.slug, recipeName.value);
if (data && data.slug) {
router.push(`/g/${groupSlug.value}/r/${data.slug}`);
}
@ -479,21 +448,21 @@ export default defineNuxtComponent({
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
const eventHandlers: { [key: string]: () => void | Promise<any> } = {
delete: () => {
state.recipeDeleteDialog = true;
recipeDeleteDialog.value = true;
},
edit: () => router.push(`/g/${groupSlug.value}/r/${props.slug}` + "?edit=true"),
download: handleDownloadEvent,
duplicate: () => {
state.recipeDuplicateDialog = true;
recipeDuplicateDialog.value = true;
},
mealplanner: () => {
state.mealplannerDialog = true;
mealplannerDialog.value = true;
},
printPreferences: async () => {
if (!recipeRef.value) {
await refreshRecipe();
}
state.printPreferencesDialog = true;
printPreferencesDialog.value = true;
},
shoppingList: () => {
const promises: Promise<void>[] = [getShoppingLists()];
@ -502,11 +471,11 @@ export default defineNuxtComponent({
}
Promise.allSettled(promises).then(() => {
state.shoppingListDialog = true;
shoppingListDialog.value = true;
});
},
share: () => {
state.shareDialog = true;
shareDialog.value = true;
},
};
@ -515,34 +484,14 @@ export default defineNuxtComponent({
if (handler && typeof handler === "function") {
handler();
state.loading = false;
loading.value = false;
return;
}
context.emit(eventKey);
state.loading = false;
emit(eventKey);
loading.value = false;
}
const planTypeOptions = usePlanTypeOptions();
return {
...toRefs(state),
newMealdateString,
recipeRef,
recipeRefWithScale,
executeRecipeAction,
recipeActions: groupRecipeActionsStore.recipeActions,
shoppingLists,
duplicateRecipe,
contextMenuEventHandler,
deleteRecipe,
addRecipeToPlan,
icon,
planTypeOptions,
firstDayOfWeek,
isAdminAndNotOwner,
canDelete,
};
},
});
const recipeActions = groupRecipeActionsStore.recipeActions;
</script>

50
frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue
View file

@ -33,7 +33,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { whenever } from "@vueuse/core";
import { validators } from "~/composables/use-validators";
import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@ -42,28 +42,19 @@ export interface GenericAlias {
name: string;
}
export default defineNuxtComponent({
props: {
modelValue: {
type: Boolean,
default: false,
},
data: {
type: Object as () => IngredientFood | IngredientUnit,
required: true,
},
},
emits: ["submit", "update:modelValue", "cancel"],
setup(props, context) {
interface Props {
data: IngredientFood | IngredientUnit;
}
const props = defineProps<Props>();
const emit = defineEmits<{
submit: [aliases: GenericAlias[]];
cancel: [];
}>();
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
const dialog = defineModel<boolean>({ default: false });
function createAlias() {
aliases.value.push({
@ -85,7 +76,7 @@ export default defineNuxtComponent({
initAliases();
whenever(
() => props.modelValue,
() => dialog.value,
() => {
initAliases();
},
@ -111,17 +102,6 @@ export default defineNuxtComponent({
});
aliases.value = keepAliases;
context.emit("submit", keepAliases);
emit("submit", keepAliases);
}
return {
aliases,
createAlias,
dialog,
deleteAlias,
saveAliases,
validators,
};
},
});
</script>

72
frontend/components/Domain/Recipe/RecipeDataTable.vue
View file

@ -62,7 +62,7 @@
</v-data-table>
</template>
<script lang="ts">
<script setup lang="ts">
import UserAvatar from "../User/UserAvatar.vue";
import RecipeChip from "./RecipeChips.vue";
import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe";
@ -70,8 +70,6 @@ import { useUserApi } from "~/composables/api";
import type { UserSummary } from "~/lib/api/types/user";
import type { RecipeTag } from "~/lib/api/types/household";
const INPUT_EVENT = "update:modelValue";
interface ShowHeaders {
id: boolean;
owner: boolean;
@ -84,56 +82,43 @@ interface ShowHeaders {
dateAdded: boolean;
}
export default defineNuxtComponent({
components: { RecipeChip, UserAvatar },
props: {
modelValue: {
type: Array as PropType<Recipe[]>,
required: false,
default: () => [],
},
loading: {
type: Boolean,
required: false,
default: false,
},
recipes: {
type: Array as () => Recipe[],
default: () => [],
},
showHeaders: {
type: Object as () => ShowHeaders,
required: false,
default: () => {
return {
interface Props {
loading?: boolean;
recipes?: Recipe[];
showHeaders?: ShowHeaders;
}
const props = withDefaults(defineProps<Props>(), {
loading: false,
recipes: () => [],
showHeaders: () => ({
id: true,
owner: false,
tags: true,
categories: true,
tools: true,
recipeServings: true,
recipeYieldQuantity: true,
recipeYield: true,
dateAdded: true,
};
},
},
},
emits: ["click", "update:modelValue"],
setup(props, context) {
}),
});
defineEmits<{
click: [];
}>();
const selected = defineModel<Recipe[]>({ default: () => [] });
const i18n = useI18n();
const $auth = useMealieAuth();
const groupSlug = $auth.user.value?.groupSlug;
const router = useRouter();
const selected = computed({
get: () => props.modelValue,
set: value => context.emit(INPUT_EVENT, value),
});
// Initialize sort state with default sorting by dateAdded descending
const sortBy = ref([{ key: "dateAdded", order: "desc" }]);
const sortBy = ref([{ key: "dateAdded", order: "desc" as const }]);
const headers = computed(() => {
const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = [];
const hdrs: Array<{ title: string; value: string; align?: "center" | "start" | "end"; sortable?: boolean }> = [];
if (props.showHeaders.id) {
hdrs.push({ title: i18n.t("general.id"), value: "id" });
@ -207,17 +192,4 @@ export default defineNuxtComponent({
return i18n.t("general.none");
}
return {
selected,
sortBy,
groupSlug,
headers,
formatDate,
members,
getMember,
filterItems,
};
},
});
</script>

77
frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue
View file

@ -51,7 +51,7 @@
<BaseDialog
v-if="shoppingListIngredientDialog"
v-model="dialog"
:title="selectedShoppingList ? selectedShoppingList.name : $t('recipe.add-to-list')"
:title="selectedShoppingList?.name || $t('recipe.add-to-list')"
:icon="$globals.icons.cartCheck"
width="70%"
:submit-text="$t('recipe.add-to-list')"
@ -137,7 +137,7 @@
color="secondary"
density="compact"
/>
<div :key="ingredientData.ingredient.quantity">
<div :key="`${ingredientData.ingredient.quantity || 'no-qty'}-${i}`">
<RecipeIngredientListItem
:ingredient="ingredientData.ingredient"
:disable-amount="ingredientData.disableAmount"
@ -172,7 +172,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { toRefs } from "@vueuse/core";
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import { useUserApi } from "~/composables/api";
@ -203,49 +203,31 @@ export interface ShoppingListRecipeIngredientSection {
ingredientSections: ShoppingListIngredientSection[];
}
export default defineNuxtComponent({
components: {
RecipeIngredientListItem,
},
props: {
modelValue: {
type: Boolean,
default: false,
},
recipes: {
type: Array as () => RecipeWithScale[],
default: undefined,
},
shoppingLists: {
type: Array as () => ShoppingListSummary[],
default: () => [],
},
},
emits: ["update:modelValue"],
setup(props, context) {
interface Props {
recipes?: RecipeWithScale[];
shoppingLists?: ShoppingListSummary[];
}
const props = withDefaults(defineProps<Props>(), {
recipes: undefined,
shoppingLists: () => [],
});
const dialog = defineModel<boolean>({ default: false });
const i18n = useI18n();
const $auth = useMealieAuth();
const api = useUserApi();
const preferences = useShoppingListPreferences();
const ready = ref(false);
// v-model support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
initState();
},
});
const state = reactive({
shoppingListDialog: true,
shoppingListIngredientDialog: false,
shoppingListShowAllToggled: false,
});
const { shoppingListDialog, shoppingListIngredientDialog, shoppingListShowAllToggled: _shoppingListShowAllToggled } = toRefs(state);
const userHousehold = computed(() => {
return $auth.user.value?.householdSlug || "";
});
@ -269,6 +251,12 @@ export default defineNuxtComponent({
},
);
watch(dialog, (val) => {
if (!val) {
initState();
}
});
async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
const recipeSectionMap = new Map<string, ShoppingListRecipeIngredientSection>();
for (const recipe of recipes) {
@ -277,7 +265,10 @@ export default defineNuxtComponent({
}
if (recipeSectionMap.has(recipe.slug)) {
recipeSectionMap.get(recipe.slug).recipeScale += recipe.scale;
const existingSection = recipeSectionMap.get(recipe.slug);
if (existingSection) {
existingSection.recipeScale += recipe.scale;
}
continue;
}
@ -421,22 +412,6 @@ export default defineNuxtComponent({
state.shoppingListIngredientDialog = false;
dialog.value = false;
}
return {
dialog,
preferences,
ready,
shoppingListChoices,
...toRefs(state),
addRecipesToList,
bulkCheckIngredients,
openShoppingListIngredientDialog,
setShowAllToggled,
recipeIngredientSections,
selectedShoppingList,
};
},
});
</script>
<style scoped lang="css">

57
frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
View file

@ -4,9 +4,9 @@
v-model="dialog"
width="800"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<BaseButton
v-bind="props"
v-bind="activatorProps"
@click="inputText = inputTextProp"
>
{{ $t("new-recipe.bulk-add") }}
@ -89,28 +89,27 @@
</div>
</template>
<script lang="ts">
export default defineNuxtComponent({
props: {
inputTextProp: {
type: String,
required: false,
default: "",
},
},
emits: ["bulk-data"],
setup(props, context) {
const state = reactive({
dialog: false,
inputText: props.inputTextProp,
<script setup lang="ts">
interface Props {
inputTextProp?: string;
}
const props = withDefaults(defineProps<Props>(), {
inputTextProp: "",
});
const emit = defineEmits<{
"bulk-data": [data: string[]];
}>();
const dialog = ref(false);
const inputText = ref(props.inputTextProp);
function splitText() {
return state.inputText.split("\n").filter(line => !(line === "\n" || !line));
return inputText.value.split("\n").filter(line => !(line === "\n" || !line));
}
function removeFirstCharacter() {
state.inputText = splitText()
inputText.value = splitText()
.map(line => line.substring(1))
.join("\n");
}
@ -119,11 +118,11 @@ export default defineNuxtComponent({
function splitByNumberedLine() {
// Split inputText by numberedLineRegex
const matches = state.inputText.match(numberedLineRegex);
const matches = inputText.value.match(numberedLineRegex);
matches?.forEach((match, idx) => {
const replaceText = idx === 0 ? "" : "\n";
state.inputText = state.inputText.replace(match, replaceText);
inputText.value = inputText.value.replace(match, replaceText);
});
}
@ -134,12 +133,12 @@ export default defineNuxtComponent({
splitLines[index] = element.trim();
});
state.inputText = splitLines.join("\n");
inputText.value = splitLines.join("\n");
}
function save() {
context.emit("bulk-data", splitText());
state.dialog = false;
emit("bulk-data", splitText());
dialog.value = false;
}
const i18n = useI18n();
@ -161,16 +160,4 @@ export default defineNuxtComponent({
action: splitByNumberedLine,
},
];
return {
utilities,
splitText,
trimAllLines,
removeFirstCharacter,
splitByNumberedLine,
save,
...toRefs(state),
};
},
});
</script>

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

@ -44,6 +44,7 @@
<v-switch
v-model="preferences.showDescription"
hide-details
color="primary"
:label="$t('recipe.description')"
/>
</v-row>
@ -51,6 +52,7 @@
<v-switch
v-model="preferences.showNotes"
hide-details
color="primary"
:label="$t('recipe.notes')"
/>
</v-row>
@ -63,6 +65,7 @@
<v-switch
v-model="preferences.showNutrition"
hide-details
color="primary"
:label="$t('recipe.nutrition')"
/>
</v-row>
@ -83,45 +86,19 @@
</BaseDialog>
</template>
<script lang="ts">
<script setup lang="ts">
import type { Recipe } from "~/lib/api/types/recipe";
import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({
components: {
RecipePrintView,
},
props: {
modelValue: {
type: Boolean,
default: false,
},
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
default: undefined,
},
},
emits: ["update:modelValue"],
setup(props, context) {
interface Props {
recipe?: NoUndefinedField<Recipe>;
}
withDefaults(defineProps<Props>(), {
recipe: undefined,
});
const dialog = defineModel<boolean>({ default: false });
const preferences = useUserPrintPreferences();
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
return {
dialog,
ImagePosition,
preferences,
};
},
});
</script>

54
frontend/components/Domain/Recipe/RecipeDialogSearch.vue
View file

@ -52,10 +52,6 @@
<div class="mr-auto">
{{ $t("search.results") }}
</div>
<!-- <router-link
:to="advancedSearchUrl"
class="text-primary"
> {{ $t("search.advanced-search") }} </router-link> -->
</v-card-actions>
<RecipeCardMobile
@ -76,7 +72,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state";
import type { RecipeSummary } from "~/lib/api/types/recipe";
@ -85,17 +81,15 @@ import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
import { usePublicExploreApi } from "~/composables/api/api-client";
const SELECTED_EVENT = "selected";
export default defineNuxtComponent({
components: {
RecipeCardMobile,
},
setup(_, context) {
// Define emits
const emit = defineEmits<{
selected: [recipe: RecipeSummary];
}>();
const $auth = useMealieAuth();
const state = reactive({
loading: false,
selectedIndex: -1,
});
const loading = ref(false);
const selectedIndex = ref(-1);
// ===========================================================================
// Dialog State Management
@ -105,7 +99,7 @@ export default defineNuxtComponent({
watch(dialog, (val) => {
if (!val) {
search.query.value = "";
state.selectedIndex = -1;
selectedIndex.value = -1;
search.data.value = [];
}
});
@ -116,17 +110,17 @@ export default defineNuxtComponent({
function selectRecipe() {
const recipeCards = document.getElementsByClassName("arrow-nav");
if (recipeCards) {
if (state.selectedIndex < 0) {
state.selectedIndex = -1;
if (selectedIndex.value < 0) {
selectedIndex.value = -1;
document.getElementById("arrow-search")?.focus();
return;
}
if (state.selectedIndex >= recipeCards.length) {
state.selectedIndex = recipeCards.length - 1;
if (selectedIndex.value >= recipeCards.length) {
selectedIndex.value = recipeCards.length - 1;
}
(recipeCards[state.selectedIndex] as HTMLElement).focus();
(recipeCards[selectedIndex.value] as HTMLElement).focus();
}
}
@ -137,11 +131,11 @@ export default defineNuxtComponent({
}
else if (e.key === "ArrowUp") {
e.preventDefault();
state.selectedIndex--;
selectedIndex.value--;
}
else if (e.key === "ArrowDown") {
e.preventDefault();
state.selectedIndex++;
selectedIndex.value++;
}
else {
return;
@ -158,9 +152,8 @@ export default defineNuxtComponent({
}
});
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const route = useRoute();
const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`);
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
watch(route, close);
function open() {
@ -177,22 +170,15 @@ export default defineNuxtComponent({
const search = useRecipeSearch(api);
// Select Handler
function handleSelect(recipe: RecipeSummary) {
close();
context.emit(SELECTED_EVENT, recipe);
emit(SELECTED_EVENT, recipe);
}
return {
...toRefs(state),
advancedSearchUrl,
dialog,
// Expose functions to parent components
defineExpose({
open,
close,
handleSelect,
search,
};
},
});
</script>

74
frontend/components/Domain/Recipe/RecipeDialogShare.vue
View file

@ -14,14 +14,14 @@
max-width="290px"
min-width="auto"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-text-field
v-model="expirationDateString"
:label="$t('recipe-share.expiration-date')"
:hint="$t('recipe-share.default-30-days')"
persistent-hint
:prepend-icon="$globals.icons.calendar"
v-bind="props"
v-bind="activatorProps"
readonly
/>
</template>
@ -92,56 +92,35 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useClipboard, useShare, whenever } from "@vueuse/core";
import type { RecipeShareToken } from "~/lib/api/types/recipe";
import { useUserApi } from "~/composables/api";
import { useHouseholdSelf } from "~/composables/use-households";
import { alert } from "~/composables/use-toast";
export default defineNuxtComponent({
props: {
modelValue: {
type: Boolean,
default: false,
},
recipeId: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
},
emits: ["update:modelValue"],
setup(props, context) {
// V-Model Support
const dialog = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
context.emit("update:modelValue", val);
},
});
interface Props {
recipeId: string;
name: string;
}
const props = defineProps<Props>();
const state = reactive({
datePickerMenu: false,
expirationDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
tokens: [] as RecipeShareToken[],
});
const dialog = defineModel<boolean>({ default: false });
const datePickerMenu = ref(false);
const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
const tokens = ref<RecipeShareToken[]>([]);
const expirationDateString = computed(() => {
return state.expirationDate.toISOString().substring(0, 10);
return expirationDate.value.toISOString().substring(0, 10);
});
whenever(
() => props.modelValue,
() => dialog.value,
() => {
// Set expiration date to today + 30 Days
const today = new Date();
state.expirationDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
expirationDate.value = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
refreshTokens();
},
);
@ -165,17 +144,17 @@ export default defineNuxtComponent({
// Convert expiration date to timestamp
const { data } = await userApi.recipes.share.createOne({
recipeId: props.recipeId,
expiresAt: state.expirationDate.toISOString(),
expiresAt: expirationDate.value.toISOString(),
});
if (data) {
state.tokens.push(data);
tokens.value.push(data);
}
}
async function deleteToken(id: string) {
await userApi.recipes.share.deleteOne(id);
state.tokens = state.tokens.filter(token => token.id !== id);
tokens.value = tokens.value.filter(token => token.id !== id);
}
async function refreshTokens() {
@ -183,7 +162,7 @@ export default defineNuxtComponent({
if (data) {
// @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched.
state.tokens = data ?? [];
tokens.value = data ?? [];
}
}
@ -225,17 +204,4 @@ export default defineNuxtComponent({
await copyTokenLink(token);
}
}
return {
...toRefs(state),
expirationDateString,
dialog,
createNewToken,
deleteToken,
firstDayOfWeek,
shareRecipe,
copyTokenLink,
};
},
});
</script>

37
frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
View file

@ -4,7 +4,7 @@
nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'"
>
<template #activator="{ props }">
<template #activator="{ props: tooltipProps }">
<v-btn
v-if="isFavorite || showAlways"
icon
@ -13,7 +13,7 @@
size="small"
:color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle"
v-bind="{ ...props, ...$attrs }"
v-bind="{ ...tooltipProps, ...$attrs }"
@click.prevent="toggleFavorite"
>
<v-icon
@ -28,26 +28,21 @@
</v-tooltip>
</template>
<script lang="ts">
<script setup lang="ts">
import { useUserSelfRatings } from "~/composables/use-users";
import { useUserApi } from "~/composables/api";
export default defineNuxtComponent({
props: {
recipeId: {
type: String,
default: "",
},
showAlways: {
type: Boolean,
default: false,
},
buttonStyle: {
type: Boolean,
default: false,
},
},
setup(props) {
interface Props {
recipeId?: string;
showAlways?: boolean;
buttonStyle?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
recipeId: "",
showAlways: false,
buttonStyle: false,
});
const api = useUserApi();
const $auth = useMealieAuth();
const { userRatings, refreshUserRatings } = useUserSelfRatings();
@ -67,8 +62,4 @@ export default defineNuxtComponent({
}
await refreshUserRatings();
}
return { isFavorite, toggleFavorite };
},
});
</script>

56
frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
View file

@ -7,11 +7,11 @@
nudge-top="6"
:close-on-content-click="false"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
color="accent"
dark
v-bind="props"
v-bind="activatorProps"
>
<v-icon start>
{{ $globals.icons.fileImage }}
@ -61,52 +61,42 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useUserApi } from "~/composables/api";
const REFRESH_EVENT = "refresh";
const UPLOAD_EVENT = "upload";
export default defineNuxtComponent({
props: {
slug: {
type: String,
required: true,
},
},
setup(props, context) {
const state = reactive({
url: "",
loading: false,
menu: false,
});
const props = defineProps<{ slug: string }>();
const emit = defineEmits<{
refresh: [];
upload: [fileObject: File];
}>();
const url = ref("");
const loading = ref(false);
const menu = ref(false);
function uploadImage(fileObject: File) {
context.emit(UPLOAD_EVENT, fileObject);
state.menu = false;
emit(UPLOAD_EVENT, fileObject);
menu.value = false;
}
const api = useUserApi();
async function getImageFromURL() {
state.loading = true;
if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
context.emit(REFRESH_EVENT);
loading.value = true;
if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
emit(REFRESH_EVENT);
}
state.loading = false;
state.menu = false;
loading.value = false;
menu.value = false;
}
const i18n = useI18n();
const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
return {
...toRefs(state),
uploadImage,
getImageFromURL,
messages,
};
},
});
const messages = computed(() =>
props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
);
</script>
<style lang="scss" scoped></style>

20
frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
View file

@ -3,21 +3,13 @@
<div v-html="safeMarkup" />
</template>
<script lang="ts">
<script setup lang="ts">
import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
export default defineNuxtComponent({
props: {
markup: {
type: String,
required: true,
},
},
setup(props) {
interface Props {
markup: string;
}
const props = defineProps<Props>();
const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
return {
safeMarkup,
};
},
});
</script>

34
frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
View file

@ -28,34 +28,22 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import type { RecipeIngredient } from "~/lib/api/types/household";
import { useParsedIngredientText } from "~/composables/recipes";
export default defineNuxtComponent({
props: {
ingredient: {
type: Object as () => RecipeIngredient,
required: true,
},
disableAmount: {
type: Boolean,
default: false,
},
scale: {
type: Number,
default: 1,
},
},
setup(props) {
const parsedIng = computed(() => {
return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
interface Props {
ingredient: RecipeIngredient;
disableAmount?: boolean;
scale?: number;
}
const props = withDefaults(defineProps<Props>(), {
disableAmount: false,
scale: 1,
});
return {
parsedIng,
};
},
const parsedIng = computed(() => {
return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
});
</script>

54
frontend/components/Domain/Recipe/RecipeIngredients.vue
View file

@ -53,40 +53,30 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
import { parseIngredientText } from "~/composables/recipes";
import type { RecipeIngredient } from "~/lib/api/types/recipe";
export default defineNuxtComponent({
components: { RecipeIngredientListItem },
props: {
value: {
type: Array as () => RecipeIngredient[],
default: () => [],
},
disableAmount: {
type: Boolean,
default: false,
},
scale: {
type: Number,
default: 1,
},
isCookMode: {
type: Boolean,
default: false,
},
},
setup(props) {
function validateTitle(title?: string) {
interface Props {
value?: RecipeIngredient[];
disableAmount?: boolean;
scale?: number;
isCookMode?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
value: () => [],
disableAmount: false,
scale: 1,
isCookMode: false,
});
function validateTitle(title?: string | null) {
return !(title === undefined || title === "" || title === null);
}
const state = reactive({
checked: props.value.map(() => false),
showTitleEditor: computed(() => props.value.map(x => validateTitle(x.title))),
});
const checked = ref(props.value.map(() => false));
const showTitleEditor = computed(() => props.value.map(x => validateTitle(x.title)));
const ingredientCopyText = computed(() => {
const components: string[] = [];
@ -108,16 +98,8 @@ export default defineNuxtComponent({
function toggleChecked(index: number) {
// TODO Find a better way to do this - $set is not available, and
// direct array modifications are not propagated for some reason
state.checked.splice(index, 1, !state.checked[index]);
checked.value.splice(index, 1, !checked.value[index]);
}
return {
...toRefs(state),
ingredientCopyText,
toggleChecked,
};
},
});
</script>
<style>

53
frontend/components/Domain/Recipe/RecipeLastMade.vue
View file

@ -30,11 +30,11 @@
offset-y
max-width="290px"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-text-field
v-model="newTimelineEventTimestampString"
:prepend-icon="$globals.icons.calendar"
v-bind="props"
v-bind="activatorProps"
readonly
/>
</template>
@ -87,12 +87,12 @@
<div v-if="lastMadeReady" class="d-flex justify-center flex-wrap">
<v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger">
<v-tooltip location="bottom">
<template #activator="{ props }">
<template #activator="{ props: tooltipProps }">
<v-btn
rounded
variant="outlined"
size="x-large"
v-bind="props"
v-bind="tooltipProps"
style="border-color: rgb(var(--v-theme-primary));"
@click="madeThisDialog = true"
>
@ -117,7 +117,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { whenever } from "@vueuse/core";
import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
@ -125,15 +125,11 @@ import { useHouseholdSelf } from "~/composables/use-households";
import type { Recipe, RecipeTimelineEventIn, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
import type { VForm } from "~/types/auto-forms";
export default defineNuxtComponent({
props: {
recipe: {
type: Object as () => Recipe,
required: true,
},
},
emits: ["eventCreated"],
setup(props, context) {
const props = defineProps<{ recipe: Recipe }>();
const emit = defineEmits<{
eventCreated: [event: RecipeTimelineEventOut];
}>();
const madeThisDialog = ref(false);
const userApi = useUserApi();
const { household } = useHouseholdSelf();
@ -198,10 +194,11 @@ export default defineNuxtComponent({
newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
}
const state = reactive({ datePickerMenu: false, madeThisFormLoading: false });
const datePickerMenu = ref(false);
const madeThisFormLoading = ref(false);
function resetMadeThisForm() {
state.madeThisFormLoading = false;
madeThisFormLoading.value = false;
newTimelineEvent.value.eventMessage = "";
newTimelineEvent.value.timestamp = undefined;
@ -215,7 +212,7 @@ export default defineNuxtComponent({
return;
}
state.madeThisFormLoading = true;
madeThisFormLoading.value = true;
newTimelineEvent.value.recipeId = props.recipe.id;
// Note: $auth.user is now a ref
@ -279,26 +276,6 @@ export default defineNuxtComponent({
}
resetMadeThisForm();
context.emit("eventCreated", newEvent);
emit("eventCreated", newEvent);
}
return {
...toRefs(state),
domMadeThisForm,
madeThisDialog,
firstDayOfWeek,
newTimelineEvent,
newTimelineEventImage,
newTimelineEventImagePreviewUrl,
newTimelineEventTimestamp,
newTimelineEventTimestampString,
lastMade,
lastMadeReady,
createTimelineEvent,
clearImage,
uploadImage,
updateUploadedImage,
};
},
});
</script>

54
frontend/components/Domain/Recipe/RecipeList.vue
View file

@ -51,40 +51,28 @@
</v-list>
</template>
<script lang="ts">
<script setup lang="ts">
import DOMPurify from "dompurify";
import { useFraction } from "~/composables/recipes/use-fraction";
import type { ShoppingListItemOut } from "~/lib/api/types/household";
import type { RecipeSummary } from "~/lib/api/types/recipe";
export default defineNuxtComponent({
props: {
recipes: {
type: Array as () => RecipeSummary[],
required: true,
},
listItem: {
type: Object as () => ShoppingListItemOut | undefined,
default: undefined,
},
small: {
type: Boolean,
default: false,
},
tile: {
type: Boolean,
default: false,
},
showDescription: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
setup(props) {
interface Props {
recipes: RecipeSummary[];
listItem?: ShoppingListItemOut;
small?: boolean;
tile?: boolean;
showDescription?: boolean;
disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
listItem: undefined,
small: false,
tile: false,
showDescription: false,
disabled: false,
});
const $auth = useMealieAuth();
const { frac } = useFraction();
const route = useRoute();
@ -180,12 +168,4 @@ export default defineNuxtComponent({
return listItemDescriptions;
});
return {
attrs,
groupSlug,
listItemDescriptions,
};
},
});
</script>

44
frontend/components/Domain/Recipe/RecipeNutrition.vue
View file

@ -45,29 +45,25 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useNutritionLabels } from "~/composables/recipes";
import type { Nutrition } from "~/lib/api/types/recipe";
import type { NutritionLabelType } from "~/composables/recipes/use-recipe-nutrition";
export default defineNuxtComponent({
props: {
modelValue: {
type: Object as () => Nutrition,
required: true,
},
edit: {
type: Boolean,
default: true,
},
},
emits: ["update:modelValue"],
setup(props, context) {
interface Props {
edit?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
edit: true,
});
const modelValue = defineModel<Nutrition>({ required: true });
const { labels } = useNutritionLabels();
const valueNotNull = computed(() => {
let key: keyof Nutrition;
for (key in props.modelValue) {
if (props.modelValue[key] !== null) {
for (key in modelValue.value) {
if (modelValue.value[key] !== null) {
return true;
}
}
@ -77,31 +73,21 @@ export default defineNuxtComponent({
const showViewer = computed(() => !props.edit && valueNotNull.value);
function updateValue(key: number | string, event: Event) {
context.emit("update:modelValue", { ...props.modelValue, [key]: event });
modelValue.value = { ...modelValue.value, [key]: event };
}
// Build a new list that only contains nutritional information that has a value
const renderedList = computed(() => {
return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => {
if (props.modelValue[key]?.trim()) {
if (modelValue.value[key]?.trim()) {
item[key] = {
...label,
value: props.modelValue[key],
value: modelValue.value[key],
};
}
return item;
}, {});
});
return {
labels,
valueNotNull,
showViewer,
updateValue,
renderedList,
};
},
});
</script>
<style lang="scss" scoped></style>

76
frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
View file

@ -60,54 +60,39 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useUserApi } from "~/composables/api";
import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated";
const CREATED_ITEM_EVENT = "created-item";
export default defineNuxtComponent({
props: {
modelValue: {
type: Boolean,
default: false,
},
color: {
type: String,
default: null,
},
tagDialog: {
type: Boolean,
default: true,
},
itemType: {
type: String as () => RecipeOrganizer,
default: "category",
},
},
emits: ["update:modelValue"],
setup(props, context) {
interface Props {
color?: string | null;
tagDialog?: boolean;
itemType?: RecipeOrganizer;
}
const props = withDefaults(defineProps<Props>(), {
color: null,
tagDialog: true,
itemType: "category" as RecipeOrganizer,
});
const emit = defineEmits<{
"created-item": [item: any];
}>();
const dialog = defineModel<boolean>({ default: false });
const i18n = useI18n();
const state = reactive({
name: "",
onHand: false,
});
const dialog = computed({
get() {
return props.modelValue;
},
set(value) {
context.emit("update:modelValue", value);
},
});
const name = ref("");
const onHand = ref(false);
watch(
() => props.modelValue,
dialog,
(val: boolean) => {
if (!val) state.name = "";
if (!val) name.value = "";
},
);
@ -154,25 +139,14 @@ export default defineNuxtComponent({
async function select() {
if (store) {
// @ts-expect-error the same state is used for different organizer types, which have different requirements
await store.actions.createOne({ ...state });
await store.actions.createOne({ name: name.value, onHand: onHand.value });
}
const newItem = store.store.value.find(item => item.name === state.name);
const newItem = store.store.value.find(item => item.name === name.value);
context.emit(CREATED_ITEM_EVENT, newItem);
emit(CREATED_ITEM_EVENT, newItem);
dialog.value = false;
}
return {
Organizer,
...toRefs(state),
dialog,
properties,
rules,
select,
};
},
});
</script>
<style></style>

53
frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
View file

@ -122,9 +122,8 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import Fuse from "fuse.js";
import { useContextPresets } from "~/composables/use-context-presents";
import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
@ -138,26 +137,17 @@ interface GenericItem {
onHand: boolean;
}
export default defineNuxtComponent({
components: {
RecipeOrganizerDialog,
},
props: {
items: {
type: Array as () => GenericItem[],
required: true,
},
icon: {
type: String,
required: true,
},
itemType: {
type: String as () => RecipeOrganizer,
required: true,
},
},
emits: ["update", "delete"],
setup(props, { emit }) {
const props = defineProps<{
items: GenericItem[];
icon: string;
itemType: RecipeOrganizer;
}>();
const emit = defineEmits<{
update: [item: GenericItem];
delete: [id: string];
}>();
const state = reactive({
// Search Options
options: {
@ -271,23 +261,4 @@ export default defineNuxtComponent({
function isTitle(str: number | string) {
return typeof str === "string" && str.length === 1;
}
return {
groupSlug,
isTitle,
dialogs,
confirmDelete,
openUpdateDialog,
updateOne,
updateTarget,
deleteOne,
deleteTarget,
Organizer,
presets,
itemsSorted,
searchString,
translationKey,
};
},
});
</script>

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

@ -37,7 +37,7 @@
<RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" />
</div>
<div>
<RecipePageScale v-model:scale="scale" :recipe="recipe" />
<RecipePageScale v-model="scale" :recipe="recipe" />
</div>
<!--
@ -96,7 +96,7 @@
<v-row style="height: 100%" no-gutters class="overflow-hidden">
<v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%">
<div class="d-flex align-center">
<RecipePageScale v-model:scale="scale" :recipe="recipe" />
<RecipePageScale v-model="scale" :recipe="recipe" />
</div>
<RecipePageIngredientToolsView
v-if="!isEditForm"
@ -124,7 +124,7 @@
</v-sheet>
<v-sheet v-show="isCookMode && hasLinkedIngredients">
<div class="mt-2 px-2 px-md-4">
<RecipePageScale v-model:scale="scale" :recipe="recipe" />
<RecipePageScale v-model="scale" :recipe="recipe" />
</div>
<RecipePageInstructions
v-model="recipe.recipeInstructions"

64
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
View file

@ -26,7 +26,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state";
import { useRecipePermissions } from "~/composables/recipes";
import RecipePageInfoCard from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue";
@ -35,32 +35,22 @@ import { useStaticRoutes, useUserApi } from "~/composables/api";
import type { HouseholdSummary } from "~/lib/api/types/household";
import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import { usePageState, usePageUser, PageMode, EditorMode } from "~/composables/recipe-page/shared-state";
import { usePageState, usePageUser, PageMode } from "~/composables/recipe-page/shared-state";
interface Props {
recipe: NoUndefinedField<Recipe>;
recipeScale?: number;
landscape?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
recipeScale: 1,
landscape: false,
});
defineEmits(["save", "delete"]);
export default defineNuxtComponent({
components: {
RecipePageInfoCard,
RecipeActionMenu,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
recipeScale: {
type: Number,
default: 1,
},
landscape: {
type: Boolean,
default: false,
},
},
emits: ["save", "delete"],
setup(props) {
const { $vuetify } = useNuxtApp();
const { recipeImage } = useStaticRoutes();
const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
const { imageKey, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
const { user } = usePageUser();
const { isOwnGroup } = useLoggedInState();
@ -78,9 +68,6 @@ export default defineNuxtComponent({
}
const hideImage = ref(false);
const imageHeight = computed(() => {
return $vuetify.display.xs.value ? "200" : "400";
});
const recipeImageUrl = computed(() => {
return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
@ -92,25 +79,4 @@ export default defineNuxtComponent({
hideImage.value = false;
},
);
return {
isOwnGroup,
setMode,
toggleEditMode,
recipeImage,
canEditRecipe,
imageKey,
user,
PageMode,
pageMode,
EditorMode,
editMode,
printRecipe,
imageHeight,
hideImage,
isEditMode,
recipeImageUrl,
};
},
});
</script>

39
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
View file

@ -76,7 +76,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state";
import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
import RecipeLastMade from "~/components/Domain/Recipe/RecipeLastMade.vue";
@ -86,34 +86,15 @@ import RecipePageInfoCardImage from "~/components/Domain/Recipe/RecipePage/Recip
import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({
components: {
RecipeRating,
RecipeLastMade,
RecipeTimeCard,
RecipeYield,
RecipePageInfoCardImage,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
recipeScale: {
type: Number,
default: 1,
},
landscape: {
type: Boolean,
required: true,
},
},
setup() {
const { isOwnGroup } = useLoggedInState();
interface Props {
recipe: NoUndefinedField<Recipe>;
recipeScale?: number;
landscape: boolean;
}
return {
isOwnGroup,
};
},
withDefaults(defineProps<Props>(), {
recipeScale: 1,
});
const { isOwnGroup } = useLoggedInState();
</script>

31
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
View file

@ -12,25 +12,21 @@
/>
</template>
<script lang="ts">
<script setup lang="ts">
import { useStaticRoutes, useUserApi } from "~/composables/api";
import type { HouseholdSummary } from "~/lib/api/types/household";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import type { Recipe } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
export default defineNuxtComponent({
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
maxWidth: {
type: String,
default: undefined,
},
},
setup(props) {
interface Props {
recipe: NoUndefinedField<Recipe>;
maxWidth?: string;
}
const props = withDefaults(defineProps<Props>(), {
maxWidth: undefined,
});
const { $vuetify } = useNuxtApp();
const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug);
@ -59,13 +55,4 @@ export default defineNuxtComponent({
hideImage.value = false;
},
);
return {
recipeImageUrl,
imageKey,
hideImage,
imageHeight,
};
},
});
</script>

39
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
View file

@ -36,7 +36,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useLoggedInState } from "~/composables/use-logged-in-state";
import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import { useToolStore } from "~/composables/store";
@ -48,25 +48,15 @@ interface RecipeToolWithOnHand extends RecipeTool {
onHand: boolean;
}
export default defineNuxtComponent({
components: {
RecipeIngredients,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
scale: {
type: Number,
required: true,
},
isCookMode: {
type: Boolean,
default: false,
},
},
setup(props) {
interface Props {
recipe: NoUndefinedField<Recipe>;
scale: number;
isCookMode?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
isCookMode: false,
});
const { isOwnGroup } = useLoggedInState();
const toolStore = isOwnGroup.value ? useToolStore() : null;
@ -106,13 +96,4 @@ export default defineNuxtComponent({
console.log("no user, skipping server update");
}
}
return {
toolStore,
recipeTools,
isEditMode,
updateTool,
};
},
});
</script>

41
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue
View file

@ -2,55 +2,26 @@
<div class="d-flex justify-space-between align-center pt-2 pb-3">
<RecipeScaleEditButton
v-if="!isEditMode"
v-model.number="scaleValue"
v-model.number="scale"
:recipe-servings="recipeServings"
:edit-scale="!recipe.settings.disableAmount && !isEditMode"
/>
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import type { Recipe } from "~/lib/api/types/recipe";
import { usePageState } from "~/composables/recipe-page/shared-state";
export default defineNuxtComponent({
components: {
RecipeScaleEditButton,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
scale: {
type: Number,
default: 1,
},
},
emits: ["update:scale"],
setup(props, { emit }) {
const props = defineProps<{ recipe: NoUndefinedField<Recipe> }>();
const scale = defineModel<number>({ default: 1 });
const { isEditMode } = usePageState(props.recipe.slug);
const recipeServings = computed<number>(() => {
return props.recipe.recipeServings || props.recipe.recipeYieldQuantity || 1;
});
const scaleValue = computed<number>({
get() {
return props.scale;
},
set(val) {
emit("update:scale", val);
},
});
return {
recipeServings,
scaleValue,
isEditMode,
};
},
});
</script>

23
frontend/components/Domain/Recipe/RecipePrintContainer.vue
View file

@ -8,24 +8,17 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
import type { Recipe } from "~/lib/api/types/recipe";
export default defineNuxtComponent({
components: {
RecipePrintView,
},
props: {
recipe: {
type: Object as () => Recipe,
required: true,
},
scale: {
type: Number,
default: 1,
},
},
interface Props {
recipe: Recipe;
scale?: number;
}
withDefaults(defineProps<Props>(), {
scale: 1,
});
</script>

48
frontend/components/Domain/Recipe/RecipePrintView.vue
View file

@ -166,7 +166,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import DOMPurify from "dompurify";
import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
import { useStaticRoutes } from "~/composables/api";
@ -188,25 +188,16 @@ type InstructionSection = {
instructions: RecipeStep[];
};
export default defineNuxtComponent({
components: {
RecipeTimeCard,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
scale: {
type: Number,
default: 1,
},
dense: {
type: Boolean,
default: false,
},
},
setup(props) {
interface Props {
recipe: NoUndefinedField<Recipe>;
scale?: number;
dense?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
scale: 1,
dense: false,
});
const i18n = useI18n();
const preferences = useUserPrintPreferences();
const { recipeImage } = useStaticRoutes();
@ -219,7 +210,6 @@ export default defineNuxtComponent({
ALLOWED_TAGS: ["strong", "sup"],
});
}
const servingsDisplay = computed(() => {
const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale);
return scaledAmountDisplay || props.recipe.recipeYield
@ -333,22 +323,6 @@ export default defineNuxtComponent({
function parseText(ingredient: RecipeIngredient) {
return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
}
return {
labels,
hasNotes,
imageKey,
ImagePosition,
parseText,
parseIngredientText,
preferences,
recipeImageUrl,
recipeYield,
ingredientSections,
instructionSections,
};
},
});
</script>
<style scoped>

60
frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
View file

@ -10,7 +10,7 @@
nudge-top="6"
:close-on-content-click="false"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-tooltip
v-if="canEditScale"
size="small"
@ -23,7 +23,7 @@
dark
color="secondary-darken-1"
size="small"
v-bind="{ ...props, ...tooltipProps }"
v-bind="{ ...activatorProps, ...tooltipProps }"
:style="{ cursor: canEditScale ? '' : 'default' }"
>
<v-icon
@ -45,7 +45,7 @@
dark
color="secondary-darken-1"
size="small"
v-bind="props"
v-bind="activatorProps"
:style="{ cursor: canEditScale ? '' : 'default' }"
>
<v-icon
@ -77,9 +77,9 @@
location="end"
color="secondary-darken-1"
>
<template #activator="{ props }">
<template #activator="{ props: resetTooltipProps }">
<v-btn
v-bind="props"
v-bind="resetTooltipProps"
icon
flat
class="mx-1"
@ -122,38 +122,24 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
export default defineNuxtComponent({
props: {
modelValue: {
type: Number,
required: true,
},
recipeServings: {
type: Number,
default: 0,
},
editScale: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
interface Props {
recipeServings?: number;
editScale?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
recipeServings: 0,
editScale: false,
});
const scale = defineModel<number>({ required: true });
const i18n = useI18n();
const menu = ref<boolean>(false);
const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
const scale = computed({
get: () => props.modelValue,
set: (value) => {
const newScaleNumber = parseFloat(`${value}`);
emit("update:modelValue", isNaN(newScaleNumber) ? 0 : newScaleNumber);
},
});
function recalculateScale(newYield: number) {
if (isNaN(newYield) || newYield <= 0) {
return;
@ -182,16 +168,4 @@ export default defineNuxtComponent({
const disableDecrement = computed(() => {
return yieldQuantity.value <= 1;
});
return {
menu,
canEditScale,
scale,
recalculateScale,
yieldDisplay,
yieldQuantity,
disableDecrement,
};
},
});
</script>

54
frontend/components/Domain/Recipe/RecipeSearchFilterSelector.vue
View file

@ -1,54 +0,0 @@
<template>
<div class="d-flex justify-center align-center">
<v-btn-toggle v-model="selected" tile group color="primary accent-3" mandatory="force" @change="emitMulti">
<v-btn size="small" :value="false">
{{ $t("search.include") }}
</v-btn>
<v-btn size="small" :value="true">
{{ $t("search.exclude") }}
</v-btn>
</v-btn-toggle>
<v-btn-toggle v-model="match" tile group color="primary accent-3" mandatory="force" @change="emitMulti">
<v-btn size="small" :value="false" class="text-uppercase">
{{ $t("search.and") }}
</v-btn>
<v-btn size="small" :value="true" class="text-uppercase">
{{ $t("search.or") }}
</v-btn>
</v-btn-toggle>
</div>
</template>
<script lang="ts">
type SelectionValue = "include" | "exclude" | "any";
export default defineNuxtComponent({
props: {
modelValue: {
type: String as () => SelectionValue,
default: "include",
},
},
emits: ["update:modelValue", "update"],
data() {
return {
selected: false,
match: false,
};
},
methods: {
emitChange() {
this.$emit("update:modelValue", this.selected);
},
emitMulti() {
const updateData = {
exclude: this.selected,
matchAny: this.match,
};
this.$emit("update", updateData);
},
},
});
</script>
<style lang="scss" scoped></style>

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

@ -14,9 +14,7 @@
<div v-for="(organizer, idx) in missingOrganizers" :key="idx">
<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-icon class="ma-0 pa-0" />
<v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content">
{{ $t("recipe-finder.missing") }}:
</v-card-text>
@ -41,7 +39,7 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue";
import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
@ -51,27 +49,25 @@ interface Organizer {
selected: boolean;
}
export default defineNuxtComponent({
components: { RecipeCardMobile },
props: {
recipe: {
type: Object as () => RecipeSummary,
required: true,
},
missingFoods: {
type: Array as () => IngredientFood[] | null,
default: null,
},
missingTools: {
type: Array as () => RecipeTool[] | null,
default: null,
},
disableCheckbox: {
type: Boolean,
default: false,
},
},
setup(props, context) {
interface Props {
recipe: RecipeSummary;
missingFoods?: IngredientFood[] | null;
missingTools?: RecipeTool[] | null;
disableCheckbox?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
missingFoods: null,
missingTools: null,
disableCheckbox: false,
});
const emit = defineEmits<{
"add-food": [food: IngredientFood];
"remove-food": [food: IngredientFood];
"add-tool": [tool: RecipeTool];
"remove-tool": [tool: RecipeTool];
}>();
const { $globals } = useNuxtApp();
const missingOrganizers = computed(() => [
{
@ -105,17 +101,20 @@ export default defineNuxtComponent({
organizer.selected = !organizer.selected;
if (organizer.selected) {
context.emit(`add-${organizer.type}`, organizer.item);
if (organizer.type === "food") {
emit("add-food", organizer.item as IngredientFood);
}
else {
context.emit(`remove-${organizer.type}`, organizer.item);
emit("add-tool", organizer.item as RecipeTool);
}
}
else {
if (organizer.type === "food") {
emit("remove-food", organizer.item as IngredientFood);
}
else {
emit("remove-tool", organizer.item as RecipeTool);
}
}
}
return {
missingOrganizers,
handleCheckbox,
};
},
});
</script>

55
frontend/components/Domain/Recipe/RecipeTimeCard.vue
View file

@ -1,4 +1,4 @@
<template v-if="showCards">
<template v-if="_showCards">
<div class="text-center">
<!-- Total Time -->
<div
@ -78,38 +78,29 @@
</div>
</template>
<script lang="ts">
export default defineNuxtComponent({
props: {
prepTime: {
type: String,
default: null,
},
totalTime: {
type: String,
default: null,
},
performTime: {
type: String,
default: null,
},
color: {
type: String,
default: "accent custom-transparent",
},
small: {
type: Boolean,
default: false,
},
},
setup(props) {
<script setup lang="ts">
interface Props {
prepTime?: string | null;
totalTime?: string | null;
performTime?: string | null;
color?: string;
small?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
prepTime: null,
totalTime: null,
performTime: null,
color: "accent custom-transparent",
small: false,
});
const i18n = useI18n();
function isEmpty(str: string | null) {
return !str || str.length === 0;
}
const showCards = computed(() => {
const _showCards = computed(() => {
return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x));
});
@ -128,16 +119,6 @@ export default defineNuxtComponent({
const fontSize = computed(() => {
return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
});
return {
showCards,
validateTotalTime,
validatePrepTime,
validatePerformTime,
fontSize,
};
},
});
</script>
<style scoped>

80
frontend/components/Domain/Recipe/RecipeTimeline.vue
View file

@ -11,7 +11,7 @@
nudge-bottom="3"
:close-on-content-click="false"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-badge
:content="filterBadgeCount"
:model-value="filterBadgeCount > 0"
@ -21,7 +21,7 @@
class="rounded-circle"
size="small"
color="info"
v-bind="props"
v-bind="activatorProps"
icon
>
<v-icon> {{ $globals.icons.filter }} </v-icon>
@ -105,7 +105,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useThrottleFn, whenever } from "@vueuse/core";
import RecipeTimelineItem from "./RecipeTimelineItem.vue";
import { useTimelinePreferences } from "~/composables/use-users/preferences";
@ -115,29 +115,19 @@ import { alert } from "~/composables/use-toast";
import { useUserApi } from "~/composables/api";
import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
export default defineNuxtComponent({
components: { RecipeTimelineItem },
interface Props {
modelValue?: boolean;
queryFilter: string;
maxHeight?: number | string;
showRecipeCards?: boolean;
}
props: {
modelValue: {
type: Boolean,
default: false,
},
queryFilter: {
type: String,
required: true,
},
maxHeight: {
type: [Number, String],
default: undefined,
},
showRecipeCards: {
type: Boolean,
default: false,
},
},
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
maxHeight: undefined,
showRecipeCards: false,
});
setup(props) {
const api = useUserApi();
const i18n = useI18n();
const preferences = useTimelinePreferences();
@ -160,25 +150,7 @@ export default defineNuxtComponent({
};
});
});
interface ScrollEvent extends Event {
target: HTMLInputElement;
}
const screenBuffer = 4;
const onScroll = (event: ScrollEvent) => {
if (!event.target) {
return;
}
const { scrollTop, offsetHeight, scrollHeight } = event.target;
// trigger when the user is getting close to the bottom
const bottomOfElement = scrollTop + offsetHeight >= scrollHeight - (offsetHeight * screenBuffer);
if (bottomOfElement) {
infiniteScroll();
}
};
whenever(
() => props.modelValue,
@ -229,7 +201,7 @@ export default defineNuxtComponent({
}
alert.success(i18n.t("events.event-updated") as string);
};
}
async function deleteTimelineEvent(index: number) {
const { response } = await api.recipes.deleteTimelineEvent(timelineEvents.value[index].id);
@ -240,13 +212,13 @@ export default defineNuxtComponent({
timelineEvents.value.splice(index, 1);
alert.success(i18n.t("events.event-deleted") as string);
};
}
async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
return data?.items || [];
};
}
async function updateRecipes(events: RecipeTimelineEventOut[]) {
const recipeIds: string[] = [];
@ -295,7 +267,7 @@ export default defineNuxtComponent({
// this is set last so Vue knows to re-render
timelineEvents.value.push(...events);
};
}
async function initializeTimelineEvents() {
loading.value = true;
@ -347,20 +319,4 @@ export default defineNuxtComponent({
};
},
);
return {
deleteTimelineEvent,
filterBadgeCount,
loading,
onScroll,
preferences,
eventTypeFilterState,
recipes,
reverseSort,
toggleEventTypeOption,
timelineEvents,
updateTimelineEvent,
};
},
});
</script>

39
frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
View file

@ -4,7 +4,7 @@
nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'"
>
<template #activator="{ props }">
<template #activator="{ props: activatorProps }">
<v-btn
icon
:variant="buttonStyle ? 'flat' : undefined"
@ -12,7 +12,7 @@
size="small"
:color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle"
v-bind="{ ...props, ...$attrs }"
v-bind="{ ...activatorProps, ...$attrs }"
@click.prevent="toggleTimeline"
>
<v-icon
@ -39,31 +39,24 @@
</v-tooltip>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeTimeline from "./RecipeTimeline.vue";
export default defineNuxtComponent({
components: { RecipeTimeline },
interface Props {
buttonStyle?: boolean;
slug?: string;
recipeName?: string;
}
const props = withDefaults(defineProps<Props>(), {
buttonStyle: false,
slug: "",
recipeName: "",
});
props: {
buttonStyle: {
type: Boolean,
default: false,
},
slug: {
type: String,
default: "",
},
recipeName: {
type: String,
default: "",
},
},
setup(props) {
const i18n = useI18n();
const { smAndDown } = useDisplay();
const showTimeline = ref(false);
function toggleTimeline() {
showTimeline.value = !showTimeline.value;
}
@ -79,8 +72,4 @@ export default defineNuxtComponent({
queryFilter: `recipe.slug="${props.slug}"`,
};
});
return { showTimeline, timelineAttrs, toggleTimeline };
},
});
</script>

49
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View file

@ -91,7 +91,7 @@
</v-timeline-item>
</template>
<script lang="ts">
<script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue";
import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
import { useStaticRoutes } from "~/composables/api";
@ -100,30 +100,26 @@ import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
export default defineNuxtComponent({
components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown },
interface Props {
event: RecipeTimelineEventOut;
recipe?: Recipe;
showRecipeCards?: boolean;
}
props: {
event: {
type: Object as () => RecipeTimelineEventOut,
required: true,
},
recipe: {
type: Object as () => Recipe,
default: undefined,
},
showRecipeCards: {
type: Boolean,
default: false,
},
},
emits: ["selected", "update", "delete"],
const props = withDefaults(defineProps<Props>(), {
recipe: undefined,
showRecipeCards: false,
});
defineEmits<{
selected: [];
update: [];
delete: [];
}>();
setup(props) {
const { $vuetify, $globals } = useNuxtApp();
const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes();
const timelineEvents = ref([] as RecipeTimelineEventOut[]);
const { user: currentUser } = useMealieAuth();
@ -178,19 +174,6 @@ export default defineNuxtComponent({
return recipeTimelineEventImage(props.event.recipeId, props.event.id);
});
return {
attrs,
groupSlug,
icon,
eventImageUrl,
hideImage,
timelineEvents,
useMobileFormat,
currentUser,
};
},
});
</script>
<style>

41
frontend/components/Domain/Recipe/RecipeYield.vue
View file

@ -24,30 +24,23 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import DOMPurify from "dompurify";
import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
export default defineNuxtComponent({
props: {
yieldQuantity: {
type: Number,
default: 0,
},
yieldText: {
type: String,
default: "",
},
scale: {
type: Number,
default: 1,
},
color: {
type: String,
default: "accent custom-transparent",
},
},
setup(props) {
interface Props {
yieldQuantity?: number;
yieldText?: string;
scale?: number;
color?: string;
}
const props = withDefaults(defineProps<Props>(), {
yieldQuantity: 0,
yieldText: "",
scale: 1,
color: "accent custom-transparent",
});
function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true },
@ -70,10 +63,4 @@ export default defineNuxtComponent({
return sanitizeHTML(components.join(" "));
});
return {
yieldDisplay,
};
},
});
</script>

1
frontend/components/Domain/SearchFilter.vue
View file

@ -40,7 +40,6 @@
v-if="requireAll != undefined"
v-model="requireAllValue"
density="compact"
size="small"
hide-details
class="my-auto"
color="primary"

2
frontend/pages/group/data/units.vue
View file

@ -93,7 +93,7 @@
<!-- Alias Sub-Dialog -->
<RecipeDataAliasManagerDialog
v-if="editTarget"
:value="aliasManagerDialog"
v-model="aliasManagerDialog"
:data="editTarget"
can-submit
@submit="updateUnitAlias"

4
frontend/pages/shopping-lists/[id].vue
View file

@ -371,6 +371,8 @@
<v-btn
v-if="recipe"
icon
flat
class="bg-transparent"
:disabled="isOffline"
@click.prevent="removeRecipeReferenceToList(recipe.id!)"
>
@ -386,6 +388,8 @@
<v-btn
icon
:disabled="isOffline"
flat
class="bg-transparent"
@click.prevent="addRecipeReferenceToList(recipe.id!)"
>
<v-icon color="grey-lighten-1">