@nuxt/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

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

@@ -4,16 +4,17 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ChipProps } from '../types';
+import type { AvatarProps, ChipProps, IconProps } from '../types';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
-interface _InputMenuItem {
+export type InputMenuValue = AcceptableValue;
+export type InputMenuItem = InputMenuValue | {
     label?: string;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     chip?: ChipProps;
     /**
@@ -26,8 +27,7 @@ interface _InputMenuItem {
     class?: any;
     ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
-}
-export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean;
+};
 export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
     /**
      * The element or component this component should render as.
@@ -58,20 +58,20 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    selectedIcon?: string;
+    selectedIcon?: IconProps['name'];
     /**
      * The icon displayed to delete a tag.
      * Works only when `multiple` is `true`.
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    deleteIcon?: string;
+    deleteIcon?: IconProps['name'];
     /**
      * The content of the menu.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
@@ -96,7 +96,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * When `items` is an array of objects, select the field to use as the label.
      * @defaultValue 'label'
      */
-    labelKey?: keyof NestedItem<T>;
+    labelKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -128,9 +128,9 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
     ui?: InputMenu['slots'];
 }
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-    'change': [payload: Event];
-    'blur': [payload: FocusEvent];
-    'focus': [payload: FocusEvent];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
     'create': [item: string];
     /** Event handler when highlighted element changes. */
     'highlight': [
@@ -177,12 +177,12 @@ export interface InputMenuSlots<A extends ArrayOrNested<InputMenuItem> = ArrayOr
 }
 declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((payload: FocusEvent) => any) | undefined;
-        readonly onChange?: ((payload: Event) => any) | undefined;
-        readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
         readonly onCreate?: ((item: string) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: GetModelValue<T, VK, M>;
@@ -191,7 +191,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
         readonly "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
@@ -317,7 +317,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
     }>): void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);

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

