@byyuurin/ui 0.0.11 → 0.2.0

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

@@ -0,0 +1,16 @@
+import type { MaybeRef } from 'vue';
+import type { Nullable } from '../types/utils';
+type Handler = (e?: any) => void;
+export interface ShortcutConfig {
+    handler: Handler;
+    usingInput?: string | boolean;
+}
+export interface ShortcutsConfig {
+    [key: string]: Nullable<ShortcutConfig | Handler | false>;
+}
+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 {};

package/dist/runtime/composables/defineShortcuts.js

@@ -0,0 +1,129 @@
+import { useActiveElement, useDebounceFn, useEventListener } from "@vueuse/core";
+import { computed, ref, toValue } from "vue";
+import { useKbd } from "./useKbd.js";
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
+const shiftableKeys = /* @__PURE__ */ new Set(["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"]);
+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 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);
+  });
+  const onKeyDown = (e) => {
+    if (!e.key)
+      return;
+    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = shiftableKeys.has(e.key.toLowerCase());
+    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 ((alphabetKey || shiftableKey) && e.shiftKey !== shortcut.shiftKey)
+        continue;
+      if (shortcut.enabled) {
+        e.preventDefault();
+        shortcut.handler(e);
+      }
+      clearChainedInput();
+      return;
+    }
+    debouncedClearChainedInput();
+  };
+  return useEventListener("keydown", onKeyDown);
+}

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

@@ -1,4 +1,9 @@
-import type { AvatarProps } from '../types/index.js';
-export declare function useAvatarGroup(props?: AvatarProps): {
-    size: import("vue").ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | undefined>;
+import type { ComputedRef } from 'vue';
+import type { AvatarGroupProps } from '../types';
+export type AvatarGroupProvideValue = Pick<AvatarGroupProps, 'size'>;
+export declare const InjectionKeyAvatarGroup: import("vue").InjectionKey<ComputedRef<AvatarGroupProvideValue>>, injectAvatarGroup: () => ComputedRef<AvatarGroupProvideValue> | undefined, provideAvatarGroup: (value: ComputedRef<AvatarGroupProvideValue>) => void;
+export declare function useAvatarGroup(props: {
+    size: AvatarGroupProps['size'];
+}): {
+    size: ComputedRef<"2xl" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "3xl" | undefined>;
 };

package/dist/runtime/composables/useAvatarGroup.js

@@ -1,8 +1,15 @@
 import { computed } from "vue";
-import { injectAvatarGroup } from "../app/injections.js";
-export function useAvatarGroup(props = {}) {
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyAvatarGroup,
+  inject: injectAvatarGroup,
+  provide: provideAvatarGroup
+} = defineInjection("ui.avatar-group");
+export function useAvatarGroup(props) {
   const avatarGroup = injectAvatarGroup();
+  const size = computed(() => props.size ?? avatarGroup?.value.size);
+  provideAvatarGroup(computed(() => ({ size: size.value })));
   return {
-    size: computed(() => props.size ?? avatarGroup?.value.size)
+    size
   };
 }

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

@@ -1,26 +1,29 @@
 import { type MaybeRefOrGetter } from 'vue';
+import type { AvatarProps, IconProps } from '../types';
 export interface UseComponentIconsProps {
     /** Display an icon based on the `leading` and `trailing` props. */
-    icon?: string;
+    icon?: IconProps['name'];
+    /** 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. */
-    leadingIcon?: string;
+    leadingIcon?: IconProps['name'];
     /** When `true`, the icon will be displayed on the right side. */
     trailing?: boolean;
     /** Display an icon on the right side. */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**
      * The icon when the `loading` prop is `true`.
      * @default app.icons.loading
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<boolean>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<string | undefined>;
-    trailingIconName: import("vue").ComputedRef<string | undefined>;
+    leadingIconName: import("vue").ComputedRef<any>;
+    trailingIconName: import("vue").ComputedRef<any>;
 };

package/dist/runtime/composables/useComponentIcons.js

@@ -1,18 +1,18 @@
 import { computed, toValue } from "vue";
-import { useTheme } from "./useTheme.js";
+import { useAppConfig } from "#imports";
 export function useComponentIcons(componentProps) {
-  const { theme } = useTheme();
+  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 || theme.value.app.icons.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 || theme.value.app.icons.loading;
+      return props.value.loadingIcon || appConfig.ui.icons.loading;
     return props.value.trailingIcon || props.value.icon;
   });
   return {

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

@@ -0,0 +1,8 @@
+import type { ComputedRef } from 'vue';
+import type { ButtonProps, FieldGroupProps } from '../types';
+export type FieldGroupProvideValue = Pick<FieldGroupProps, 'size' | 'orientation'>;
+export declare const InjectionKeyFieldGroup: import("vue").InjectionKey<ComputedRef<FieldGroupProvideValue>>, injectFieldGroup: () => ComputedRef<FieldGroupProvideValue> | undefined, provideFieldGroup: (value: ComputedRef<FieldGroupProvideValue>) => void;
+export declare function useFieldGroup(props?: Pick<ButtonProps, 'size'>): {
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | undefined>;
+    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
+};

package/dist/runtime/composables/useFieldGroup.js

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyFieldGroup,
+  inject: injectFieldGroup,
+  provide: provideFieldGroup
+} = defineInjection("ui.field-group");
+export function useFieldGroup(props = {}) {
+  const fieldGroup = injectFieldGroup();
+  return {
+    size: computed(() => props.size ?? fieldGroup?.value.size),
+    orientation: computed(() => fieldGroup?.value.orientation)
+  };
+}

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

