Simple Database + Endpoints

2025-12-07 12:07:10 +01:00
parent 35eee78efc
commit 3125d657dd
22 changed files with 595 additions and 23 deletions
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+defineProps<{
+  items: TabItem[];
+  tabColor?: string;
+}>();
+
+const display = useDisplay();
+const tab = ref('1');
+</script>
+
+<template>
+  <!-- Desktop: Tabs mit einzelner Anzeige -->
+  <template v-if="!display.mobile.value">
+    <v-tabs :color="tabColor ?? '#b62b2b'" v-model="tab">
+      <v-tab v-for="item in items" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </v-tab>
+    </v-tabs>
+
+    <v-divider></v-divider>
+
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item v-for="item in items" :key="item.value" :value="item.value">
+        <slot :name="item.value"></slot>
+      </v-tabs-window-item>
+    </v-tabs-window>
+  </template>
+
+  <!-- Mobile: Alle Einträge untereinander -->
+  <template v-else>
+    <template v-for="item in items" :key="item.value">
+      <slot :name="item.value"></slot>
+    </template>
+  </template>
+</template>