@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/runtime/components/Stepper.vue

@@ -0,0 +1,171 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/stepper'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { stepper: Partial<typeof theme> } }
+
+const stepper = tv({ extend: tv(theme), ...(appConfig.ui?.stepper || {}) })
+
+type StepperVariants = VariantProps<typeof stepper>
+
+export interface StepperItem {
+  slot?: string
+  value?: string
+  title?: string
+  description?: string
+  icon?: string
+  content?: string
+  disabled?: boolean
+}
+
+export interface StepperProps<T extends StepperItem> extends Pick<StepperRootProps, 'linear'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items: T[]
+  size?: StepperVariants['size']
+  color?: StepperVariants['color']
+  orientation?: StepperVariants['orientation']
+  /**
+   * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
+   */
+  defaultValue?: string | number
+  disabled?: boolean
+  ui?: Partial<typeof stepper.slots>
+  class?: any
+}
+
+export type StepperEmits<T> = Omit<StepperRootEmits, 'update:modelValue'> & {
+  next: [payload: T]
+  prev: [payload: T]
+}
+
+type SlotProps<T extends StepperItem> = (props: { item: T }) => any
+
+export type StepperSlots<T extends StepperItem> = {
+  indicator: SlotProps<T>
+  title: SlotProps<T>
+  description: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({ example: 'StepperExample' })
+</script>
+
+<script setup lang="ts" generic="T extends StepperItem">
+import { computed } from 'vue'
+import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import UIcon from './Icon.vue'
+
+const props = withDefaults(defineProps<StepperProps<T>>(), {
+  linear: true
+})
+const emits = defineEmits<StepperEmits<T>>()
+const slots = defineSlots<StepperSlots<T>>()
+
+const modelValue = defineModel<string | number>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'orientation', 'linear'))
+
+const ui = computed(() => stepper({
+  orientation: props.orientation,
+  size: props.size,
+  color: props.color
+}))
+
+const currentStepIndex = computed({
+  get() {
+    const value = modelValue.value ?? props.defaultValue
+
+    return ((typeof value === 'string')
+      ? props.items.findIndex(item => item.value === value)
+      : value) ?? 0
+  },
+  set(value: number) {
+    modelValue.value = props.items?.[value]?.value ?? value
+  }
+})
+
+const currentStep = computed(() => props.items?.[currentStepIndex.value] as T)
+const hasNext = computed(() => currentStepIndex.value < props.items?.length - 1)
+const hasPrev = computed(() => currentStepIndex.value > 0)
+
+defineExpose({
+  next() {
+    if (hasNext.value) {
+      currentStepIndex.value += 1
+      emits('next', currentStep.value)
+    }
+  },
+  prev() {
+    if (hasPrev.value) {
+      currentStepIndex.value -= 1
+      emits('prev', currentStep.value)
+    }
+  },
+  hasNext,
+  hasPrev
+})
+</script>
+
+<template>
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <StepperItem
+        v-for="(item, count) in items"
+        :key="item.value ?? count"
+        :step="count"
+        :disabled="item.disabled || props.disabled"
+        :class="ui.item({ class: props.ui?.item })"
+      >
+        <div :class="ui.container({ class: props.ui?.container })">
+          <StepperTrigger :class="ui.trigger({ class: props.ui?.trigger })">
+            <StepperIndicator :class="ui.indicator({ class: props.ui?.indicator })">
+              <slot name="indicator" :item="item">
+                <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: props.ui?.indicator })" />
+                <template v-else>
+                  {{ count + 1 }}
+                </template>
+              </slot>
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="count < items.length - 1"
+            :class="ui.separator({ class: props.ui?.separator })"
+          />
+        </div>
+
+        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <StepperTitle :class="ui.title({ class: props.ui?.title })">
+            <slot name="title" :item="currentStep">
+              {{ item.title }}
+            </slot>
+          </StepperTitle>
+          <StepperDescription :class="ui.description({ class: props.ui?.description })">
+            <slot name="description" :item="currentStep">
+              {{ item.description }}
+            </slot>
+          </StepperDescription>
+        </div>
+      </StepperItem>
+    </div>
+
+    <div v-if="currentStep?.content || !!slots.content || (currentStep?.slot && !!slots[currentStep.slot]) || (currentStep?.value && !!slots[currentStep.value])" :class="ui.content({ class: props.ui?.description })">
+      <slot
+        :name="!!slots[currentStep?.slot ?? currentStep.value] ? currentStep.slot ?? currentStep.value : 'content'"
+        :item="currentStep"
+      >
+        {{ currentStep?.content }}
+      </slot>
+    </div>
+  </StepperRoot>
+</template>

