@nuxt/ui 4.9.0 → 4.10.0

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
@@ -27,7 +27,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     block?: boolean;
     /** Set loading state automatically based on the `@click` promise state */
     loadingAuto?: boolean;
-    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((event: MouseEvent) => void) | Array<((event: MouseEvent) => void)>;
     class?: any;
     ui?: Button['slots'];
 }

package/dist/runtime/components/Button.vue

@@ -88,7 +88,7 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
   computed(() => ({ ...props, loading: isLoading.value }))
 );
 const ui = computed(() => tv({
-  extend: tv(theme),
+  extend: theme,
   ...defu({
     variants: {
       active: {
@@ -123,8 +123,8 @@ const ui = computed(() => tv({
     custom
   >
     <ULinkBase
-      v-bind="slotProps"
       data-slot="base"
+      v-bind="slotProps"
       :class="ui.base({
   class: [props.ui?.base, props.class],
   active,

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { LinkProps } from '../types';
+import type { LinkProps } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
@@ -27,7 +27,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
     block?: boolean;
     /** Set loading state automatically based on the `@click` promise state */
     loadingAuto?: boolean;
-    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    onClick?: ((event: MouseEvent) => void) | Array<((event: MouseEvent) => void)>;
     class?: any;
     ui?: Button['slots'];
 }

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

@@ -3,7 +3,9 @@ import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/calendar';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
 export type CalendarType = 'date' | 'month' | 'year';
@@ -150,7 +152,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     slots: CalendarSlots;
     emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", date: DateValue) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Calendar.vue

@@ -166,7 +166,7 @@ const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ?
 const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
 const prevLabel = computed(() => view.value === "day" ? t("calendar.prevMonth") : t("calendar.prevYear"));
 const nextLabel = computed(() => view.value === "day" ? t("calendar.nextMonth") : t("calendar.nextYear"));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.calendar || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.calendar || {} })({
   color: props.color,
   size: props.size,
   variant: props.variant,

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

@@ -3,7 +3,9 @@ import type { VNode } from 'vue';
 import type { DateValue } from '@internationalized/date';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/calendar';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>;
 export type CalendarType = 'date' | 'month' | 'year';
@@ -150,7 +152,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     slots: CalendarSlots;
     emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", date: DateValue) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Card.vue

@@ -19,7 +19,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("card", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.card || {} })({
   variant: props.variant
 }));
 </script>

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

@@ -8,7 +8,9 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
@@ -124,7 +126,7 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
     slots: CarouselSlots<T>;
     emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Carousel.vue

@@ -68,7 +68,7 @@ const stopAutoScrollOnInteraction = computed(() => {
   }
   return props.autoScroll?.stopOnInteraction ?? true;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.carousel || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.carousel || {} })({
   orientation: props.orientation
 }));
 const options = computed(() => ({
@@ -106,10 +106,7 @@ async function loadPlugins() {
   }
   plugins.value = emblaPlugins;
 }
-watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], async () => {
-  await loadPlugins();
-  emblaApi.value?.reInit(options.value, plugins.value);
-}, { immediate: true });
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true });
 const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
 watch(options, () => {
   emblaApi.value?.reInit(options.value, plugins.value);

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

@@ -8,7 +8,9 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
@@ -124,7 +126,7 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
     slots: CarouselSlots<T>;
     emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
@@ -34,7 +36,7 @@ export interface ChangelogVersionProps {
     indicator?: boolean;
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: ChangelogVersion['slots'];
 }

package/dist/runtime/components/ChangelogVersion.vue

@@ -47,7 +47,7 @@ const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersion || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.changelogVersion || {} })({
   to: !!props.to || !!props.onClick
 }));
 const date = computed(() => {
@@ -55,7 +55,7 @@ const date = computed(() => {
     return;
   }
   try {
-    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+    return formatter.custom(new Date(props.date), { dateStyle: "medium", timeZone: "UTC" });
   } catch {
     return props.date;
   }
@@ -81,7 +81,7 @@ const ariaLabel = computed(() => {
     <ULink
       v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
       :class="prefix('focus:outline-none peer')"
       raw
     >
@@ -97,7 +97,7 @@ const ariaLabel = computed(() => {
     </time>
   </DefineDateTemplate>
 
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+  <Primitive :as="props.as" v-bind="!props.to ? $attrs : {}" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
     <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
@@ -34,7 +36,7 @@ export interface ChangelogVersionProps {
     indicator?: boolean;
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: ChangelogVersion['slots'];
 }

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
-import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types';
+import type { ChangelogVersionProps, ChangelogVersionSlots } from './ChangelogVersion.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
 export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends ChangelogVersionProps>(__VLS_props: NonNu
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChangelogVersions.vue

@@ -29,7 +29,7 @@ const scrollOptions = computed(() => typeof props.indicator === "object" ? props
 const { scrollYProgress } = useScroll(scrollOptions.value);
 const y = useSpring(scrollYProgress, springOptions);
 const height = useTransform(() => `${Number(y.get()) * 100}%`);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersions || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.changelogVersions || {} })());
 </script>
 
 <template>

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
-import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types';
+import type { ChangelogVersionProps, ChangelogVersionSlots } from './ChangelogVersion.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
 export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends ChangelogVersionProps>(__VLS_props: NonNu
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
-import type { AvatarProps, ButtonProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
 export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
@@ -80,7 +82,7 @@ declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools e
     slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatMessage.vue

@@ -36,7 +36,7 @@ const appConfig = useAppConfig();
 const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
 const textParts = computed(() => props.parts?.filter((part) => part.type === "text") ?? []);
 const messageProps = computed(() => omit(props, ["as", "icon", "avatar", "variant", "color", "side", "actions", "compact", "class", "ui", "content"]));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   color: props.color,
   side: props.side,

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
-import type { AvatarProps, ButtonProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
 export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
@@ -80,7 +82,7 @@ declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools e
     slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,10 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -85,7 +88,7 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatMessages.vue

@@ -30,16 +30,16 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatMessages", _props);
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
-const showIndicator = computed(() => {
+function showIndicator() {
   if (props.status === "submitted") return true;
   if (props.status !== "streaming") return false;
   const lastMessage = props.messages?.[props.messages.length - 1];
   return lastMessage?.role === "assistant" && !lastMessage.parts?.length;
-});
+}
 const appConfig = useAppConfig();
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "naked" }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatMessages || {} })({
   compact: props.compact
 }));
 const el = ref(null);
@@ -212,7 +212,7 @@ defineExpose({
     </slot>
 
     <UChatMessage
-      v-if="showIndicator"
+      v-if="showIndicator()"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

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

@@ -2,7 +2,10 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -85,7 +88,7 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatPalette.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatPalette", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPalette || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPrompt.vue

@@ -18,6 +18,7 @@ defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
+  color: { type: null, required: false },
   variant: { type: null, required: false },
   submitOnEnter: { type: Boolean, required: false, default: true },
   error: { type: Error, required: false },
@@ -42,8 +43,9 @@ const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading", "loadingIcon"));
-const getProxySlots = () => omit(slots, ["header", "footer"]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+const getProxySlots = () => omit(slots, ["header", "footer", "body"]);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPrompt || {} })({
+  color: props.color,
   variant: props.variant
 }));
 const textareaRef = useTemplateRef("textareaRef");
@@ -51,11 +53,11 @@ function submit(e) {
   if (model.value.trim() === "") {
     return;
   }
-  emits("submit", e);
+  emits("submit", e ?? new Event("submit"));
 }
 function blur(e) {
   textareaRef.value?.textareaRef?.blur();
-  emits("close", e);
+  emits("close", e ?? new Event("close"));
 }
 const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
   submit(event);
@@ -81,29 +83,38 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
     <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
-    <UTextarea
-      ref="textareaRef"
-      v-model="model"
+    <slot
+      name="body"
+      :submit="submit"
+      :close="blur"
       :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
       :disabled="Boolean(props.error) || props.disabled"
-      variant="none"
-      fixed
-      v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
-      data-slot="body"
-      :class="ui.body({ class: props.ui?.body })"
-      @keydown="onKeydown"
-      @compositionend="onCompositionEnd"
+      :ui="ui"
     >
-      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </UTextarea>
+      <UTextarea
+        ref="textareaRef"
+        v-model="model"
+        :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
+        :disabled="Boolean(props.error) || props.disabled"
+        variant="none"
+        fixed
+        v-bind="{ ...textareaProps, ...$attrs }"
+        :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+        data-slot="body"
+        :class="ui.body({ class: props.ui?.body })"
+        @keydown="onKeydown"
+        @compositionend="onCompositionEnd"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </UTextarea>
+    </slot>
 
     <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,7 +1,9 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ButtonSlots } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
@@ -87,11 +89,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {