@nuxt/ui 3.0.1 → 3.1.0

package/dist/runtime/components/Tree.vue

@@ -1,154 +1,61 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/tree'
-import { tv } from '../utils/tv'
-import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
-
-const appConfig = _appConfig as AppConfig & { ui: { tree: Partial<typeof theme> } }
-
-const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
-
-type TreeVariants = VariantProps<typeof tree>
-
-export type TreeItem = {
-  /**
-   * @IconifyIcon
-   */
-  icon?: string
-  label?: string
-  /**
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  defaultExpanded?: boolean
-  disabled?: boolean
-  value?: string
-  slot?: string
-  children?: TreeItem[]
-  onToggle?(e: Event): void
-  onSelect?(e?: Event): void
-}
-
-export interface TreeProps<T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'ul'
-   */
-  as?: any
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: TreeVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: TreeVariants['size']
-  /**
-   * The key used to get the value from the item.
-   * @defaultValue 'value'
-   */
-  valueKey?: K
-  /**
-   * The key used to get the label from the item.
-   * @defaultValue 'label'
-   */
-  labelKey?: K
-  /**
-   * The icon displayed on the right side of a parent node.
-   * @defaultValue appConfig.ui.icons.chevronDown
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  /**
-   * The icon displayed when a parent node is expanded.
-   * @defaultValue appConfig.ui.icons.folderOpen
-   * @IconifyIcon
-   */
-  expandedIcon?: string
-  /**
-   * The icon displayed when a parent node is collapsed.
-   * @defaultValue appConfig.ui.icons.folder
-   * @IconifyIcon
-   */
-  collapsedIcon?: string
-  items?: T[]
-  /** The controlled value of the Tree. Can be bind as `v-model`. */
-  modelValue?: MaybeMultipleModelValue<T, M>
-  /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
-  defaultValue?: MaybeMultipleModelValue<T, M>
-  /** Whether multiple options can be selected or not. */
-  multiple?: M & boolean
-  class?: any
-  ui?: PartialString<typeof tree.slots>
-}
-
-export type TreeEmits<T, M extends boolean = false> = Omit<TreeRootEmits, 'update:modelValue'> & {
-  'update:modelValue': [payload: MaybeMultipleModelValue<T, M>]
-}
-
-type SlotProps<T> = (props: { item: T, index: number, level: number, expanded: boolean, selected: boolean }) => any
-
-export type TreeSlots<T extends { slot?: string }> = {
-  'item': SlotProps<T>
-  'item-leading': SlotProps<T>
-  'item-label': SlotProps<T>
-  'item-trailing': SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-
+<script>
+import theme from "#build/ui/tree";
 </script>
 
-<script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">
-import { computed } from 'vue'
-import type { PropType } from 'vue'
-import { TreeRoot, TreeItem, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick, createReusableTemplate } from '@vueuse/core'
-import { get } from '../utils'
-import UIcon from './Icon.vue'
-
-const props = withDefaults(defineProps<TreeProps<T, M, K>>(), {
-  labelKey: 'label' as never,
-  valueKey: 'value' as never
-})
-const emits = defineEmits<TreeEmits<T, M>>()
-const slots = defineSlots<TreeSlots<T>>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
-
-const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: T[], level: number }>({
-  props: {
-    items: Array as PropType<T[]>,
-    level: Number
-  }
-})
-
-const ui = computed(() => tree({
+<script setup>
+import { computed } from "vue";
+import { TreeRoot, TreeItem, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  trailingIcon: { type: String, required: false },
+  expandedIcon: { type: String, required: false },
+  collapsedIcon: { type: String, required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  expanded: { type: Array, required: false },
+  defaultExpanded: { type: Array, required: false },
+  selectionBehavior: { type: String, required: false },
+  propagateSelect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:expanded", "update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect"), emits);
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
   size: props.size
-}))
-
-function getItemLabel(item: T) {
-  return get(item, props.labelKey as string)
+}));
+function getItemLabel(item) {
+  return get(item, props.labelKey);
 }
-
-function getItemValue(item?: T) {
-  return get(item, props.valueKey as string) ?? get(item, props.labelKey as string)
+function getItemValue(item) {
+  return get(item, props.valueKey) ?? get(item, props.labelKey);
 }
-
-function getDefaultOpenedItems(item: T): string[] {
-  const currentItem = item.defaultExpanded ? getItemValue(item) : null
-  const childItems = item.children?.flatMap(child => getDefaultOpenedItems(child as T)) ?? []
-
-  return [currentItem, ...childItems].filter(Boolean) as string[]
+function getDefaultOpenedItems(item) {
+  const currentItem = item.defaultExpanded ? getItemValue(item) : null;
+  const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
+  return [currentItem, ...childItems].filter(Boolean);
 }
-
-const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap(getDefaultOpenedItems))
+const defaultExpanded = computed(
+  () => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item))
+);
 </script>
 
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <DefineTreeTemplate v-slot="{ items, level }">
     <li
