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

feat(Tabs): handle avatar

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-09 18:19:17 +02:00
parent d43c29b4df
commit bf0a04eb8b
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
playground/pages/tabs.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
const items = [{ const items = [{
label: 'Tab1', label: 'Tab1',
icon: 'i-heroicons-home', avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
},
content: 'This is the content shown for Tab1' content: 'This is the content shown for Tab1'
}, { }, {
label: 'Tab2', label: 'Tab2',

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

@@ -4,7 +4,7 @@ import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config' import _appConfig from '#build/app.config'
import theme from '#build/ui/tabs' import theme from '#build/ui/tabs'
import type { IconProps } from '#ui/types' import type { IconProps, AvatarProps } from '#ui/types'
const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } } const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
@@ -13,6 +13,7 @@ const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
export interface TabsItem { export interface TabsItem {
label?: string label?: string
icon?: IconProps['name'] icon?: IconProps['name']
avatar?: AvatarProps
slot?: string slot?: string
value?: string value?: string
disabled?: boolean disabled?: boolean
@@ -60,7 +61,8 @@ 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()"> <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"> <slot name="leading" :item="item" :index="index">
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" /> <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
</slot> </slot>
<span v-if="item.label || $slots.default" :class="ui.label()"> <span v-if="item.label || $slots.default" :class="ui.label()">

1
src/theme/tabs.ts
View File

@@ -7,6 +7,7 @@ export default {
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', 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',
content: 'focus:outline-none', content: 'focus:outline-none',
leadingIcon: 'shrink-0 size-5', leadingIcon: 'shrink-0 size-5',
leadingAvatar: 'shrink-0',
label: 'truncate' label: 'truncate'
} }
} }