@nuxt/ui 4.9.0 → 4.11.0

package/dist/runtime/components/prose/Th.vue

@@ -15,7 +15,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.th", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.th || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.th || {} }));
 </script>
 
 <template>

package/dist/runtime/components/prose/Thead.vue

@@ -14,7 +14,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.thead", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.thead || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.thead || {} }));
 </script>
 
 <template>

package/dist/runtime/components/prose/Tr.vue

@@ -14,7 +14,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.tr", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.tr || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.tr || {} }));
 </script>
 
 <template>

package/dist/runtime/components/prose/Ul.vue

@@ -14,7 +14,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.ul", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.ul || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.ul || {} }));
 </script>
 
 <template>

package/dist/runtime/composables/defineShortcuts.js

@@ -1,9 +1,9 @@
 import { ref, computed, toValue } from "vue";
-import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+import { useEventListener, useActiveElement, useDebounceFn, useTimeoutFn } from "@vueuse/core";
 import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
-const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
+const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowdown", "tab", "escape", "enter", "backspace"];
 function convertKeyToCode(key) {
   if (/^[a-z]$/i.test(key)) {
     return `Key${key.toUpperCase()}`;
@@ -48,11 +48,32 @@ export function extractShortcuts(items, separator = "_") {
   return shortcuts;
 }
 export function defineShortcuts(config, options = {}) {
+  const chainDelay = options.chainDelay ?? 800;
   const chainedInputs = ref([]);
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
-  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, chainDelay);
+  let pendingShortcut;
+  const cancelPendingShortcut = () => {
+    pendingShortcut = void 0;
+    pendingTimer.stop();
+  };
+  const runPendingShortcut = () => {
+    const pending = pendingShortcut;
+    cancelPendingShortcut();
+    if (!pending) {
+      return;
+    }
+    const shortcut = standardShortcuts.value.find((s) => s.key === pending.shortcut.key && !s.metaKey && !s.ctrlKey && !s.altKey && !s.shiftKey);
+    if (shortcut?.enabled) {
+      shortcut.handler(pending.event);
+    }
+  };
+  const pendingTimer = useTimeoutFn(() => {
+    runPendingShortcut();
+    clearChainedInput();
+  }, chainDelay, { immediate: false });
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const layoutIndependent = options.layoutIndependent ?? false;
@@ -68,19 +89,23 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
-      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
+      for (const shortcut of chainedShortcuts.value) {
         if (shortcut.key !== chainedKey) {
           continue;
         }
         if (shortcut.enabled) {
+          cancelPendingShortcut();
           e.preventDefault();
           shortcut.handler(e);
+        } else {
+          runPendingShortcut();
         }
         clearChainedInput();
         return;
       }
     }
-    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
+    runPendingShortcut();
+    for (const shortcut of standardShortcuts.value) {
       if (layoutIndependent) {
         if (e.code !== shortcut.key) {
           continue;
@@ -106,6 +131,15 @@ export function defineShortcuts(config, options = {}) {
       if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey && (e.metaKey || e.ctrlKey)) && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
+      const isUnmodified = !shortcut.metaKey && !shortcut.ctrlKey && !shortcut.altKey && !shortcut.shiftKey;
+      if (isUnmodified && chainPrefixes.value.has(shortcut.key)) {
+        if (shortcut.enabled) {
+          e.preventDefault();
+        }
+        pendingShortcut = { shortcut, event: e };
+        pendingTimer.start();
+        return;
+      }
       if (shortcut.enabled) {
         e.preventDefault();
         shortcut.handler(e);
@@ -194,5 +228,8 @@ export function defineShortcuts(config, options = {}) {
       return shortcut;
     }).filter(Boolean);
   });
+  const chainedShortcuts = computed(() => shortcuts.value.filter((s) => s.chained));
+  const standardShortcuts = computed(() => shortcuts.value.filter((s) => !s.chained));
+  const chainPrefixes = computed(() => new Set(chainedShortcuts.value.map((s) => s.key.split("-")[0])));
   return useEventListener("keydown", onKeyDown);
 }

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-import type { AvatarGroupProps } from '../types';
+import type { AvatarGroupProps } from '../components/AvatarGroup.vue';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
     color: AvatarGroupProps['color'];
@@ -16,6 +16,6 @@ export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
     color: AvatarGroupProps['color'];
 }): {
-    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
-    color: ComputedRef<"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl" | undefined>;
+    color: ComputedRef<"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined>;
 };

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from '../components/Avatar.vue';
+import type { IconProps } from '../components/Icon.vue';
 export interface UseComponentIconsProps {
     /**
      * Display an icon based on the `leading` and `trailing` props.

package/dist/runtime/composables/useComponentProps.d.ts

@@ -1,160 +1,6 @@
 import type { ComputedRef } from 'vue';
-import type * as ComponentTypes from '../types';
-import type { SlotClass } from '../types/tv';
-import type * as ui from '#build/ui';
-type ThemeSlotOverrides<T> = T extends {
-    slots: infer S extends Record<string, any>;
-} ? {
-    [K in keyof S]?: SlotClass;
-} : {
-    [K in keyof T]?: T[K] extends any[] ? SlotClass : T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : SlotClass;
-};
-/**
- * Flat slot-class override shape: `{ button: { base: '...' }, modal: {...} }`.
- * Powers the `:ui` prop on `<UTheme>`, which remains the recommended way to
- * scope class overrides without touching component prop defaults.
- */
-export type ThemeUI = {
-    [K in keyof typeof ui]?: ThemeSlotOverrides<(typeof ui)[K]>;
-};
-/**
- * Strict per-component defaults shape used by `<UTheme :props>`. Authored as
- * a flat interface with literal keys (rather than a mapped type) so editors —
- * Volar in particular — surface key completions inside template inline
- * objects (`:props="{ button: { … } }"`). Volar reliably iterates interface
- * members but not mapped-type members in this position.
- *
- * Keys mirror the theme registry exposed by `#build/ui` (see
- * `src/templates.ts`): every themable component gets one camelCase entry
- * whose value is a `Partial` of that component's `<PascalCase>Props`.
- */
-export interface ThemeDefaults {
-    accordion?: Partial<ComponentTypes.AccordionProps>;
-    alert?: Partial<ComponentTypes.AlertProps>;
-    authForm?: Partial<ComponentTypes.AuthFormProps>;
-    avatar?: Partial<ComponentTypes.AvatarProps>;
-    avatarGroup?: Partial<ComponentTypes.AvatarGroupProps>;
-    badge?: Partial<ComponentTypes.BadgeProps>;
-    banner?: Partial<ComponentTypes.BannerProps>;
-    blogPost?: Partial<ComponentTypes.BlogPostProps>;
-    blogPosts?: Partial<ComponentTypes.BlogPostsProps>;
-    breadcrumb?: Partial<ComponentTypes.BreadcrumbProps>;
-    button?: Partial<ComponentTypes.ButtonProps>;
-    calendar?: Partial<ComponentTypes.CalendarProps>;
-    card?: Partial<ComponentTypes.CardProps>;
-    carousel?: Partial<ComponentTypes.CarouselProps>;
-    changelogVersion?: Partial<ComponentTypes.ChangelogVersionProps>;
-    changelogVersions?: Partial<ComponentTypes.ChangelogVersionsProps>;
-    chatMessage?: Partial<ComponentTypes.ChatMessageProps>;
-    chatMessages?: Partial<ComponentTypes.ChatMessagesProps>;
-    chatPalette?: Partial<ComponentTypes.ChatPaletteProps>;
-    chatPrompt?: Partial<ComponentTypes.ChatPromptProps>;
-    chatPromptSubmit?: Partial<ComponentTypes.ChatPromptSubmitProps>;
-    chatReasoning?: Partial<ComponentTypes.ChatReasoningProps>;
-    chatShimmer?: Partial<ComponentTypes.ChatShimmerProps>;
-    chatTool?: Partial<ComponentTypes.ChatToolProps>;
-    checkbox?: Partial<ComponentTypes.CheckboxProps>;
-    checkboxGroup?: Partial<ComponentTypes.CheckboxGroupProps>;
-    chip?: Partial<ComponentTypes.ChipProps>;
-    collapsible?: Partial<ComponentTypes.CollapsibleProps>;
-    colorPicker?: Partial<ComponentTypes.ColorPickerProps>;
-    commandPalette?: Partial<ComponentTypes.CommandPaletteProps>;
-    container?: Partial<ComponentTypes.ContainerProps>;
-    contentNavigation?: Partial<ComponentTypes.ContentNavigationProps>;
-    contentSearch?: Partial<ComponentTypes.ContentSearchProps>;
-    contentSearchButton?: Partial<ComponentTypes.ContentSearchButtonProps>;
-    contentSurround?: Partial<ComponentTypes.ContentSurroundProps>;
-    contentToc?: Partial<ComponentTypes.ContentTocProps>;
-    contextMenu?: Partial<ComponentTypes.ContextMenuProps>;
-    dashboardGroup?: Partial<ComponentTypes.DashboardGroupProps>;
-    dashboardNavbar?: Partial<ComponentTypes.DashboardNavbarProps>;
-    dashboardPanel?: Partial<ComponentTypes.DashboardPanelProps>;
-    dashboardResizeHandle?: Partial<ComponentTypes.DashboardResizeHandleProps>;
-    dashboardSearch?: Partial<ComponentTypes.DashboardSearchProps>;
-    dashboardSearchButton?: Partial<ComponentTypes.DashboardSearchButtonProps>;
-    dashboardSidebar?: Partial<ComponentTypes.DashboardSidebarProps>;
-    dashboardSidebarCollapse?: Partial<ComponentTypes.DashboardSidebarCollapseProps>;
-    dashboardSidebarToggle?: Partial<ComponentTypes.DashboardSidebarToggleProps>;
-    dashboardToolbar?: Partial<ComponentTypes.DashboardToolbarProps>;
-    drawer?: Partial<ComponentTypes.DrawerProps>;
-    dropdownMenu?: Partial<ComponentTypes.DropdownMenuProps>;
-    editor?: Partial<ComponentTypes.EditorProps>;
-    editorDragHandle?: Partial<ComponentTypes.EditorDragHandleProps>;
-    editorToolbar?: Partial<ComponentTypes.EditorToolbarProps>;
-    empty?: Partial<ComponentTypes.EmptyProps>;
-    error?: Partial<ComponentTypes.ErrorProps>;
-    fieldGroup?: Partial<ComponentTypes.FieldGroupProps>;
-    fileUpload?: Partial<ComponentTypes.FileUploadProps>;
-    footer?: Partial<ComponentTypes.FooterProps>;
-    footerColumns?: Partial<ComponentTypes.FooterColumnsProps>;
-    form?: Partial<ComponentTypes.FormProps<any, any, any>>;
-    formField?: Partial<ComponentTypes.FormFieldProps>;
-    header?: Partial<ComponentTypes.HeaderProps>;
-    input?: Partial<ComponentTypes.InputProps>;
-    inputDate?: Partial<ComponentTypes.InputDateProps>;
-    inputMenu?: Partial<ComponentTypes.InputMenuProps>;
-    inputNumber?: Partial<ComponentTypes.InputNumberProps>;
-    inputTags?: Partial<ComponentTypes.InputTagsProps>;
-    inputTime?: Partial<ComponentTypes.InputTimeProps>;
-    kbd?: Partial<ComponentTypes.KbdProps>;
-    listbox?: Partial<ComponentTypes.ListboxProps>;
-    main?: Partial<ComponentTypes.MainProps>;
-    marquee?: Partial<ComponentTypes.MarqueeProps>;
-    modal?: Partial<ComponentTypes.ModalProps>;
-    navigationMenu?: Partial<ComponentTypes.NavigationMenuProps>;
-    page?: Partial<ComponentTypes.PageProps>;
-    pageAnchors?: Partial<ComponentTypes.PageAnchorsProps>;
-    pageAside?: Partial<ComponentTypes.PageAsideProps>;
-    pageBody?: Partial<ComponentTypes.PageBodyProps>;
-    pageCTA?: Partial<ComponentTypes.PageCTAProps>;
-    pageCard?: Partial<ComponentTypes.PageCardProps>;
-    pageColumns?: Partial<ComponentTypes.PageColumnsProps>;
-    pageFeature?: Partial<ComponentTypes.PageFeatureProps>;
-    pageGrid?: Partial<ComponentTypes.PageGridProps>;
-    pageHeader?: Partial<ComponentTypes.PageHeaderProps>;
-    pageHero?: Partial<ComponentTypes.PageHeroProps>;
-    pageLinks?: Partial<ComponentTypes.PageLinksProps>;
-    pageList?: Partial<ComponentTypes.PageListProps>;
-    pageLogos?: Partial<ComponentTypes.PageLogosProps>;
-    pageSection?: Partial<ComponentTypes.PageSectionProps>;
-    pagination?: Partial<ComponentTypes.PaginationProps>;
-    pinInput?: Partial<ComponentTypes.PinInputProps>;
-    popover?: Partial<ComponentTypes.PopoverProps>;
-    pricingPlan?: Partial<ComponentTypes.PricingPlanProps>;
-    pricingPlans?: Partial<ComponentTypes.PricingPlansProps>;
-    pricingTable?: Partial<ComponentTypes.PricingTableProps>;
-    progress?: Partial<ComponentTypes.ProgressProps>;
-    radioGroup?: Partial<ComponentTypes.RadioGroupProps>;
-    scrollArea?: Partial<ComponentTypes.ScrollAreaProps>;
-    select?: Partial<ComponentTypes.SelectProps>;
-    selectMenu?: Partial<ComponentTypes.SelectMenuProps>;
-    separator?: Partial<ComponentTypes.SeparatorProps>;
-    sidebar?: Partial<ComponentTypes.SidebarProps>;
-    skeleton?: Partial<ComponentTypes.SkeletonProps>;
-    slideover?: Partial<ComponentTypes.SlideoverProps>;
-    slider?: Partial<ComponentTypes.SliderProps>;
-    stepper?: Partial<ComponentTypes.StepperProps>;
-    switch?: Partial<ComponentTypes.SwitchProps>;
-    table?: Partial<ComponentTypes.TableProps>;
-    tabs?: Partial<ComponentTypes.TabsProps>;
-    textarea?: Partial<ComponentTypes.TextareaProps>;
-    timeline?: Partial<ComponentTypes.TimelineProps>;
-    toast?: Partial<ComponentTypes.ToastProps>;
-    toaster?: Partial<ComponentTypes.ToasterProps>;
-    tooltip?: Partial<ComponentTypes.TooltipProps>;
-    tree?: Partial<ComponentTypes.TreeProps>;
-    user?: Partial<ComponentTypes.UserProps>;
-}
-/**
- * Loose internal shape stored on the injected `ThemeContext`. Allows the
- * `prose` namespace (lifted by `normalizeUi`) and any unknown keys to flow
- * through without polluting the user-facing `ThemeDefaults` type.
- */
-export type ThemeContextDefaults = ThemeDefaults & {
-    [name: string]: Record<string, any> | undefined;
-};
 export type ThemeContext = {
-    defaults: ComputedRef<ThemeContextDefaults>;
+    defaults: ComputedRef<Record<string, Record<string, any> | undefined>>;
 };
 declare const provideThemeContext: (contextValue: ThemeContext) => ThemeContext;
 /**
@@ -166,15 +12,15 @@ export declare function injectThemeContext(fallback?: ThemeContext): ThemeContex
 export { provideThemeContext };
 /**
  * Resolve a component's props with the priority chain:
- *   explicit prop > nearest UTheme > withDefaults
- *     > app.config.ui.<name>.defaultVariants
+ *   explicit prop > nearest UTheme > app.config.ui.<name>.defaultVariants
+ *     > withDefaults
  *
  * The returned proxy transparently reads from `props`, falling through to the
  * injected `ThemeContext` and `app.config.ui.<name>.defaultVariants` for
  * defaults. The component's tv() `defaultVariants` are intentionally left out
  * of the proxy fallback — they continue to drive `tv()`-internal class
  * resolution (the original semantics) without leaking into prop reads. The
- * `ui` prop is deep-merged (explicit slot classes override theme slot classes)
+ * `ui` and `class` props are merged (explicit classes override theme classes)
  * instead of being replaced.
  */
 export declare function useComponentProps<T extends object>(name: string, props: T): T;

package/dist/runtime/composables/useComponentProps.js

@@ -37,15 +37,23 @@ export function useComponentProps(name, props) {
         if (!raw && !themeUi) return raw;
         return defu(raw ?? {}, themeUi ?? {});
       }
+      if (prop === "class") {
+        const themeClass = themeEntry?.class;
+        if (themeClass === void 0) return raw;
+        if (raw === void 0) return themeClass;
+        return [themeClass, raw];
+      }
       if (vm && propIsDefined(vm.vnode, prop)) return raw;
       const themeValue = themeEntry?.[prop];
       if (themeValue !== void 0) return themeValue;
+      const appConfigEntry = name.includes(".") ? get(appConfig.ui ?? {}, name) : appConfig.ui?.[name];
+      const appConfigValue = appConfigEntry?.defaultVariants?.[prop];
+      if (appConfigValue !== void 0) return appConfigValue;
       const propDef = vm?.type?.props?.[prop];
       if (propDef && Object.prototype.hasOwnProperty.call(propDef, "default")) {
         return raw;
       }
-      const appConfigEntry = name.includes(".") ? get(appConfig.ui ?? {}, name) : appConfig.ui?.[name];
-      return appConfigEntry?.defaultVariants?.[prop];
+      return void 0;
     },
     // `has`, `ownKeys`, and `getOwnPropertyDescriptor` reflect the underlying
     // `defineProps` schema only — theme defaults are NOT enumerable. As a

