@nuxt/ui 4.2.1 → 4.4.0

package/dist/runtime/components/Table.vue

@@ -4,12 +4,12 @@ import theme from "#build/ui/table";
 
 <script setup>
 import { ref, computed, useTemplateRef, watch, toRef } from "vue";
-import { Primitive } from "reka-ui";
+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 { reactiveOmit, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
@@ -121,56 +121,59 @@ const hasFooter = computed(() => {
   }
   return hasFooterRecursive(columns.value);
 });
-const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
-const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
-const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
-const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
-const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
-const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
-const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
-const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
-const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
-const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
-const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
-const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
-const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
+const globalFilterState = defineModel("globalFilter", { type: String });
+const columnFiltersState = defineModel("columnFilters", { type: Array });
+const columnOrderState = defineModel("columnOrder", { type: Array });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object });
+const columnPinningState = defineModel("columnPinning", { type: Object });
+const columnSizingState = defineModel("columnSizing", { type: Object });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object });
+const rowSelectionState = defineModel("rowSelection", { type: Object });
+const rowPinningState = defineModel("rowPinning", { type: Object });
+const sortingState = defineModel("sorting", { type: Array });
+const groupingState = defineModel("grouping", { type: Array });
+const expandedState = defineModel("expanded", { type: [Boolean, Object] });
+const paginationState = defineModel("pagination", { type: Object });
 const rootRef = useTemplateRef("rootRef");
 const tableRef = useTemplateRef("tableRef");
+const tableProps = useForwardProps(reactivePick(props, "_features", "autoResetAll", "debugAll", "debugCells", "debugColumns", "debugHeaders", "debugRows", "debugTable", "defaultColumn", "getRowId", "getSubRows", "initialState", "mergeOptions", "renderFallbackValue"));
 const tableApi = useVueTable({
-  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
-  data,
+  ...tableProps.value,
+  get data() {
+    return data.value;
+  },
   get columns() {
     return columns.value;
   },
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...props.globalFilterOptions || {},
-  onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
+  ...globalFilterState.value !== void 0 && { onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState) },
   ...props.columnFiltersOptions || {},
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
+  ...columnFiltersState.value !== void 0 && { onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState) },
+  ...columnOrderState.value !== void 0 && { onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState) },
   ...props.visibilityOptions || {},
-  onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...columnVisibilityState.value !== void 0 && { onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState) },
   ...props.columnPinningOptions || {},
-  onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
+  ...columnPinningState.value !== void 0 && { onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState) },
   ...props.columnSizingOptions || {},
-  onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
-  onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...columnSizingState.value !== void 0 && { onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState) },
+  ...columnSizingInfoState.value !== void 0 && { onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState) },
   ...props.rowSelectionOptions || {},
-  onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
+  ...rowSelectionState.value !== void 0 && { onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState) },
   ...props.rowPinningOptions || {},
-  onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
+  ...rowPinningState.value !== void 0 && { onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState) },
   ...props.sortingOptions || {},
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
+  ...sortingState.value !== void 0 && { onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState) },
   ...props.groupingOptions || {},
-  onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
+  ...groupingState.value !== void 0 && { onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState) },
   ...props.expandedOptions || {},
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
+  ...expandedState.value !== void 0 && { onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState) },
   ...props.paginationOptions || {},
-  onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
+  ...paginationState.value !== void 0 && { onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState) },
   ...props.facetedOptions || {},
   state: {
     get globalFilter() {
@@ -278,6 +281,16 @@ function resolveValue(prop, arg) {
   }
   return prop;
 }
+function getColumnStyles(column) {
+  const styles = {};
+  const pinned = column.getIsPinned();
+  if (pinned === "left") {
+    styles.left = `${column.getStart("left")}px`;
+  } else if (pinned === "right") {
+    styles.right = `${column.getAfter("right")}px`;
+  }
+  return styles;
+}
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
@@ -325,7 +338,10 @@ defineExpose({
   ],
   pinned: !!cell.column.getIsPinned()
 })"
-        :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
+        :style="[
+  getColumnStyles(cell.column),
+  resolveValue(cell.column.columnDef.meta?.style?.td, cell)
+]"
       >
         <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
           <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
@@ -365,7 +381,10 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+  getColumnStyles(header.column),
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -439,7 +458,10 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+  getColumnStyles(header.column),
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]"
           >
             <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />

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';
@@ -54,6 +53,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * Enable virtualization for large datasets.
      * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
     virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
