@nuxt/ui 4.3.0 → 4.5.0

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

@@ -1,17 +1,22 @@
 export interface MainProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface MainSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -39,9 +39,13 @@ export interface MarqueeProps {
 export interface MarqueeSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    repeat: number;
+    orientation: Marquee["variants"]["orientation"];
+    overlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Marquee.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/marquee";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -15,10 +16,11 @@ const props = defineProps({
   repeat: { type: Number, required: false, default: 4 },
   overlay: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("marquee", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {} })({
   pauseOnHover: props.pauseOnHover,
   orientation: props.orientation,
@@ -28,8 +30,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {}
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [uiProp?.content] })">
       <slot />
     </div>
   </Primitive>

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

@@ -39,9 +39,13 @@ export interface MarqueeProps {
 export interface MarqueeSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    repeat: number;
+    orientation: Marquee["variants"]["orientation"];
+    overlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -83,6 +83,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -93,9 +95,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    transition: boolean;
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Modal.vue

@@ -7,8 +7,10 @@ import { computed, toRef } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
+import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
@@ -24,7 +26,7 @@ const props = defineProps({
   closeIcon: { type: null, required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
@@ -33,6 +35,7 @@ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "updat
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("modal", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
@@ -47,19 +50,9 @@ const contentEvents = computed(() => {
       return acc;
     }, {});
   }
-  if (props.scrollable) {
-    return {
-      // FIXME: This is a workaround to prevent the modal from closing when clicking on the scrollbar https://reka-ui.com/docs/components/dialog#scrollable-overlay but it's not working on Mac OS.
-      pointerDownOutside: (e) => {
-        const originalEvent = e.detail.originalEvent;
-        const target = originalEvent.target;
-        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-          e.preventDefault();
-        }
-      }
-    };
-  }
-  return {};
+  return {
+    pointerDownOutside: (e) => pointerDownOutside(e, { scrollable: props.scrollable })
+  };
 });
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} })({
@@ -75,7 +68,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
     <DefineContentTemplate>
       <DialogContent
         data-slot="content"
-        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
         v-bind="contentProps"
         @after-enter="emits('after:enter')"
         @after-leave="emits('after:leave')"
@@ -96,16 +89,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
             <slot name="header" :close="close">
-              <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+              <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
                   <slot name="title">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
                   <slot name="description">
                     {{ description }}
                   </slot>
@@ -124,18 +117,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
                     :aria-label="t('modal.close')"
                     v-bind="typeof props.close === 'object' ? props.close : {}"
                     data-slot="close"
-                    :class="ui.close({ class: props.ui?.close })"
+                    :class="ui.close({ class: uiProp?.close })"
                   />
                 </slot>
               </DialogClose>
             </slot>
           </div>
 
-          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+          <div v-if="!!slots.body" data-slot="body" :class="ui.body({ class: uiProp?.body })">
             <slot name="body" :close="close" />
           </div>
 
-          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
             <slot name="footer" :close="close" />
           </div>
         </slot>
@@ -148,13 +141,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
 
     <DialogPortal v-bind="portalProps">
       <template v-if="scrollable">
-        <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
+        <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })">
           <ReuseContentTemplate />
         </DialogOverlay>
       </template>
 
       <template v-else>
-        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
         <ReuseContentTemplate />
       </template>

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

@@ -83,6 +83,8 @@ export interface ModalSlots {
         close: () => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
@@ -93,9 +95,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalP
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    transition: boolean;
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ModalSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,7 +1,7 @@
 import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
+import type { AvatarProps, BadgeProps, ChipProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
@@ -23,8 +23,14 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     badge?: string | number | BadgeProps;
     /**
-     * Display a tooltip on the item when the menu is collapsed with the label of the item.
-     * This has priority over the global `tooltip` prop.
+     * Display a chip around the icon of the item.
+     * `{ inset: true }`{lang="ts-type"}
+     */
+    chip?: boolean | ChipProps;
+    /**
+     * Display a tooltip on the item with the label of the item.
+     * In `vertical` orientation, only works when the menu is `collapsed`.
+     * In `horizontal` orientation, works on any item.
      */
     tooltip?: boolean | TooltipProps;
     /**
@@ -46,7 +52,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     slot?: string;
     /**
      * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
-     * @defaultValue `item-${index}`
+     * @defaultValue `item-${index}`, `item-${level}-${index}` for nested children, or `group-${listIndex}-item-${index}` when using grouped items
      */
     value?: string;
     children?: NavigationMenuChildItem[];
@@ -54,11 +60,11 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     open?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
+    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
 type SingleOrMultipleType = 'single' | 'multiple';
-type Orientation = NavigationMenuRootProps['orientation'];
+type Orientation = NavigationMenu['variants']['orientation'];
 type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
 export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
@@ -125,7 +131,8 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      */
     collapsed?: boolean;
     /**
-     * Display a tooltip on the items when the menu is collapsed with the label of the item.
+     * Display a tooltip on the items with the label of the item.
+     * Only works when `orientation` is `vertical` and `collapsed` is `true`.
      * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
      * @defaultValue false
      */
@@ -155,6 +162,11 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * @defaultValue false
      */
     arrow?: boolean;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -201,8 +213,12 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     ui: NavigationMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__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<NavigationMenuProps<T, K, O> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__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<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -212,8 +228,8 @@ declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K exte
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};