@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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

@@ -0,0 +1,24 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-palette';
+import type { ComponentConfig } from '../types/tv';
+type ChatPalette = ComponentConfig<typeof theme, AppConfig, 'chatPalette'>;
+export interface ChatPaletteProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: ChatPalette['slots'];
+}
+export interface ChatPaletteSlots {
+    default(props?: {}): any;
+    prompt(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPrompt.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/ui/chat-prompt";
+</script>
+
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { Primitive, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { omit, transformUI } from "../utils";
+import { tv } from "../utils/tv";
+import UTextarea from "./Textarea.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "form" },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false, default: true },
+  autoresize: { type: Boolean, required: false, default: true },
+  rows: { type: Number, required: false, default: 1 },
+  variant: { type: null, required: false },
+  error: { type: Error, required: false },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false }
+});
+const emits = defineEmits(["submit", "close"]);
+const slots = defineSlots();
+const model = defineModel({ type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
+const proxySlots = omit(slots, ["header", "footer"]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+  variant: props.variant
+}));
+function submit(e) {
+  if (model.value.trim() === "") {
+    return;
+  }
+  emits("submit", e);
+}
+function blur(e) {
+  textarea.value?.textareaRef?.blur();
+  emits("close", e);
+}
+const textarea = useTemplateRef("textarea");
+defineExpose({
+  textareaRef: textarea.value?.textareaRef
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <UTextarea
+      ref="textarea"
+      v-model="model"
+      :placeholder="placeholder || t('chatPrompt.placeholder')"
+      :disabled="Boolean(error)"
+      variant="none"
+      v-bind="{ ...textareaProps, ...$attrs }"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      :class="ui.body({ class: props.ui?.body })"
+      @keydown.enter.exact.prevent="submit"
+      @keydown.esc="blur"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UTextarea>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt';
+import type { TextareaProps, TextareaSlots } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
+export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'form'
+     */
+    as?: any;
+    /**
+     * The placeholder text for the textarea.
+     * @defaultValue t('chatPrompt.placeholder')
+     */
+    placeholder?: string;
+    autofocus?: TextareaProps['autofocus'];
+    autoresize?: TextareaProps['autoresize'];
+    rows?: TextareaProps['rows'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: ChatPrompt['variants']['variant'];
+    error?: Error;
+    class?: any;
+    ui?: ChatPrompt['slots'] & TextareaProps['ui'];
+}
+export interface ChatPromptEmits {
+    submit: [event: Event];
+    close: [event: Event];
+}
+export interface ChatPromptSlots extends TextareaSlots {
+    header(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
+    modelValue?: string;
+}, {
+    textareaRef: HTMLTextAreaElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: Event) => any;
+    submit: (event: Event) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptProps & {
+    modelValue?: string;
+}> & Readonly<{
+    onClose?: ((event: Event) => any) | undefined;
+    onSubmit?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    as: any;
+    autofocus: boolean;
+    rows: number;
+    autoresize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/ui/chat-prompt-submit";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { transformUI } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  status: { type: String, required: false, default: "ready" },
+  icon: { type: [String, Object], required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  streamingIcon: { type: [String, Object], required: false },
+  streamingColor: { type: null, required: false, default: "neutral" },
+  streamingVariant: { type: null, required: false, default: "subtle" },
+  submittedIcon: { type: [String, Object], required: false },
+  submittedColor: { type: null, required: false, default: "neutral" },
+  submittedVariant: { type: null, required: false, default: "subtle" },
+  errorIcon: { type: [String, Object], required: false },
+  errorColor: { type: null, required: false, default: "error" },
+  errorVariant: { type: null, required: false, default: "soft" },
+  ui: { type: void 0, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["stop", "reload"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const buttonProps = computed(() => ({
+  ready: {
+    icon: props.icon || appConfig.ui.icons.arrowUp,
+    color: props.color,
+    variant: props.variant,
+    type: "submit"
+  },
+  submitted: {
+    icon: props.submittedIcon || appConfig.ui.icons.stop,
+    color: props.submittedColor,
+    variant: props.submittedVariant,
+    onClick() {
+      emits("stop");
+    }
+  },
+  streaming: {
+    icon: props.streamingIcon || appConfig.ui.icons.stop,
+    color: props.streamingColor,
+    variant: props.streamingVariant,
+    onClick() {
+      emits("stop");
+    }
+  },
+  error: {
+    icon: props.errorIcon || appConfig.ui.icons.reload,
+    color: props.errorColor,
+    variant: props.errorVariant,
+    onClick() {
+      emits("reload");
+    }
+  }
+})[props.status]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+</script>
+
+<template>
+  <UButton
+    :aria-label="t('chatPromptSubmit.label')"
+    v-bind="buttonProps"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(ui, props.ui)"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UButton>
+</template>

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

@@ -0,0 +1,100 @@
+import type { ChatStatus } from 'ai';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt-submit';
+import type { ButtonProps, ButtonSlots, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
+export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+    status?: ChatStatus;
+    /**
+     * The icon displayed in the button when the status is `ready`.
+     * @defaultValue appConfig.ui.icons.arrowUp
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `ready`.
+     * @defaultValue 'primary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `ready`.
+     * @defaultValue 'solid'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `streaming`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    streamingIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `streaming`.
+     * @defaultValue 'neutral'
+     */
+    streamingColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `streaming`.
+     * @defaultValue 'subtle'
+     */
+    streamingVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `submitted`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    submittedIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `submitted`.
+     * @defaultValue 'neutral'
+     */
+    submittedColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `submitted`.
+     * @defaultValue 'subtle'
+     */
+    submittedVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `error`.
+     * @defaultValue appConfig.ui.icons.reload
+     * @IconifyIcon
+     */
+    errorIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `error`.
+     * @defaultValue 'error'
+     */
+    errorColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `error`.
+     * @defaultValue 'soft'
+     */
+    errorVariant?: ButtonProps['variant'];
+    ui?: ChatPromptSubmit['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+export interface ChatPromptSubmitEmits {
+    stop: [];
+    reload: [];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    stop: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
+    onStop?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {
+    status: ChatStatus;
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Checkbox.vue

@@ -19,8 +19,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   indicator: { type: null, required: false },
-  icon: { type: String, required: false },
-  indeterminateIcon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  indeterminateIcon: { type: [String, Object], required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   disabled: { type: Boolean, required: false },

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

@@ -1,7 +1,8 @@
 import type { CheckboxRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { ComponentConfig } from '../types/utils';
+import type { IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
 export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
     /**
@@ -33,13 +34,13 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     /**
      * The icon displayed when the checkbox is indeterminate.
      * @defaultValue appConfig.ui.icons.minus
      * @IconifyIcon
      */
-    indeterminateIcon?: string;
+    indeterminateIcon?: IconProps['name'];
     class?: any;
     ui?: Checkbox['slots'];
 }

package/dist/runtime/components/CheckboxGroup.vue

@@ -31,7 +31,7 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   color: { type: null, required: false },
   indicator: { type: null, required: false },
-  icon: { type: String, required: false }
+  icon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();

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

@@ -2,7 +2,8 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, ComponentConfig } from '../types/utils';
+import type { AcceptableValue } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
 export type CheckboxGroupItem = {

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chip';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Chip = ComponentConfig<typeof theme, AppConfig, 'chip'>;
 export interface ChipProps {
     /**

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

@@ -1,7 +1,7 @@
 import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/collapsible';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Collapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible'>;
 export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
     /**

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/color-picker';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ColorPicker = ComponentConfig<typeof theme, AppConfig, 'colorPicker'>;
 export type ColorPickerProps = {
     /**
@@ -41,8 +41,8 @@ declare const _default: import("vue").DefineComponent<ColorPickerProps & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
     defaultValue: string;
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
     throttle: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/CommandPalette.vue

@@ -24,15 +24,15 @@ import UInput from "./Input.vue";
 import UKbd from "./Kbd.vue";
 const props = defineProps({
   as: { type: null, required: false },
-  icon: { type: String, required: false },
-  selectedIcon: { type: String, required: false },
-  trailingIcon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  trailingIcon: { type: [String, Object], required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
-  closeIcon: { type: String, required: false },
+  closeIcon: { type: [String, Object], required: false },
   back: { type: [Boolean, Object], required: false, default: true },
-  backIcon: { type: String, required: false },
+  backIcon: { type: [String, Object], required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   labelKey: { type: String, required: false, default: "label" },
@@ -45,7 +45,7 @@ const props = defineProps({
   highlightOnHover: { type: Boolean, required: false },
   selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
 const slots = defineSlots();

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

@@ -3,8 +3,8 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
 export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     prefix?: string;
@@ -13,7 +13,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     chip?: ChipProps;
     kbds?: KbdProps['value'][] | KbdProps[];
@@ -48,7 +48,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
      * The icon displayed when an item is highlighted.
      * @IconifyIcon
      */
-    highlightedIcon?: string;
+    highlightedIcon?: IconProps['name'];
 }
 export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
@@ -61,19 +61,19 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    selectedIcon?: string;
+    selectedIcon?: IconProps['name'];
     /**
      * The icon displayed when an item has children.
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -96,7 +96,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
     /**
      * Display a button to navigate back in history.
      * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
@@ -108,7 +108,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue appConfig.ui.icons.arrowLeft
      * @IconifyIcon
      */
-    backIcon?: string;
+    backIcon?: IconProps['name'];
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).

package/dist/runtime/components/ContextMenu.vue

@@ -13,9 +13,9 @@ import UContextMenuContent from "./ContextMenuContent.vue";
 const props = defineProps({
   size: { type: null, required: false },
   items: { type: null, required: false },
-  checkedIcon: { type: String, required: false },
-  loadingIcon: { type: String, required: false },
-  externalIcon: { type: [Boolean, String], required: false, default: true },
+  checkedIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  externalIcon: { type: [Boolean, String, Object], required: false, default: true },
   content: { type: Object, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },

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

@@ -1,15 +1,16 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/context-menu';
-import type { AvatarProps, KbdProps, LinkProps } from '../types';
-import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     color?: ContextMenu['variants']['color'];
     avatar?: AvatarProps;
     content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>;
@@ -43,20 +44,20 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is loading.
      * @defaultValue appConfig.ui.icons.loading
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * The icon displayed when the item is an external link.
      * Set to `false` to hide the external icon.
      * @defaultValue appConfig.ui.icons.external
      * @IconifyIcon
      */
-    externalIcon?: boolean | string;
+    externalIcon?: boolean | IconProps['name'];
     /** The content of the menu. */
     content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>;
     /**

package/dist/runtime/components/ContextMenuContent.vue

@@ -23,9 +23,9 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true },
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
-  checkedIcon: { type: String, required: false },
-  loadingIcon: { type: String, required: false },
-  externalIcon: { type: [Boolean, String], required: false },
+  checkedIcon: { type: [String, Object], required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  externalIcon: { type: [Boolean, String, Object], required: false },
   class: { type: null, required: false },
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },

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

@@ -2,8 +2,9 @@ import { ContextMenu } from 'reka-ui/namespaced';
 import type { ContextMenuContentProps as RekaContextMenuContentProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/context-menu';
-import type { ContextMenuItem, ContextMenuSlots } from '../types';
-import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
+import type { ContextMenuItem, ContextMenuSlots, IconProps } from '../types';
+import type { ArrayOrNested, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> extends Omit<RekaContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
     items?: T;
@@ -13,15 +14,15 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     /**
      * @IconifyIcon
      */
-    checkedIcon?: string;
+    checkedIcon?: IconProps['name'];
     /**
      * @IconifyIcon
      */
-    loadingIcon?: string;
+    loadingIcon?: IconProps['name'];
     /**
      * @IconifyIcon
      */
-    externalIcon?: boolean | string;
+    externalIcon?: boolean | IconProps['name'];
     class?: any;
     ui: {
         [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;