@nuxt/ui 4.0.1 → 4.1.0

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 },
@@ -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 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;
@@ -195,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;
 }
@@ -209,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) {
@@ -233,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">
@@ -284,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>
 
@@ -349,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] })">
@@ -375,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;
@@ -186,6 +205,7 @@ 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<{
+        readonly $el: any;
         tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;

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

@@ -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,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

@@ -49,9 +49,15 @@ 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> & {

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,9 +49,15 @@ 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> & {

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

@@ -58,14 +58,14 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
 export interface ToastEmits extends ToastRootEmits {
 }
 export interface ToastSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Toast['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Toast['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {

package/dist/runtime/components/Toast.vue

@@ -66,7 +66,7 @@ defineExpose({
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--height': height }"
   >
-    <slot name="leading">
+    <slot name="leading" :ui="ui">
       <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>

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

@@ -58,14 +58,14 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
 export interface ToastEmits extends ToastRootEmits {
 }
 export interface ToastSlots {
-    leading(props?: {}): any;
+    leading(props: {
+        ui: Toast['ui'];
+    }): any;
     title(props?: {}): any;
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        ui: {
-            [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Toast['ui'];
     }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToastProps, {

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

@@ -24,6 +24,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Maximum number of toasts to display at once.
+     * @defaultValue 5
+     */
+    max?: number;
     class?: any;
     ui?: Toaster['slots'];
 }
@@ -34,6 +39,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Toaste
     progress: boolean;
     expand: boolean;
     duration: number;
+    max: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Toaster.vue

@@ -6,11 +6,11 @@ export default {
 </script>
 
 <script setup>
-import { ref, computed, toRef } from "vue";
+import { ref, computed, toRef, provide } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useToast } from "../composables/useToast";
+import { useToast, toastMaxInjectionKey } from "../composables/useToast";
 import { usePortal } from "../composables/usePortal";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,16 +20,19 @@ const props = defineProps({
   expand: { type: Boolean, required: false, default: true },
   progress: { type: Boolean, required: false, default: true },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  max: { type: Number, required: false, default: 5 },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   label: { type: String, required: false },
   duration: { type: Number, required: false, default: 5e3 },
+  disableSwipe: { type: Boolean, required: false },
   swipeThreshold: { type: Number, required: false }
 });
 defineSlots();
 const { toasts, remove } = useToast();
 const appConfig = useAppConfig();
-const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
+provide(toastMaxInjectionKey, toRef(() => props.max));
+const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold", "disableSwipe"));
 const portalProps = usePortal(toRef(() => props.portal));
 const swipeDirection = computed(() => {
   switch (props.position) {

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

@@ -24,6 +24,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Maximum number of toasts to display at once.
+     * @defaultValue 5
+     */
+    max?: number;
     class?: any;
     ui?: Toaster['slots'];
 }
@@ -34,6 +39,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Toaste
     progress: boolean;
     expand: boolean;
     duration: number;
+    max: number;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

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

@@ -40,7 +40,9 @@ export interface TooltipSlots {
     default(props: {
         open: boolean;
     }): any;
-    content(props?: {}): any;
+    content(props: {
+        ui: Tooltip['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/runtime/components/Tooltip.vue

@@ -48,7 +48,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
 
     <TooltipPortal v-bind="portalProps">
       <TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
-        <slot name="content">
+        <slot name="content" :ui="ui">
           <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 
           <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">

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

@@ -40,7 +40,9 @@ export interface TooltipSlots {
     default(props: {
         open: boolean;
     }): any;
-    content(props?: {}): any;
+    content(props: {
+        ui: Tooltip['ui'];
+    }): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;