@@ -165,8 +72,8 @@ const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.fla
         @select="item.onSelect"
       >
         <button :disabled="item.disabled || disabled" :class="ui.link({ class: props.ui?.link, selected: isSelected, disabled: item.disabled || disabled })">
-          <slot :name="item.slot || 'item'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
-            <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+          <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
               <UIcon
                 v-if="item.icon"
                 :name="item.icon"
@@ -174,19 +81,19 @@ const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.fla
               />
               <UIcon
                 v-else-if="item.children?.length"
-                :name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
+                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
                 :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
               />
             </slot>
 
-            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
-              <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+              <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
                 {{ getItemLabel(item) }}
               </slot>
             </span>
 
-            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
-              <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
+            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+              <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
                 <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
                 <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
               </slot>
@@ -195,7 +102,7 @@ const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.fla
         </button>
 
         <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
-          <ReuseTreeTemplate :items="(item.children as T[])" :level="level + 1" />
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
       </TreeItem>
     </li>

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

@@ -0,0 +1,128 @@
+import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/tree';
+import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, ComponentConfig } from '../types/utils';
+type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
+export type TreeItem = {
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    value?: string;
+    slot?: string;
+    children?: TreeItem[];
+    onToggle?(e: Event): void;
+    onSelect?(e?: Event): void;
+    [key: string]: any;
+};
+export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'ul'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Tree['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Tree['variants']['size'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    /**
+     * The icon displayed on the right side of a parent node.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when a parent node is expanded.
+     * @defaultValue appConfig.ui.icons.folderOpen
+     * @IconifyIcon
+     */
+    expandedIcon?: string;
+    /**
+     * The icon displayed when a parent node is collapsed.
+     * @defaultValue appConfig.ui.icons.folder
+     * @IconifyIcon
+     */
+    collapsedIcon?: string;
+    items?: T;
+    /** The controlled value of the Tree. Can be bind as `v-model`. */
+    modelValue?: GetModelValue<T, VK, M>;
+    /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    class?: any;
+    ui?: Tree['slots'];
+}
+export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+type SlotProps<T extends TreeItem> = (props: {
+    item: T;
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}) => any;
+export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+} & DynamicSlots<T, undefined, {
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}>;
+declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", 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<any & TreeProps<T, VK, M> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+    } & DynamicSlots<NestedItem<T>, undefined, {
+        index: number;
+        level: number;
+        expanded: boolean;
+        selected: boolean;
+    }>> & {
+        item: SlotProps<NestedItem<T>>;
+        'item-leading': SlotProps<NestedItem<T>>;
+        'item-label': SlotProps<NestedItem<T>>;
+        'item-trailing': SlotProps<NestedItem<T>>;
+    } & DynamicSlots<NestedItem<T>, undefined, {
+        index: number;
+        level: number;
+        expanded: boolean;
+        selected: boolean;
+    }>;
+    emit: ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: 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/composables/defineShortcuts.d.ts

@@ -11,5 +11,5 @@ export interface ShortcutsOptions {
     chainDelay?: number;
 }
 export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
-export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/core").Fn;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/shared").Fn;
 export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -21,7 +21,6 @@ export function extractShortcuts(items) {
   traverse(items.flat());
   return shortcuts;
 }
-// @__NO_SIDE_EFFECTS__
 export function defineShortcuts(config, options = {}) {
   const chainedInputs = ref([]);
   const clearChainedInput = () => {

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -6,5 +6,5 @@ export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
 }): {
-    size: ComputedRef<any>;
+    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
 };

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -9,7 +9,7 @@ type Props<T> = {
     size?: GetObjectField<T, 'size'>;
 };
 export declare function useButtonGroup<T>(props: Props<T>): {
-    orientation: ComputedRef<any>;
-    size: ComputedRef<any>;
+    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
+    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
 };
 export {};

package/dist/runtime/composables/useFormField.d.ts

@@ -26,12 +26,12 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<any>;
+    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
     color: ComputedRef<"error" | GetObjectField<T, "color"> | undefined>;
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;
     emitFormBlur: () => void;