@@ -0,0 +1,188 @@
+import type { NumberFieldRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input-number';
+import type { ButtonProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
+import type { ComponentConfig } from '../types/tv';
+type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    color?: InputNumber['variants']['color'];
+    variant?: InputNumber['variants']['variant'];
+    size?: InputNumber['variants']['size'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * The orientation of the input menu.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Configure the increment button. The `color` and `size` are inherited.
+     * @defaultValue { variant: 'link' }
+     */
+    increment?: ButtonProps;
+    /**
+     * The icon displayed to increment the value.
+     * @defaultValue appConfig.ui.icons.plus
+     * @IconifyIcon
+     */
+    incrementIcon?: IconProps['name'];
+    /** Disable the increment button. */
+    incrementDisabled?: boolean;
+    /**
+     * Configure the decrement button. The `color` and `size` are inherited.
+     * @defaultValue { variant: 'link' }
+     */
+    decrement?: ButtonProps;
+    /**
+     * The icon displayed to decrement the value.
+     * @defaultValue appConfig.ui.icons.minus
+     * @IconifyIcon
+     */
+    decrementIcon?: IconProps['name'];
+    /** Disable the decrement button. */
+    decrementDisabled?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    /**
+     * The locale to use for formatting and parsing numbers.
+     * @defaultValue UApp.locale.code
+     */
+    locale?: string;
+    class?: any;
+    ui?: InputNumber['slots'];
+}
+export interface InputNumberEmits {
+    'update:modelValue': [value: number];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+}
+export interface InputNumberSlots {
+    increment(props?: {}): any;
+    decrement(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (event: Event) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InputNumber.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/input-number";
 <script setup>
 import { onMounted, ref, computed } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
@@ -22,13 +22,14 @@ const props = defineProps({
   highlight: { type: Boolean, required: false },
   orientation: { type: String, required: false, default: "horizontal" },
   increment: { type: Object, required: false },
-  incrementIcon: { type: String, required: false },
+  incrementIcon: { type: [String, Object], required: false },
   incrementDisabled: { type: Boolean, required: false },
   decrement: { type: Object, required: false },
-  decrementIcon: { type: String, required: false },
+  decrementIcon: { type: [String, Object], required: false },
   decrementDisabled: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
+  modelModifiers: { type: Object, required: false },
   locale: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -49,9 +50,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const { t, code: codeLocale } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const locale = computed(() => props.locale || codeLocale.value);
@@ -68,6 +70,9 @@ const incrementIcon = computed(() => props.incrementIcon || (props.orientation =
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));
 const inputRef = ref(null);
 function onUpdate(value) {
+  if (props.modelModifiers?.optional) {
+    value = value ?? void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();
@@ -96,6 +101,7 @@ defineExpose({
   <NumberFieldRoot
     v-bind="rootProps"
     :id="id"
+    :model-value="modelValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"

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

@@ -1,7 +1,8 @@
 import type { NumberFieldRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-number';
-import type { ButtonProps } from '../types';
+import type { ButtonProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
 export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
@@ -32,7 +33,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @defaultValue appConfig.ui.icons.plus
      * @IconifyIcon
      */
-    incrementIcon?: string;
+    incrementIcon?: IconProps['name'];
     /** Disable the increment button. */
     incrementDisabled?: boolean;
     /**
@@ -45,11 +46,12 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @defaultValue appConfig.ui.icons.minus
      * @IconifyIcon
      */
-    decrementIcon?: string;
+    decrementIcon?: IconProps['name'];
     /** Disable the decrement button. */
     decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
     /**
      * The locale to use for formatting and parsing numbers.
      * @defaultValue UApp.locale.code
@@ -59,9 +61,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     ui?: InputNumber['slots'];
 }
 export interface InputNumberEmits {
-    'update:modelValue': [payload: number];
+    'update:modelValue': [value: number];
     'blur': [event: FocusEvent];
-    'change': [payload: Event];
+    'change': [event: Event];
 }
 export interface InputNumberSlots {
     increment(props?: {}): any;
@@ -169,12 +171,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
     }) | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: (event: FocusEvent) => any;
-    change: (payload: Event) => any;
-    "update:modelValue": (payload: number) => any;
+    change: (event: Event) => any;
+    "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((payload: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;

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

@@ -0,0 +1,186 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui';
+import theme from '#build/ui/input-tags';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>;
+export type InputTagItem = AcceptableInputValue;
+export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /** The maximum number of character allowed. */
+    maxLength?: number;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputTags['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: InputTags['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputTags['variants']['size'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon displayed to delete a tag.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    deleteIcon?: IconProps['name'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    class?: any;
+    ui?: InputTags['slots'];
+}
+export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmits<T> {
+    change: [event: Event];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+}
+type SlotProps<T extends InputTagItem> = (props: {
+    item: T;
+    index: number;
+}) => any;
+export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
+    'leading'(props?: {}): any;
+    'default'(props?: {}): any;
+    'trailing'(props?: {}): any;
+    'item-text': SlotProps<T>;
+    'item-delete': SlotProps<T>;
+}
+declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
+        readonly onInvalid?: ((payload: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
+        readonly onAddTag?: ((payload: T) => any) | undefined;
+        readonly onRemoveTag?: ((payload: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInvalid" | "onUpdate:modelValue" | "onRemoveTag" | "onAddTag"> & InputTagsProps<T> & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly placeholder?: string | undefined;
+                readonly autoFocus?: boolean | undefined;
+                readonly maxLength?: number | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }> & Omit<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }) | null, ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly placeholder?: string | undefined;
+                readonly autoFocus?: boolean | undefined;
+                readonly maxLength?: number | undefined;
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }> & Omit<Readonly<import("reka-ui").TagsInputInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }) | null>;
+    }>): void;
+    attrs: any;
+    slots: InputTagsSlots<T>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/InputTags.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   size: { type: null, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
-  deleteIcon: { type: String, required: false },
+  deleteIcon: { type: [String, Object], required: false },
   highlight: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -41,14 +41,14 @@ const props = defineProps({
   displayValue: { type: Function, required: false },
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
 const slots = defineSlots();