@nuxt/ui 3.0.2 → 3.1.1

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

@@ -0,0 +1,196 @@
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/select-menu';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { AvatarProps, ChipProps, InputProps } from '../types';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
+interface _SelectMenuItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps;
+    chip?: ChipProps;
+    /**
+     * The item type.
+     * @defaultValue 'item'
+     */
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?(e?: Event): void;
+    [key: string]: any;
+}
+export type SelectMenuItem = _SelectMenuItem | AcceptableValue | boolean;
+export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
+    id?: string;
+    /** The placeholder text when the select is empty. */
+    placeholder?: string;
+    /**
+     * Whether to display the search input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    searchInput?: boolean | InputProps;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: SelectMenu['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: SelectMenu['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: SelectMenu['variants']['size'];
+    required?: boolean;
+    /**
+     * The icon displayed to open the menu.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when an item is selected.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    selectedIcon?: string;
+    /**
+     * The content of the menu.
+     * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
+     */
+    content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>;
+    /**
+     * Display an arrow alongside the menu.
+     * @defaultValue false
+     * @IconifyIcon
+     */
+    arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>;
+    /**
+     * Render the menu in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: VK;
+    /**
+     * When `items` is an array of objects, select the field to use as the label.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    items?: T;
+    /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
+    modelValue?: GetModelValue<T, VK, M>;
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * Determines if custom user input that does not exist in options can be added.
+     * @defaultValue false
+     */
+    createItem?: boolean | 'always' | {
+        position?: 'top' | 'bottom';
+        when?: 'empty' | 'always';
+    };
+    /**
+     * Fields to filter items by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
+    class?: any;
+    ui?: SelectMenu['slots'];
+}
+export type SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
+    change: [payload: Event];
+    blur: [payload: FocusEvent];
+    focus: [payload: FocusEvent];
+    create: [item: string];
+    /** Event handler when highlighted element changes. */
+    highlight: [
+        payload: {
+            ref: HTMLElement;
+            value: GetModelValue<A, VK, M>;
+        } | undefined
+    ];
+} & GetModelValueEmits<A, VK, M>;
+type SlotProps<T extends SelectMenuItem> = (props: {
+    item: T;
+    index: number;
+}) => any;
+export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
+    'leading'(props: {
+        modelValue?: GetModelValue<A, VK, M>;
+        open: boolean;
+        ui: {
+            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    'default'(props: {
+        modelValue?: GetModelValue<A, VK, M>;
+        open: boolean;
+    }): any;
+    'trailing'(props: {
+        modelValue?: GetModelValue<A, VK, M>;
+        open: boolean;
+        ui: {
+            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    'empty'(props: {
+        searchTerm?: string;
+    }): any;
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+    'content-top': (props?: {}) => any;
+    'content-bottom': (props?: {}) => any;
+    'create-item-label'(props: {
+        item: string;
+    }): any;
+}
+declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__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<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((payload: FocusEvent) => any) | undefined;
+        readonly onChange?: ((payload: Event) => any) | undefined;
+        readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
+        readonly onCreate?: ((item: string) => any) | undefined;
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: GetModelValue<T, VK, M>;
+        } | undefined) => any) | undefined;
+        readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (SelectMenuProps<T, VK, M> & {
+        searchTerm?: string;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
+    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: GetModelValue<T, VK, M>;
+    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Separator.vue

@@ -1,79 +1,37 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { SeparatorProps as _SeparatorProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/separator'
-import { tv } from '../utils/tv'
-import type { AvatarProps } from '../types'
-
-const appConfigSeparator = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
-
-const separator = tv({ extend: tv(theme), ...(appConfigSeparator.ui?.separator || {}) })
-
-type SeparatorVariants = VariantProps<typeof separator>
-
-export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /** Display a label in the middle. */
-  label?: string
-  /**
-   * Display an icon in the middle.
-   * @IconifyIcon
-   */
-  icon?: string
-  /** Display an avatar in the middle. */
-  avatar?: AvatarProps
-  /**
-   * @defaultValue 'neutral'
-   */
-  color?: SeparatorVariants['color']
-  /**
-   * @defaultValue 'xs'
-   */
-  size?: SeparatorVariants['size']
-  /**
-   * @defaultValue 'solid'
-   */
-  type?: SeparatorVariants['type']
-  /**
-   * The orientation of the separator.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: _SeparatorProps['orientation']
-  class?: any
-  ui?: Partial<typeof separator.slots>
-}
-
-export interface SeparatorSlots {
-  default(props?: {}): any
-}
+<script>
+import theme from "#build/ui/separator";
 </script>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Separator, useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import UIcon from './Icon.vue'
-import UAvatar from './Avatar.vue'
-
-const props = withDefaults(defineProps<SeparatorProps>(), {
-  orientation: 'horizontal'
-})
-const slots = defineSlots<SeparatorSlots>()
-
-const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
-
-const ui = computed(() => separator({
+<script setup>
+import { computed } from "vue";
+import { Separator, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  type: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  decorative: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "as", "decorative", "orientation"));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator || {} })({
   color: props.color,
   orientation: props.orientation,
   size: props.size,
   type: props.type
-}))
+}));
 </script>
 
 <template>
@@ -85,7 +43,7 @@ const ui = computed(() => separator({
         <slot>
           <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
           <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-else-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
       </div>
 

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

@@ -0,0 +1,54 @@
+import { Separator } from 'reka-ui';
+import type { SeparatorProps as _SeparatorProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/separator';
+import type { AvatarProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>;
+export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** Display a label in the middle. */
+    label?: string;
+    /**
+     * Display an icon in the middle.
+     * @IconifyIcon
+     */
+    icon?: string;
+    /** Display an avatar in the middle. */
+    avatar?: AvatarProps;
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: Separator['variants']['color'];
+    /**
+     * @defaultValue 'xs'
+     */
+    size?: Separator['variants']['size'];
+    /**
+     * @defaultValue 'solid'
+     */
+    type?: Separator['variants']['type'];
+    /**
+     * The orientation of the separator.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: _SeparatorProps['orientation'];
+    class?: any;
+    ui?: Separator['slots'];
+}
+export interface SeparatorSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Skeleton.vue

@@ -1,31 +1,29 @@
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/skeleton'
-import { tv } from '../utils/tv'
-
-const appConfigSkeleton = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
-
-const skeleton = tv({ extend: tv(theme), ...(appConfigSkeleton.ui?.skeleton || {}) })
-
-export interface SkeletonProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  class?: any
-}
+<script>
+import theme from "#build/ui/skeleton";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-
-const props = defineProps<SkeletonProps>()
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="skeleton({ class: props.class })">
+  <Primitive
+    :as="as"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    role="alert"
+    :class="ui({ class: props.class })"
+  >
     <slot />
   </Primitive>
 </template>

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

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

package/dist/runtime/components/Slideover.vue

@@ -1,127 +1,60 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/slideover'
-import { tv } from '../utils/tv'
-import type { ButtonProps } from '../types'
-import type { EmitsToProps } from '../types/utils'
-
-const appConfigSlideover = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
-
-const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.ui?.slideover || {}) })
-
-type SlideoverVariants = VariantProps<typeof slideover>
-
-export interface SlideoverProps extends DialogRootProps {
-  title?: string
-  description?: string
-  /** The content of the slideover. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
-  /**
-   * Render an overlay behind the slideover.
-   * @defaultValue true
-   */
-  overlay?: boolean
-  /**
-   * Animate the slideover when opening or closing.
-   * @defaultValue true
-   */
-  transition?: boolean
-  /**
-   * The side of the slideover.
-   * @defaultValue 'right'
-   */
-  side?: SlideoverVariants['side']
-  /**
-   * Render the slideover in a portal.
-   * @defaultValue true
-   */
-  portal?: boolean
-  /**
-   * Display a close button to dismiss the slideover.
-   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
-   * @defaultValue true
-   */
-  close?: boolean | Partial<ButtonProps>
-  /**
-   * The icon displayed in the close button.
-   * @defaultValue appConfig.ui.icons.close
-   * @IconifyIcon
-   */
-  closeIcon?: string
-  /**
-   * When `false`, the slideover will not close when clicking outside or pressing escape.
-   * @defaultValue true
-   */
-  dismissible?: boolean
-  class?: any
-  ui?: Partial<typeof slideover.slots>
-}
-
-export interface SlideoverEmits extends DialogRootEmits {
-  'after:leave': []
-}
-
-export interface SlideoverSlots {
-  default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
-  title(props?: {}): any
-  description(props?: {}): any
-  close(props: { ui: ReturnType<typeof slideover> }): any
-  body(props?: {}): any
-  footer(props?: {}): any
-}
+<script>
+import theme from "#build/ui/slideover";
 </script>
 
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useLocale } from '../composables/useLocale'
-import UButton from './Button.vue'
-
-const props = withDefaults(defineProps<SlideoverProps>(), {
-  close: true,
-  portal: true,
-  overlay: true,
-  transition: true,
-  modal: true,
-  dismissible: true,
-  side: 'right'
-})
-const emits = defineEmits<SlideoverEmits>()
-const slots = defineSlots<SlideoverSlots>()
-
-const { t } = useLocale()
-const appConfig = useAppConfig()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
-const contentProps = toRef(() => props.content)
+<script setup>
+import { computed, toRef } from "vue";
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { usePortal } from "../composables/usePortal";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  side: { type: null, required: false, default: "right" },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["after:leave", "close:prevent", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emits);
+const portalProps = usePortal(toRef(() => props.portal));
+const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
-  const events = {
-    closeAutoFocus: (e: Event) => e.preventDefault()
-  }
-
+  const defaultEvents = {
+    closeAutoFocus: (e) => e.preventDefault()
+  };
   if (!props.dismissible) {
-    return {
-      pointerDownOutside: (e: Event) => e.preventDefault(),
-      interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault(),
-      ...events
-    }
+    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown", "closeAutoFocus"];
+    return events.reduce((acc, curr) => {
+      acc[curr] = (e) => {
+        e.preventDefault();
+        emits("close:prevent");
+      };
+      return acc;
+    }, {});
   }
-
-  return events
-})
-
-const ui = computed(() => slideover({
+  return defaultEvents;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
   side: props.side
-}))
+}));
 </script>
 
 <template>
@@ -130,11 +63,11 @@ const ui = computed(() => slideover({
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal :disabled="!portal">
+    <DialogPortal v-bind="portalProps">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
-        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
               {{ title }}
@@ -174,7 +107,7 @@ const ui = computed(() => slideover({
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('slideover.close')"
-                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    v-bind="typeof close === 'object' ? close : {}"
                     :class="ui.close({ class: props.ui?.close })"
                   />
                 </slot>