@nuxt/ui 4.5.1 → 4.6.0

package/dist/module.d.mts

@@ -66,11 +66,18 @@ interface ModuleOptions {
     /**
      * Force the import of prose components even if `@nuxtjs/mdc` or `@nuxt/content` are not installed
      * @defaultValue false
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#prose
+     */
+    prose?: boolean;
+    /**
+     * @deprecated Use `prose` instead
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#mdc
      */
     mdc?: boolean;
     /**
      * Force the import of content & prose components even if `@nuxt/content` is not installed
      * @defaultValue false
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#content
      */
     content?: boolean;
     /**

package/dist/module.json

@@ -1,10 +1,10 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": ">=4.0.0"
+    "nuxt": ">=4.1.0"
   },
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.DI_ypO2T.mjs';
+import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
+import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, p as publicComposables, b as addTemplates } from './shared/ui.DJUbBpE2.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.5.1";
+const version = "4.6.0";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -20,10 +20,76 @@ const module$1 = defineNuxtModule({
     docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=4.0.0"
+      nuxt: ">=4.1.0"
     }
   },
   defaults: defaultOptions,
+  moduleDependencies(nuxt) {
+    const userUiOptions = nuxt.options.ui || {};
+    return {
+      "@nuxt/icon": {
+        defaults: {
+          cssLayer: "base"
+        }
+      },
+      ...userUiOptions.fonts !== false && {
+        "@nuxt/fonts": {
+          defaults: {
+            defaults: {
+              weights: [400, 500, 600, 700]
+            }
+          }
+        }
+      },
+      ...userUiOptions.colorMode !== false && {
+        "@nuxtjs/color-mode": {
+          defaults: {
+            classSuffix: "",
+            disableTransition: true
+          }
+        }
+      },
+      "@nuxtjs/mdc": {
+        optional: !userUiOptions.mdc && !userUiOptions.content,
+        defaults: {
+          highlight: {
+            theme: {
+              light: "material-theme-lighter",
+              default: "material-theme",
+              dark: "material-theme-palenight"
+            }
+          },
+          components: {
+            map: {
+              "accordion": "ProseAccordion",
+              "accordion-item": "ProseAccordionItem",
+              "badge": "ProseBadge",
+              "callout": "ProseCallout",
+              "card": "ProseCard",
+              "card-group": "ProseCardGroup",
+              "caution": "ProseCaution",
+              "code-collapse": "ProseCodeCollapse",
+              "code-group": "ProseCodeGroup",
+              "code-icon": "ProseCodeIcon",
+              "code-preview": "ProseCodePreview",
+              "code-tree": "ProseCodeTree",
+              "collapsible": "ProseCollapsible",
+              "field": "ProseField",
+              "field-group": "ProseFieldGroup",
+              "icon": "ProseIcon",
+              "kbd": "ProseKbd",
+              "note": "ProseNote",
+              "steps": "ProseSteps",
+              "tabs": "ProseTabs",
+              "tabs-item": "ProseTabsItem",
+              "tip": "ProseTip",
+              "warning": "ProseWarning"
+            }
+          }
+        }
+      }
+    };
+  },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     options.theme = options.theme || {};
@@ -41,67 +107,8 @@ const module$1 = defineNuxtModule({
     if (nuxt.options.builder !== "@nuxt/vite-builder") {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name2, key, options2) {
-      if (!hasNuxtModule(name2)) {
-        await installModule(name2, defu(nuxt.options[key], options2));
-      } else {
-        nuxt.options[key] = defu(nuxt.options[key], options2);
-      }
-    }
-    await registerModule("@nuxt/icon", "icon", {
-      cssLayer: "base"
-    });
-    if (options.fonts) {
-      await registerModule("@nuxt/fonts", "fonts", {
-        defaults: {
-          weights: [400, 500, 600, 700]
-        }
-      });
-    }
-    if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", "colorMode", {
-        classSuffix: "",
-        disableTransition: true
-      });
-    }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {
-      nuxt.options.mdc = defu(nuxt.options.mdc, {
-        highlight: {
-          theme: {
-            light: "material-theme-lighter",
-            default: "material-theme",
-            dark: "material-theme-palenight"
-          }
-        },
-        components: {
-          map: {
-            "accordion": "ProseAccordion",
-            "accordion-item": "ProseAccordionItem",
-            "badge": "ProseBadge",
-            "callout": "ProseCallout",
-            "card": "ProseCard",
-            "card-group": "ProseCardGroup",
-            "caution": "ProseCaution",
-            "code-collapse": "ProseCodeCollapse",
-            "code-group": "ProseCodeGroup",
-            "code-icon": "ProseCodeIcon",
-            "code-preview": "ProseCodePreview",
-            "code-tree": "ProseCodeTree",
-            "collapsible": "ProseCollapsible",
-            "field": "ProseField",
-            "field-group": "ProseFieldGroup",
-            "icon": "ProseIcon",
-            "kbd": "ProseKbd",
-            "note": "ProseNote",
-            "steps": "ProseSteps",
-            "tabs": "ProseTabs",
-            "tabs-item": "ProseTabsItem",
-            "tip": "ProseTip",
-            "warning": "ProseWarning"
-          }
-        }
-      });
+    if (options.prose || options.mdc || options.content || hasNuxtModule("@nuxtjs/mdc") || hasNuxtModule("@nuxt/content")) {
       addComponentsDir({
         path: resolve("./runtime/components/prose"),
         pathPrefix: false,
@@ -109,14 +116,14 @@ const module$1 = defineNuxtModule({
         global: true
       });
     }
-    if (hasNuxtModule("@nuxt/content") || options.content) {
+    if (options.content || hasNuxtModule("@nuxt/content")) {
       addComponentsDir({
         path: resolve("./runtime/components/content"),
         pathPrefix: false,
         prefix: options.prefix
       });
     }
-    if (hasNuxtModule("@nuxtjs/color-mode")) {
+    if (options.colorMode || hasNuxtModule("@nuxtjs/color-mode")) {
       addComponentsDir({
         path: resolve("./runtime/components/color-mode"),
         pathPrefix: false,
@@ -131,7 +138,11 @@ const module$1 = defineNuxtModule({
       prefix: options.prefix,
       ignore: ["color-mode/**", "content/**", "prose/**"]
     });
-    addImportsDir(resolve("./runtime/composables"));
+    addImports(
+      Object.entries(publicComposables).flatMap(
+        ([file, exports$1]) => exports$1.map((name2) => ({ name: name2, from: resolve(`./runtime/composables/${file}`) }))
+      )
+    );
     addTemplates(options, nuxt, resolve);
   }
 });

package/dist/runtime/components/Avatar.vue

@@ -39,17 +39,15 @@ const { size } = useAvatarGroup(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} })({
   size: size.value
 }));
-const sizePx = computed(() => ({
-  "3xs": 16,
-  "2xs": 20,
-  "xs": 24,
-  "sm": 28,
-  "md": 32,
-  "lg": 36,
-  "xl": 40,
-  "2xl": 44,
-  "3xl": 48
-})[props.size || "md"]);
+const rootClass = computed(() => ui.value.root({ class: [uiProp.value?.root, props.class] }));
+const sizePx = computed(() => {
+  const sizeClass = rootClass.value.split(" ").find((c) => /^size-\d+$/.test(c));
+  if (sizeClass) {
+    const num = Number.parseFloat(sizeClass.split("-")[1] ?? "");
+    if (!Number.isNaN(num)) return num * 4;
+  }
+  return null;
+});
 const error = ref(false);
 watch(() => props.src, () => {
   if (error.value) {
@@ -67,7 +65,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="rootClass"
     :style="props.style"
   >
     <component

package/dist/runtime/components/Banner.vue

@@ -101,7 +101,7 @@ function onClose() {
       tabindex="-1"
       raw
     >
-      <span class="absolute inset-0 " aria-hidden="true" />
+      <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
     <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">

package/dist/runtime/components/BlogPost.vue

@@ -5,9 +5,10 @@ import theme from "#build/ui/blog-post";
 <script setup>
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
-import { useLocale, useAppConfig } from "#imports";
-import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
 import { useComponentUI } from "../composables/useComponentUI";
+import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";

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

@@ -86,8 +86,8 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     class?: any;
     ui?: Calendar['slots'];
 }
-export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
-    'update:modelValue': [date: CalendarModelValue<R, M>];
+export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [value: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
@@ -102,7 +102,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarProps<R, M> & {
-        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
         "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
@@ -112,7 +112,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -86,8 +86,8 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     class?: any;
     ui?: Calendar['slots'];
 }
-export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
-    'update:modelValue': [date: CalendarModelValue<R, M>];
+export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [value: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
@@ -102,7 +102,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CalendarProps<R, M> & {
-        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
         "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
@@ -112,7 +112,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/ChangelogVersion.vue

@@ -6,9 +6,10 @@ import theme from "#build/ui/changelog-version";
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
-import { useLocale, useAppConfig } from "#imports";
-import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
 import { useComponentUI } from "../composables/useComponentUI";
+import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";

package/dist/runtime/components/ChangelogVersions.vue

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

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage } from 'ai';
+import type { UIMessage, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
@@ -53,6 +53,9 @@ export interface ChatMessageSlots {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
+    files?(props: {
+        parts: FileUIPart[];
+    }): VNode[];
     content?(props: ChatMessageProps): VNode[];
     actions?(props: {
         actions: ChatMessageProps['actions'];

package/dist/runtime/components/ChatMessage.vue

@@ -32,6 +32,7 @@ const props = defineProps({
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatMessage", props);
+const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -43,6 +44,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
 
 <template>
   <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.files" data-slot="files" :class="ui.files({ class: uiProp?.files })">
+      <slot name="files" :parts="fileParts" />
+    </div>
+
     <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
         <slot name="leading" :avatar="avatar" :ui="ui">

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage } from 'ai';
+import type { UIMessage, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
@@ -53,6 +53,9 @@ export interface ChatMessageSlots {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
+    files?(props: {
+        parts: FileUIPart[];
+    }): VNode[];
     content?(props: ChatMessageProps): VNode[];
     actions?(props: {
         actions: ChatMessageProps['actions'];

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

@@ -0,0 +1,78 @@
+import type { CollapsibleRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-reasoning';
+import type { IconProps } from '../types';
+import type { ChatShimmerProps } from './ChatShimmer.vue';
+import type { ComponentConfig } from '../types/tv';
+type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
+export interface ChatReasoningProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The reasoning text content to display.
+     */
+    text?: string;
+    /**
+     * Whether the reasoning content is currently streaming.
+     * @defaultValue false
+     */
+    streaming?: boolean;
+    /**
+     * The duration in seconds that the AI spent reasoning.
+     * If not provided, it will be calculated automatically based on streaming time.
+     */
+    duration?: number;
+    /**
+     * The icon displayed next to the trigger.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The position of the chevron icon.
+     * @defaultValue 'trailing'
+     */
+    chevron?: 'leading' | 'trailing';
+    /**
+     * The icon displayed as the chevron.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    chevronIcon?: IconProps['name'];
+    /**
+     * The delay in milliseconds before auto-closing when streaming ends.
+     * Set to `0` to disable auto-close.
+     * @defaultValue 500
+     */
+    autoCloseDelay?: number;
+    /**
+     * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
+     */
+    shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    class?: any;
+    ui?: ChatReasoning['slots'];
+}
+export interface ChatReasoningEmits {
+    'update:open': [value: boolean];
+}
+export interface ChatReasoningSlots {
+    default?(props: {
+        open: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatReasoningProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChatReasoningProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    streaming: boolean;
+    unmountOnHide: boolean;
+    chevron: "leading" | "trailing";
+    autoCloseDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};