version update to nuxt4

app/components/base/ListItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <NuxtLink
+    class="w-full h-fit p-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
+    :class="allowNavigation ? '' : 'pointer-events-none'"
+    :to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
+  >
+    <h1 v-if="itemIndex" class="min-w-20 w-20 sm:min-w-24 sm:w-24 text-center text-black text-4xl! my-auto">
+      {{ itemIndex }}.
+    </h1>
+
+    <div class="grow shrink basis-0 flex-col justify-center items-center flex overflow-hidden">
+      <h1 class="w-full">{{ data?.title }}</h1>
+      <p v-if="itemDate && lookup?.show_date" class="w-full text-[#5c5c5c]">
+        {{ itemDate }}
+      </p>
+      <p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
+        {{ data?.description }}
+      </p>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type BaseCollection from "~~/types/collection/baseCollection";
+import type Lookup from "~~/types/collection/lookup";
+
+const props = defineProps({
+  data: Object as PropType<BaseCollection>,
+  lookup: Object as PropType<Lookup>,
+  numberOverwrite: { type: Number, default: undefined },
+  allowNavigation: { type: Boolean, default: false },
+  urlOverwrite: { type: String, default: undefined },
+});
+
+const itemIndex = computed(() => {
+  if (props.lookup?.items_with_number != "none") {
+    return props.numberOverwrite;
+  } else if (props.lookup?.list_with_date != "none") {
+    return new Date(props.data?.date ?? "").toLocaleString("de-DE", {
+      day: "2-digit",
+    });
+  } else {
+    return undefined;
+  }
+});
+
+const itemDate = computed(() => {
+  let config = {
+    year:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("numeric" as const)
+        : undefined,
+    month:
+      props.lookup?.list_with_date != "by-month" || props.lookup?.items_with_number != "none"
+        ? ("long" as const)
+        : undefined,
+    day:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("2-digit" as const)
+        : undefined,
+    minute: props.data?.date.includes("T") ? ("2-digit" as const) : undefined,
+    hour: props.data?.date.includes("T") ? ("2-digit" as const) : undefined,
+  };
+  if (Object.values(config).filter((c) => c).length != 0) {
+    //(props.lookup?.list_with_date != "none" || props.lookup?.show_date)
+    return (
+      new Date(props.data?.date ?? "").toLocaleString("de-DE", config) + (props.data?.date.includes("T") ? "Uhr" : "")
+    );
+  } else {
+    return undefined;
+  }
+});
+</script>