jointrashposs/components/g/NuxtLink.vue
2023-12-13 23:17:14 +09:00

54 lines
1.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<NuxtLink
:to="realHref"
:href="undefined"
:target="realTarget"
>
<slot></slot>
</NuxtLink>
</template>
<script setup lang="ts">
import { cleanDoubleSlashes, withQuery, withTrailingSlash } from 'ufo';
import { isLocalPath, sanitizeInternalPath } from '@/assets/js/misc';
import type { RouteLocationRaw } from '#vue-router';
/**
* TrailingSlashをつけているpnpm generate時の出力ディレクトリ構造の関係ので、
* 二重にスラッシュが入って無限ループに陥らないようにするための
* NuxtLinkのラッパーコンポーネント
*/
const rawProps = defineProps<{
to?: RouteLocationRaw | string;
href?: RouteLocationRaw | string;
target?: unknown;
}>();
const localePath = useLocalePath();
const needsToOpenExternally = ref(false);
const realHref = computed(() => {
const rhf = rawProps.to ?? rawProps.href;
if (rhf && typeof rhf === 'string') {
if (rhf.startsWith('x-mi-web://')) {
needsToOpenExternally.value = true;
return localePath(withQuery('/mi-web/', { path: cleanDoubleSlashes(rhf.replace('x-mi-web:/', '')) }));
}
if (isLocalPath(rhf)) {
return withTrailingSlash(cleanDoubleSlashes(sanitizeInternalPath(rhf)), true);
}
return rhf;
}
// TODO: ルート定義をオブジェクトで渡された時のバリデーション
return rhf;
});
const realTarget = computed(() => (needsToOpenExternally.value ? '_blank' : (rawProps.target ?? null)));
</script>