@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/composables/defineShortcuts.js

@@ -0,0 +1,141 @@
+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) {
+  const shortcuts = {};
+  function traverse(items2) {
+    items2.forEach((item) => {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
+        const shortcutKey = item.kbds.join("_");
+        shortcuts[shortcutKey] = item.onSelect || item.onClick;
+      }
+      if (item.children) {
+        traverse(item.children.flat());
+      }
+      if (item.items) {
+        traverse(item.items.flat());
+      }
+    });
+  }
+  traverse(items.flat());
+  return shortcuts;
+}
+export function defineShortcuts(config, options = {}) {
+  const chainedInputs = ref([]);
+  const clearChainedInput = () => {
+    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) {
+      return;
+    }
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
+    let chainedKey;
+    chainedInputs.value.push(e.key);
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join("-");
+      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
+        if (shortcut.key !== chainedKey) {
+          continue;
+        }
+        if (shortcut.enabled) {
+          e.preventDefault();
+          shortcut.handler(e);
+        }
+        clearChainedInput();
+        return;
+      }
+    }
+    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key) {
+        continue;
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue;
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue;
+      }
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue;
+      }
+      if (shortcut.enabled) {
+        e.preventDefault();
+        shortcut.handler();
+      }
+      clearChainedInput();
+      return;
+    }
+    debouncedClearChainedInput();
+  };
+  const usingInput = computed(() => {
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
+    const usingInput2 = !!(tagName === "INPUT" || tagName === "TEXTAREA" || contentEditable === "true" || contentEditable === "plaintext-only");
+    if (usingInput2) {
+      return activeElement.value?.name || true;
+    }
+    return false;
+  });
+  const shortcuts = computed(() => {
+    return Object.entries(toValue(config)).map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+      let shortcut;
+      if (key.includes("-") && key !== "-" && !key.includes("_") && !key.match(chainedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+        console.trace(`[Shortcut] Invalid key: "${key}"`);
+      }
+      const chained = key.includes("-") && key !== "-" && !key.includes("_");
+      if (chained) {
+        shortcut = {
+          key: key.toLowerCase(),
+          metaKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          altKey: false
+        };
+      } else {
+        const keySplit = key.toLowerCase().split("_").map((k) => k);
+        shortcut = {
+          key: keySplit.filter((k) => !["meta", "command", "ctrl", "shift", "alt", "option"].includes(k)).join("_"),
+          metaKey: keySplit.includes("meta") || keySplit.includes("command"),
+          ctrlKey: keySplit.includes("ctrl"),
+          shiftKey: keySplit.includes("shift"),
+          altKey: keySplit.includes("alt") || keySplit.includes("option")
+        };
+      }
+      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") {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler };
+      }
+      if (!shortcut.handler) {
+        console.trace("[Shortcut] Invalid value");
+        return null;
+      }
+      let enabled = true;
+      if (!shortcutConfig.usingInput) {
+        enabled = !usingInput.value;
+      } else if (typeof shortcutConfig.usingInput === "string") {
+        enabled = usingInput.value === shortcutConfig.usingInput;
+      }
+      shortcut.enabled = enabled;
+      return shortcut;
+    }).filter(Boolean);
+  });
+  return useEventListener("keydown", onKeyDown);
+}

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

