63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
<template>
|
|
<Suspense>
|
|
<NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0] && status !== 'pending'"
|
|
:to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
|
|
<PreviewContent :project="project" :path="data[0].path" :anchor="hash">
|
|
<div class="inline-flex items-center">
|
|
<slot v-bind="$attrs"></slot>
|
|
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
|
:icon="`icons/link-${data[0].type.toLowerCase()}`" />
|
|
</div>
|
|
</PreviewContent>
|
|
</NuxtLink>
|
|
<NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
|
|
<slot v-bind="$attrs"></slot>
|
|
<Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
|
|
:icon="`icons/link-${data[0].type.toLowerCase()}`" />
|
|
</NuxtLink>
|
|
<slot :class="class" v-else v-bind="$attrs"></slot>
|
|
</Suspense>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { parseURL } from 'ufo';
|
|
|
|
const props = defineProps({
|
|
href: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
class: {
|
|
type: String,
|
|
required: false,
|
|
}
|
|
});
|
|
|
|
const nuxt = useNuxtApp();
|
|
const route = useRoute();
|
|
const { hash, pathname, protocol } = parseURL(props.href);
|
|
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
|
|
const key = computed(() => `file:${project.value}:%${pathname}`);
|
|
|
|
const { data, status, execute } = await useFetch(`/api/project/${project.value}/file`, {
|
|
method: 'GET',
|
|
query: {
|
|
search: `%${pathname}`
|
|
},
|
|
transform: (data) => data?.map(e => ({ path: e.path, type: e.type })),
|
|
key: key.value,
|
|
ignoreResponseError: true,
|
|
immediate: false,
|
|
dedupe: 'defer'
|
|
});
|
|
|
|
if(!!pathname && !protocol)
|
|
{
|
|
await execute();
|
|
if(data.value === null && status.value === 'idle')
|
|
{
|
|
data.value = nuxt.payload.data[key.value] ?? nuxt.static.data[key.value];
|
|
status.value = 'success';
|
|
}
|
|
}
|
|
</script> |