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

feat: Migrate to Nuxt 3 framework (#5184)

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

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

@ -1,32 +1,48 @@
<template>
<v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'info' : 'secondary'">
<template #activator="{ on, attrs }">
<v-tooltip
bottom
nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'"
>
<template #activator="{ props }">
<v-btn
small
icon
:variant="buttonStyle ? 'flat' : undefined"
:rounded="buttonStyle ? 'circle' : undefined"
size="small"
:color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle"
class="ml-1"
v-bind="attrs"
v-on="on"
v-bind="{ ...props, ...$attrs }"
@click.prevent="toggleTimeline"
>
<v-icon :small="!buttonStyle" :color="buttonStyle ? 'white' : 'secondary'">
<v-icon
:size="!buttonStyle ? undefined : 'x-large'"
:color="buttonStyle ? 'white' : 'secondary'"
>
{{ $globals.icons.timelineText }}
</v-icon>
</v-btn>
<BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
<RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="60vh" />
<BaseDialog
v-model="showTimeline"
:title="timelineAttrs.title"
:icon="$globals.icons.timelineText"
width="70%"
>
<RecipeTimeline
v-model="showTimeline"
:query-filter="timelineAttrs.queryFilter"
max-height="60vh"
/>
</BaseDialog>
</template>
<span>{{ $t('recipe.open-timeline') }}</span>
</v-tooltip>
</template>
<script lang="ts">
import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
import RecipeTimeline from "./RecipeTimeline.vue";
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeTimeline },
props: {
@ -45,23 +61,24 @@ export default defineComponent({
},
setup(props) {
const { $vuetify, i18n } = useContext();
const i18n = useI18n();
const { smAndDown } = useDisplay();
const showTimeline = ref(false);
function toggleTimeline() {
showTimeline.value = !showTimeline.value;
}
const timelineAttrs = computed(() => {
let title = i18n.tc("recipe.timeline")
if ($vuetify.breakpoint.smAndDown) {
title += ` – ${props.recipeName}`
let title = i18n.t("recipe.timeline");
if (smAndDown.value) {
title += ` – ${props.recipeName}`;
}
return {
title,
queryFilter: `recipe.slug="${props.slug}"`,
}
})
};
});
return { showTimeline, timelineAttrs, toggleTimeline };
},