@nuxt/ui 4.5.0 → 4.6.0

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

@@ -0,0 +1,131 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/sidebar';
+import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
+type SidebarState = 'expanded' | 'collapsed';
+type SidebarMode = 'modal' | 'slideover' | 'drawer';
+type SidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface SidebarProps<T extends SidebarMode = SidebarMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'aside'
+     */
+    as?: any;
+    /**
+     * The visual variant of the sidebar.
+     * @defaultValue 'sidebar'
+     */
+    variant?: Sidebar['variants']['variant'];
+    /**
+     * The collapse behavior of the sidebar.
+     * - `offcanvas`: The sidebar slides out of view completely.
+     * - `icon`: The sidebar shrinks to icon-only width.
+     * - `none`: The sidebar is not collapsible.
+     * @defaultValue 'offcanvas'
+     */
+    collapsible?: Sidebar['variants']['collapsible'];
+    /**
+     * The side to render the sidebar on.
+     * @defaultValue 'left'
+     */
+    side?: Sidebar['variants']['side'];
+    /**
+     * The title displayed in the sidebar header.
+     */
+    title?: string;
+    /**
+     * The description displayed in the sidebar header.
+     */
+    description?: string;
+    /**
+     * Display a close button to collapse the sidebar.
+     * Only renders when `collapsible` is not `none`.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Display a rail on the sidebar edge to toggle collapse.
+     * Only renders when `collapsible` is not `none`.
+     * @defaultValue false
+     */
+    rail?: boolean;
+    /**
+     * The mode of the sidebar menu on mobile.
+     * @defaultValue 'slideover'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component on mobile.
+     */
+    menu?: SidebarMenu<T>;
+    class?: any;
+    ui?: Sidebar['slots'];
+}
+export interface SidebarSlots {
+    header?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    title?(props: {
+        state: SidebarState;
+    }): VNode[];
+    description?(props: {
+        state: SidebarState;
+    }): VNode[];
+    actions?(props: {
+        state: SidebarState;
+    }): VNode[];
+    close?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    default?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    footer?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    rail?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    content?(props: {
+        close: () => void;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends SidebarMode>(__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<(SidebarProps<T> & {
+        open?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: SidebarSlots;
+    emit: (event: "update:open", value: boolean) => 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];
+}) & {};

package/dist/runtime/components/Sidebar.vue

@@ -0,0 +1,222 @@
+<script>
+import theme from "#build/ui/sidebar";
+</script>
+
+<script setup>
+import { computed, onMounted, ref, toRef, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { defu } from "defu";
+import { createReusableTemplate, useMediaQuery } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "aside" },
+  variant: { type: null, required: false, default: "sidebar" },
+  collapsible: { type: null, required: false, default: "offcanvas" },
+  side: { type: null, required: false, default: "left" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  close: { type: [Boolean, Object], required: false, default: false },
+  closeIcon: { type: null, required: false },
+  rail: { type: Boolean, required: false, default: false },
+  mode: { type: null, required: false, default: "slideover" },
+  menu: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const [DefineInnerTemplate, ReuseInnerTemplate] = createReusableTemplate();
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
+const mediaQuery = useMediaQuery("(max-width: 1023px)");
+const isMounted = ref(false);
+onMounted(() => {
+  isMounted.value = true;
+});
+const isMobile = computed(() => isMounted.value && mediaQuery.value);
+const modelOpen = defineModel("open", { type: Boolean, ...{ default: true } });
+const openMobile = ref(false);
+const desktopOpen = ref(modelOpen.value);
+const open = computed({
+  get: () => isMobile.value ? openMobile.value : modelOpen.value,
+  set: (value) => {
+    if (isMobile.value) {
+      openMobile.value = value;
+    } else {
+      modelOpen.value = value;
+    }
+  }
+});
+watch(isMobile, (mobile) => {
+  if (mobile) {
+    desktopOpen.value = modelOpen.value;
+    modelOpen.value = false;
+  } else {
+    modelOpen.value = desktopOpen.value;
+  }
+}, { immediate: true });
+watch(modelOpen, (value) => {
+  if (isMobile.value) {
+    openMobile.value = value;
+  }
+});
+watch(openMobile, (value) => {
+  if (isMobile.value) {
+    modelOpen.value = value;
+  }
+});
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("sidebar", props);
+const state = computed(() => open.value ? "expanded" : "collapsed");
+const canClose = computed(() => props.close && props.collapsible !== "none" || isMobile.value);
+function closeSidebar() {
+  open.value = false;
+}
+const hasHeader = computed(() => !!slots.header || props.title || !!slots.title || props.description || !!slots.description || !!slots.actions || canClose.value || !!slots.close);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.sidebar || {} })({
+  side: props.side,
+  variant: props.variant,
+  collapsible: props.collapsible
+}));
+const Menu = computed(() => ({
+  slideover: USlideover,
+  modal: UModal,
+  drawer: UDrawer
+})[props.mode]);
+const menuProps = toRef(() => defu(props.menu, {
+  title: props.title,
+  description: props.description,
+  close: props.close,
+  closeIcon: props.closeIcon,
+  content: {
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }
+}, props.mode === "modal" ? {} : props.mode === "slideover" ? { side: props.side, inset: props.variant === "inset" } : {}));
+</script>
+
+<template>
+  <DefineContentTemplate>
+    <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+      <slot name="header" :state="state" :open="open" :close="closeSidebar">
+        <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+          <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+            <slot name="title" :state="state">
+              {{ title }}
+            </slot>
+          </p>
+
+          <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <slot name="description" :state="state">
+              {{ description }}
+            </slot>
+          </p>
+        </div>
+
+        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+          <slot name="actions" :state="state" />
+
+          <slot name="close" :state="state" :ui="ui">
+            <UButton
+              v-if="canClose"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              color="neutral"
+              variant="ghost"
+              :aria-label="t('sidebar.close')"
+              v-bind="typeof props.close === 'object' ? props.close : {}"
+              data-slot="close"
+              :class="ui.close({ class: uiProp?.close })"
+              @click="closeSidebar"
+            />
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+      <slot :state="state" :open="open" :close="closeSidebar" />
+    </div>
+
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+      <slot name="footer" :state="state" :open="open" :close="closeSidebar" />
+    </div>
+  </DefineContentTemplate>
+
+  <DefineInnerTemplate>
+    <div data-slot="inner" :class="ui.inner({ class: uiProp?.inner })">
+      <ReuseContentTemplate />
+    </div>
+  </DefineInnerTemplate>
+
+  <!-- Non-collapsible: simple inline sidebar -->
+  <Primitive
+    v-if="collapsible === 'none'"
+    :as="as"
+    v-bind="$attrs"
+    data-slot="root"
+    :data-variant="variant"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+  >
+    <ReuseInnerTemplate />
+  </Primitive>
+
+  <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+  <template v-else>
+    <Primitive
+      :as="as"
+      v-bind="$attrs"
+      data-slot="root"
+      :data-state="state"
+      :data-collapsible="state === 'collapsed' ? collapsible : void 0"
+      :data-variant="variant"
+      :data-side="side"
+      :class="ui.root({ class: [uiProp?.root, props.class] })"
+    >
+      <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+      <div
+        data-slot="gap"
+        :data-state="state"
+        :class="ui.gap({ class: uiProp?.gap })"
+      />
+
+      <!-- Fixed container: the actual visible sidebar -->
+      <div
+        data-slot="container"
+        :data-state="state"
+        :class="ui.container({ class: uiProp?.container })"
+      >
+        <ReuseInnerTemplate />
+
+        <slot v-if="rail" name="rail" :state="state" :ui="ui">
+          <button
+            data-slot="rail"
+            :data-state="state"
+            :aria-label="t('sidebar.toggle')"
+            :tabindex="-1"
+            :class="ui.rail({ class: uiProp?.rail })"
+            @click="open = !open"
+          />
+        </slot>
+      </div>
+    </Primitive>
+
+    <!-- Mobile menu -->
+    <Menu
+      v-if="isMobile"
+      v-model:open="openMobile"
+      v-bind="menuProps"
+    >
+      <template #content="contentData">
+        <slot name="content" v-bind="contentData" :close="closeSidebar">
+          <ReuseContentTemplate />
+        </slot>
+      </template>
+    </Menu>
+  </template>
+</template>

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

@@ -0,0 +1,131 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/sidebar';
+import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>;
+type SidebarState = 'expanded' | 'collapsed';
+type SidebarMode = 'modal' | 'slideover' | 'drawer';
+type SidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface SidebarProps<T extends SidebarMode = SidebarMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'aside'
+     */
+    as?: any;
+    /**
+     * The visual variant of the sidebar.
+     * @defaultValue 'sidebar'
+     */
+    variant?: Sidebar['variants']['variant'];
+    /**
+     * The collapse behavior of the sidebar.
+     * - `offcanvas`: The sidebar slides out of view completely.
+     * - `icon`: The sidebar shrinks to icon-only width.
+     * - `none`: The sidebar is not collapsible.
+     * @defaultValue 'offcanvas'
+     */
+    collapsible?: Sidebar['variants']['collapsible'];
+    /**
+     * The side to render the sidebar on.
+     * @defaultValue 'left'
+     */
+    side?: Sidebar['variants']['side'];
+    /**
+     * The title displayed in the sidebar header.
+     */
+    title?: string;
+    /**
+     * The description displayed in the sidebar header.
+     */
+    description?: string;
+    /**
+     * Display a close button to collapse the sidebar.
+     * Only renders when `collapsible` is not `none`.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: IconProps['name'];
+    /**
+     * Display a rail on the sidebar edge to toggle collapse.
+     * Only renders when `collapsible` is not `none`.
+     * @defaultValue false
+     */
+    rail?: boolean;
+    /**
+     * The mode of the sidebar menu on mobile.
+     * @defaultValue 'slideover'
+     */
+    mode?: T;
+    /**
+     * The props for the sidebar menu component on mobile.
+     */
+    menu?: SidebarMenu<T>;
+    class?: any;
+    ui?: Sidebar['slots'];
+}
+export interface SidebarSlots {
+    header?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    title?(props: {
+        state: SidebarState;
+    }): VNode[];
+    description?(props: {
+        state: SidebarState;
+    }): VNode[];
+    actions?(props: {
+        state: SidebarState;
+    }): VNode[];
+    close?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    default?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    footer?(props: {
+        state: SidebarState;
+        open: boolean;
+        close: () => void;
+    }): VNode[];
+    rail?(props: {
+        ui: Sidebar['ui'];
+        state: SidebarState;
+    }): VNode[];
+    content?(props: {
+        close: () => void;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends SidebarMode>(__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<(SidebarProps<T> & {
+        open?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: SidebarSlots;
+    emit: (event: "update:open", value: boolean) => 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];
+}) & {};

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

@@ -1,4 +1,5 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -61,27 +62,27 @@ export interface SlideoverEmits extends DialogRootEmits {
     'close:prevent': [];
 }
 export interface SlideoverSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         close: () => void;
-    }): any;
-    header(props: {
+    }): VNode[];
+    header?(props: {
         close: () => void;
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Slideover['ui'];
-    }): any;
-    body(props: {
+    }): VNode[];
+    body?(props: {
         close: () => void;
-    }): any;
-    footer(props: {
+    }): VNode[];
+    footer?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Slideover.vue

@@ -41,7 +41,7 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   if (!props.dismissible) {
-    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    const events = ["interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
       acc[curr] = (e) => {
         e.preventDefault();

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

@@ -1,4 +1,5 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
@@ -61,27 +62,27 @@ export interface SlideoverEmits extends DialogRootEmits {
     'close:prevent': [];
 }
 export interface SlideoverSlots {
-    default(props: {
+    default?(props: {
         open: boolean;
-    }): any;
-    content(props: {
+    }): VNode[];
+    content?(props: {
         close: () => void;
-    }): any;
-    header(props: {
+    }): VNode[];
+    header?(props: {
         close: () => void;
-    }): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    actions(props?: {}): any;
-    close(props: {
+    }): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    actions?(props?: {}): VNode[];
+    close?(props: {
         ui: Slideover['ui'];
-    }): any;
-    body(props: {
+    }): VNode[];
+    body?(props: {
         close: () => void;
-    }): any;
-    footer(props: {
+    }): VNode[];
+    footer?(props: {
         close: () => void;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
 import type { IconProps } from '../types';
@@ -59,16 +60,16 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 };
 type SlotProps<T extends StepperItem> = (props: {
     item: T;
-}) => any;
+}) => VNode[];
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator(props: {
+    indicator?(props: {
         item: T;
         ui: Stepper['ui'];
-    }): any;
-    wrapper: SlotProps<T>;
-    title: SlotProps<T>;
-    description: SlotProps<T>;
-    content: SlotProps<T>;
+    }): VNode[];
+    wrapper?: SlotProps<T>;
+    title?: SlotProps<T>;
+    description?: SlotProps<T>;
+    content?: SlotProps<T>;
 } & DynamicSlots<T, 'wrapper' | 'title' | 'description', {
     item: T;
 }>;

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

@@ -1,4 +1,5 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
 import type { IconProps } from '../types';
@@ -59,16 +60,16 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 };
 type SlotProps<T extends StepperItem> = (props: {
     item: T;
-}) => any;
+}) => VNode[];
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator(props: {
+    indicator?(props: {
         item: T;
         ui: Stepper['ui'];
-    }): any;
-    wrapper: SlotProps<T>;
-    title: SlotProps<T>;
-    description: SlotProps<T>;
-    content: SlotProps<T>;
+    }): VNode[];
+    wrapper?: SlotProps<T>;
+    title?: SlotProps<T>;
+    description?: SlotProps<T>;
+    content?: SlotProps<T>;
 } & DynamicSlots<T, 'wrapper' | 'title' | 'description', {
     item: T;
 }>;