@nuxt/ui 4.6.1 → 4.7.1

package/dist/runtime/components/InputNumber.vue

@@ -57,9 +57,9 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputNumber", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
-const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber || {} })({
   color: color.value,
   variant: props.variant,

package/dist/runtime/components/InputTags.vue

@@ -57,10 +57,10 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputTags", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags || {} })({
   color: color.value,
   variant: props.variant,

package/dist/runtime/components/InputTime.vue

@@ -60,10 +60,10 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputTime", props);
 const rootProps = useForwardPropsEmits(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTime || {} })({
   color: color.value,
   variant: props.variant,

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

@@ -76,13 +76,22 @@ export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<Button
     custom?: boolean;
     /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
     raw?: boolean;
+    /**
+     * Control i18n auto-localization when `@nuxtjs/i18n` is installed.
+     * - `undefined` / `true` (default): auto-localizes to the current locale using `$localePath`.
+     *   Paths already carrying a locale prefix (from e.g. `switchLocalePath()`) are detected
+     *   and left untouched to prevent double-prefixing.
+     * - `false`: explicitly disables auto-localization.
+     * - `string`: localizes to a specific locale (e.g. `'fr'`).
+     */
+    locale?: boolean | string;
     class?: any;
 }
 /**
  * Link-related props that can be omitted from ButtonProps when link functionality is not needed.
  * Use this with `Omit<ButtonProps, LinkPropsKeys>` in components where buttons should not act as links.
  */
-export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
+export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'locale' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
     default?(props: {
         active: boolean;

package/dist/runtime/components/Link.vue

@@ -5,10 +5,11 @@ import theme from "#build/ui/link";
 <script setup>
 import { computed } from "vue";
 import { isEqual } from "ohash/utils";
-import { useForwardProps } from "reka-ui";
+import { useForwardProps, Slot } from "reka-ui";
 import { defu } from "defu";
+import { hasProtocol } from "ufo";
 import { reactiveOmit } from "@vueuse/core";
-import { useRoute, useAppConfig } from "#imports";
+import { useRoute, useAppConfig, useNuxtApp } from "#imports";
 import { mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { isPartiallyEqual } from "../utils/link";
@@ -25,6 +26,7 @@ const props = defineProps({
   inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   raw: { type: Boolean, required: false },
+  locale: { type: [Boolean, String], required: false },
   class: { type: null, required: false },
   to: { type: null, required: false },
   href: { type: null, required: false },
@@ -46,7 +48,8 @@ const props = defineProps({
 defineSlots();
 const route = useRoute();
 const appConfig = useAppConfig();
-const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const nuxtApp = useNuxtApp();
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "locale", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -58,11 +61,47 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-const to = computed(() => props.to ?? props.href);
-function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+const to = computed(() => {
+  const path = props.to ?? props.href;
+  if (!path) return path;
+  if (typeof path !== "string") return path;
+  if (props.external || hasProtocol(path, { acceptRelative: true })) {
+    return path;
+  }
+  if (props.locale === false) {
+    return path;
+  }
+  const localePath = nuxtApp.$localePath;
+  if (!localePath) {
+    return path;
+  }
+  const i18n = nuxtApp.$i18n;
+  const codes = i18n?.localeCodes?.value;
+  if (codes?.length && new RegExp(`^/(${codes.join("|")})($|[/?#])`).test(path)) {
+    return path;
+  }
+  return localePath(path, typeof props.locale === "string" ? props.locale : void 0);
+});
+const isInternalLink = computed(() => {
+  if (!to.value) return false;
+  if (props.external) return false;
+  if (typeof to.value !== "string") return true;
+  if (hasProtocol(to.value, { acceptRelative: true })) return false;
+  if (props.target && props.target !== "_self") return false;
+  return true;
+});
+const externalRel = computed(() => {
+  if (props.noRel) return null;
+  if (props.rel) return props.rel;
+  return "noopener noreferrer";
+});
+function isLinkActive({ route: linkRoute, isActive, isExactActive } = {}) {
   if (props.active !== void 0) {
     return props.active;
   }
+  if (!to.value) {
+    return false;
+  }
   if (props.exactQuery === "partial") {
     if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
   } else if (props.exactQuery === true) {
@@ -79,7 +118,7 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   }
   return false;
 }
-function resolveLinkClass({ route: route2, isActive, isExactActive }) {
+function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   const active = isLinkActive({ route: route2, isActive, isExactActive });
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass];
@@ -89,8 +128,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
-    <template v-if="custom">
+  <NuxtLink v-if="isInternalLink" v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
+    <Slot v-if="custom">
       <slot
         v-bind="{
   ...$attrs,
@@ -106,7 +145,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
 }"
       />
-    </template>
+    </Slot>
     <ULinkBase
       v-else
       v-bind="{
@@ -126,4 +165,30 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
   </NuxtLink>
+
+  <Slot v-else-if="custom">
+    <slot
+      v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {},
+  active: active ?? false
+}"
+    />
+  </Slot>
+  <ULinkBase
+    v-else
+    v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {}
+}"
+    :class="resolveLinkClass()"
+  >
+    <slot :active="active ?? false" />
+  </ULinkBase>
 </template>

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

@@ -76,13 +76,22 @@ export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<Button
     custom?: boolean;
     /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
     raw?: boolean;
+    /**
+     * Control i18n auto-localization when `@nuxtjs/i18n` is installed.
+     * - `undefined` / `true` (default): auto-localizes to the current locale using `$localePath`.
+     *   Paths already carrying a locale prefix (from e.g. `switchLocalePath()`) are detected
+     *   and left untouched to prevent double-prefixing.
+     * - `false`: explicitly disables auto-localization.
+     * - `string`: localizes to a specific locale (e.g. `'fr'`).
+     */
+    locale?: boolean | string;
     class?: any;
 }
 /**
  * Link-related props that can be omitted from ButtonProps when link functionality is not needed.
  * Use this with `Omit<ButtonProps, LinkPropsKeys>` in components where buttons should not act as links.
  */
-export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
+export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'locale' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
     default?(props: {
         active: boolean;

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

@@ -0,0 +1,228 @@
+import type { VNode } from 'vue';
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/listbox';
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
+import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Listbox = ComponentConfig<typeof theme, AppConfig, 'listbox'>;
+export interface ListboxItem {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    chip?: ChipProps;
+    /**
+     * The item type.
+     * @defaultValue 'item'
+     */
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?: (e: Event) => void;
+    class?: any;
+    ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    [key: string]: any;
+}
+export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {
+    id?: string;
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Listbox['variants']['size'];
+    /**
+     * The items to display in the list.
+     */
+    items?: T;
+    /**
+     * The controlled value of the Listbox. Can be bound with `v-model`.
+     */
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    modelModifiers?: Mod;
+    /**
+     * The default value when not controlled.
+     */
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    /**
+     * Whether multiple items can be selected.
+     * @defaultValue false
+     */
+    multiple?: M & boolean;
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether the list is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * The icon displayed when loading.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Whether to display a filter input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    /**
+     * The fields to filter by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
+    /**
+     * The icon displayed when an item is selected.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    selectedIcon?: IconProps['name'];
+    /**
+     * Enable virtualization for large lists.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 32
+         */
+        estimateSize?: number | ((index: number) => number);
+    };
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    class?: any;
+    ui?: Listbox['slots'];
+}
+export type ListboxEmits<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> = Pick<ListboxRootEmits, 'entryFocus' | 'highlight' | 'leave'> & {
+    'change': [event: Event];
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<T, VK, M>, Mod>];
+};
+type SlotProps<T> = (props: {
+    item: T;
+    index: number;
+    ui: Listbox['ui'];
+}) => VNode[];
+export type ListboxSlots<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>> = {
+    'loading'?(props?: {}): VNode[];
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'item'?: SlotProps<NestedItem<T>>;
+    'item-leading'?: SlotProps<NestedItem<T>>;
+    'item-label'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-description'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-trailing'?: SlotProps<NestedItem<T>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">>(__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<(ListboxProps<T, VK, M, Mod> & {
+        searchTerm?: string;
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ListboxSlots<T>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};