package/dist/runtime/components/Switch.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { SwitchRootProps } from 'radix-vue'
+import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
@@ -12,10 +13,10 @@ const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
 
 type SwitchVariants = VariantProps<typeof switchTv>
 
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue `div`
+   * @defaultValue 'div'
    */
   as?: any
   color?: SwitchVariants['color']
@@ -33,38 +34,38 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
   uncheckedIcon?: string
   label?: string
   description?: string
-  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
-  defaultValue?: boolean
   class?: any
   ui?: PartialString<typeof switchTv.slots>
 }
 
-export interface SwitchEmits {
-  (e: 'update:modelValue', payload: boolean): void
-  (e: 'change', payload: Event): void
+export type SwitchEmits = {
+  change: [payload: Event]
 }
 
 export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
+
+extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
-import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
+import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits>()
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
+const modelValue = defineModel<boolean>({ default: undefined })
 
 const appConfig = useAppConfig()
-const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const id = _id.value ?? useId()
@@ -87,17 +88,16 @@ function onUpdate(value: any) {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
-        v-model:checked="modelValue"
-        :default-checked="defaultValue"
         v-bind="rootProps"
+        v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
         :class="ui.base({ class: props.ui?.base })"
-        @update:checked="onUpdate"
+        @update:model-value="onUpdate"
       >
         <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
           <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
@@ -120,5 +120,5 @@ function onUpdate(value: any) {
         </slot>
       </p>
     </div>
-  </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Table.vue

@@ -0,0 +1,262 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { Ref } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type { RowData } from '@tanstack/table-core'
+import type {
+  Row,
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnPinningState,
+  RowSelectionState,
+  SortingState,
+  ExpandedState,
+  VisibilityState,
+  GlobalFilterOptions,
+  ColumnFiltersOptions,
+  ColumnPinningOptions,
+  VisibilityOptions,
+  ExpandedOptions,
+  SortingOptions,
+  RowSelectionOptions,
+  Updater,
+  CellContext,
+  HeaderContext
+} from '@tanstack/vue-table'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/table'
+
+declare module '@tanstack/table-core' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    class?: {
+      th?: string
+      td?: string
+    }
+  }
+}
+
+const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
+
+const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
+
+type TableVariants = VariantProps<typeof table>
+
+export type TableColumn<T> = ColumnDef<T>
+
+export interface TableData {
+  [key: string]: any
+}
+
+export interface TableProps<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  data?: T[]
+  columns?: TableColumn<T>[]
+  caption?: string
+  /**
+   * Whether the table should have a sticky header.
+   * @defaultValue false
+   */
+  sticky?: boolean
+  /** Whether the table should be in loading state. */
+  loading?: boolean
+  loadingColor?: TableVariants['loadingColor']
+  loadingAnimation?: TableVariants['loadingAnimation']
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+   */
+  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+   */
+  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+   */
+  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+   */
+  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+   */
+  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+   */
+  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+   */
+  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
+  class?: any
+  ui?: Partial<typeof table.slots>
+}
+
+type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
+
+export type TableSlots<T> = {
+  expanded: (props: { row: Row<T> }) => any
+  empty: (props?: {}) => any
+  caption: (props?: {}) => any
+} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
+
+</script>
+
+<script setup lang="ts" generic="T extends TableData">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
+import { upperFirst } from 'scule'
+import { useLocale } from '../composables/useLocale'
+
+const props = defineProps<TableProps<T>>()
+defineSlots<TableSlots<T>>()
+
+const { t } = useLocale()
+
+const data = computed(() => props.data ?? [])
+const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
+
+const ui = computed(() => table({
+  sticky: props.sticky,
+  loading: props.loading,
+  loadingColor: props.loadingColor,
+  loadingAnimation: props.loadingAnimation
+}))
+
+const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
+const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
+const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
+const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
+const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
+const sortingState = defineModel<SortingState>('sorting', { default: [] })
+const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+
+const tableApi = useVueTable({
+  data,
+  columns: columns.value,
+  getCoreRowModel: getCoreRowModel(),
+  ...(props.globalFilterOptions || {}),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
+  ...(props.columnFiltersOptions || {}),
+  getFilteredRowModel: getFilteredRowModel(),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
+  ...(props.visibilityOptions || {}),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...(props.columnPinningOptions || {}),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
+  ...(props.rowSelectionOptions || {}),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
+  ...(props.sortingOptions || {}),
+  getSortedRowModel: getSortedRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
+  ...(props.expandedOptions || {}),
+  getExpandedRowModel: getExpandedRowModel(),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  state: {
+    get globalFilter() {
+      return globalFilterState.value
+    },
+    get columnFilters() {
+      return columnFiltersState.value
+    },
+    get columnVisibility() {
+      return columnVisibilityState.value
+    },
+    get columnPinning() {
+      return columnPinningState.value
+    },
+    get expanded() {
+      return expandedState.value
+    },
+    get rowSelection() {
+      return rowSelectionState.value
+    },
+    get sorting() {
+      return sortingState.value
+    }
+  }
+})
+
+function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+}
+
+defineExpose({
+  tableApi
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <table :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </caption>
+
+      <thead :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :class="ui.th({ class: [props.ui?.th, header.column.columnDef.meta?.class?.th], pinned: !!header.column.getIsPinned() })"
+          >
+            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <template v-if="tableApi.getRowModel().rows?.length">
+          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
+            <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :data-pinned="cell.column.getIsPinned()"
+                :class="ui.td({ class: [props.ui?.td, cell.column.columnDef.meta?.class?.td], pinned: !!cell.column.getIsPinned() })"
+              >
+                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                <slot name="expanded" :row="row" />
+              </td>
+            </tr>
+          </template>
+        </template>
+
+        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty">
+              {{ t('table.noData') }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </Primitive>
+</template>

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -11,7 +12,7 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
 
 const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
-export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+export interface TabsItem {
   label?: string
   icon?: string
   avatar?: AvatarProps
@@ -19,11 +20,12 @@ export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
   content?: string
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
+  disabled?: boolean
 }
 
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -42,7 +44,12 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * The content of the tabs, can be disabled to prevent rendering the content.
    * @defaultValue true
    */
-  content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof tabs.slots>
 }
@@ -57,24 +64,44 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Tab1',
+      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
+      content: 'This is the content shown for Tab1'
+    }, {
+      label: 'Tab2',
+      icon: 'i-lucide-user',
+      content: 'And, this is the content for Tab2'
+    }, {
+      label: 'Tab3',
+      icon: 'i-lucide-bell',
+      content: 'Finally, this is the content for Tab3'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
-import { computed, toRef } from 'vue'
-import { defu } from 'defu'
-import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  labelKey: 'label'
 })
 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 rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
 
 const ui = computed(() => tabs({
   color: props.color,
@@ -91,12 +118,12 @@ const ui = computed(() => tabs({
 
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
-          <UAvatar v-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
 
-        <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ item.label }}</slot>
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />
@@ -104,7 +131,7 @@ const ui = computed(() => tabs({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
         <slot :name="item.slot || 'content'" :item="item" :index="index">
           {{ item.content }}
         </slot>