mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-10-31 10:13:32 -04:00
76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<template>
|
||
<v-tooltip
|
||
location="bottom"
|
||
nudge-right="50"
|
||
:color="buttonStyle ? 'info' : 'secondary'"
|
||
>
|
||
<template #activator="{ props: activatorProps }">
|
||
<v-btn
|
||
icon
|
||
:variant="buttonStyle ? 'flat' : undefined"
|
||
:rounded="buttonStyle ? 'circle' : undefined"
|
||
size="small"
|
||
:color="buttonStyle ? 'info' : 'secondary'"
|
||
:fab="buttonStyle"
|
||
v-bind="{ ...activatorProps, ...$attrs }"
|
||
@click.prevent="toggleTimeline"
|
||
>
|
||
<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>
|
||
</template>
|
||
<span>{{ $t('recipe.open-timeline') }}</span>
|
||
</v-tooltip>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import RecipeTimeline from "./RecipeTimeline.vue";
|
||
|
||
interface Props {
|
||
buttonStyle?: boolean;
|
||
slug?: string;
|
||
recipeName?: string;
|
||
}
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
buttonStyle: false,
|
||
slug: "",
|
||
recipeName: "",
|
||
});
|
||
|
||
const i18n = useI18n();
|
||
const { smAndDown } = useDisplay();
|
||
const showTimeline = ref(false);
|
||
|
||
function toggleTimeline() {
|
||
showTimeline.value = !showTimeline.value;
|
||
}
|
||
|
||
const timelineAttrs = computed(() => {
|
||
let title = i18n.t("recipe.timeline");
|
||
if (smAndDown.value) {
|
||
title += ` – ${props.recipeName}`;
|
||
}
|
||
|
||
return {
|
||
title,
|
||
queryFilter: `recipe.slug="${props.slug}"`,
|
||
};
|
||
});
|
||
</script>
|