changes

2025-01-02 18:38:47 +01:00
parent 0c3bbfe18f
commit 0f8cfd3f16
41 changed files with 2013 additions and 591 deletions
@@ -0,0 +1,38 @@
+<script setup>
+import { provide, ref, useSlots } from 'vue';
+
+defineProps({
+    selectedColor: {
+        type: String,
+        default: 'blue-600'
+    }
+});
+
+const slots = useSlots();
+const tabs = ref(slots.default().map((tab) => tab.props ));
+const selected = ref(tabs.value[0].name);
+
+provide('selected', selected);
+
+</script>
+<template>
+    <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+        <ul class="flex flex-wrap -mb-px">
+            <li class="me-2" v-for="tab in tabs" :key="tab.name">
+                <button 
+                    @click="selected = tab.name"
+                    class="inline-block p-4"
+                    :class="{ 
+                        ['border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300']: tab.name !== selected,
+                        [`text-${ selectedColor } border-b-2 border-${ selectedColor } rounded-t-lg active dark:text-blue-500 dark:border-${ selectedColor }`]: tab.name === selected 
+                    }"
+                >
+                    {{ tab.title }}
+                </button>
+            </li>
+        </ul>
+    </div>
+    <div id="default-tab-content">
+        <slot />
+    </div>
+</template>