@nuxt/ui 4.1.0 → 4.2.0

package/dist/runtime/components/InputNumber.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-number";
 </script>
 
 <script setup>
-import { onMounted, ref, computed } from "vue";
+import { onMounted, computed, useTemplateRef, toRef } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -30,7 +30,6 @@ const props = defineProps({
   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 },
   modelValue: { type: [Number, null], required: false },
@@ -51,12 +50,11 @@ 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 { t } = useLocale();
 const appConfig = useAppConfig();
 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);
 const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber || {} })({
   color: color.value,
@@ -70,7 +68,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber |
 }));
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp));
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));
-const inputRef = ref(null);
+const inputRef = useTemplateRef("inputRef");
 function onUpdate(value) {
   if (props.modelModifiers?.optional) {
     value = value ?? void 0;
@@ -95,7 +93,7 @@ onMounted(() => {
   }, props.autofocusDelay);
 });
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el)
 });
 </script>
 
@@ -104,10 +102,10 @@ defineExpose({
     v-bind="rootProps"
     :id="id"
     :model-value="modelValue"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
-    :locale="locale"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
@@ -115,12 +113,13 @@ defineExpose({
       ref="inputRef"
       :placeholder="placeholder"
       :required="required"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div v-if="!!increment" :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="!!increment" data-slot="increment" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -135,7 +134,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="!!decrement" :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="!!decrement" data-slot="decrement" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton

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

@@ -2,10 +2,12 @@ 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 { InputHTMLAttributes } from '../types/html';
 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'> {
+type InputNumberValue = number | null;
+export interface InputNumberProps<T extends InputNumberValue = InputNumberValue> extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -51,17 +53,12 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     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;
+    modelModifiers?: Pick<ModelModifiers<T>, 'optional'>;
     class?: any;
     ui?: InputNumber['slots'];
 }
-export interface InputNumberEmits {
-    'update:modelValue': [value: number];
+export interface InputNumberEmits<T extends InputNumberValue = InputNumberValue> {
+    'update:modelValue': [value: T];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -69,123 +66,23 @@ export interface InputNumberSlots {
     increment(props?: {}): any;
     decrement(props?: {}): any;
 }
-declare const __VLS_export: __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;
-}>, {
-    decrement: boolean | ButtonProps;
-    increment: boolean | ButtonProps;
-    orientation: "vertical" | "horizontal";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+declare const __VLS_export: <T extends InputNumberValue = InputNumberValue>(__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<InputNumberProps<T> & {
+        onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
+    }>) => void;
+    attrs: any;
+    slots: InputNumberSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -3,10 +3,11 @@ import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } fro
 import theme from '#build/ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 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 {
+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, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'max' | 'required' | 'name' | 'placeholder' | 'type' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size' | 'min' | 'step'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -66,8 +67,8 @@ export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
 }
 declare const __VLS_export: <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<InputTagsProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
         onInvalid?: ((payload: T) => any) | undefined;
         "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
@@ -75,115 +76,11 @@ declare const __VLS_export: <T extends InputTagItem>(__VLS_props: NonNullable<Aw
         onRemoveTag?: ((payload: T) => any) | undefined;
     }> & 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>;
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
     }>) => 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);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => 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>;
 };

package/dist/runtime/components/InputTags.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-tags";
 </script>
 
 <script setup>
-import { computed, ref, onMounted, toRaw } from "vue";
+import { computed, useTemplateRef, onMounted, toRaw, toRef } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -68,17 +68,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags ||
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value
 }));
-const inputRef = ref(null);
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus();
-  }, props.autofocusDelay);
-});
+const inputRef = useTemplateRef("inputRef");
 function autoFocus() {
   if (props.autofocus) {
     inputRef.value?.$el?.focus();
   }
 }
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+});
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
@@ -97,7 +97,7 @@ function onFocus(event) {
   emitFormFocus();
 }
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el)
 });
 </script>
 
@@ -107,6 +107,7 @@ defineExpose({
     v-slot="{ modelValue: tags }"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"
@@ -117,18 +118,20 @@ defineExpose({
       v-for="(item, index) in tags"
       :key="index"
       :value="item"
+      data-slot="item"
       :class="ui.item({ class: [props.ui?.item] })"
     >
-      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [props.ui?.itemText] })">
         <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
+        data-slot="itemDelete"
         :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
         <slot name="item-delete" :item="item" :index="index" :ui="ui">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
     </TagsInputItem>
@@ -138,6 +141,7 @@ defineExpose({
       v-bind="{ ...$attrs, ...ariaAttrs }"
       :placeholder="placeholder"
       :max-length="maxLength"
+      data-slot="input"
       :class="ui.input({ class: props.ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
@@ -145,16 +149,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TagsInputRoot>