@bitrix24/b24ui-nuxt 2.0.8 → 2.1.0

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

@@ -2,10 +2,12 @@ import type { NumberFieldRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/input-number';
 import type { ButtonProps, BadgeProps, IconComponent } 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'
@@ -32,7 +34,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the input
      * @defaultValue false
      */
     rounded?: boolean;
@@ -76,7 +78,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
-    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    modelModifiers?: Pick<ModelModifiers<T>, 'optional'>;
     /**
      * The locale to use for formatting and parsing numbers.
      * @defaultValue B24App.locale.code
@@ -85,8 +87,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     class?: any;
     b24ui?: 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];
 }
@@ -94,124 +96,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;
-}>, {
-    color: InputNumber["variants"]["color"];
-    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/InputNumber.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/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";
@@ -81,7 +81,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.inputNu
 }));
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? icons.plus : icons.chevronUp));
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? icons.minus : icons.chevronDown));
-const inputRef = ref(null);
+const inputRef = useTemplateRef("inputRef");
 function onUpdate(value) {
   if (props.modelModifiers?.optional) {
     value = value ?? void 0;
@@ -106,7 +106,7 @@ onMounted(() => {
   }, props.autofocusDelay);
 });
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el)
 });
 </script>
 

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/b24ui/input-number';
 import type { ButtonProps, BadgeProps, IconComponent } 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'
@@ -32,7 +34,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the input
      * @defaultValue false
      */
     rounded?: boolean;
@@ -76,7 +78,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
-    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    modelModifiers?: Pick<ModelModifiers<T>, 'optional'>;
     /**
      * The locale to use for formatting and parsing numbers.
      * @defaultValue B24App.locale.code
@@ -85,8 +87,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
     class?: any;
     b24ui?: 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];
 }
@@ -94,124 +96,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;
-}>, {
-    color: InputNumber["variants"]["color"];
-    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/b24ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps, IconComponent } 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'
@@ -35,7 +36,7 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the input
      * @defaultValue false
      */
     rounded?: boolean;
@@ -82,8 +83,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;
@@ -91,115 +92,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/b24ui/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";
@@ -75,17 +75,17 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.inputTa
   trailing: Boolean(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;
@@ -104,7 +104,7 @@ function onFocus(event) {
   emitFormFocus();
 }
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el)
 });
 </script>