[Feature]: Show first TabContent when no `defaultValue` on TabsRoot

[mrleblanc101]

Describe the feature

If I don't provide a defaultValue on <TabsRoot>, no tabs is visible.
Shouldn't the default be to show the first provided tab in the template ?
Currently, if you have v-if on some <TabsContent>, you need to create a computed to determine the correct id manually.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[mrleblanc101]

This would be useful if you have conditionnal tabs:

<template>
    <TabsRoot>
        <TabsList>
            <TabsIndicator
                class="absolute bottom-0 left-0 -z-10 h-full w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) overflow-hidden rounded-md transition-all duration-300"
            >
                <div class="h-full w-full bg-white" />
            </TabsIndicator>
            <TabsTrigger
                v-if="serverAuditResult.isDesktopAuditEnabled"
                value="tab-desktop"
            >
                Desktop
            </TabsTrigger>
            <TabsTrigger
                v-if="serverAuditResult.isMobileAuditEnabled"
                value="tab-mobile"
            >
                Mobile
            </TabsTrigger>
        </TabsList>
        <TabsContent
            v-if="serverAuditResult.isDesktopAuditEnabled"
            key="tab-desktop"
            value="tab-desktop"
        >
            <AuditMetricsGrid :audit-result="serverAuditResult.latestDesktopAuditResult" />
        </TabsContent>
        <TabsContent
            v-if="serverAuditResult.isMobileAuditEnabled"
            key="tab-mobile"
            value="tab-mobile"
        >
            <AuditMetricsGrid :audit-result="serverAuditResult.latestMobileAuditResult" />
        </TabsContent>
    </TabsRoot>
</template>

[mrleblanc101]

In my case, I can simply change:

<TabsRoot default-value="tab-desktop">

for this:

<TabsRoot :default-value="serverAuditResult.isDesktopAuditEnabled ? 'tab-desktop' : 'tab-mobile'">

but it would be useful for more complex condition or if you have many tabs.

[sadeghbarati]

radix-ui Tabs also has the same behaviour, You should add defaultValue or use controlled way v-model

For dynamic/conditional Tabs use v-for instead of v-if and filter or push a tab into an array ref

[mrleblanc101]

@sadeghbarati Why ? It doesn't even make sense to have no tabs selected/open. The first one should always be open.