feat: tabs component

src/components/Tabs/Tabs.vue

@@ -12,19 +12,24 @@
         />
       </ul>
     </div>
-    <slot/>
+    <div v-bind="$attrs">
+      <slot />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from './config'
+import {
+  TAB_ACTIVATE_INJECTION_KEY,
+  TAB_ACTIVE_NAME_INJECTION_KEY,
+  TAB_STYLE_INJECTION_KEY,
+  TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
+} from './config'
 import { useTabsClasses } from './useTabsClasses'
 import type { PropType } from 'vue'
-import { computed, provide, useSlots } from 'vue'
+import { computed, provide, toRef, useSlots } from 'vue'
 import { flatten } from '../../utils/flatten'
 import TabPane from './components/TabPane/TabPane.vue'
 
-export type TabsVariant = 'default' | 'underline' | 'pills'
-
 const props = defineProps({
   variant: {
     type: String as PropType<TabsVariant>,
@@ -34,9 +39,12 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  directive: {
+    type: String as PropType<'if' | 'show'>,
+    default: 'if',
+  },
 })
 
-
 const emit = defineEmits(['update:modelValue'])
 
 const { ulClasses, divClasses } = useTabsClasses(props)
@@ -59,9 +67,21 @@ const modelValueRef = computed({
   set: (value: string) => emit('update:modelValue', value),
 })
 
+provide(TAB_ACTIVE_NAME_INJECTION_KEY, modelValueRef)
+provide(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, toRef(props, 'directive'))
+
+
 const onActivate = (value: string) => {
   modelValueRef.value = value
 }
 
 provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
 </script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+
+export type TabsVariant = 'default' | 'underline' | 'pills'
+</script>

src/components/Tabs/components/Tab/Tab.vue

@@ -1,9 +1,21 @@
 <template>
   <div>
-    <slot />
+    <template v-if="directive === 'if'">
+      <div v-if="activeTab === name">
+        <slot/>
+      </div>
+    </template>
+    <template v-else-if="directive === 'show'">
+      <div v-show="activeTab === name">
+        <slot/>
+      </div>
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
+import { inject } from 'vue'
+import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../config'
+
 defineProps({
   name: {
     type: String,
@@ -18,6 +30,9 @@ defineProps({
     default: false,
   },
 })
+
+const activeTab = inject(TAB_ACTIVE_NAME_INJECTION_KEY, '')
+const directive = inject(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, 'if')
 </script>
 
 <script lang="ts">

src/components/Tabs/config.ts

@@ -1,2 +1,4 @@
 export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
+export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection'
+export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection'
 export const TAB_ACTIVATE_INJECTION_KEY = 'flowbite-tab-activate-func-injection'