fix(BaseTabs): default tab detection on before mount

shuriken-ui · Jan 23, 2024 · 0ad76af · 0ad76af
1 parent 3740d4a
commit 0ad76af
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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')