-    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
+    emitFormInput: import("@vueuse/shared").UseDebounceFnReturn<() => void>;
     emitFormChange: () => void;
     emitFormFocus: () => void;
     ariaAttrs: ComputedRef<{

package/dist/runtime/composables/useFormField.js

@@ -55,7 +55,7 @@ export function useFormField(props, opts) {
     emitFormFocus,
     ariaAttrs: computed(() => {
       if (!formField?.value) return;
-      const descriptiveAttrs = ["error", "hint", "description"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
+      const descriptiveAttrs = ["error", "hint", "description", "help"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
       return {
         "aria-describedby": descriptiveAttrs.join(" "),
         "aria-invalid": !!formField?.value.error

package/dist/runtime/composables/useOverlay.d.ts

@@ -1,26 +1,34 @@
 import type { Component } from 'vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentProps, ComponentEmit } from 'vue-component-type-helpers';
+type CloseEventArgType<T> = T extends (event: 'close', args_0: infer R) => void ? R : never;
 export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
     defaultOpen?: boolean;
     props?: OverlayAttrs;
     destroyOnClose?: boolean;
 };
-type ManagedOverlayOptionsPrivate<T extends Component> = {
+interface ManagedOverlayOptionsPrivate<T extends Component> {
     component?: T;
     id: symbol;
     isMounted: boolean;
-    modelValue: boolean;
-    resolvePromise?: (value: unknown) => void;
-};
+    isOpen: boolean;
+    resolvePromise?: (value: any) => void;
+}
 export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
-interface OverlayInstance<T> {
-    open: (props?: ComponentProps<T>) => Promise<any>;
+interface OverlayInstance<T extends Component> extends Omit<ManagedOverlayOptionsPrivate<T>, 'component'> {
+    id: symbol;
+    result: Promise<CloseEventArgType<ComponentEmit<T>>>;
+    open: (props?: ComponentProps<T>) => Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'>;
     close: (value?: any) => void;
     patch: (props: Partial<ComponentProps<T>>) => void;
 }
 declare function _useOverlay(): {
     overlays: import("vue").ShallowReactive<Overlay[]>;
-    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
+    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => {
+        id: symbol;
+        isMounted: boolean;
+        isOpen: boolean;
+        result: Promise<any>;
+    };
     close: (id: symbol, value?: any) => void;
     create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
     patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;

package/dist/runtime/composables/useOverlay.js

@@ -6,7 +6,7 @@ function _useOverlay() {
     const { props, defaultOpen, destroyOnClose } = _options || {};
     const options = reactive({
       id: Symbol(import.meta.dev ? "useOverlay" : ""),
-      modelValue: !!defaultOpen,
+      isOpen: !!defaultOpen,
       component: markRaw(component),
       isMounted: !!defaultOpen,
       destroyOnClose: !!destroyOnClose,
@@ -14,6 +14,9 @@ function _useOverlay() {
     });
     overlays.push(options);
     return {
+      ...options,
+      result: new Promise(() => {
+      }),
       open: (props2) => open(options.id, props2),
       close: (value) => close(options.id, value),
       patch: (props2) => patch(options.id, props2)
@@ -24,15 +27,20 @@ function _useOverlay() {
     if (props) {
       patch(overlay.id, props);
     }
-    overlay.modelValue = true;
+    overlay.isOpen = true;
     overlay.isMounted = true;
-    return new Promise((resolve) => {
-      overlay.resolvePromise = resolve;
-    });
+    return {
+      id,
+      isMounted: overlay.isMounted,
+      isOpen: overlay.isOpen,
+      result: new Promise((resolve) => {
+        overlay.resolvePromise = resolve;
+      })
+    };
   };
   const close = (id, value) => {
     const overlay = getOverlay(id);
-    overlay.modelValue = false;
+    overlay.isOpen = false;
     if (overlay.resolvePromise) {
       overlay.resolvePromise(value);
       overlay.resolvePromise = void 0;

package/dist/runtime/composables/usePortal.d.ts

@@ -0,0 +1,6 @@
+import { type Ref, type InjectionKey } from 'vue';
+export declare const portalTargetInjectionKey: InjectionKey<Ref<string | HTMLElement>>;
+export declare function usePortal(portal: Ref<string | HTMLElement | boolean | undefined>): import("vue").ComputedRef<{
+    to: string | HTMLElement;
+    disabled: boolean;
+}>;

package/dist/runtime/composables/usePortal.js

@@ -0,0 +1,17 @@
+import { inject, provide, computed } from "vue";
+export const portalTargetInjectionKey = Symbol("nuxt-ui.portal-target");
+export function usePortal(portal) {
+  const portalTarget = inject(portalTargetInjectionKey, void 0);
+  const to = computed(() => {
+    if (typeof portal.value === "boolean" || portal.value === void 0) {
+      return portalTarget?.value ?? "body";
+    }
+    return portal.value;
+  });
+  const disabled = computed(() => typeof portal.value === "boolean" ? !portal.value : false);
+  provide(portalTargetInjectionKey, computed(() => to.value));
+  return computed(() => ({
+    to: to.value,
+    disabled: disabled.value
+  }));
+}

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "#build/ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-(--ui-text) bg-(--ui-bg) scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}
+@import "#build/ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-default bg-default scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-text-inverted:var(--color-white);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:0.25rem;--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-text-inverted:var(--ui-color-neutral-900);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}