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

feat(Tabs): handle content prop as boolean

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-03 14:55:33 +02:00
parent c6880c2036
commit e051ef682a
4 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@ export interface TabsItem extends Partial<Pick<TabsTriggerProps, 'disabled' | 'v
export interface TabsProps<T> extends Omit<TabsRootProps, 'asChild'> {
items?: T[]
content?: Omit<TabsContentProps, 'asChild' | 'value'>
content?: boolean | Omit<TabsContentProps, 'asChild' | 'value'>
class?: any
ui?: Partial<typeof tabs.slots>
}
@@ -45,6 +45,7 @@ import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForward
import { reactivePick } from '@vueuse/core'
const props = withDefaults(defineProps<TabsProps<T>>(), {
content: true,
defaultValue: '0',
orientation: 'horizontal'
})
@@ -52,7 +53,7 @@ const emits = defineEmits<TabsEmits>()
const slots = defineSlots<TabsSlots<T>>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
const contentProps = toRef(() => defu(props.content, { forceMount: true }) as TabsContentProps)
const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ orientation: props.orientation }))
</script>
@@ -76,10 +77,12 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ orientation: p
</TabsTrigger>
</TabsList>
<TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content()">
<slot :name="item.slot || 'content'" :item="item" :index="index">
{{ item.content }}
</slot>
</TabsContent>
<template v-if="!!content">
<TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content()">
<slot :name="item.slot || 'content'" :item="item" :index="index">
{{ item.content }}
</slot>
</TabsContent>
</template>
</TabsRoot>
</template>