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

Timeline Badge

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 13:16:05 +00:00
commit d75a3419c3
1 changed files with 28 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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