@nuxt/ui 3.0.2 → 3.1.1

package/dist/runtime/components/Tree.vue

@@ -1,168 +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 {
-  DynamicSlots,
-  GetItemKeys,
-  GetModelValue,
-  GetModelValueEmits,
-  NestedItem,
-  PartialString
-} 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
-  [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?: TreeVariants['color']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: TreeVariants['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?: PartialString<typeof 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 }>
-
+<script>
+import theme from "#build/ui/tree";
 </script>
 
-<script setup lang="ts" generic="T extends TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-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, VK, M>>(), {
-  labelKey: 'label' as never,
-  valueKey: 'value' as never
-})
-const emits = defineEmits<TreeEmits<T, VK, 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?: NestedItem<T>[], level: number },
-  TreeSlots<T>
->({
-  props: {
-    items: Array as PropType<NestedItem<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: NestedItem<T>): string {
-  return get(item, props.labelKey as string)
+}));
+function getItemLabel(item) {
+  return get(item, props.labelKey);
 }
-
-function getItemValue(item: NestedItem<T>): string {
-  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: NestedItem<T>): string[] {
-  const currentItem = item.defaultExpanded ? getItemValue(item) : null
-  const childItems = item.children?.flatMap((child: TreeItem) => getDefaultOpenedItems(child as NestedItem<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(item => getDefaultOpenedItems(item as NestedItem<T>))
-)
+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
@@ -179,8 +72,8 @@ const defaultExpanded = computed(() =>
         @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') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
-            <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
+          <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"
@@ -188,19 +81,19 @@ const defaultExpanded = computed(() =>
               />
               <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') as keyof TreeSlots<T>]" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
-              <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof TreeSlots<T>)" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
+            <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') as keyof TreeSlots<T>]" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
-              <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof TreeSlots<T>)" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
+            <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>
@@ -209,19 +102,19 @@ const defaultExpanded = computed(() =>
         </button>
 
         <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
-          <ReuseTreeTemplate :items="(item.children as NestedItem<T>[])" :level="level + 1" />
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
       </TreeItem>
     </li>
   </DefineTreeTemplate>
 
   <TreeRoot
-    v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)"
+    v-bind="rootProps"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :get-key="getItemValue"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="(items as NestedItem<T>[] | undefined)" :level="0" />
+    <ReuseTreeTemplate :items="items" :level="0" />
   </TreeRoot>
 </template>

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

@@ -0,0 +1,111 @@
+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<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: TreeSlots<T, NestedItem<T>>;
+    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

@@ -1,5 +1,6 @@
 import { ref, computed, toValue } from "vue";
 import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export function extractShortcuts(items) {
@@ -27,6 +28,7 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+  const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const onKeyDown = (e) => {
     if (!e.key) {
@@ -112,6 +114,10 @@ export function defineShortcuts(config, options = {}) {
         };
       }
       shortcut.chained = chained;
+      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+        shortcut.metaKey = false;
+        shortcut.ctrlKey = true;
+      }
       if (typeof shortcutConfig === "function") {
         shortcut.handler = shortcutConfig;
       } else if (typeof shortcutConfig === "object") {

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<"3xs" | "2xs" | "xs" | "sm" | "md" | "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<"xs" | "sm" | "md" | "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<"xs" | "sm" | "md" | "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/useKbd.d.ts

@@ -10,6 +10,7 @@ export declare const kbdKeysMap: {
     win: string;
     command: string;
     shift: string;
+    control: string;
     option: string;
     enter: string;
     delete: string;

package/dist/runtime/composables/useKbd.js

@@ -7,6 +7,7 @@ export const kbdKeysMap = {
   win: "\u229E",
   command: "\u2318",
   shift: "\u21E7",
+  control: "\u2303",
   option: "\u2325",
   enter: "\u21B5",
   delete: "\u2326",
@@ -31,9 +32,9 @@ const _useKbd = () => {
     ctrl: " "
   });
   onMounted(() => {
-    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
-    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
-    kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : "Ctrl";
+    kbdKeysSpecificMap.ctrl = macOS.value ? kbdKeysMap.control : "Ctrl";
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "Alt";
   });
   function getKbdKey(value) {
     if (!value) {

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

@@ -6,26 +6,32 @@ export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
     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<CloseEventArgType<ComponentEmit<T>>>;
+type OverlayInstance<T extends Component> = Omit<ManagedOverlayOptionsPrivate<T>, 'component'> & {
+    id: symbol;
+    open: (props?: ComponentProps<T>) => OpenedOverlay<T>;
     close: (value?: any) => void;
     patch: (props: Partial<ComponentProps<T>>) => void;
-}
+};
+type OpenedOverlay<T extends Component> = Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'> & {
+    result: Promise<CloseEventArgType<ComponentEmit<T>>>;
+};
 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>) => OpenedOverlay<T>;
     close: (id: symbol, value?: any) => void;
+    closeAll: () => void;
     create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
     patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
     unMount: (id: symbol) => void;
+    isOpen: (id: symbol) => boolean;
 };
 export declare const useOverlay: typeof _useOverlay;
 export {};

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,7 @@ function _useOverlay() {
     });
     overlays.push(options);
     return {
+      ...options,
       open: (props2) => open(options.id, props2),
       close: (value) => close(options.id, value),
       patch: (props2) => patch(options.id, props2)
@@ -24,20 +25,26 @@ 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;
     }
   };
+  const closeAll = () => {
+    overlays.forEach((overlay) => close(overlay.id));
+  };
   const unMount = (id) => {
     const overlay = getOverlay(id);
     overlay.isMounted = false;
@@ -59,13 +66,19 @@ function _useOverlay() {
     }
     return overlay;
   };
+  const isOpen = (id) => {
+    const overlay = getOverlay(id);
+    return overlay.isOpen;
+  };
   return {
     overlays,
     open,
     close,
+    closeAll,
     create,
     patch,
-    unMount
+    unMount,
+    isOpen
   };
 }
 export const useOverlay = /* @__PURE__ */ createSharedComposable(_useOverlay);

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)}}