Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Components rework and lots of fixes

Browse Source
This commit is contained in:
Peaceultime
2024-09-05 17:44:30 +02:00
parent 094f27d9ad
commit d7a8087c6c
21 changed files with 286 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/prose/ProseA.vue
View File

@@ -1,20 +1,22 @@
<template>
<NuxtLink class="text-accent-blue" v-if="data && data[0] && status !== 'pending'"
<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>
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
</div>
</PreviewContent>
</NuxtLink>
<NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
<slot v-bind="$attrs"></slot>
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>
<PreviewContent :project="project" :path="data[0].path" :anchor="hash">
<div class="inline-flex items-center">
<slot v-bind="$attrs"></slot>
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`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>
<ThemeIcon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
:icon="`link-${data[0].type.toLowerCase()}`" />
</NuxtLink>
<slot :class="class" v-else v-bind="$attrs"></slot>
</Suspense>
</template>
<script setup lang="ts">
@@ -31,9 +33,11 @@ const props = defineProps({
}
});
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',
@@ -41,14 +45,19 @@ const { data, status, execute } = await useFetch(`/api/project/${project.value}/
search: `%${pathname}`
},
transform: (data) => data?.map(e => ({ path: e.path, type: e.type })),
key: `file:${project.value}:%${pathname}`,
dedupe: 'defer',
key: key.value,
ignoreResponseError: true,
immediate: false,
dedupe: 'defer'
});
if(pathname && !protocol)
if(!!pathname && !protocol)
{
execute();
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>

47
components/prose/ProseTag.vue
View File

@@ -1,5 +1,44 @@
<template>
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
<slot></slot>
</span>
</template>
<HoverPopup @before-show="status === 'idle' && project && tag && execute()">
<template #content>
<Suspense>
<div v-if="status === 'pending'" class="loading w-[550px] h-[450px]"></div>
<template v-else-if="!!data">
<div v-if="data.description" class="p-6 ms-6">
<ProseH2>{{ data.tag }}</ProseH2>
<Markdown v-model="data.description"></Markdown>
</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
</div>
</template>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
</div>
</Suspense>
</template>
<template>
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
<slot></slot>
</span>
</template>
</HoverPopup>
</template>
<script setup lang="ts">
const { tag } = defineProps({
tag: {
type: String,
required: true,
}
})
const route = useRoute();
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
const { data, status, execute } = useFetch(`/api/project/${project.value}/tags/${tag}`, {
immediate: false,
key: `file:${project.value}:%${tag}`,
});
</script>