mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 23:59:45 +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
|
|
@ -1,66 +1,52 @@
|
|||
<template>
|
||||
<v-navigation-drawer v-model="drawer" class="d-flex flex-column d-print-none" clipped app width="240px">
|
||||
<v-navigation-drawer v-model="showDrawer" class="d-flex flex-column d-print-none position-fixed">
|
||||
<!-- User Profile -->
|
||||
<template v-if="loggedIn">
|
||||
<v-list-item two-line :to="userProfileLink" exact>
|
||||
<UserAvatar list :user-id="$auth.user.id" :tooltip="false" />
|
||||
<v-list-item lines="two" :to="userProfileLink" exact>
|
||||
<div class="d-flex align-center ga-2">
|
||||
<UserAvatar list :user-id="sessionUser.id" :tooltip="false" />
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="pr-2"> {{ $auth.user.fullName }}</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-btn v-if="isOwnGroup" class="px-2 pa-0" text :to="userFavoritesLink" small>
|
||||
<v-icon left small>
|
||||
{{ $globals.icons.heart }}
|
||||
</v-icon>
|
||||
{{ $t("user.favorite-recipes") }}
|
||||
</v-btn>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<div class="d-flex flex-column justify-start">
|
||||
<v-list-item-title class="pr-2 pl-1">
|
||||
{{ sessionUser.fullName }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="opacity-100">
|
||||
<v-btn v-if="isOwnGroup" class="px-2 pa-0" variant="text" :to="userFavoritesLink" size="small">
|
||||
<v-icon start size="small">
|
||||
{{ $globals.icons.heart }}
|
||||
</v-icon>
|
||||
{{ $t("user.favorite-recipes") }}
|
||||
</v-btn>
|
||||
</v-list-item-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
</template>
|
||||
|
||||
<slot></slot>
|
||||
<slot />
|
||||
|
||||
<!-- Primary Links -->
|
||||
<template v-if="topLink">
|
||||
<v-list nav dense>
|
||||
<v-list v-model:selected="secondarySelected" nav density="comfortable" color="primary">
|
||||
<template v-for="nav in topLink">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<!-- Multi Items -->
|
||||
<v-list-group
|
||||
v-if="nav.children"
|
||||
:key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="dropDowns[nav.title]"
|
||||
color="primary"
|
||||
:prepend-icon="nav.icon"
|
||||
>
|
||||
<template #activator>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
<v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" :fluid="true">
|
||||
<template #activator="{ props }">
|
||||
<v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
|
||||
</template>
|
||||
|
||||
<v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to" class="ml-2">
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ child.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
|
||||
:prepend-icon="child.icon" :title="child.title" class="ml-4" />
|
||||
</v-list-group>
|
||||
|
||||
<!-- Single Item -->
|
||||
<v-list-item-group
|
||||
v-else
|
||||
:key="(nav.key || nav.title) + 'single-item'"
|
||||
v-model="secondarySelected"
|
||||
color="primary"
|
||||
>
|
||||
<v-list-item exact link :to="nav.to">
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
<template v-else>
|
||||
<v-list-item :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to"
|
||||
:prepend-icon="nav.icon" :title="nav.title" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</v-list>
|
||||
|
|
@ -68,39 +54,28 @@
|
|||
|
||||
<!-- Secondary Links -->
|
||||
<template v-if="secondaryLinks.length > 0">
|
||||
<v-divider class="mt-2"></v-divider>
|
||||
<v-list nav dense exact>
|
||||
<v-divider class="mt-2" />
|
||||
<v-list v-model:selected="secondarySelected" nav density="compact" exact>
|
||||
<template v-for="nav in secondaryLinks">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<!-- Multi Items -->
|
||||
<v-list-group
|
||||
v-if="nav.children"
|
||||
:key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="dropDowns[nav.title]"
|
||||
color="primary"
|
||||
:prepend-icon="nav.icon"
|
||||
>
|
||||
<template #activator>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
<v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
|
||||
v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
|
||||
</template>
|
||||
|
||||
<v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to" class="ml-2">
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ child.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
|
||||
class="ml-2" :prepend-icon="child.icon" :title="child.title" />
|
||||
</v-list-group>
|
||||
|
||||
<!-- Single Item -->
|
||||
<v-list-item-group v-else :key="(nav.key || nav.title) + 'single-item'" v-model="secondarySelected" color="primary">
|
||||
<v-list-item exact link :to="nav.to">
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
<v-list-item v-else :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to">
|
||||
<template #prepend>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</v-list>
|
||||
|
|
@ -108,46 +83,39 @@
|
|||
|
||||
<!-- Bottom Navigation Links -->
|
||||
<template v-if="bottomLinks" #append>
|
||||
<v-list nav dense>
|
||||
<v-list-item-group v-model="bottomSelected" color="primary">
|
||||
<template v-for="nav in bottomLinks">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<v-list-item
|
||||
:key="nav.key || nav.title"
|
||||
exact
|
||||
link
|
||||
:to="nav.to || null"
|
||||
:href="nav.href || null"
|
||||
:target="nav.href ? '_blank' : null"
|
||||
>
|
||||
<v-list-item-icon>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item-group>
|
||||
<slot name="bottom"></slot>
|
||||
<v-list v-model:selected="bottomSelected" nav density="compact">
|
||||
<template v-for="nav in bottomLinks">
|
||||
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
|
||||
<v-list-item :key="nav.key || nav.title" exact link :to="nav.to" :href="nav.href"
|
||||
:target="nav.href ? '_blank' : null">
|
||||
<template #prepend>
|
||||
<v-icon>{{ nav.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</template>
|
||||
<slot name="bottom" />
|
||||
</v-list>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, useContext, watch } from "@nuxtjs/composition-api";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
import { useLoggedInState } from "~/composables/use-logged-in-state";
|
||||
import { SidebarLinks } from "~/types/application-types";
|
||||
import type { SidebarLinks } from "~/types/application-types";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
UserAvatar,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
|
|
@ -165,31 +133,16 @@ export default defineComponent({
|
|||
bottomLinks: {
|
||||
type: Array as () => SidebarLinks,
|
||||
required: false,
|
||||
default: null,
|
||||
default: () => ([]),
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
setup(props, context) {
|
||||
// V-Model Support
|
||||
const drawer = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
if (window.innerWidth < 760 && state.hasOpenedBefore === false) {
|
||||
state.hasOpenedBefore = true;
|
||||
val = false;
|
||||
context.emit("input", val);
|
||||
} else {
|
||||
context.emit("input", val);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { $auth } = useContext();
|
||||
const $auth = useMealieAuth();
|
||||
const { loggedIn, isOwnGroup } = useLoggedInState();
|
||||
|
||||
const userFavoritesLink = computed(() => $auth.user ? `/user/${$auth.user.id}/favorites` : undefined);
|
||||
const userProfileLink = computed(() => $auth.user ? "/user/profile" : undefined);
|
||||
const userFavoritesLink = computed(() => $auth.user.value ? `/user/${$auth.user.value.id}/favorites` : undefined);
|
||||
const userProfileLink = computed(() => $auth.user.value ? "/user/profile" : undefined);
|
||||
|
||||
const state = reactive({
|
||||
dropDowns: {} as Record<string, boolean>,
|
||||
|
|
@ -198,12 +151,31 @@ export default defineComponent({
|
|||
bottomSelected: null as string[] | null,
|
||||
hasOpenedBefore: false as boolean,
|
||||
});
|
||||
// model to control the drawer
|
||||
const showDrawer = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => context.emit("update:modelValue", value),
|
||||
});
|
||||
watch(showDrawer, () => {
|
||||
if (window.innerWidth < 760 && state.hasOpenedBefore === false) {
|
||||
state.hasOpenedBefore = true;
|
||||
}
|
||||
});
|
||||
const { width: wWidth } = useWindowSize();
|
||||
watch(wWidth, (w) => {
|
||||
if (w > 760) {
|
||||
showDrawer.value = true;
|
||||
}
|
||||
else {
|
||||
showDrawer.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || []), ...(props.bottomLinks || [])]);
|
||||
function initDropdowns() {
|
||||
allLinks.value.forEach((link) => {
|
||||
state.dropDowns[link.title] = link.childrenStartExpanded || false;
|
||||
})
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => allLinks,
|
||||
|
|
@ -212,22 +184,23 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
userFavoritesLink,
|
||||
userProfileLink,
|
||||
drawer,
|
||||
showDrawer,
|
||||
loggedIn,
|
||||
isOwnGroup,
|
||||
sessionUser: $auth.user,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue