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

feat(Tabs): handle size prop (#124)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Silver343
2024-06-08 15:03:51 +01:00
committed by GitHub
parent 5694823a41
commit 2b6965211d
5 changed files with 151 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@ export interface TabsProps<T> extends Omit<TabsRootProps, 'asChild'> {
items?: T[]
color?: TabsVariants['color']
variant?: TabsVariants['variant']
size?: TabsVariants['size']
content?: boolean | Omit<TabsContentProps, 'asChild' | 'value'>
class?: any
ui?: Partial<typeof tabs.slots>
@@ -62,6 +63,7 @@ const contentProps = toRef(() => defu(props.content || {}, { forceMount: true })
const ui = computed(() => tv({ extend: tabs, slots: props.ui })({
color: props.color,
variant: props.variant,
size: props.size,
orientation: props.orientation
}))
</script>
@@ -73,7 +75,7 @@ const ui = computed(() => tv({ extend: tabs, slots: props.ui })({
<TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger()">
<slot name="leading" :item="item" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.leadingAvatar()" />
<UAvatar v-if="item.avatar" :size="(ui.leadingAvatarSize() as any)" v-bind="item.avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
</slot>

35
src/theme/tabs.ts
View File

@@ -5,10 +5,11 @@ export default (options: Required<ModuleOptions>) => ({
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: ['relative inline-flex items-center justify-center gap-1.5 shrink-0 px-3 py-1.5 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center justify-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0 size-5',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
label: 'truncate'
},
variants: {
@@ -38,6 +39,33 @@ export default (options: Required<ModuleOptions>) => ({
list: 'flex-col items-center',
indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]'
}
},
size: {
xs: {
trigger: 'px-2 py-1 text-xs gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs'
},
sm: {
trigger: 'px-2.5 py-1.5 text-xs gap-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs'
},
md: {
trigger: 'px-3 py-1.5 text-sm gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs'
},
lg: {
trigger: 'px-3 py-2 text-sm gap-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs'
},
xl: {
trigger: 'px-3 py-2 text-base gap-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs'
}
}
},
compoundVariants: [{
@@ -104,6 +132,7 @@ export default (options: Required<ModuleOptions>) => ({
}],
defaultVariants: {
color: 'white',
variant: 'pill'
variant: 'pill',
size: 'md'
}
})