From 0ad76afa7fbe01320213f5c2fc056af0158398f1 Mon Sep 17 00:00:00 2001
From: Sacha STAFYNIAK <sacha@digisquad.io>
Date: Tue, 23 Jan 2024 14:48:51 +0100
Subject: [PATCH] fix(BaseTabs): default tab detection on before mount

---
 .playground/pages/tests/base/tabs.vue |  2 --
 components/base/BaseTabs.vue          | 10 +++++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.playground/pages/tests/base/tabs.vue b/.playground/pages/tests/base/tabs.vue
index 2764090d..1f737459 100644
--- a/.playground/pages/tests/base/tabs.vue
+++ b/.playground/pages/tests/base/tabs.vue
@@ -51,7 +51,6 @@ const selectedTab = ref('team')
       >
         <div class="w-full max-w-sm">
           <BaseTabs
-            model-value="team"
             justify="center"
             :tabs="[
               { label: 'Team', value: 'team' },
@@ -175,7 +174,6 @@ const selectedTab = ref('team')
         <div class="w-full max-w-sm">
           <BaseTabs
             type="box"
-            model-value="team"
             :tabs="[
               {
                 label: 'Team',
diff --git a/components/base/BaseTabs.vue b/components/base/BaseTabs.vue
index ac038af2..a632e0d9 100644
--- a/components/base/BaseTabs.vue
+++ b/components/base/BaseTabs.vue
@@ -44,7 +44,15 @@ const props = withDefaults(
   },
 )
 
-const [modelValue] = defineModel<string>()
+const [modelValue] = defineModel<string>({
+  default: null,
+})
+
+onBeforeMount(() => {
+  if (modelValue.value === null) {
+    modelValue.value = props.tabs[0]?.value
+  }
+})
 
 const justify = useNuiDefaultProperty(props, 'BaseTabs', 'justify')
 const type = useNuiDefaultProperty(props, 'BaseTabs', 'type')