mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 15:49:42 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
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
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -7,34 +7,57 @@
|
|||
:class="attrs.class.sheet"
|
||||
:style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
|
||||
>
|
||||
<v-list-item :to="disabled ? '' : '/g/' + groupSlug + '/r/' + recipe.slug" :class="attrs.class.listItem">
|
||||
<v-list-item-avatar :class="attrs.class.avatar">
|
||||
<v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content :class="attrs.class.text">
|
||||
<v-list-item-title :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'" :style="attrs.style.text.title">
|
||||
<v-list-item
|
||||
:to="disabled ? '' : '/g/' + groupSlug + '/r/' + recipe.slug"
|
||||
:class="attrs.class.listItem"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-avatar color="primary" :class="attrs.class.avatar">
|
||||
<v-icon
|
||||
:class="attrs.class.icon"
|
||||
dark
|
||||
:size="small ? 'small' : 'default'"
|
||||
>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<div :class="attrs.class.text">
|
||||
<v-list-item-title
|
||||
:class="listItem && listItemDescriptions[index] ? '' : 'pr-4'"
|
||||
:style="attrs.style.text.title"
|
||||
>
|
||||
{{ recipe.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
|
||||
<v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="listItemDescriptions[index]"></div>
|
||||
<v-list-item-subtitle v-if="showDescription">
|
||||
{{ recipe.description }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
|
||||
<v-list-item-subtitle
|
||||
v-if="listItem && listItemDescriptions[index]"
|
||||
:style="attrs.style.text.subTitle"
|
||||
>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="listItemDescriptions[index]" />
|
||||
</v-list-item-subtitle>
|
||||
</div>
|
||||
<template #append>
|
||||
<slot
|
||||
:name="'actions-' + recipe.id"
|
||||
:v-bind="{ item: recipe }"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-sheet>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
|
||||
import DOMPurify from "dompurify";
|
||||
import { useFraction } from "~/composables/recipes/use-fraction";
|
||||
import { ShoppingListItemOut } from "~/lib/api/types/household";
|
||||
import { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
import type { ShoppingListItemOut } from "~/lib/api/types/household";
|
||||
import type { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
props: {
|
||||
recipes: {
|
||||
type: Array as () => RecipeSummary[],
|
||||
|
|
@ -59,44 +82,46 @@ export default defineComponent({
|
|||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { $auth } = useContext();
|
||||
const $auth = useMealieAuth();
|
||||
const { frac } = useFraction();
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
|
||||
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
|
||||
|
||||
const attrs = computed(() => {
|
||||
return props.small ? {
|
||||
class: {
|
||||
sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-0",
|
||||
avatar: "ma-0",
|
||||
icon: "ma-0 pa-0 primary",
|
||||
text: "pa-0",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "font-size: small;",
|
||||
subTitle: "font-size: x-small;",
|
||||
},
|
||||
},
|
||||
} : {
|
||||
class: {
|
||||
sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-4",
|
||||
avatar: "",
|
||||
icon: "pa-1 primary",
|
||||
text: "",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "",
|
||||
subTitle: "",
|
||||
},
|
||||
},
|
||||
}
|
||||
return props.small
|
||||
? {
|
||||
class: {
|
||||
sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-0",
|
||||
avatar: "ma-0",
|
||||
icon: "ma-0 pa-0 primary",
|
||||
text: "pa-0",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "font-size: small;",
|
||||
subTitle: "font-size: x-small;",
|
||||
},
|
||||
},
|
||||
}
|
||||
: {
|
||||
class: {
|
||||
sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-4",
|
||||
avatar: "",
|
||||
icon: "pa-1 primary",
|
||||
text: "",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "",
|
||||
subTitle: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
function sanitizeHTML(rawHtml: string) {
|
||||
|
|
@ -108,11 +133,11 @@ export default defineComponent({
|
|||
|
||||
const listItemDescriptions = computed<string[]>(() => {
|
||||
if (
|
||||
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|
||||
|| !props.listItem?.recipeReferences
|
||||
|| props.listItem.recipeReferences.length !== props.recipes.length
|
||||
) {
|
||||
return props.recipes.map((_) => "")
|
||||
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|
||||
|| !props.listItem?.recipeReferences
|
||||
|| props.listItem.recipeReferences.length !== props.recipes.length
|
||||
) {
|
||||
return props.recipes.map(_ => "");
|
||||
}
|
||||
|
||||
const listItemDescriptions: string[] = [];
|
||||
|
|
@ -120,36 +145,37 @@ export default defineComponent({
|
|||
const itemRef = props.listItem?.recipeReferences[i];
|
||||
const quantity = (itemRef.recipeQuantity || 1) * (itemRef.recipeScale || 1);
|
||||
|
||||
let listItemDescription = ""
|
||||
let listItemDescription = "";
|
||||
if (props.listItem.unit?.fraction) {
|
||||
const fraction = frac(quantity, 10, true);
|
||||
if (fraction[0] !== undefined && fraction[0] > 0) {
|
||||
listItemDescription += fraction[0];
|
||||
}
|
||||
const fraction = frac(quantity, 10, true);
|
||||
if (fraction[0] !== undefined && fraction[0] > 0) {
|
||||
listItemDescription += fraction[0];
|
||||
}
|
||||
|
||||
if (fraction[1] > 0) {
|
||||
listItemDescription += ` <sup>${fraction[1]}</sup>⁄<sub>${fraction[2]}</sub>`;
|
||||
}
|
||||
else {
|
||||
listItemDescription = (quantity).toString();
|
||||
}
|
||||
if (fraction[1] > 0) {
|
||||
listItemDescription += ` <sup>${fraction[1]}</sup>⁄<sub>${fraction[2]}</sub>`;
|
||||
}
|
||||
else {
|
||||
listItemDescription = (Math.round(quantity*100)/100).toString();
|
||||
listItemDescription = (quantity).toString();
|
||||
}
|
||||
}
|
||||
else {
|
||||
listItemDescription = (Math.round(quantity * 100) / 100).toString();
|
||||
}
|
||||
|
||||
if (props.listItem.unit) {
|
||||
const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
|
||||
? props.listItem.unit.abbreviation : props.listItem.unit.name;
|
||||
if (props.listItem.unit) {
|
||||
const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
|
||||
? props.listItem.unit.abbreviation
|
||||
: props.listItem.unit.name;
|
||||
|
||||
listItemDescription += ` ${unitDisplay}`
|
||||
}
|
||||
listItemDescription += ` ${unitDisplay}`;
|
||||
}
|
||||
|
||||
if (itemRef.recipeNote) {
|
||||
listItemDescription += `, ${itemRef.recipeNote}`
|
||||
}
|
||||
if (itemRef.recipeNote) {
|
||||
listItemDescription += `, ${itemRef.recipeNote}`;
|
||||
}
|
||||
|
||||
listItemDescriptions.push(sanitizeHTML(listItemDescription));
|
||||
listItemDescriptions.push(sanitizeHTML(listItemDescription));
|
||||
}
|
||||
|
||||
return listItemDescriptions;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue