jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-12-03 11:41:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(App): extract common component tree

Browse Source 
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This commit is contained in:
Fernando Fernández 2024-05-08 02:40:55 +02:00
parent 231ddd83e2
commit 326402176a
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/App.vue
View File

@ -7,27 +7,17 @@
:name="route.meta.layout.transition.enter ?? defaultTransition"
:mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
<Suspense @resolve="apploaded = true">
<div
<AppComp
:key="route.meta.layout.name ?? 'default'"
class="uno-h-full j-transition">
<component
:is="getLayoutComponent(route.meta.layout.name)"
:key="route.meta.layout.name ?? 'default'">
:comp="getLayoutComponent(route.meta.layout.name)">
<JTransition
:name="route.meta.layout.transition.enter ?? defaultTransition"
:mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
<Suspense suspensible>
<div
:key="route.name ?? route.path"
class="uno-h-full j-transition">
<component
:is="Component"
:key="route.name ?? route.path" />
</div>
<AppComp :key="route.path" :comp="Component" />
</Suspense>
</JTransition>
</component>
</div>
</AppComp>
<template v-if="!apploaded" #fallback>
<JSplashscreen />
</template>
@ -50,6 +40,7 @@ import type { RouteMeta } from 'vue-router/auto';
import DefaultLayout from '@/layouts/default.vue';
import FullPageLayout from '@/layouts/fullpage.vue';
import ServerLayout from '@/layouts/server.vue';
import AppComp from '@/AppComp.vue';
const apploaded = shallowRef(false);
const defaultTransition = 'slide-x-reverse';

17
frontend/src/AppComp.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div
class="uno-h-full j-transition">
<component
:is="comp">
<slot />
</component>
</div>
</template>
<script setup lang="ts">
import type { Component } from 'vue';
defineProps<{
comp: Component;
}>();
</script>