@nuxt/ui 4.0.1 → 4.2.0

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

@@ -1,8 +1,10 @@
-import type { Ref, WatchOptions } from 'vue';
+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 { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/table';
+import type { TableHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -39,7 +41,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     onStateChange?: CoreOptions<T>['onStateChange'];
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
-export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -49,6 +51,23 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     columns?: TableColumn<T>[];
     caption?: string;
     meta?: TableMeta<T>;
+    /**
+     * Enable virtualization for large datasets.
+     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @defaultValue false
+     */
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 65
+         */
+        estimateSize?: number | ((index: number) => number);
+    });
     /**
      * The text to display when the table is empty.
      * @defaultValue t('table.noData')
@@ -56,6 +75,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
+     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';
@@ -136,7 +156,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
      */
     facetedOptions?: FacetedOptions<T>;
-    onSelect?: (row: TableRow<T>, e?: Event) => void;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
     onHover?: (e: Event, row: TableRow<T> | null) => void;
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
     class?: any;
@@ -186,7 +206,8 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/Table.vue

@@ -3,20 +3,24 @@ import theme from "#build/ui/table";
 </script>
 
 <script setup>
-import { computed, ref, watch } from "vue";
+import { ref, computed, useTemplateRef, watch, toRef } from "vue";
 import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
+import { defu } from "defu";
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
-import { reactiveOmit } from "@vueuse/core";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   data: { type: Array, required: false },
   columns: { type: Array, required: false },
   caption: { type: String, required: false },
   meta: { type: Object, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
   empty: { type: String, required: false },
   sticky: { type: [Boolean, String], required: false },
   loading: { type: Boolean, required: false },
@@ -84,11 +88,25 @@ function processColumns(columns2) {
   });
 }
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
-  sticky: props.sticky,
+  sticky: props.virtualize ? false : props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
-  loadingAnimation: props.loadingAnimation
+  loadingAnimation: props.loadingAnimation,
+  virtualize: !!props.virtualize
 }));
+const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
+const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+    style: {
+      type: Object,
+      required: false
+    }
+  }
+});
 const hasFooter = computed(() => {
   function hasFooterRecursive(columns2) {
     for (const column of columns2) {
@@ -116,9 +134,10 @@ 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 tableRef = ref(null);
+const rootRef = useTemplateRef("rootRef");
+const tableRef = useTemplateRef("tableRef");
 const tableApi = useVueTable({
-  ...reactiveOmit(props, "as", "data", "columns", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
+  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
   data,
   get columns() {
     return columns.value;
@@ -195,6 +214,32 @@ const tableApi = useVueTable({
     }
   }
 });
+const rows = computed(() => tableApi.getRowModel().rows);
+const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: 65,
+  overscan: 12
+}));
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get count() {
+    return rows.value.length;
+  },
+  getScrollElement: () => rootRef.value?.$el,
+  estimateSize: (index) => {
+    const estimate = virtualizerProps.value.estimateSize;
+    return typeof estimate === "function" ? estimate(index) : estimate;
+  }
+});
+const renderedSize = computed(() => {
+  if (!virtualizer) {
+    return 0;
+  }
+  const virtualItems = virtualizer.value.getVirtualItems();
+  if (!virtualItems?.length) {
+    return 0;
+  }
+  return virtualItems.reduce((sum, item) => sum + item.size, 0);
+});
 function valueUpdater(updaterOrValue, ref2) {
   ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
 }
@@ -209,7 +254,7 @@ function onRowSelect(e, row) {
   }
   e.preventDefault();
   e.stopPropagation();
-  props.onSelect(row, e);
+  props.onSelect(e, row);
 }
 function onRowHover(e, row) {
   if (!props.onHover) {
@@ -233,30 +278,78 @@ function resolveValue(prop, arg) {
   }
   return prop;
 }
-watch(
-  () => props.data,
-  () => {
-    data.value = props.data ? [...props.data] : [];
-  },
-  props.watchOptions
-);
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : [];
+}, props.watchOptions);
 defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  },
   tableRef,
   tableApi
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
-      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+  <DefineRowTemplate v-slot="{ row, style }">
+    <tr
+      :data-selected="row.getIsSelected()"
+      :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
+      :data-expanded="row.getIsExpanded()"
+      :role="props.onSelect ? 'button' : void 0"
+      :tabindex="props.onSelect ? 0 : void 0"
+      data-slot="tr"
+      :class="ui.tr({
+  class: [
+    props.ui?.tr,
+    resolveValue(tableApi.options.meta?.class?.tr, row)
+  ]
+})"
+      :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
+      @click="onRowSelect($event, row)"
+      @pointerenter="onRowHover($event, row)"
+      @pointerleave="onRowHover($event, null)"
+      @contextmenu="onRowContextmenu($event, row)"
+    >
+      <td
+        v-for="cell in row.getVisibleCells()"
+        :key="cell.id"
+        :data-pinned="cell.column.getIsPinned()"
+        :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
+        :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
+        data-slot="td"
+        :class="ui.td({
+  class: [
+    props.ui?.td,
+    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
+  ],
+  pinned: !!cell.column.getIsPinned()
+})"
+        :style="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()" />
+        </slot>
+      </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] })">
+        <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] })">
         <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] })">
