@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

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 { computed, ref, 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 },
@@ -63,14 +67,46 @@ const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const data = ref(props.data ?? []);
-const columns = computed(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })));
 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) {
+  return columns2.map((column) => {
+    const col = { ...column };
+    if ("columns" in col && col.columns) {
+      col.columns = processColumns(col.columns);
+    }
+    if (!col.cell) {
+      col.cell = ({ getValue }) => {
+        const value = getValue();
+        if (value === "" || value === null || value === void 0) {
+          return "\xA0";
+        }
+        return String(value);
+      };
+    }
+    return col;
+  });
+}
 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) {
@@ -98,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 rootRef = ref();
 const tableRef = ref(null);
 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;
@@ -177,6 +214,19 @@ 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: () => virtualizerProps.value.estimateSize
+});
 function valueUpdater(updaterOrValue, ref2) {
   ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
 }
@@ -191,7 +241,7 @@ function onRowSelect(e, row) {
   }
   e.preventDefault();
   e.stopPropagation();
-  props.onSelect(row, e);
+  props.onSelect(e, row);
 }
 function onRowHover(e, row) {
   if (!props.onHover) {
@@ -215,21 +265,67 @@ 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] })">
+  <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"
+      :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)"
+        :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>
+  </DefineRowTemplate>
+
+  <DefineTableTemplate>
     <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
       <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
@@ -266,51 +362,21 @@ defineExpose({
       <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>
 
@@ -331,7 +397,13 @@ defineExpose({
         <slot name="body-bottom" />
       </tbody>
 
-      <tfoot v-if="hasFooter" :class="ui.tfoot({ class: [props.ui?.tfoot] })">
+      <tfoot
+        v-if="hasFooter"
+        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
+        :style="virtualizer ? {
+  transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
+} : void 0"
+      >
         <tr :class="ui.separator({ class: [props.ui?.separator] })" />
 
         <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
@@ -357,5 +429,17 @@ defineExpose({
         </tr>
       </tfoot>
     </table>
+  </DefineTableTemplate>
+
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" :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

@@ -2,6 +2,7 @@ import type { Ref, 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 { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
@@ -49,6 +50,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
+         * @defaultValue 65
+         */
+        estimateSize?: number;
+    });
     /**
      * The text to display when the table is empty.
      * @defaultValue t('table.noData')
@@ -56,6 +74,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 +155,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;
@@ -155,22 +174,8 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-top': (props?: {}) => any;
     'body-bottom': (props?: {}) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        readonly "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        readonly "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        readonly "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        readonly "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        readonly "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        readonly "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        readonly "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        readonly "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        readonly "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        readonly "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        readonly "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        readonly "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:globalFilter" | "onUpdate:columnFilters" | "onUpdate:columnOrder" | "onUpdate:columnVisibility" | "onUpdate:columnPinning" | "onUpdate:columnSizing" | "onUpdate:columnSizingInfo" | "onUpdate:rowSelection" | "onUpdate:rowPinning" | "onUpdate:sorting" | "onUpdate:grouping" | "onUpdate:expanded" | "onUpdate:pagination"> & (TableProps<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> & {
         globalFilter?: string;
         columnFilters?: ColumnFiltersState;
         columnOrder?: ColumnOrderState;
@@ -184,17 +189,19 @@ declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<t
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((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)>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
         tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;
-    }>): void;
+    }>) => 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);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -69,30 +69,34 @@ 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 _default: <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<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+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;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: TabsSlots<T>;
     emit: (evt: "update:modelValue", payload: string | number) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/Tabs.vue

@@ -66,7 +66,7 @@ defineExpose({
         :disabled="item.disabled"
         :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
       >
-        <slot name="leading" :item="item" :index="index">
+        <slot name="leading" :item="item" :index="index" :ui="ui">
           <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>
@@ -75,7 +75,7 @@ defineExpose({
           <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"
             color="neutral"
@@ -92,7 +92,7 @@ defineExpose({
 
     <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">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
       </TabsContent>

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

@@ -69,30 +69,34 @@ 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 _default: <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<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+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;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: TabsSlots<T>;
     emit: (evt: "update:modelValue", payload: string | number) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -49,25 +49,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 _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & TextareaProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+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;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: TextareaSlots;
     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> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/Textarea.vue

@@ -157,17 +157,17 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <slot />
+    <slot :ui="ui" />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>

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

@@ -49,25 +49,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 _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & TextareaProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+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;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: TextareaSlots;
     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> = {
     [K in keyof T as K]: T[K];

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

@@ -52,19 +52,18 @@ export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
 } & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
     item: T;
 }>;
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (TimelineProps<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> & {
         modelValue?: string | number;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | number | undefined) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: TimelineSlots<T>;
     emit: (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> = {
     [K in keyof T as K]: T[K];