@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/Table.vue

@@ -3,14 +3,15 @@ import theme from "#build/ui/table";
 </script>
 
 <script setup>
-import { ref, computed, useTemplateRef, watch, toRef } from "vue";
+import { computed, useTemplateRef, watch, toRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, createRef } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -45,7 +46,7 @@ const props = defineProps({
   onHover: { type: Function, required: false },
   onContextmenu: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   state: { type: Object, required: false },
   onStateChange: { type: Function, required: false },
   renderFallbackValue: { type: null, required: false },
@@ -66,7 +67,8 @@ const props = defineProps({
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const data = ref(props.data ?? []);
+const uiProp = useComponentUI("table", props);
+const data = createRef(props.data ?? [], props.watchOptions?.deep !== false);
 const meta = computed(() => props.meta ?? {});
 const columns = computed(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) }))));
 function processColumns(columns2) {
@@ -243,8 +245,8 @@ const renderedSize = computed(() => {
   }
   return virtualItems.reduce((sum, item) => sum + item.size, 0);
 });
-function valueUpdater(updaterOrValue, ref2) {
-  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
+function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
 }
 function onRowSelect(e, row) {
   if (!props.onSelect) {
@@ -314,7 +316,7 @@ defineExpose({
       data-slot="tr"
       :class="ui.tr({
   class: [
-    props.ui?.tr,
+    uiProp?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
@@ -333,7 +335,7 @@ defineExpose({
         data-slot="td"
         :class="ui.td({
   class: [
-    props.ui?.td,
+    uiProp?.td,
     resolveValue(cell.column.columnDef.meta?.class?.td, cell)
   ],
   pinned: !!cell.column.getIsPinned()
@@ -349,23 +351,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [uiProp?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [props.ui?.base] })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [uiProp?.base] })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [uiProp?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="ui.thead({ class: [props.ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+      <thead data-slot="thead" :class="ui.thead({ class: [uiProp?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -376,7 +378,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    props.ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -392,10 +394,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
       </thead>
 
-      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [uiProp?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -417,13 +419,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>
@@ -436,14 +438,14 @@ defineExpose({
       <tfoot
         v-if="hasFooter"
         data-slot="tfoot"
-        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
+        :class="ui.tfoot({ class: [uiProp?.tfoot] })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
 } : void 0"
       >
-        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
@@ -453,7 +455,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    props.ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -472,7 +474,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <div
       v-if="virtualizer"
       :style="{

package/dist/runtime/components/Table.vue.d.ts

@@ -1,7 +1,6 @@
 import type { WatchOptions } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
-import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
+import type { Cell, CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, Header, HeaderContext, PaginationOptions, PaginationState, Row, RowData, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, TableMeta, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/table';
 import type { TableHTMLAttributes } from '../types/html';
@@ -176,8 +175,10 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-top': (props?: {}) => any;
     'body-bottom': (props?: {}) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
-declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(TableProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TableProps<T> & {
         globalFilter?: string;
         columnFilters?: ColumnFiltersState;
         columnOrder?: ColumnOrderState;
@@ -191,7 +192,21 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:globalFilter"?: ((value: string | undefined) => any) | undefined;
+        "onUpdate:columnFilters"?: ((value: ColumnFiltersState | undefined) => any) | undefined;
+        "onUpdate:columnOrder"?: ((value: ColumnOrderState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState | undefined) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState | undefined) => any) | undefined;
+        "onUpdate:grouping"?: ((value: GroupingState | undefined) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -201,12 +216,12 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
+    emit: ((event: "update:globalFilter", value: string | undefined) => void) & ((event: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((event: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((event: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((event: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((event: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((event: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState | undefined) => void) & ((event: "update:sorting", value: SortingState | undefined) => void) & ((event: "update:grouping", value: GroupingState | undefined) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:pagination", value: PaginationState | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Tabs.d.vue.ts

@@ -50,12 +50,17 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      * The orientation of the tabs.
      * @defaultValue 'horizontal'
      */
-    orientation?: TabsRootProps['orientation'];
+    orientation?: Tabs['variants']['orientation'];
     /**
      * The content of the tabs, can be disabled to prevent rendering the content.
      * @defaultValue true
      */
     content?: boolean;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -85,8 +90,12 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
     index: number;
     ui: Tabs['ui'];
 }>;
-declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TabsProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", payload: string | number) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TabsProps<T> & {
+        "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -98,8 +107,8 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Tabs.vue

@@ -7,6 +7,7 @@ import { ref, computed } from "vue";
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -20,17 +21,19 @@ const props = defineProps({
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   content: { type: Boolean, required: false, default: true },
+  valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
-  defaultValue: { type: null, required: false, default: "0" },
-  modelValue: { type: null, required: false },
+  ui: { type: Object, required: false },
+  defaultValue: { type: [String, Number], required: false, default: "0" },
+  modelValue: { type: [String, Number], required: false },
   activationMode: { type: String, required: false },
   unmountOnHide: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("tabs", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })({
   color: props.color,
@@ -39,6 +42,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })
   orientation: props.orientation
 }));
 const triggersRef = ref([]);
+function setTriggerRef(index, el) {
+  triggersRef.value[index] = el;
+}
 defineExpose({
   triggersRef
 });
@@ -52,28 +58,28 @@ defineExpose({
     :orientation="orientation"
     :activation-mode="activationMode"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: uiProp?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })" />
 
       <slot name="list-leading" />
 
       <TabsTrigger
         v-for="(item, index) of items"
         :key="index"
-        :ref="(el) => triggersRef[index] = el"
-        :value="item.value ?? String(index)"
+        :ref="(el) => setTriggerRef(index, el)"
+        :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+        :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })"
       >
         <slot name="leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="item.ui?.leadingAvatarSize || uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: [uiProp?.leadingAvatar, item.ui?.leadingAvatar] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -82,10 +88,10 @@ defineExpose({
             v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
-            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
+            :size="item.ui?.trailingBadgeSize || uiProp?.trailingBadgeSize || ui.trailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             data-slot="trailingBadge"
-            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+            :class="ui.trailingBadge({ class: [uiProp?.trailingBadge, item.ui?.trailingBadge] })"
           />
         </slot>
       </TabsTrigger>
@@ -94,7 +100,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>

package/dist/runtime/components/Tabs.vue.d.ts

@@ -50,12 +50,17 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      * The orientation of the tabs.
      * @defaultValue 'horizontal'
      */
-    orientation?: TabsRootProps['orientation'];
+    orientation?: Tabs['variants']['orientation'];
     /**
      * The content of the tabs, can be disabled to prevent rendering the content.
      * @defaultValue true
      */
     content?: boolean;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -85,8 +90,12 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
     index: number;
     ui: Tabs['ui'];
 }>;
-declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TabsProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", payload: string | number) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TabsProps<T> & {
+        "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -98,8 +107,8 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Textarea.d.vue.ts

@@ -2,11 +2,11 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { TextareaHTMLAttributes } from '../types/html';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
+export interface TextareaProps<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -38,14 +38,16 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     maxrows?: number;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
-    modelValue?: T;
-    defaultValue?: T;
-    modelModifiers?: ModelModifiers<T>;
+    /** Keep the mobile text size on all breakpoints. */
+    fixed?: boolean;
+    defaultValue?: ApplyModifiers<T, Mod>;
+    modelValue?: ApplyModifiers<T, Mod>;
+    modelModifiers?: Mod;
     class?: any;
     ui?: Textarea['slots'];
 }
-export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    'update:modelValue': [value: T];
+export interface TextareaEmits<T extends TextareaValue = TextareaValue, Mod extends ModelModifiers = ModelModifiers> {
+    'update:modelValue': [value: ApplyModifiers<T, Mod>];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -60,21 +62,67 @@ export interface TextareaSlots {
         ui: Textarea['ui'];
     }): any;
 }
-declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TextareaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers = ModelModifiers>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T, Mod> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? T | null : T) | undefined : Mod extends {
+            nullable: true;
+        } ? T | null : T) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: Readonly<import("vue").ShallowRef<any>>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? T | null : T) | undefined : Mod extends {
+        nullable: true;
+    } ? T | null : T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};