+      <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] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -264,6 +357,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-slot="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -271,6 +365,7 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
+            :style="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()" />
@@ -278,68 +373,38 @@ defineExpose({
           </th>
         </tr>
 
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
-      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
         <slot name="body-top" />
 
-        <template v-if="tableApi.getRowModel().rows?.length">
-          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
-            <tr
-              :data-selected="row.getIsSelected()"
-              :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
-              :data-expanded="row.getIsExpanded()"
-              :role="props.onSelect ? 'button' : void 0"
-              :tabindex="props.onSelect ? 0 : void 0"
-              :class="ui.tr({
-  class: [
-    props.ui?.tr,
-    resolveValue(tableApi.options.meta?.class?.tr, row)
-  ]
-})"
-              :style="resolveValue(tableApi.options.meta?.style?.tr, row)"
-              @click="onRowSelect($event, row)"
-              @pointerenter="onRowHover($event, row)"
-              @pointerleave="onRowHover($event, null)"
-              @contextmenu="onRowContextmenu($event, row)"
-            >
-              <td
-                v-for="cell in row.getVisibleCells()"
-                :key="cell.id"
-                :data-pinned="cell.column.getIsPinned()"
-                :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
-                :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
-                :class="ui.td({
-  class: [
-    props.ui?.td,
-    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
-  ],
-  pinned: !!cell.column.getIsPinned()
-})"
-                :style="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()" />
-                </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 v-if="rows.length">
+          <template v-if="virtualizer">
+            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="rows[virtualRow.index]?.id">
+              <ReuseRowTemplate
+                :row="rows[virtualRow.index]"
+                :style="{
+  height: `${virtualRow.size}px`,
+  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
+}"
+              />
+            </template>
+          </template>
+
+          <template v-else>
+            <ReuseRowTemplate v-for="row in rows" :key="row.id" :row="row" />
           </template>
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>
@@ -349,16 +414,24 @@ defineExpose({
         <slot name="body-bottom" />
       </tbody>
 
-      <tfoot v-if="hasFooter" :class="ui.tfoot({ class: [props.ui?.tfoot] })">
-        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+      <tfoot
+        v-if="hasFooter"
+        data-slot="tfoot"
+        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
+        :style="virtualizer ? {
+  transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
+} : void 0"
+      >
+        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            data-slot="th"
             :class="ui.th({
   class: [
     props.ui?.th,
@@ -375,5 +448,17 @@ defineExpose({
         </tr>
       </tfoot>
     </table>
+  </DefineTableTemplate>
+
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div
+      v-if="virtualizer"
+      :style="{
+  height: `${virtualizer.getTotalSize()}px`
+}"
+    >
+      <ReuseTableTemplate />
+    </div>
+    <ReuseTableTemplate v-else />
   </Primitive>
 </template>

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

@@ -1,8 +1,10 @@
-import type { Ref, WatchOptions } from 'vue';
+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 { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/table';
+import type { TableHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -39,7 +41,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     onStateChange?: CoreOptions<T>['onStateChange'];
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
-export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -49,6 +51,23 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     columns?: TableColumn<T>[];
     caption?: string;
     meta?: TableMeta<T>;
+    /**
+     * Enable virtualization for large datasets.
+     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @defaultValue false
+     */
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 65
+         */
+        estimateSize?: number | ((index: number) => number);
+    });
     /**
      * The text to display when the table is empty.
      * @defaultValue t('table.noData')
@@ -56,6 +75,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
+     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';
@@ -136,7 +156,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
      */
     facetedOptions?: FacetedOptions<T>;
-    onSelect?: (row: TableRow<T>, e?: Event) => void;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
     onHover?: (e: Event, row: TableRow<T> | null) => void;
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
     class?: any;
@@ -186,7 +206,8 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;
     attrs: any;

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

@@ -69,16 +69,21 @@ export interface TabsEmits extends TabsRootEmits<string | number> {
 type SlotProps<T extends TabsItem> = (props: {
     item: T;
     index: number;
+    ui: Tabs['ui'];
 }) => any;
 export type TabsSlots<T extends TabsItem = TabsItem> = {
     'leading': SlotProps<T>;
-    'default': SlotProps<T>;
+    'default'(props: {
+        item: T;
+        index: number;
+    }): any;
     'trailing': SlotProps<T>;
     'content': SlotProps<T>;
-    'list-leading': (props?: {}) => any;
-    'list-trailing': (props?: {}) => any;
+    'list-leading'(props?: {}): any;
+    'list-trailing'(props?: {}): any;
 } & DynamicSlots<T, undefined, {
     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> & {

package/dist/runtime/components/Tabs.vue

@@ -51,10 +51,11 @@ defineExpose({
     :default-value="defaultValue"
     :orientation="orientation"
     :activation-mode="activationMode"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
-    <TabsList :class="ui.list({ class: props.ui?.list })">
-      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+    <TabsList data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" />
 
       <slot name="list-leading" />
 
@@ -64,24 +65,26 @@ defineExpose({
         :ref="(el) => triggersRef[index] = el"
         :value="item.value ?? String(index)"
         :disabled="item.disabled"
+        data-slot="trigger"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
-        <slot name="leading" :item="item" :index="index">
-          <UIcon v-if="item.icon" :name="item.icon" :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" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+        <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] })" />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || !!slots.default" :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: [props.ui?.label, item.ui?.label] })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index">
+        <slot name="trailing" :item="item" :index="index" :ui="ui">
           <UBadge
-            v-if="item.badge !== void 0"
+            v-if="item.badge || item.badge === 0"
             color="neutral"
             variant="outline"
             :size="item.ui?.trailingBadgeSize || props.ui?.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] })"
           />
         </slot>
@@ -91,8 +94,8 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value ?? String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
+      <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] })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
       </TabsContent>

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

@@ -69,16 +69,21 @@ export interface TabsEmits extends TabsRootEmits<string | number> {
 type SlotProps<T extends TabsItem> = (props: {
     item: T;
     index: number;
+    ui: Tabs['ui'];
 }) => any;
 export type TabsSlots<T extends TabsItem = TabsItem> = {
     'leading': SlotProps<T>;
-    'default': SlotProps<T>;
+    'default'(props: {
+        item: T;
+        index: number;
+    }): any;
     'trailing': SlotProps<T>;
     'content': SlotProps<T>;
-    'list-leading': (props?: {}) => any;
-    'list-trailing': (props?: {}) => any;
+    'list-leading'(props?: {}): any;
+    'list-trailing'(props?: {}): any;
 } & DynamicSlots<T, undefined, {
     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> & {

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

@@ -1,11 +1,12 @@
 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 { 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 {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +40,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Textarea['slots'];
 }
@@ -49,22 +50,28 @@ export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
     'change': [event: Event];
 }
 export interface TextareaSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Textarea['ui'];
+    }): any;
+    default(props: {
+        ui: Textarea['ui'];
+    }): any;
+    trailing(props: {
+        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> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+        textareaRef: Readonly<import("vue").ShallowRef<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: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };