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

fix(Tabs): horizontal orientation

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-15 14:22:49 +02:00
parent 84847965af
commit 1e65933d9c
4 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,14 +44,17 @@ import { defu } from 'defu'
import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
const props = withDefaults(defineProps<TabsProps<T>>(), { defaultValue: '0' })
const props = withDefaults(defineProps<TabsProps<T>>(), {
defaultValue: '0',
orientation: 'horizontal'
})
const emits = defineEmits<TabsEmits>()
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 ui = computed(() => tv({ extend: tabs, slots: props.ui })())
const ui = computed(() => tv({ extend: tabs, slots: props.ui })({ orientation: props.orientation }))
</script>
<template>

22
src/theme/tabs.ts
View File

@@ -1,12 +1,26 @@
export default {
slots: {
root: 'flex data-[orientation=horizontal]:flex-col items-center gap-2',
list: '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',
indicator: '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-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 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:outline-none',
root: 'flex items-center gap-2',
list: 'relative flex rounded-lg bg-gray-50 dark:bg-gray-800 p-1 group',
indicator: 'absolute transition-[translate,width] duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
trigger: 'relative inline-flex items-center justify-center gap-1.5 shrink-0 flex-1 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 py-1.5 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:outline-none',
content: 'focus:outline-none',
leadingIcon: 'shrink-0 size-5',
leadingAvatar: 'shrink-0',
label: 'truncate'
},
variants: {
orientation: {
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 inset-y-1 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]'
},
vertical: {
list: 'flex-col items-center',
indicator: 'top-0 inset-x-1 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]',
content: 'flex-1'
}
}
}
}