component formatting and types

This commit is contained in:
Julian Krauser 2025-02-14 13:57:55 +01:00
parent c2a7d15eeb
commit ce745c06e5
60 changed files with 464 additions and 301 deletions

View file

@ -1,18 +1,17 @@
<template>
<div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
<h1 class="text-center">{{ data.title }}</h1>
<iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
<iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
<NuxtPicture
v-if="data.file.mime.includes('image')"
v-if="data?.file.mime.includes('image')"
loading="lazy"
class="w-full object-cover object-center mx-auto"
:src="baseUrl + data?.file.url"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
/>
<a
v-if="data.enable_download"
:href="baseUrl + data.file.url"
:download="data.file.name"
v-if="data?.enable_download"
:href="baseUrl + data?.file.url"
:download="data?.file.name"
target="_blank"
class="w-fit text-primary underline"
>
@ -23,7 +22,7 @@
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";
const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;
@ -33,10 +32,10 @@ const props = defineProps({
});
const showComponent = computed(() => {
if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
return true;
} else {
return props.data.enable_download;
return props.data?.enable_download;
}
});
</script>