@@ -0,0 +1,62 @@
+import type { UseEventBusReturn } from '@vueuse/core';
+import type { ComputedRef, Ref } from 'vue';
+import type { FormErrorWithId, FormEvent, FormFieldProps } from '../types';
+import type { GetObjectField, MaybeNull } from '../types/utils';
+export interface FormOptionsProvideValue {
+    disabled: boolean;
+    validateOnInputDelay: number;
+}
+export declare const InjectionKeyFormOptions: import("vue").InjectionKey<ComputedRef<FormOptionsProvideValue>>, injectFormOptions: () => ComputedRef<FormOptionsProvideValue> | undefined, provideFormOptions: (value: ComputedRef<FormOptionsProvideValue>) => void;
+export type FormBusProvideValue = UseEventBusReturn<FormEvent<any>, string>;
+export declare const InjectionKeyFormBus: import("vue").InjectionKey<FormBusProvideValue>, injectFormBus: () => FormBusProvideValue | undefined, provideFormBus: (value: FormBusProvideValue) => void;
+export type FormStateProvideValue = Record<string, any>;
+export declare const InjectionKeyFormState: import("vue").InjectionKey<ComputedRef<FormStateProvideValue>>, injectFormState: () => ComputedRef<FormStateProvideValue> | undefined, provideFormState: (value: ComputedRef<FormStateProvideValue>) => void;
+export interface FormFieldProvideValue<T> {
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    error?: string | boolean;
+    eagerValidation?: boolean;
+    validateOnInputDelay?: number;
+    errorPattern?: RegExp;
+    hint?: string;
+    help?: string;
+    description?: string;
+    ariaId: string;
+}
+export declare const InjectionKeyFormField: import("vue").InjectionKey<ComputedRef<FormFieldProvideValue<FormFieldProps>>>, injectFormField: () => ComputedRef<FormFieldProvideValue<FormFieldProps>> | undefined, provideFormField: (value: ComputedRef<FormFieldProvideValue<FormFieldProps>>) => void;
+export declare const InjectionKeyFormInputId: import("vue").InjectionKey<Ref<string | undefined, string | undefined>>, injectFormInputId: () => Ref<string | undefined, string | undefined> | undefined, provideFormInputId: (value: Ref<string | undefined, string | undefined>) => void;
+export type FormInputsProvideValue = Record<string, {
+    id?: string;
+    pattern?: RegExp;
+}>;
+export declare const InjectionKeyFormInputs: import("vue").InjectionKey<Ref<FormInputsProvideValue, FormInputsProvideValue>>, injectFormInputs: () => Ref<FormInputsProvideValue, FormInputsProvideValue> | undefined, provideFormInputs: (value: Ref<FormInputsProvideValue, FormInputsProvideValue>) => void;
+export declare const InjectionKeyFormLoading: import("vue").InjectionKey<Readonly<Ref<boolean, boolean>>>, injectFormLoading: () => Readonly<Ref<boolean, boolean>> | undefined, provideFormLoading: (value: Readonly<Ref<boolean, boolean>>) => void;
+export declare const InjectionKeyFormErrors: import("vue").InjectionKey<MaybeNull<Ref<FormErrorWithId[], FormErrorWithId[]>>>, injectFormErrors: () => MaybeNull<Ref<FormErrorWithId[], FormErrorWithId[]>>, provideFormErrors: (value: MaybeNull<Ref<FormErrorWithId[], FormErrorWithId[]>>) => void;
+interface Props<T> {
+    id?: string;
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    color?: GetObjectField<T, 'color'>;
+    highlight?: boolean;
+    disabled?: boolean;
+}
+export declare function useFormField<T>(props?: Props<T>, options?: {
+    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/core").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,99 @@
+import { useDebounceFn } from "@vueuse/core";
+import { computed } from "vue";
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyFormOptions,
+  inject: injectFormOptions,
+  provide: provideFormOptions
+} = defineInjection("ui.form-options");
+export const {
+  InjectionKey: InjectionKeyFormBus,
+  inject: injectFormBus,
+  provide: provideFormBus
+} = defineInjection("ui.form-bus");
+export const {
+  InjectionKey: InjectionKeyFormState,
+  inject: injectFormState,
+  provide: provideFormState
+} = defineInjection("ui.form-state");
+export const {
+  InjectionKey: InjectionKeyFormField,
+  inject: injectFormField,
+  provide: provideFormField
+} = defineInjection("ui.form-field");
+export const {
+  InjectionKey: InjectionKeyFormInputId,
+  inject: injectFormInputId,
+  provide: provideFormInputId
+} = defineInjection("ui.form-input-id");
+export const {
+  InjectionKey: InjectionKeyFormInputs,
+  inject: injectFormInputs,
+  provide: provideFormInputs
+} = defineInjection("ui.form-inputs");
+export const {
+  InjectionKey: InjectionKeyFormLoading,
+  inject: injectFormLoading,
+  provide: provideFormLoading
+} = defineInjection("ui.form-loading");
+export const {
+  InjectionKey: InjectionKeyFormErrors,
+  inject: injectFormErrors,
+  provide: provideFormErrors
+} = defineInjection("ui.form-errors", null);
+export function useFormField(props, options) {
+  const formOptions = injectFormOptions();
+  const formBus = injectFormBus();
+  const formField = injectFormField();
+  const formInputs = injectFormInputs();
+  const inputId = injectFormInputId();
+  if (formField && inputId) {
+    if (options?.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, !options?.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", "help", "description"].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

@@ -28,8 +28,9 @@ export declare const kbdKeysMap: {
 };
 export type KbdKey = keyof typeof kbdKeysMap;
 export type KbdKeySpecific = keyof KbdKeysSpecificMap;
-export declare const useKbd: () => {
-    macOS: import("vue").ComputedRef<any>;
+declare function _useKbd(): {
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null>;
     getKbdKey: (value?: KbdKey | (string & {})) => string | undefined;
 };
+export declare const useKbd: typeof _useKbd;
 export {};

package/dist/runtime/composables/useKbd.js

@@ -23,7 +23,7 @@ export const kbdKeysMap = {
   home: "\u2196",
   end: "\u2198"
 };
-export const useKbd = createSharedComposable(() => {
+function _useKbd() {
   const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
   const kbdKeysSpecificMap = reactive({
     meta: " ",
@@ -46,4 +46,5 @@ export const useKbd = createSharedComposable(() => {
     macOS,
     getKbdKey
   };
-});
+}
+export const useKbd = /* @__PURE__ */ createSharedComposable(_useKbd);

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

@@ -1,8 +1,71 @@
-import type { Translator } from '../utils/translator.js';
-export declare const useLocale: () => {
-    locale: import("vue").ComputedRef<import("../utils/index.js").Locale<import("../types/index.js").Messages>>;
+import type { Translator } from '@byyuurin/ui-kit';
+import type { MaybeRefOrGetter } from 'vue';
+import type { Messages } from '../types';
+export declare const InjectionKeyLocaleContext: import("vue").InjectionKey<MaybeRefOrGetter<Required<import("@byyuurin/ui-kit").Locale<Messages>> | undefined>>, injectLocaleContext: () => MaybeRefOrGetter<Required<import("@byyuurin/ui-kit").Locale<Messages>> | undefined>, provideLocaleContext: (value: MaybeRefOrGetter<Required<import("@byyuurin/ui-kit").Locale<Messages>> | undefined>) => void;
+declare function _useLocale(): {
+    locale: import("vue").ComputedRef<Required<import("@byyuurin/ui-kit").Locale<{
+        alert: {
+            close: string;
+        };
+        calendar: {
+            prevYear: string;
+            nextYear: string;
+            prevMonth: string;
+            nextMonth: string;
+        };
+        carousel: {
+            dots: string;
+            prev: string;
+            next: string;
+            goto: string;
+        };
+        inputNumber: {
+            increment: string;
+            decrement: string;
+        };
+        modal: {
+            close: string;
+        };
+        table: {
+            noData: string;
+        };
+        toast: {
+            close: string;
+        };
+    }>>>;
     lang: import("vue").ComputedRef<string>;
     code: import("vue").ComputedRef<string>;
-    dir: import("vue").ComputedRef<import("../utils/index.js").Direction>;
-    t: Translator<import("../types/index.js").Messages>;
+    dir: import("vue").ComputedRef<import("@byyuurin/ui-kit").LocaleDirection>;
+    t: Translator<{
+        alert: {
+            close: string;
+        };
+        calendar: {
+            prevYear: string;
+            nextYear: string;
+            prevMonth: string;
+            nextMonth: string;
+        };
+        carousel: {
+            dots: string;
+            prev: string;
+            next: string;
+            goto: string;
+        };
+        inputNumber: {
+            increment: string;
+            decrement: string;
+        };
+        modal: {
+            close: string;
+        };
+        table: {
+            noData: string;
+        };
+        toast: {
+            close: string;
+        };
+    }>;
 };
+export declare const useLocale: typeof _useLocale;
+export {};

package/dist/runtime/composables/useLocale.js

@@ -1,9 +1,14 @@
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
-import { injectLocaleContext } from "../app/injections.js";
 import localeDefault from "../locale/en.js";
-import { createTranslator } from "../utils/index.js";
-export const useLocale = createSharedComposable(() => {
+import { defineInjection } from "../utils/index.js";
+import { createTranslator } from "../utils/locale.js";
+export const {
+  InjectionKey: InjectionKeyLocaleContext,
+  inject: injectLocaleContext,
+  provide: provideLocaleContext
+} = defineInjection("ui.locale-context");
+function _useLocale() {
   const _locale = injectLocaleContext();
   const locale = computed(() => toValue(_locale) ?? localeDefault);
   const lang = computed(() => locale.value.name);
@@ -12,11 +17,6 @@ export const useLocale = createSharedComposable(() => {
   const t = (path, options) => {
     return createTranslator(toValue(locale))(path, options);
   };
-  return {
-    locale,
-    lang,
-    code,
-    dir,
-    t
-  };
-});
+  return { locale, lang, code, dir, t };
+}
+export const useLocale = import.meta.client ? createSharedComposable(_useLocale) : _useLocale;

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

@@ -1,29 +1,65 @@
 import type { Component } from 'vue';
-import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
+/**
+ * This is a workaround for a design limitation in TypeScript.
+ *
+ * Conditional types only match the last function overload, not a union of all possible
+ * parameter types. This workaround forces TypeScript to properly extract the 'close'
+ * event argument type from component emits with multiple event signatures.
+ *
+ * @see https://github.com/microsoft/TypeScript/issues/32164
+ */
+type CloseEventArgType<T> = T extends {
+    (event: 'close', arg_0: infer Arg, ...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+    (...args: any[]): void;
+} ? Arg : never;
 export interface OverlayOptions<ComponentProps = Record<string, any>> {
     defaultOpen?: boolean;
     props?: ComponentProps;
     unmountOnHide?: boolean;
 }
-interface _ComponentState<T extends Component> {
+interface OverlayOptionsPrivate<T extends Component> {
     component?: T;
-    id: string | number;
+    id: symbol;
     isMounted: boolean;
-    modelValue: boolean;
-    resolve?: (value: unknown) => void;
+    isOpen: boolean;
+    originalProps?: ComponentProps<T>;
+    resolvePromise?: (value: unknown) => void;
 }
-export type OverlayComponentState = OverlayOptions<Component> & _ComponentState<Component>;
-export interface OverlayComponentInstance<T> {
-    open: (props?: ComponentProps<T>) => Promise<any>;
+export type Overlay = OverlayOptions<Component> & OverlayOptionsPrivate<Component>;
+type OpenedOverlay<T extends Component> = Omit<OverlayInstance<T>, 'open' | 'close' | 'patch' | 'modelValue' | 'resolvePromise'> & {
+    result: Promise<CloseEventArgType<ComponentEmit<T>>>;
+} & Promise<CloseEventArgType<ComponentEmit<T>>>;
+export interface OverlayInstance<T extends Component> {
+    id: symbol;
+    open: (props?: ComponentProps<T>) => OpenedOverlay<T>;
     close: (value?: any) => void;
     patch: (props: Partial<ComponentProps<T>>) => void;
 }
-export declare const useOverlay: () => {
-    overlays: import("vue").ShallowReactive<OverlayComponentState[]>;
-    open: <T extends Component>(id: OverlayComponentState["id"], props?: ComponentProps<T>) => Promise<any>;
-    close: (id: OverlayComponentState["id"], value?: any) => void;
-    create: <T extends Component>(component: T, options?: OverlayOptions<ComponentProps<T>>) => OverlayComponentInstance<T>;
-    patch: <T extends Component>(id: OverlayComponentState["id"], props: Partial<ComponentProps<T>>) => void;
-    unmount: (id: OverlayComponentState["id"]) => void;
+declare function _useOverlay(): {
+    overlays: import("vue").ShallowReactive<Overlay[]>;
+    open: <T extends Component>(id: Overlay["id"], 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 {};