@@ -175,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,20 +193,22 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         expanded?: ExpandedState;
         pagination?: PaginationState;
     }) & {
-        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    }> & import("vue").PublicProps;
+        "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<{
         readonly $el: HTMLElement;
         tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
@@ -212,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) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+    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);
 }>) => 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,10 +90,14 @@ 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> & {
+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;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
@@ -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

@@ -20,11 +20,12 @@ 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 },
+  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 }
 });
@@ -63,7 +64,7 @@ defineExpose({
         v-for="(item, index) of items"
         :key="index"
         :ref="(el) => triggersRef[index] = el"
-        :value="item.value ?? String(index)"
+        :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
         data-slot="trigger"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
@@ -94,7 +95,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: [props.ui?.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,10 +90,14 @@ 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> & {
+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;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
@@ -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

@@ -60,23 +60,27 @@ 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> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: 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];
-} & {};
+}) & {};

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

@@ -60,23 +60,27 @@ 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> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: 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];
-} & {};
+}) & {};

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/timeline';
 import type { AvatarProps, IconProps } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
 export interface TimelineItem {
@@ -36,6 +36,11 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
      * @defaultValue 'vertical'
      */
     orientation?: Timeline['variants']['orientation'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     defaultValue?: string | number;
     reverse?: boolean;
     class?: any;
@@ -44,29 +49,38 @@ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
 type SlotProps<T extends TimelineItem> = (props: {
     item: T;
 }) => any;
+export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
+    select: [event: Event, item: T];
+}
 export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
     indicator: SlotProps<T>;
+    wrapper: SlotProps<T>;
     date: SlotProps<T>;
     title: SlotProps<T>;
     description: SlotProps<T>;
-} & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
+} & DynamicSlots<T, 'indicator' | 'wrapper' | 'date' | 'title' | 'description', {
     item: T;
 }>;
-declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
         modelValue?: string | number;
     }) & {
+        onSelect?: ((event: Event, item: T) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
-    emit: (evt: "update:modelValue", value: string | number | undefined) => void;
+    emit: ((evt: "select", event: Event, item: T) => void) & ((evt: "update:modelValue", value: string | number | 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/Timeline.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive, Separator } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import { get } from "../utils";
 import UAvatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,11 +15,13 @@ const props = defineProps({
   size: { type: null, required: false },
   color: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
+  valueKey: { type: null, required: false, default: "value" },
   defaultValue: { type: [String, Number], required: false },
   reverse: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
+const emits = defineEmits(["select"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
@@ -31,7 +34,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.timeline || {
 const currentStepIndex = computed(() => {
   const value = modelValue.value ?? props.defaultValue;
   if (typeof value === "string") {
-    return props.items.findIndex((item) => item.value === value) ?? -1;
+    return props.items.findIndex((item) => get(item, props.valueKey) === value) ?? -1;
   }
   if (props.reverse) {
     return value != null ? props.items.length - 1 - value : -1;
@@ -48,16 +51,20 @@ function getItemState(index) {
     return index < currentStepIndex.value ? "completed" : void 0;
   }
 }
+function onSelect(event, item) {
+  emits("select", event, item);
+}
 </script>
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div
       v-for="(item, index) in items"
-      :key="item.value ?? index"
+      :key="index"
       data-slot="item"
       :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       :data-state="getItemState(index)"
+      @click="onSelect($event, item)"
     >
       <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
         <UAvatar
@@ -80,21 +87,23 @@ function getItemState(index) {
       </div>
 
       <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-        <div v-if="item.date" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
-          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
-            {{ item.date }}
-          </slot>
-        </div>
-        <div v-if="item.title || !!slots.title" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
-          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
-            {{ item.title }}
-          </slot>
-        </div>
-        <div v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
-          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
-            {{ item.description }}
-          </slot>
-        </div>
+        <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
+          <div v-if="item.date || !!slots[item.slot ? `${item.slot}-date` : 'date']" data-slot="date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
+            <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
+              {{ item.date }}
+            </slot>
+          </div>
+          <div v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+            <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
+              {{ item.title }}
+            </slot>
+          </div>
+          <div v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+            <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
+              {{ item.description }}
+            </slot>
+          </div>
+        </slot>
       </div>
     </div>
   </Primitive>