@nuxt/ui 4.10.0 → 4.11.1

package/dist/runtime/components/Editor.vue

@@ -177,7 +177,10 @@ const editor = useEditor({
       editor2.view.dispatch(editor2.state.tr);
     }
   },
-  onUpdate: ({ editor: editor2 }) => {
+  onUpdate: ({ editor: editor2, transaction, appendedTransactions }) => {
+    if (!transaction.docChanged && !appendedTransactions.some((tr) => tr.docChanged)) {
+      return;
+    }
     let value;
     try {
       if (contentType.value === "html") {

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

@@ -47,9 +47,9 @@ export interface ErrorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    redirect: string;
     clear: boolean | ButtonProps;
     as: any;
-    redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -47,9 +47,9 @@ export interface ErrorSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    redirect: string;
     clear: boolean | ButtonProps;
     as: any;
-    redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/FileUpload.vue

@@ -59,7 +59,11 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 });
-const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { emitFormInput, emitFormChange, id, name, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
 const variant = computed(() => props.multiple ? "area" : props.variant);
 const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
 const position = computed(() => {
@@ -74,14 +78,14 @@ const position = computed(() => {
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: color.value ?? props.color,
-  size: props.size,
+  color: color.value,
+  size: size.value,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: highlight.value ?? props.highlight,
-  disabled: props.disabled
+  highlight: highlight.value,
+  disabled: disabled.value
 }));
 function createObjectUrl(file) {
   if (!props.fileImage) return void 0;
@@ -94,11 +98,14 @@ function formatFileSize(bytes) {
   const k = 1024;
   const sizes = ["B", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const size = bytes / Math.pow(k, i);
-  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  const value = bytes / Math.pow(k, i);
+  const formattedSize = i === 0 ? value.toString() : value.toFixed(0);
   return `${formattedSize}${sizes[i]}`;
 }
 function onUpdate(files, reset2 = false) {
+  if (disabled.value) {
+    return;
+  }
   if (props.multiple) {
     if (reset2) {
       modelValue.value = files;
@@ -154,7 +161,7 @@ defineExpose({
                   :as="{ img: 'img' }"
                   :src="createObjectUrl(file)"
                   :icon="props.fileIcon || appConfig.ui.icons.file"
-                  :size="props.size"
+                  :size="size"
                   data-slot="fileLeadingAvatar"
                   :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
                 />
@@ -184,7 +191,7 @@ defineExpose({
     size: 'xs'
   } : {
     variant: 'link',
-    size: props.size
+    size
   },
   ...typeof props.fileDelete === 'object' ? props.fileDelete : void 0
 }"
@@ -227,7 +234,7 @@ defineExpose({
           <slot name="leading" :ui="ui">
             <template v-if="props.icon !== false">
               <UIcon v-if="variant === 'button'" :name="props.icon ?? appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
-              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+              <UAvatar v-else :icon="props.icon ?? appConfig.ui.icons.upload" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
             </template>
           </slot>
 

package/dist/runtime/components/Form.vue

@@ -294,7 +294,7 @@ defineExpose(api);
     :id="formId"
     ref="formRef"
     :name="parentBus ? void 0 : props.name"
-    method="post"
+    :method="parentBus ? void 0 : 'post'"
     :class="ui({ class: [props.ui?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >

package/dist/runtime/components/Input.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input";
 </script>
 
 <script setup>
-import { useTemplateRef, computed, onMounted } from "vue";
+import { useTemplateRef, computed, onMounted, onScopeDispose } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -51,17 +51,20 @@ const slots = defineSlots();
 const props = useComponentProps("input", _props);
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
-const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
+const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, emitFormFocus, ariaAttrs } = useFormField(_props, { deferInputValidation: true });
 const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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?.input || {} })({
   type: props.type,
-  color: color.value ?? props.color,
+  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,
@@ -109,11 +112,13 @@ function autoFocus() {
     inputRef.value?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputRef
 });

package/dist/runtime/components/InputDate.vue

@@ -3,8 +3,7 @@ import theme from "#build/ui/input-date";
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import {} from "reka-ui";
+import { computed, onMounted, onScopeDispose, ref } from "vue";
 import { useForwardProps } from "../composables/useForwardProps";
 import { DateField as SingleDateField, DateRangeField as RangeDateField } from "reka-ui/namespaced";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
@@ -62,16 +61,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputDate", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-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(props);
 const [DefineSegmentsTemplate, ReuseSegmentsTemplate] = createReusableTemplate();
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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?.inputDate || {} })({
-  color: color.value ?? props.color,
+  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,
   loading: props.loading,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
@@ -101,11 +103,13 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 const DateField = computed(() => props.range ? RangeDateField : SingleDateField);
 defineExpose({
   inputsRef

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, ref, useAttrs, 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";
@@ -102,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: {
@@ -123,11 +134,11 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputMenu || {} })({
-  color: color.value ?? props.color,
+  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,
@@ -174,6 +185,7 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
   nextTick(() => {
     if (isAutocomplete.value) {
@@ -182,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 ?? "");
@@ -231,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);
@@ -453,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/InputNumber.vue

@@ -3,10 +3,10 @@ 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";
+import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useFieldGroup } from "../composables/useFieldGroup";
@@ -55,18 +55,20 @@ const _props = defineProps({
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
 const props = useComponentProps("inputNumber", _props);
-const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 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 rootProps = useForwardProps(reactivePick(props, "as", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "required", "readonly", "focusOnChange", "locale"));
+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 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 ?? props.color,
+  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,
@@ -78,8 +80,12 @@ const decrementIcon = computed(() => props.decrementIcon || (props.orientation =
 const inputRef = useTemplateRef("inputRef");
 function onUpdate(value) {
   if (props.modelModifiers?.optional) {
-    modelValue.value = value = value ?? void 0;
+    value = value ?? void 0;
   }
+  if (value === props.modelValue || value == null && props.modelValue == null) {
+    return;
+  }
+  emits("update:modelValue", value);
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();
@@ -94,11 +100,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)
 });
@@ -109,7 +117,7 @@ defineExpose({
     v-bind="rootProps"
     :id="id"
     :default-value="props.defaultValue"
-    :model-value="modelValue"
+    :model-value="props.modelValue"
     :min="props.min"
     :max="props.max"
     :step="props.step"
@@ -136,7 +144,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 +159,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/InputRating.vue

@@ -39,14 +39,17 @@ defineSlots();
 const props = useComponentProps("inputRating", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "length", "step", "hoverable", "clearable", "required", "modelValue", "defaultValue"), emits);
-const { id, emitFormChange, emitFormInput, size, color, name, disabled: formDisabled, ariaAttrs } = useFormField(_props);
-const disabled = computed(() => formDisabled.value || props.readonly);
+const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+const color = computed(() => formFieldColor.value ?? props.color);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const rootDisabled = computed(() => disabled.value || props.readonly);
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.inputRating || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+  size: size.value,
+  color: color.value,
   orientation: props.orientation,
-  readonly: props.readonly && !formDisabled.value,
-  disabled: formDisabled.value
+  readonly: props.readonly && !disabled.value,
+  disabled: disabled.value
 }));
 const starIcon = computed(() => props.icon ?? appConfig.ui.icons.star);
 function onUpdate(value) {
@@ -64,7 +67,7 @@ function onUpdate(value) {
     data-slot="root"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
     :name="name"
-    :disabled="disabled"
+    :disabled="rootDisabled"
     :aria-readonly="props.readonly || void 0"
     :orientation="props.orientation"
     :class="ui.root({ class: [props.ui?.root, props.class] })"

package/dist/runtime/components/InputTags.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-tags";
 </script>
 
 <script setup>
-import { computed, useTemplateRef, onMounted, toRaw, toRef } from "vue";
+import { computed, useTemplateRef, onMounted, onScopeDispose, toRaw, toRef } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
@@ -58,16 +58,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputTags", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
-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(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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?.inputTags || {} })({
-  color: color.value ?? props.color,
+  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,
@@ -79,11 +82,13 @@ function autoFocus() {
     inputRef.value?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;

package/dist/runtime/components/InputTime.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-time";
 </script>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onScopeDispose, ref } from "vue";
 import { TimeRangeFieldRoot, TimeRangeFieldInput } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { TimeField as SingleTimeField } from "reka-ui/namespaced";
@@ -62,16 +62,19 @@ const slots = defineSlots();
 const props = useComponentProps("inputTime", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), 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 { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
+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?.inputTime || {} })({
-  color: color.value ?? props.color,
+  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,
@@ -103,11 +106,13 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputsRef
 });

package/dist/runtime/components/Link.vue

@@ -3,16 +3,17 @@ import theme from "#build/ui/link";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, getCurrentInstance, mergeProps, onMounted, onBeforeUnmount } from "vue";
 import { isEqual } from "ohash/utils";
 import { useForwardProps, Slot } from "reka-ui";
 import { defu } from "defu";
 import { hasProtocol } from "ufo";
 import { reactiveOmit } from "@vueuse/core";
-import { useRoute, useAppConfig, useNuxtApp } from "#imports";
+import { useRoute, useAppConfig, useNuxtApp, onNuxtReady } from "#imports";
 import { mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { isPartiallyEqual } from "../utils/link";
+import { requestIdleCallback, cancelIdleCallback, observeIntersection } from "../utils/prefetch";
 import ULinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -126,13 +127,63 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive } = {}) {
   }
   return false;
 }
-function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
+function resolveLinkClass({ route: route2, isActive, isExactActive, prefetched } = {}) {
   const active = isLinkActive({ route: route2, isActive, isExactActive });
+  const prefetchedClass = prefetched ? props.prefetchedClass : void 0;
   if (props.raw) {
-    return [props.class, active ? props.activeClass : props.inactiveClass];
+    return [props.class, active ? props.activeClass : props.inactiveClass, prefetchedClass];
   }
-  return ui.value({ class: props.class, active, disabled: props.disabled });
+  return ui.value({ class: prefetchedClass ? [props.class, prefetchedClass] : props.class, active, disabled: props.disabled });
 }
+const instance = getCurrentInstance();
+let prefetchApi;
+function onPrefetch() {
+  prefetchApi?.prefetch?.(nuxtApp);
+}
+function getPrefetchListeners({ prefetch, shouldPrefetch }, attrs) {
+  if (!prefetch || !shouldPrefetch) {
+    return void 0;
+  }
+  prefetchApi = { prefetch, shouldPrefetch };
+  if (!shouldPrefetch("interaction")) {
+    return void 0;
+  }
+  return mergeProps(
+    { onPointerenter: attrs.onPointerenter, onFocus: attrs.onFocus },
+    { onPointerenter: onPrefetch, onFocus: onPrefetch }
+  );
+}
+let idleId;
+let unobserve = null;
+let unmounted = false;
+onMounted(() => {
+  if (!prefetchApi?.shouldPrefetch?.("visibility")) {
+    return;
+  }
+  const root = instance?.proxy?.$el;
+  const el = root instanceof Element ? root : root?.nextElementSibling;
+  if (!el) {
+    return;
+  }
+  onNuxtReady(() => {
+    if (unmounted) {
+      return;
+    }
+    idleId = requestIdleCallback(() => {
+      unobserve = observeIntersection(el, () => {
+        unobserve?.();
+        unobserve = null;
+        onPrefetch();
+      });
+    });
+  });
+});
+onBeforeUnmount(() => {
+  unmounted = true;
+  cancelIdleCallback(idleId);
+  unobserve?.();
+  unobserve = null;
+});
 </script>
 
 <template>
@@ -142,6 +193,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
         v-bind="{
   ...$attrs,
   ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...rest.prefetched && prefetchedClass ? { class: prefetchedClass } : {},
+  ...getPrefetchListeners(rest, $attrs),
   as,
   type,
   disabled,
@@ -166,9 +219,10 @@ function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   navigate,
   rel,
   target: rest.target,
-  isExternal: rest.isExternal
+  isExternal: rest.isExternal,
+  ...getPrefetchListeners(rest, $attrs)
 }"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive, prefetched: rest.prefetched })"
     >
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>