@nuxt/ui 4.9.0 → 4.11.0

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

@@ -3,7 +3,11 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { InputHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -248,27 +252,6 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         onClear?: (() => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (Mod extends {
-            number: true;
-        } ? (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: (Mod extends {
@@ -293,6 +276,27 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         "onRemove-tag"?: ((item: (Mod extends {
             number: true;
@@ -324,27 +328,7 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: (Mod extends {
-        number: true;
-    } ? (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -367,7 +351,27 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void) & ((evt: "remove-tag", item: (Mod extends {
+    } | undefined) => void) & ((evt: "update:modelValue", value: (Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "remove-tag", item: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -389,7 +393,7 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         nullable: true;
     } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, ref, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from "vue";
+import { computed, ref, useAttrs, useTemplateRef, toRef, onMounted, onScopeDispose, toRaw, nextTick, watch } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Combobox, Autocomplete } from "reka-ui/namespaced";
@@ -93,6 +93,8 @@ const rootPropsPick = reactivePick(props, "as", "modelValue", "defaultValue", "o
 const rootPropsOmitted = reactiveOmit(rootPropsPick, "multiple", "resetSearchTermOnSelect", "resetModelValueOnClear", "by");
 const rootProps = useForwardProps(computed(() => isAutocomplete.value ? rootPropsOmitted : rootPropsPick), emits);
 const Component = computed(() => isAutocomplete.value ? Autocomplete : Combobox);
+const attrs = useAttrs();
+const baseDataSlot = computed(() => props.multiple && !isAutocomplete.value ? attrs["data-slot"] ?? "base" : "base");
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
@@ -100,13 +102,24 @@ const clearProps = computed(() => typeof props.clear === "object" ? props.clear
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, inputSize.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => ({
+  icon: props.icon,
+  leading: props.leading,
+  leadingIcon: props.leadingIcon,
+  trailing: props.trailing,
+  trailingIcon: props.trailingIcon ?? appConfig.ui.icons.chevronDown,
+  loading: props.loading,
+  loadingIcon: props.loadingIcon
+})));
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -120,12 +133,12 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu || {} })({
-  color: color.value ?? props.color,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputMenu || {} })({
+  color: color.value,
   variant: props.variant,
-  size: inputSize?.value ?? props.size,
+  size: size.value,
   loading: props.loading,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -172,6 +185,7 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
   nextTick(() => {
     if (isAutocomplete.value) {
@@ -180,10 +194,11 @@ onMounted(() => {
       searchTerm.value = "";
     }
   });
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 watch(() => props.modelValue, (newValue) => {
   if (isAutocomplete.value) {
     searchTerm.value = String(newValue ?? "");
@@ -229,9 +244,10 @@ function onFocus(event) {
   emitFormFocus();
 }
 const isOpen = ref(false);
+let timeoutId;
+onScopeDispose(() => clearTimeout(timeoutId));
 function onUpdateOpen(value) {
   isOpen.value = value;
-  let timeoutId;
   if (!value) {
     const event = new FocusEvent("blur");
     emits("blur", event);
@@ -287,7 +303,7 @@ function onClear() {
 const viewportRef = useTemplateRef("viewportRef");
 const comboboxRootRef = useTemplateRef("comboboxRootRef");
 watch(() => props.items, async () => {
-  if (!isOpen.value) {
+  if (!isOpen.value || !props.createItem) {
     return;
   }
   await nextTick();
@@ -376,14 +392,14 @@ defineExpose({
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :as-child="!!props.multiple && !isAutocomplete"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <Component.Anchor :as-child="!props.multiple" data-slot="base" :class="ui.base({ class: props.ui?.base })">
+    <Component.Anchor :as-child="!props.multiple" :data-slot="baseDataSlot" :class="ui.base({ class: props.ui?.base })">
       <TagsInputRoot
         v-if="props.multiple && !isAutocomplete"
         v-slot="{ modelValue: tags }"
@@ -428,6 +444,7 @@ defineExpose({
         :id="id"
         ref="inputRef"
         v-bind="{ ...!isAutocomplete ? { displayValue } : {}, ...$attrs, ...ariaAttrs }"
+        :data-slot="props.multiple ? void 0 : 'base'"
         :type="props.type"
         :placeholder="props.placeholder"
         :required="props.required"
@@ -450,7 +467,7 @@ defineExpose({
             <UButton
               as="span"
               :icon="props.clearIcon || appConfig.ui.icons.close"
-              :size="inputSize"
+              :size="size"
               variant="link"
               color="neutral"
               tabindex="-1"

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

@@ -3,7 +3,11 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, IconProps, LinkPropsKeys } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { InputHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -248,27 +252,6 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         onClear?: (() => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: (Mod extends {
-            number: true;
-        } ? (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-            optional: true;
-        } ? (Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-            nullable: true;
-        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: (Mod extends {
@@ -293,6 +276,27 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: (Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         "onRemove-tag"?: ((item: (Mod extends {
             number: true;
@@ -324,27 +328,7 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: (Mod extends {
-        number: true;
-    } ? (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
-        optional: true;
-    } ? (Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
-        nullable: true;
-    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -367,7 +351,27 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void) & ((evt: "remove-tag", item: (Mod extends {
+    } | undefined) => void) & ((evt: "update:modelValue", value: (Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void) & ((evt: "remove-tag", item: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -389,7 +393,7 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
         nullable: true;
     } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,9 @@ import type { NumberFieldRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-number';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
@@ -91,7 +93,7 @@ declare const __VLS_export: <T extends InputNumberValue = InputNumberValue, Mod
     slots: InputNumberSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: ApplyModifiers<T, Mod>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/InputNumber.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-number";
 </script>
 
 <script setup>
-import { onMounted, computed, useTemplateRef, toRef } from "vue";
+import { onMounted, onScopeDispose, computed, useTemplateRef, toRef } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick, useVModel } from "@vueuse/core";
@@ -59,14 +59,17 @@ const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.d
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color: formFieldColor, size: formFieldSize, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber || {} })({
-  color: color.value ?? props.color,
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => fieldGroupSize.value ?? formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputNumber || {} })({
+  color: color.value,
   variant: props.variant,
-  size: inputSize.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed,
   orientation: props.orientation,
   fieldGroup: orientation.value,
@@ -94,11 +97,13 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el)
 });
@@ -113,7 +118,7 @@ defineExpose({
     :min="props.min"
     :max="props.max"
     :step="props.step"
-    data-slot="root"
+    :data-slot="$attrs['data-slot'] ?? 'root'"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"
@@ -136,7 +141,7 @@ defineExpose({
           <UButton
             :icon="incrementIcon"
             :color="color"
-            :size="inputSize"
+            :size="size"
             variant="link"
             :aria-label="t('inputNumber.increment')"
             v-bind="typeof props.increment === 'object' ? props.increment : void 0"
@@ -151,7 +156,7 @@ defineExpose({
           <UButton
             :icon="decrementIcon"
             :color="color"
-            :size="inputSize"
+            :size="size"
             variant="link"
             :aria-label="t('inputNumber.decrement')"
             v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"

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

@@ -2,7 +2,9 @@ import type { NumberFieldRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-number';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
@@ -91,7 +93,7 @@ declare const __VLS_export: <T extends InputNumberValue = InputNumberValue, Mod
     slots: InputNumberSlots;
     emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: ApplyModifiers<T, Mod>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -0,0 +1,79 @@
+import type { VNode } from 'vue';
+import type { RatingRootProps, RatingRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input-rating';
+import type { IconProps } from './Icon.vue';
+import type { ComponentConfig } from '../types/tv';
+type InputRating = ComponentConfig<typeof theme, AppConfig, 'inputRating'>;
+export interface InputRatingProps extends Pick<RatingRootProps, 'length' | 'step' | 'name' | 'disabled' | 'required' | 'clearable' | 'hoverable' | 'modelValue' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The id of the rating. */
+    id?: string;
+    /**
+     * Make the rating readonly (non-interactive).
+     * @defaultValue false
+     */
+    readonly?: boolean;
+    /**
+     * The icon displayed for each rating value.
+     * @defaultValue appConfig.ui.icons.star
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The icon displayed for empty rating values. Defaults to `icon` when not provided.
+     * @IconifyIcon
+     */
+    emptyIcon?: IconProps['name'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: InputRating['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: InputRating['variants']['size'];
+    /**
+     * The orientation of the rating.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: InputRating['variants']['orientation'];
+    class?: any;
+    ui?: InputRating['slots'];
+}
+export interface InputRatingEmits extends RatingRootEmits {
+    change: [event: Event];
+}
+export interface InputRatingSlots {
+    /** Rendered for each item. `filled` is `false` for the empty background layer and `true` for the highlighted overlay. */
+    item?(props: {
+        index: number;
+        filled: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputRatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
+    "update:modelValue": (payload: number) => any;
+}, string, import("vue").PublicProps, Readonly<InputRatingProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+}>, {
+    length: number;
+    orientation: InputRating["variants"]["orientation"];
+    readonly: boolean;
+    step: 1 | 0.5 | 0.25 | 0.1;
+    defaultValue: number;
+    clearable: boolean;
+    hoverable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputRatingSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};