This commit is contained in:
Cleo John 2023-02-14 20:58:25 +01:00
parent 3dfefc9f16
commit bf91e5251c
4 changed files with 22 additions and 75 deletions

View File

@ -29,8 +29,9 @@ import { url } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { mainRouter, routes } from '@/router'; import { mainRouter, routes } from '@/router';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { Router } from '@/nirax';
import VueRouter from "vue-router"
const props = defineProps<{ const props = defineProps<{
initialPath: string; initialPath: string;
@ -41,11 +42,11 @@ defineEmits<{
(ev: 'click'): void; (ev: 'click'): void;
}>(); }>();
const router = new Router(routes, props.initialPath); const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
router.addListener('push', ctx => { history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
}); })
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let rootEl = $ref(); let rootEl = $ref();

View File

@ -32,10 +32,11 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config'; import { url } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { mainRouter, routes } from '@/router'; import { mainRouter, routes } from '@/router';
import { Router } from '@/nirax';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import VueRouter from "vue-router"
const props = defineProps<{ const props = defineProps<{
initialPath: string; initialPath: string;
}>(); }>();
@ -44,39 +45,14 @@ defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
const router = new Router(routes, props.initialPath); const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let windowEl = $ref<InstanceType<typeof XWindow>>(); let windowEl = $ref<InstanceType<typeof XWindow>>();
const history = $ref<{ path: string; key: any; }[]>([{
path: router.getCurrentPath(),
key: router.getCurrentKey(),
}]);
const buttonsLeft = $computed(() => {
const buttons = [];
if (history.length > 1) {
buttons.push({
icon: 'ph-caret-left-bold ph-lg',
onClick: back,
});
}
return buttons;
});
const buttonsRight = $computed(() => {
const buttons = [{
icon: 'ph-arrows-out-simple-bold ph-lg',
title: i18n.ts.showInPage,
onClick: expand,
}];
return buttons;
});
router.addListener('push', ctx => {
history.push({ path: ctx.path, key: ctx.key });
});
provide('router', router); provide('router', router);
provideMetadataReceiver((info) => { provideMetadataReceiver((info) => {

View File

@ -1,7 +1,7 @@
<template> <template>
<KeepAlive :max="defaultStore.state.numberOfPageCache"> <KeepAlive :max="defaultStore.state.numberOfPageCache">
<Suspense> <Suspense>
<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/> <component/>
<template #fallback> <template #fallback>
<MkLoading/> <MkLoading/>
@ -12,11 +12,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue'; import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
import { Resolved, Router } from '@/nirax';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import VueRouter from "vue-router"
const props = defineProps<{ const props = defineProps<{
router?: Router; router?: VueRouter.Router;
}>(); }>();
const router = props.router ?? inject('router'); const router = props.router ?? inject('router');
@ -27,35 +28,4 @@ if (router == null) {
const currentDepth = inject('routerCurrentDepth', 0); const currentDepth = inject('routerCurrentDepth', 0);
provide('routerCurrentDepth', currentDepth + 1); provide('routerCurrentDepth', currentDepth + 1);
function resolveNested(current: Resolved, d = 0): Resolved | null {
if (d === currentDepth) {
return current;
} else {
if (current.child) {
return resolveNested(current.child, d + 1);
} else {
return null;
}
}
}
const current = resolveNested(router.current)!;
let currentPageComponent = $shallowRef(current.route.component);
let currentPageProps = $ref(current.props);
let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
function onChange({ resolved, key: newKey }) {
const current = resolveNested(resolved);
if (current == null) return;
currentPageComponent = current.route.component;
currentPageProps = current.props;
key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
}
router.addListener('change', onChange);
onBeforeUnmount(() => {
router.removeListener('change', onChange);
});
</script> </script>

View File

@ -7,9 +7,9 @@ import * as os from "@/os";
import { userActions } from "@/store"; import { userActions } from "@/store";
import { $i, iAmModerator } from "@/account"; import { $i, iAmModerator } from "@/account";
import { mainRouter } from "@/router"; import { mainRouter } from "@/router";
import { Router } from "@/nirax"; import VueRouter from "vue-router"
export function getUserMenu(user, router: Router = mainRouter) { export function getUserMenu(user, router: VueRouter.Router = mainRouter) {
const meId = $i ? $i.id : null; const meId = $i ? $i.id : null;
async function pushList() { async function pushList() {