arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Tabs): missing props pick

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-21 17:40:09 +01:00
parent 52eef36baa
commit f086f2662e
3 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/runtime/components/Tabs.vue
View File

@@ -38,12 +38,13 @@ export type TabsSlots<T extends TabsItem> = {
<script setup lang="ts" generic="T extends TabsItem">
import { computed } from 'vue'
import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
const props = withDefaults(defineProps<TabsProps<T>>(), { defaultValue: '0' })
const emits = defineEmits<TabsEmits>()
defineSlots<TabsSlots<T>>()
const rootProps = useForwardPropsEmits(props, emits)
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
</script>

2
test/components/Tabs.spec.ts
View File

@@ -22,7 +22,7 @@ describe('Tabs', () => {
['with modelValue', { props: { items, modelValue: '1' } }],
['with defaultValue', { props: { items, defaultValue: '1' } }],
['with default slot', { props: { items }, slots: { default: () => 'Default slot' } }],
['with item slot', { props: { items }, slots: { item: () => 'Item slot' } }]
['with content slot', { props: { items }, slots: { content: () => 'Content slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TabsProps<typeof items[number]>, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Tabs)
expect(html).toMatchSnapshot()

36
test/components/__snapshots__/Tabs.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Tabs > renders basic case correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-1-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-1-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-1-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-1-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-1-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
@@ -12,7 +12,7 @@ exports[`Tabs > renders basic case correctly 1`] = `
`;
exports[`Tabs > renders with class correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="w-96 flex data-[orientation=horizontal]:flex-col items-center gap-2 w-96">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2 w-96">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-5-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-5-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-5-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-5-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-5-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
@@ -22,8 +22,19 @@ exports[`Tabs > renders with class correctly 1`] = `
</div>"
`;
exports[`Tabs > renders with content slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-29-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-29-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-29-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-29-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
<div id="radix-vue-tabs-29-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">Content slot</div>
<div id="radix-vue-tabs-29-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-1" hidden="" tabindex="0" class="focus:outline-none">Content slot</div>
<div id="radix-vue-tabs-29-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Content slot</div>
</div>"
`;
exports[`Tabs > renders with default slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-25-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-25-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-25-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Default slot</span></button><button id="radix-vue-tabs-25-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-25-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Default slot</span></button>
</div>
@@ -34,7 +45,7 @@ exports[`Tabs > renders with default slot correctly 1`] = `
`;
exports[`Tabs > renders with defaultValue correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-21-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-21-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-21-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-21-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-21-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
@@ -44,19 +55,8 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
</div>"
`;
exports[`Tabs > renders with item slot correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-29-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-29-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-29-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-29-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-29-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
<div id="radix-vue-tabs-29-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none">This is the content shown for Tab1</div>
<div id="radix-vue-tabs-29-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-1" hidden="" tabindex="0" class="focus:outline-none">And, this is the content for Tab2</div>
<div id="radix-vue-tabs-29-content-2" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="radix-vue-tabs-29-trigger-2" hidden="" tabindex="0" class="focus:outline-none">Finally, this is the content for Tab3</div>
</div>"
`;
exports[`Tabs > renders with modelValue correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-17-trigger-0" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-0" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-17-trigger-1" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-17-content-1" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-17-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-17-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
@@ -67,7 +67,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
`;
exports[`Tabs > renders with orientation correctly 1`] = `
"<div dir="ltr" data-orientation="vertical" items="[object Object],[object Object],[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="vertical" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="vertical" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-13-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-13-content-0" data-state="active" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-13-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-1" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-13-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-13-content-2" data-state="inactive" data-orientation="vertical" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>
@@ -78,7 +78,7 @@ exports[`Tabs > renders with orientation correctly 1`] = `
`;
exports[`Tabs > renders with ui correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" items="[object Object],[object Object],[object Object]" ui="[object Object]" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
"<div dir="ltr" data-orientation="horizontal" class="flex data-[orientation=horizontal]:flex-col items-center gap-2">
<div role="tablist" aria-orientation="horizontal" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group" tabindex="0">
<div style="--radix-tabs-indicator-size: 0px; --radix-tabs-indicator-position: 0px;" class="absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm"></div><button id="radix-vue-tabs-9-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="radix-vue-tabs-9-content-0" data-state="active" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="true" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab1</span></button><button id="radix-vue-tabs-9-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-1" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab2</span></button><button id="radix-vue-tabs-9-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="radix-vue-tabs-9-content-2" data-state="inactive" data-orientation="horizontal" data-radix-vue-collection-item="" tabindex="-1" data-active="false" class="relative inline-flex items-center justify-center shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><span class="truncate">Tab3</span></button>
</div>