@@ -0,0 +1,10 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+import type { AvatarGroupProps } from '../types';
+export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: AvatarGroupProps['size'];
+}>>;
+export declare function useAvatarGroup(props: {
+    size: AvatarGroupProps['size'];
+}): {
+    size: ComputedRef<"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+};

package/dist/runtime/composables/useAvatarGroup.js

@@ -0,0 +1,10 @@
+import { inject, provide, computed } from "vue";
+export const avatarGroupInjectionKey = Symbol("nuxt-ui.avatar-group");
+export function useAvatarGroup(props) {
+  const avatarGroup = inject(avatarGroupInjectionKey, void 0);
+  const size = computed(() => props.size ?? avatarGroup?.value.size);
+  provide(avatarGroupInjectionKey, computed(() => ({ size: size.value })));
+  return {
+    size
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+import type { GetObjectField } from '../types/utils';
+export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: ButtonGroupProps['size'];
+    orientation: ButtonGroupProps['orientation'];
+}>>;
+type Props<T> = {
+    size?: GetObjectField<T, 'size'>;
+};
+export declare function useButtonGroup<T>(props: Props<T>): {
+    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.js

@@ -0,0 +1,9 @@
+import { inject, computed } from "vue";
+export const buttonGroupInjectionKey = Symbol("nuxt-ui.button-group");
+export function useButtonGroup(props) {
+  const buttonGroup = inject(buttonGroupInjectionKey, void 0);
+  return {
+    orientation: computed(() => buttonGroup?.value.orientation),
+    size: computed(() => props?.size ?? buttonGroup?.value.size)
+  };
+}

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

@@ -0,0 +1,39 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { AvatarProps } from '../types';
+export interface UseComponentIconsProps {
+    /**
+     * Display an icon based on the `leading` and `trailing` props.
+     * @IconifyIcon
+     */
+    icon?: string;
+    /** Display an avatar on the left side. */
+    avatar?: AvatarProps;
+    /** When `true`, the icon will be displayed on the left side. */
+    leading?: boolean;
+    /**
+     * Display an icon on the left side.
+     * @IconifyIcon
+     */
+    leadingIcon?: string;
+    /** When `true`, the icon will be displayed on the right side. */
+    trailing?: boolean;
+    /**
+     * Display an icon on the right side.
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: string;
+}
+export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
+    isLeading: import("vue").ComputedRef<boolean>;
+    isTrailing: import("vue").ComputedRef<boolean>;
+    leadingIconName: import("vue").ComputedRef<any>;
+    trailingIconName: import("vue").ComputedRef<any>;
+};

package/dist/runtime/composables/useComponentIcons.js

@@ -0,0 +1,26 @@
+import { computed, toValue } from "vue";
+import { useAppConfig } from "#imports";
+export function useComponentIcons(componentProps) {
+  const appConfig = useAppConfig();
+  const props = computed(() => toValue(componentProps));
+  const isLeading = computed(() => props.value.icon && props.value.leading || props.value.icon && !props.value.trailing || props.value.loading && !props.value.trailing || !!props.value.leadingIcon);
+  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon);
+  const leadingIconName = computed(() => {
+    if (props.value.loading) {
+      return props.value.loadingIcon || appConfig.ui.icons.loading;
+    }
+    return props.value.leadingIcon || props.value.icon;
+  });
+  const trailingIconName = computed(() => {
+    if (props.value.loading && !isLeading.value) {
+      return props.value.loadingIcon || appConfig.ui.icons.loading;
+    }
+    return props.value.trailingIcon || props.value.icon;
+  });
+  return {
+    isLeading,
+    isTrailing,
+    leadingIconName,
+    trailingIconName
+  };
+}

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

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+declare function _useContentSearch(): {
+    open: Ref<boolean>;
+};
+export declare const useContentSearch: typeof _useContentSearch;
+export {};

package/dist/runtime/composables/useContentSearch.js

@@ -0,0 +1,9 @@
+import { ref } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+function _useContentSearch() {
+  const open = ref(false);
+  return {
+    open
+  };
+}
+export const useContentSearch = /* @__PURE__ */ createSharedComposable(_useContentSearch);

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

@@ -0,0 +1,42 @@
+import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
+import { type UseEventBusReturn } from '@vueuse/core';
+import type { FormFieldProps } from '../types';
+import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form';
+import type { GetObjectField } from '../types/utils';
+type Props<T> = {
+    id?: string;
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    color?: GetObjectField<T, 'color'>;
+    highlight?: boolean;
+    disabled?: boolean;
+};
+export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
+export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>>;
+export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>> | undefined>;
+export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
+export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
+    id?: string;
+    pattern?: RegExp;
+}>>>;
+export declare const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>>;
+export declare function useFormField<T>(props?: Props<T>, opts?: {
+    bind?: boolean;
+    deferInputValidation?: boolean;
+}): {
+    id: ComputedRef<string | undefined>;
+    name: ComputedRef<string | undefined>;
+    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/shared").UseDebounceFnReturn<() => void>;
+    emitFormChange: () => void;
+    emitFormFocus: () => void;
+    ariaAttrs: ComputedRef<{
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+    } | undefined>;
+};
+export {};

package/dist/runtime/composables/useFormField.js

@@ -0,0 +1,66 @@
+import { inject, computed, provide } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
+export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
+export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
+export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
+export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
+export const formLoadingInjectionKey = Symbol("nuxt-ui.form-loading");
+export function useFormField(props, opts) {
+  const formOptions = inject(formOptionsInjectionKey, void 0);
+  const formBus = inject(formBusInjectionKey, void 0);
+  const formField = inject(formFieldInjectionKey, void 0);
+  const formInputs = inject(formInputsInjectionKey, void 0);
+  const inputId = inject(inputIdInjectionKey, void 0);
+  provide(formFieldInjectionKey, void 0);
+  if (formField && inputId) {
+    if (opts?.bind === false) {
+      inputId.value = void 0;
+    } else if (props?.id) {
+      inputId.value = props?.id;
+    }
+    if (formInputs && formField.value.name && inputId.value) {
+      formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
+    }
+  }
+  function emitFormEvent(type, name, eager) {
+    if (formBus && formField && name) {
+      formBus.emit({ type, name, eager });
+    }
+  }
+  function emitFormBlur() {
+    emitFormEvent("blur", formField?.value.name);
+  }
+  function emitFormFocus() {
+    emitFormEvent("focus", formField?.value.name);
+  }
+  function emitFormChange() {
+    emitFormEvent("change", formField?.value.name);
+  }
+  const emitFormInput = useDebounceFn(
+    () => {
+      emitFormEvent("input", formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation);
+    },
+    formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
+  );
+  return {
+    id: computed(() => props?.id ?? inputId?.value),
+    name: computed(() => props?.name ?? formField?.value.name),
+    size: computed(() => props?.size ?? formField?.value.size),
+    color: computed(() => formField?.value.error ? "error" : props?.color),
+    highlight: computed(() => formField?.value.error ? true : props?.highlight),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
+    emitFormBlur,
+    emitFormInput,
+    emitFormChange,
+    emitFormFocus,
+    ariaAttrs: computed(() => {
+      if (!formField?.value) return;
+      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/useKbd.d.ts

@@ -0,0 +1,36 @@
+type KbdKeysSpecificMap = {
+    meta: string;
+    alt: string;
+    ctrl: string;
+};
+export declare const kbdKeysMap: {
+    meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
+    command: string;
+    shift: string;
+    control: string;
+    option: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
+export declare const useKbd: () => {
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
+    getKbdKey: (value?: KbdKey | string) => string | undefined;
+};
+export {};

package/dist/runtime/composables/useKbd.js

@@ -0,0 +1,53 @@
+import { reactive, computed, onMounted } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const kbdKeysMap = {
+  meta: "",
+  ctrl: "",
+  alt: "",
+  win: "\u229E",
+  command: "\u2318",
+  shift: "\u21E7",
+  control: "\u2303",
+  option: "\u2325",
+  enter: "\u21B5",
+  delete: "\u2326",
+  backspace: "\u232B",
+  escape: "\u238B",
+  tab: "\u21E5",
+  capslock: "\u21EA",
+  arrowup: "\u2191",
+  arrowright: "\u2192",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  pageup: "\u21DE",
+  pagedown: "\u21DF",
+  home: "\u2196",
+  end: "\u2198"
+};
+const _useKbd = () => {
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " "
+  });
+  onMounted(() => {
+    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) {
+      return;
+    }
+    if (["meta", "alt", "ctrl"].includes(value)) {
+      return kbdKeysSpecificMap[value];
+    }
+    return kbdKeysMap[value] || value.toUpperCase();
+  }
+  return {
+    macOS,
+    getKbdKey
+  };
+};
+export const useKbd = /* @__PURE__ */ createSharedComposable(_useKbd);

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

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { Locale, Messages } from '../types/locale';
+export declare const localeContextInjectionKey: InjectionKey<Ref<Locale<unknown> | undefined>>;
+export declare const useLocale: (localeOverrides?: Ref<Locale<Messages> | undefined>) => import("../utils/locale").LocaleContext<Messages>;

package/dist/runtime/composables/useLocale.js

@@ -0,0 +1,10 @@
+import { computed, inject, toRef } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+import { buildLocaleContext } from "../utils/locale.js";
+import en from "../locale/en.js";
+export const localeContextInjectionKey = Symbol.for("nuxt-ui.locale-context");
+const _useLocale = (localeOverrides) => {
+  const locale = localeOverrides || toRef(inject(localeContextInjectionKey));
+  return buildLocaleContext(computed(() => locale.value || en));
+};
+export const useLocale = /* @__PURE__ */ createSharedComposable(_useLocale);

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

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+import type { Messages, Locale } from '../types/locale';
+export declare const useLocalePro: (localeOverrides?: Ref<Locale<Messages> | undefined>) => import("../utils/locale").LocaleContext<Messages>;

package/dist/runtime/composables/useLocalePro.js

@@ -0,0 +1,11 @@
+import { computed, inject, toRef } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+import { buildLocaleContext } from "../utils/locale.js";
+import en from "../locale/en.js";
+import { localeContextInjectionKey } from "./useLocale.js";
+const _useLocalePro = (localeOverrides) => {
+  const injectedLocale = inject(localeContextInjectionKey);
+  const locale = localeOverrides || toRef(injectedLocale);
+  return buildLocaleContext(computed(() => locale.value || en));
+};
+export const useLocalePro = /* @__PURE__ */ createSharedComposable(_useLocalePro);

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

@@ -0,0 +1,38 @@
+import type { Component } from 'vue';
+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;
+};
+interface ManagedOverlayOptionsPrivate<T extends Component> {
+    component?: T;
+    id: symbol;
+    isMounted: boolean;
+    isOpen: boolean;
+    originalProps?: ComponentProps<T>;
+    resolvePromise?: (value: any) => void;
+}
+export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
+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>) => 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

@@ -0,0 +1,85 @@
+import { reactive, markRaw, shallowReactive } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+function _useOverlay() {
+  const overlays = shallowReactive([]);
+  const create = (component, _options) => {
+    const { props, defaultOpen, destroyOnClose } = _options || {};
+    const options = reactive({
+      id: Symbol(import.meta.dev ? "useOverlay" : ""),
+      isOpen: !!defaultOpen,
+      component: markRaw(component),
+      isMounted: !!defaultOpen,
+      destroyOnClose: !!destroyOnClose,
+      originalProps: props || {},
+      props: { ...props || {} }
+    });
+    overlays.push(options);
+    return {
+      ...options,
+      open: (props2) => open(options.id, props2),
+      close: (value) => close(options.id, value),
+      patch: (props2) => patch(options.id, props2)
+    };
+  };
+  const open = (id, props) => {
+    const overlay = getOverlay(id);
+    if (props) {
+      patch(overlay.id, props);
+    } else {
+      patch(overlay.id, overlay.originalProps);
+    }
+    overlay.isOpen = true;
+    overlay.isMounted = true;
+    return {
+      id,
+      isMounted: overlay.isMounted,
+      isOpen: overlay.isOpen,
+      result: new Promise((resolve) => overlay.resolvePromise = resolve)
+    };
+  };
+  const close = (id, value) => {
+    const overlay = getOverlay(id);
+    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;
+    if (overlay.destroyOnClose) {
+      const index = overlays.findIndex((overlay2) => overlay2.id === id);
+      overlays.splice(index, 1);
+    }
+  };
+  const patch = (id, props) => {
+    const overlay = getOverlay(id);
+    overlay.props = { ...props };
+  };
+  const getOverlay = (id) => {
+    const overlay = overlays.find((overlay2) => overlay2.id === id);
+    if (!overlay) {
+      throw new Error("Overlay not found");
+    }
+    return overlay;
+  };
+  const isOpen = (id) => {
+    const overlay = getOverlay(id);
+    return overlay.isOpen;
+  };
+  return {
+    overlays,
+    open,
+    close,
+    closeAll,
+    create,
+    patch,
+    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
+  }));
+}