@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -0,0 +1,248 @@
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue';
+import type { KbdProps } from '../types.js';
+declare const tooltip: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    content: string;
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    content: string;
+    arrow: string;
+    text: string;
+    kbds: string;
+    kbdsSize: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            text?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            kbds?: import("tailwind-variants").ClassValue;
+            arrow?: import("tailwind-variants").ClassValue;
+            kbdsSize?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>>;
+export interface TooltipProps extends TooltipRootProps {
+    /** The text content of the tooltip. */
+    text?: string;
+    /** The keyboard keys to display in the tooltip. */
+    kbds?: KbdProps['value'][] | KbdProps[];
+    /**
+     * The content of the tooltip.
+     * @defaultValue { side: 'bottom', sideOffset: 8 }
+     */
+    content?: Omit<TooltipContentProps, 'as' | 'asChild'>;
+    /**
+     * Display an arrow alongside the tooltip.
+     * @defaultValue false
+     */
+    arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>;
+    /**
+     * Render the tooltip in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean;
+    class?: any;
+    ui?: Partial<typeof tooltip.slots>;
+}
+export interface TooltipEmits extends TooltipRootEmits {
+}
+export interface TooltipSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<TooltipProps>, {
+    portal: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<TooltipProps>, {
+    portal: boolean;
+}>>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    portal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<TooltipSlots> & TooltipSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,13 +1,15 @@
-import type { WatchSource } from 'vue';
+import type { MaybeRef } from 'vue';
+type Handler = (e?: any) => void;
 export interface ShortcutConfig {
-    handler: Function;
+    handler: Handler;
     usingInput?: string | boolean;
-    whenever?: WatchSource<boolean>[];
 }
 export interface ShortcutsConfig {
-    [key: string]: ShortcutConfig | Function;
+    [key: string]: ShortcutConfig | Handler | false | null | undefined;
 }
 export interface ShortcutsOptions {
     chainDelay?: number;
 }
-export declare const defineShortcuts: (config: ShortcutsConfig, options?: ShortcutsOptions) => void;
+export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): void;
+export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -1,17 +1,35 @@
-import { ref, computed } from "vue";
-import { logicAnd, logicNot } from "@vueuse/math";
-import { useEventListener, useDebounceFn } from "@vueuse/core";
-import { useShortcuts } from "./useShortcuts.js";
+import { ref, computed, toValue } from "vue";
+import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+import { useKbd } from "../composables/useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
-export const defineShortcuts = (config, options = {}) => {
-  const { macOS, usingInput } = useShortcuts();
-  let shortcuts = [];
+export function extractShortcuts(items) {
+  const shortcuts = {};
+  function traverse(items2) {
+    items2.forEach((item) => {
+      if (item.kbds?.length && (item.select || item.click)) {
+        const shortcutKey = item.kbds.join("_");
+        shortcuts[shortcutKey] = item.select || item.click;
+      }
+      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;
@@ -21,19 +39,19 @@ export const defineShortcuts = (config, options = {}) => {
     chainedInputs.value.push(e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
-      for (const shortcut of shortcuts.filter((s) => s.chained)) {
+      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
         if (shortcut.key !== chainedKey) {
           continue;
         }
-        if (shortcut.condition.value) {
+        if (shortcut.enabled) {
           e.preventDefault();
-          shortcut.handler();
+          shortcut.handler(e);
         }
         clearChainedInput();
         return;
       }
     }
-    for (const shortcut of shortcuts.filter((s) => !s.chained)) {
+    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
       if (e.key.toLowerCase() !== shortcut.key) {
         continue;
       }
@@ -46,7 +64,7 @@ export const defineShortcuts = (config, options = {}) => {
       if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
-      if (shortcut.condition.value) {
+      if (shortcut.enabled) {
         e.preventDefault();
         shortcut.handler();
       }
@@ -55,58 +73,69 @@ export const defineShortcuts = (config, options = {}) => {
     }
     debouncedClearChainedInput();
   };
-  shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
-    if (!shortcutConfig) {
-      return null;
-    }
-    let shortcut;
-    if (key.includes("-") && key !== "-" && !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 !== "-";
-    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", "ctrl", "shift", "alt"].includes(k)).join("_"),
-        metaKey: keySplit.includes("meta"),
-        ctrlKey: keySplit.includes("ctrl"),
-        shiftKey: keySplit.includes("shift"),
-        altKey: keySplit.includes("alt")
-      };
-    }
-    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;
+  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;
     }
-    const conditions = [];
-    if (!shortcutConfig.usingInput) {
-      conditions.push(logicNot(usingInput));
-    } else if (typeof shortcutConfig.usingInput === "string") {
-      conditions.push(computed(() => usingInput.value === shortcutConfig.usingInput));
-    }
-    shortcut.condition = logicAnd(...conditions, ...shortcutConfig.whenever || []);
-    return shortcut;
-  }).filter(Boolean);
+    return false;
+  });
+  const shortcuts = computed(() => {
+    return Object.entries(toValue(config)).map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+      let shortcut;
+      if (key.includes("-") && key !== "-" && !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 !== "-";
+      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);
+  });
   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.js';
+export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: AvatarGroupProps['size'];
+}>>;
+export declare function useAvatarGroup(props: {
+    size: AvatarGroupProps['size'];
+}): {
+    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "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

@@ -1,20 +1,15 @@
-import type { Ref } from 'vue';
-import { buttonGroup } from '#ui/ui.config';
-type ButtonGroupProps = {
-    orientation?: Ref<'horizontal' | 'vertical'>;
-    size?: Ref<string>;
-    ui?: Ref<Partial<typeof buttonGroup>>;
-    rounded?: Ref<{
-        start: string;
-        end: string;
-    }>;
+import { type InjectionKey, type ComputedRef } from 'vue';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
+import type { GetObjectField } from '../types/utils.js';
+export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
+    size: ButtonGroupProps['size'];
+    orientation: ButtonGroupProps['orientation'];
+}>>;
+type Props<T> = {
+    size?: GetObjectField<T, 'size'>;
 };
-export declare function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps): void;
-export declare function useInjectButtonGroup({ ui, props }: {
-    ui: any;
-    props: any;
-}): {
-    size: import("vue").ComputedRef<any>;
-    rounded: import("vue").ComputedRef<any>;
+export declare function useButtonGroup<T>(props: Props<T>): {
+    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
+    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
 };
 export {};

package/dist/runtime/composables/useButtonGroup.js

@@ -1,59 +1,9 @@
-import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from "vue";
-export function useProvideButtonGroup(buttonGroupProps) {
-  const instance = getCurrentInstance();
-  const groupKey = `group-${instance.uid}`;
-  const state = ref({
-    children: [],
-    register(child) {
-      this.children.push(child);
-    },
-    unregister(child) {
-      const index = this.children.indexOf(child);
-      if (index > -1) {
-        this.children.splice(index, 1);
-      }
-    },
-    ...buttonGroupProps
-  });
-  provide(groupKey, state);
-}
-export function useInjectButtonGroup({ ui, props }) {
-  const instance = getCurrentInstance();
-  provide("ButtonGroupContextConsumer", true);
-  const isParentPartOfGroup = inject("ButtonGroupContextConsumer", false);
-  if (isParentPartOfGroup) {
-    return {
-      size: computed(() => props.size),
-      rounded: computed(() => ui.value.rounded)
-    };
-  }
-  let parent = instance.parent;
-  let groupContext;
-  while (parent && !groupContext) {
-    if (parent.type.name === "ButtonGroup") {
-      groupContext = inject(`group-${parent.uid}`);
-      break;
-    }
-    parent = parent.parent;
-  }
-  const positionInGroup = computed(() => groupContext?.value.children.indexOf(instance));
-  onMounted(() => {
-    groupContext?.value.register(instance);
-  });
-  onUnmounted(() => {
-    groupContext?.value.unregister(instance);
-  });
+import { inject, computed } from "vue";
+export const buttonGroupInjectionKey = Symbol("nuxt-ui.button-group");
+export function useButtonGroup(props) {
+  const buttonGroup = inject(buttonGroupInjectionKey, void 0);
   return {
-    size: computed(() => {
-      if (!groupContext?.value) return props.size;
-      return groupContext?.value.size ?? ui.value.default.size;
-    }),
-    rounded: computed(() => {
-      if (!groupContext || positionInGroup.value === -1) return ui.value.rounded;
-      if (groupContext.value.children.length === 1) return groupContext.value.ui.rounded;
-      if (positionInGroup.value === 0) return groupContext.value.rounded.start;
-      if (positionInGroup.value === groupContext.value.children.length - 1) return groupContext.value.rounded.end;
-      return "rounded-none";
-    })
+    orientation: computed(() => buttonGroup?.value.orientation),
+    size: computed(() => props?.size ?? buttonGroup?.value.size)
   };
 }

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

@@ -0,0 +1,26 @@
+import { type MaybeRefOrGetter } from 'vue';
+export interface UseComponentIconsProps {
+    /** Display an icon based on the `leading` and `trailing` props. */
+    icon?: string;
+    /** When `true`, the icon will be displayed on the left side. */
+    leading?: boolean;
+    /** Display an icon on the left side. */
+    leadingIcon?: string;
+    /** When `true`, the icon will be displayed on the right side. */
+    trailing?: boolean;
+    /** Display an icon on the right side. */
+    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
+     */
+    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
+  };
+}