Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 11 Packages Wiki Activity Actions

content text and dynamic zone components

Browse source
This commit is contained in:
Julian Krauser 2024-11-03 13:13:36 +01:00
parent 44b55d9bbb
commit 3df3ba4ebc
22 changed files with 202 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

47
components/CollectionDetail.vue
View file

@ -1,17 +1,56 @@
<template>
<div class="min-h-[calc(100vh-9rem)] container mx-auto py-12">
{{ data }}
<div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12">
<h1>{{ data?.title }}</h1>
<p>
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
day: "2-digit",
month: "long",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
})
}}
</p>
<br />
<p>{{ data?.description }}</p>
<br />
<NuxtPicture
v-if="data?.image"
loading="lazy"
class="w-fit h-[50vh] max-w-full object-cover object-center"
:src="baseUrl + data.image.url"
:imgAttrs="{ class: 'w-fit h-[50vh] max-w-full object-cover object-center' }"
/>
<br v-if="data?.image" />
<div v-if="data?.content">
<p>Bericht:</p>
<FieldContent :data="data.content" />
</div>
<br />
<div v-if="data?.attachment">
<p>Anhang:</p>
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
<NuxtPicture
v-for="img in data.attachment"
loading="lazy"
class="w-fit h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type SharedHero from "../types/component/sharedHero";
import type { ComponentTypes } from "../types/component/baseComponent";
import type Article from "../types/collection/article";
import type Operation from "../types/collection/operation";
import type Event from "../types/collection/event";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<Article | Operation | Event>,
});

3
components/ContentBuilder.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="min-h-[calc(100vh-9rem)] w-full">
<SharedHero v-if="hero" :data="hero" />
<div class="container mx-auto py-12 min-h-[50vh]">
<div class="container mx-auto py-12 min-h-[50vh] flex flex-col gap-2">
<div v-for="item in content" class="contents">
<DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
<DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
@ -10,6 +10,7 @@
<DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
<DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
<SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
<br />
</div>
</div>
</div>

13
components/dynamicZone/ColumnImageText.vue
View file

@ -1,11 +1,22 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row gap-4">
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center"
:class="data?.image_left ? 'order-0' : 'order-1'"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
/>
<FieldContent :data="data?.text" />
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneColumnImageText>,
});

5
components/dynamicZone/DualColumnText.vue
View file

@ -1,5 +1,8 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row gap-4">
<FieldContent :data="data?.left_side" />
<FieldContent :data="data?.right_side" />
</div>
</template>
<script setup lang="ts">

9
components/dynamicZone/FullImage.vue
View file

@ -1,11 +1,18 @@
<template>
<p>{{ data }}</p>
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center mx-auto"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
/>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneFullImage>,
});

2
components/dynamicZone/FullText.vue
View file

@ -1,5 +1,5 @@
<template>
<p>{{ data }}</p>
<FieldContent :data="data?.text" />
</template>
<script setup lang="ts">

12
components/dynamicZone/Gallery.vue
View file

@ -1,11 +1,21 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
<NuxtPicture
v-for="img in data?.images"
loading="lazy"
class="w-fit h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
/>
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneGallery>,
});

35
components/field/Content.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<div class="w-full h-fit flex flex-col gap-2">
<div v-for="item in data" :key="item.type" class="contents">
<h1 v-if="item.type == 'heading'" class="w-full">
<FieldType v-for="child in item.children" :data="child" />
</h1>
<p v-else-if="item.type == 'paragraph'" class="w-full">
<FieldType v-for="child in item.children" :data="child" />
</p>
<div v-else-if="item.type == 'quote'" class="w-full p-3">
<p class="p-3 bg-gray-200 border-l-2 border-gray-500">
<FieldType v-for="child in item.children" :data="child" />
</p>
</div>
<ol
v-else-if="item.type == 'list'"
class="w-full"
:class="item.format == 'unordered' ? 'list-disc' : 'list-decimal'"
>
<li v-for="list in item.children" class="ml-6">
<FieldType v-for="child in list.children" :data="child" />
</li>
</ol>
</div>
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type ContentField from "../../types/field/content";
defineProps({
data: Object as PropType<ContentField>,
});
</script>

21
components/field/Text.vue Normal file
View file

@ -0,0 +1,21 @@
<template>
<span
v-for="text in data"
:key="text.text"
:class="[
text.bold ? 'font-bold' : '',
text.strikethrough ? 'line-through' : '',
text.underline ? 'underline' : '',
text.italic ? 'italic' : '',
]"
>{{ text.text }}</span
>
</template>
<script setup lang="ts">
import type { TextField } from "../../types/field/content";
defineProps({
data: Array<TextField>,
});
</script>

15
components/field/Type.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<FieldText v-if="data?.type == 'text'" :data="[data]" />
<NuxtLink v-else :href="data?.url" class="text-primary">
<FieldText :data="data?.children" />
</NuxtLink>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type { TypeField } from "../../types/field/content";
defineProps({
data: Object as PropType<TypeField>,
});
</script>

1
components/shared/Hero.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
<NuxtPicture
preload
loading="lazy"
class="w-full h-60 object-cover object-center"
:src="baseUrl + data?.banner.url"