package/dist/runtime/composables/useEditorMenu.d.ts

@@ -1,6 +1,7 @@
 import type { Ref, ComputedRef, MaybeRef } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
 import type { SuggestionOptions } from '@tiptap/suggestion';
+import type { Plugin } from '@tiptap/pm/state';
 import type { FloatingUIOptions } from '../types/editor';
 export interface EditorMenuOptions<T = any> {
     editor: Editor;
@@ -73,7 +74,7 @@ export interface EditorMenuOptions<T = any> {
     ui: ComputedRef<any>;
 }
 export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
-    plugin: import("@tiptap/pm/state").Plugin<any>;
+    plugin: Plugin<any>;
     destroy: () => void;
     filteredItems: Ref<T[], T[]>;
     searchTerm: Ref<string, string>;

package/dist/runtime/composables/useEditorMenu.js

@@ -370,18 +370,24 @@ export function useEditorMenu(options) {
       };
       const handlers = {
         onStart: (suggestionProps) => {
-          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           selectedIndex.value = 0;
           commandFn = (item) => suggestionProps.command(item);
           triggerClientRect = suggestionProps.clientRect;
+          if (suggestionProps.loading) {
+            return;
+          }
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           if (!filteredItems.value.length) {
             return;
           }
           showMenu();
         },
         onUpdate: (suggestionProps) => {
-          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           commandFn = (item) => suggestionProps.command(item);
+          if (suggestionProps.loading) {
+            return;
+          }
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           if (selectedIndex.value >= selectableItems.value.length) {
             selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
           }

package/dist/runtime/composables/useFieldGroup.d.ts

@@ -18,7 +18,7 @@ type Props<T> = {
  */
 export declare function useFieldGroup<T>(props: Props<T>): {
     orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
 };
 export declare const FieldGroupReset: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;

package/dist/runtime/composables/useFileUpload.js

@@ -2,9 +2,9 @@ import { ref, computed, unref, onMounted, watch, reactive } from "vue";
 import { useFileDialog, useDropZone } from "@vueuse/core";
 function parseAcceptToDataTypes(accept) {
   if (!accept || accept === "*") {
-    return void 0;
+    return [];
   }
-  const types = accept.split(",").map((type) => {
+  return accept.split(",").map((type) => {
     const trimmedType = type.trim();
     if (trimmedType.includes("/") && trimmedType.endsWith("/*")) {
       return trimmedType.split("/")[0] || trimmedType;
@@ -13,7 +13,6 @@ function parseAcceptToDataTypes(accept) {
   }).filter((type) => {
     return !type.startsWith(".");
   });
-  return types.length > 0 ? types : void 0;
 }
 export function useFileUpload(options) {
   const {
@@ -56,7 +55,7 @@ export function useFileUpload(options) {
     fileDialog.open();
   }
   onMounted(() => {
-    const { isOverDropZone } = dropzone ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop: (files) => onDrop(files, true) }) : { isOverDropZone: ref(false) };
+    const { isOverDropZone } = dropzone ? useDropZone(dropzoneRef, { dataTypes, onDrop: (files) => onDrop(files, true) }) : { isOverDropZone: ref(false) };
     watch(isOverDropZone, (value) => {
       isDragging.value = value;
     });

package/dist/runtime/composables/useFormField.d.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, ComputedRef } from 'vue';
 import type { UseEventBusReturn } from '@vueuse/core';
-import type { FormFieldProps } from '../types';
+import type { FormFieldProps } from '../components/FormField.vue';
 import type { FormErrorWithId, FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form';
 import type { GetObjectField } from '../types/utils';
 type Props<T> = {
@@ -37,10 +37,16 @@ export declare const formErrorsInjectionKey: InjectionKey<Readonly<Ref<FormError
  * ```ts
  * size: size.value ?? props.size,
  * color: color.value ?? props.color,
- * highlight: highlight.value ?? props.highlight
+ * highlight: highlight.value ?? props.highlight,
+ * disabled: disabled.value ?? props.disabled
  * ```
  *
- * Final precedence: `explicit > FormField > <UTheme :props> > withDefaults > app.config > tv defaults`.
+ * `highlight` and `disabled` are Boolean props, which Vue auto-casts to `false`
+ * when unset, so they are normalized back to `undefined` here. Otherwise the
+ * `??` above would short-circuit on `false` and the proxy would never be read.
+ *
+ * Final precedence: `explicit > FormField > <UTheme :props> > app.config > withDefaults > tv defaults`,
+ * matching what `useComponentProps` resolves.
  */
 export declare function useFormField<T>(props?: Props<T>, opts?: {
     bind?: boolean;
@@ -48,10 +54,10 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
     color: ComputedRef<"error" | GetObjectField<T, "color"> | undefined>;
-    highlight: ComputedRef<boolean | undefined>;
-    disabled: ComputedRef<boolean | undefined>;
+    highlight: ComputedRef<true | undefined>;
+    disabled: ComputedRef<true | undefined>;
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/shared").UseDebounceFnReturn<() => void>;
     emitFormChange: () => void;

package/dist/runtime/composables/useFormField.js

@@ -1,4 +1,4 @@
-import { inject, computed, provide } from "vue";
+import { inject, computed, provide, getCurrentScope, onScopeDispose } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
 export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
@@ -35,8 +35,15 @@ export function useFormField(props, opts) {
   function emitFormChange() {
     emitFormEvent("change", formField?.value.name);
   }
+  let disposed = false;
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      disposed = true;
+    });
+  }
   const emitFormInput = useDebounceFn(
     () => {
+      if (disposed) return;
       emitFormEvent("input", formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation);
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
@@ -46,8 +53,8 @@ export function useFormField(props, opts) {
     name: computed(() => props?.name ?? formField?.value.name),
     size: computed(() => props?.size ?? formField?.value.size),
     color: computed(() => formField?.value.error ? "error" : props?.color),
-    highlight: computed(() => formField?.value.error ? true : props?.highlight),
-    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
+    highlight: computed(() => formField?.value.error ? true : props?.highlight || void 0),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled || void 0),
     emitFormBlur,
     emitFormInput,
     emitFormChange,