@nuxt/ui 4.6.1 → 4.7.1

package/dist/runtime/components/DropdownMenuContent.vue

@@ -9,6 +9,7 @@ import { DropdownMenu } from "reka-ui/namespaced";
 import { useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { useFilter } from "../composables/useFilter";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
@@ -136,103 +137,105 @@ const hasFilteredItems = computed(() => filteredGroups.value.some((group) => gro
   </DefineItemTemplate>
 
   <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
-      <DropdownMenu.Filter v-if="!!filter" v-model="searchTerm" as-child>
-        <UInput
-          autofocus
-          autocomplete="off"
-          :size="size"
-          v-bind="inputProps"
-          data-slot="input"
-          :class="ui.input({ class: uiOverride?.input })"
-          @change.stop
-        />
-      </DropdownMenu.Filter>
+    <FieldGroupReset>
+      <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+        <DropdownMenu.Filter v-if="!!filter" v-model="searchTerm" as-child>
+          <UInput
+            autofocus
+            autocomplete="off"
+            :size="size"
+            v-bind="inputProps"
+            data-slot="input"
+            :class="ui.input({ class: uiOverride?.input })"
+            @change.stop
+          />
+        </DropdownMenu.Filter>
 
-      <slot name="content-top" :sub="sub ?? false" />
+        <slot name="content-top" :sub="sub ?? false" />
 
-      <div v-if="!searchTerm || hasFilteredItems" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
-          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <DropdownMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-              <DropdownMenu.SubTrigger
-                as="button"
-                type="button"
-                :disabled="item.disabled"
-                :text-value="get(item, props.labelKey)"
-                data-slot="item"
-                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              >
+        <div v-if="!searchTerm || hasFilteredItems" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+          <DropdownMenu.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <DropdownMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
                 <ReuseItemTemplate :item="item" :index="index" />
-              </DropdownMenu.SubTrigger>
+              </DropdownMenu.Label>
+              <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+              <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+                <DropdownMenu.SubTrigger
+                  as="button"
+                  type="button"
+                  :disabled="item.disabled"
+                  :text-value="get(item, props.labelKey)"
+                  data-slot="item"
+                  :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+                >
+                  <ReuseItemTemplate :item="item" :index="index" />
+                </DropdownMenu.SubTrigger>
 
-              <UDropdownMenuContent
-                sub
-                :class="item.ui?.content"
-                :ui="ui"
-                :ui-override="uiOverride"
-                :portal="portal"
-                :items="item.children"
-                align="start"
-                :align-offset="-4"
-                :side-offset="3"
-                :label-key="labelKey"
-                :description-key="descriptionKey"
-                :checked-icon="checkedIcon"
-                :loading-icon="loadingIcon"
-                :external-icon="externalIcon"
-                :size="size"
-                :filter="item.filter"
-                :filter-fields="item.filterFields || filterFields"
-                :ignore-filter="item.ignoreFilter ?? ignoreFilter"
-                v-bind="item.content"
-              >
-                <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-                  <slot :name="name" v-bind="slotData" />
-                </template>
-              </UDropdownMenuContent>
-            </DropdownMenu.Sub>
-            <DropdownMenu.CheckboxItem
-              v-else-if="item.type === 'checkbox'"
-              :model-value="item.checked"
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              data-slot="item"
-              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-              @update:model-value="item.onUpdateChecked"
-              @select="item.onSelect"
-            >
-              <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.CheckboxItem>
-            <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <DropdownMenu.Item
-                as-child
+                <UDropdownMenuContent
+                  sub
+                  :class="item.ui?.content"
+                  :ui="ui"
+                  :ui-override="uiOverride"
+                  :portal="portal"
+                  :items="item.children"
+                  align="start"
+                  :align-offset="-4"
+                  :side-offset="3"
+                  :label-key="labelKey"
+                  :description-key="descriptionKey"
+                  :checked-icon="checkedIcon"
+                  :loading-icon="loadingIcon"
+                  :external-icon="externalIcon"
+                  :size="size"
+                  :filter="item.filter"
+                  :filter-fields="item.filterFields || filterFields"
+                  :ignore-filter="item.ignoreFilter ?? ignoreFilter"
+                  v-bind="item.content"
+                >
+                  <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+                    <slot :name="name" v-bind="slotData" />
+                  </template>
+                </UDropdownMenuContent>
+              </DropdownMenu.Sub>
+              <DropdownMenu.CheckboxItem
+                v-else-if="item.type === 'checkbox'"
+                :model-value="item.checked"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
+                data-slot="item"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+                @update:model-value="item.onUpdateChecked"
                 @select="item.onSelect"
               >
-                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
-                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
-                </ULinkBase>
-              </DropdownMenu.Item>
-            </ULink>
-          </template>
-        </DropdownMenu.Group>
-      </div>
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.CheckboxItem>
+              <ULink v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <DropdownMenu.Item
+                  as-child
+                  :disabled="item.disabled"
+                  :text-value="get(item, props.labelKey)"
+                  @select="item.onSelect"
+                >
+                  <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                    <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                  </ULinkBase>
+                </DropdownMenu.Item>
+              </ULink>
+            </template>
+          </DropdownMenu.Group>
+        </div>
 
-      <div v-if="searchTerm && !hasFilteredItems" data-slot="empty" :class="ui.empty({ class: uiOverride?.empty })">
-        <slot name="empty" :search-term="searchTerm">
-          {{ t("dropdownMenu.noMatch", { searchTerm }) }}
-        </slot>
-      </div>
+        <div v-if="searchTerm && !hasFilteredItems" data-slot="empty" :class="ui.empty({ class: uiOverride?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ t("dropdownMenu.noMatch", { searchTerm }) }}
+          </slot>
+        </div>
 
-      <slot />
+        <slot />
 
-      <slot name="content-bottom" :sub="sub ?? false" />
-    </component>
+        <slot name="content-bottom" :sub="sub ?? false" />
+      </component>
+    </FieldGroupReset>
   </DropdownMenu.Portal>
 </template>

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

@@ -12,7 +12,7 @@ export interface EditorEmojiMenuItem {
     fallbackImage?: string;
     [key: string]: any;
 }
-export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo'>> {
     /**
      * @defaultValue 'md'
      */

package/dist/runtime/components/EditorEmojiMenu.vue

@@ -19,6 +19,7 @@ const props = defineProps({
   filterFields: { type: Array, required: false, default: () => ["name", "shortcodes", "tags"] },
   limit: { type: Number, required: false },
   options: { type: Object, required: false },
+  suggestion: { type: Object, required: false },
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
@@ -39,6 +40,7 @@ onMounted(async () => {
     filterFields: props.filterFields,
     limit: props.limit,
     options: props.options,
+    suggestion: props.suggestion,
     appendTo: props.appendTo,
     ui,
     onSelect: (editor, range, item) => {

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

@@ -12,7 +12,7 @@ export interface EditorEmojiMenuItem {
     fallbackImage?: string;
     [key: string]: any;
 }
-export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo'>> {
     /**
      * @defaultValue 'md'
      */

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

@@ -16,7 +16,7 @@ export interface EditorMentionMenuItem {
     class?: any;
     [key: string]: any;
 }
-export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo' | 'ignoreFilter'>> {
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo' | 'ignoreFilter'>> {
     /**
      * @defaultValue 'md'
      */

package/dist/runtime/components/EditorMentionMenu.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   filterFields: { type: Array, required: false },
   limit: { type: Number, required: false },
   options: { type: Object, required: false },
+  suggestion: { type: Object, required: false },
   appendTo: { type: Function, required: false, skipCheck: true },
   ignoreFilter: { type: Boolean, required: false }
 });
@@ -44,6 +45,7 @@ onMounted(async () => {
     ignoreFilter: props.ignoreFilter,
     limit: props.limit,
     options: props.options,
+    suggestion: props.suggestion,
     appendTo: props.appendTo,
     searchTerm,
     ui,

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

@@ -16,7 +16,7 @@ export interface EditorMentionMenuItem {
     class?: any;
     [key: string]: any;
 }
-export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo' | 'ignoreFilter'>> {
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo' | 'ignoreFilter'>> {
     /**
      * @defaultValue 'md'
      */

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

@@ -29,7 +29,7 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
     [key: string]: any;
 } & EditorItem<H>;
 export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
-export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo'>> {
     /**
      * @defaultValue 'md'
      */

package/dist/runtime/components/EditorSuggestionMenu.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   filterFields: { type: Array, required: false },
   limit: { type: Number, required: false },
   options: { type: Object, required: false },
+  suggestion: { type: Object, required: false },
   appendTo: { type: Function, required: false, skipCheck: true }
 });
 const appConfig = useAppConfig();
@@ -42,6 +43,7 @@ onMounted(async () => {
     filterFields: props.filterFields,
     limit: props.limit,
     options: props.options,
+    suggestion: props.suggestion,
     appendTo: props.appendTo,
     ui,
     onSelect: (editor, range, item) => {

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

@@ -29,7 +29,7 @@ type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCusto
     [key: string]: any;
 } & EditorItem<H>;
 export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers> = EditorSuggestionMenuLabelItem | EditorSuggestionMenuSeparatorItem | EditorSuggestionMenuActionItem<H>;
-export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'suggestion' | 'appendTo'>> {
     /**
      * @defaultValue 'md'
      */

package/dist/runtime/components/FileUpload.vue

@@ -9,6 +9,7 @@ import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { useComponentUI } from "../composables/useComponentUI";
+import { useResolvedVariants } from "../composables/useResolvedVariants";
 import { useFormField } from "../composables/useFormField";
 import { useFileUpload } from "../composables/useFileUpload";
 import { tv } from "../utils/tv";
@@ -59,9 +60,10 @@ const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   dropzone: props.dropzone,
   onUpdate
 });
-const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField(props);
-const variant = computed(() => props.multiple ? "area" : props.variant);
-const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
+const { emitFormInput, emitFormChange, id, name, color, highlight, disabled, ariaAttrs } = useFormField(props);
+const { variant: resolvedVariant } = useResolvedVariants("fileUpload", props, theme, ["variant"]);
+const variant = computed(() => props.multiple ? "area" : resolvedVariant.value);
+const layout = computed(() => resolvedVariant.value === "button" && !props.multiple ? "grid" : props.layout);
 const position = computed(() => {
   if (layout.value === "grid" && props.multiple) {
     return "inside";
@@ -74,13 +76,13 @@ const position = computed(() => {
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
   dropzone: props.dropzone,
   interactive: props.interactive,
-  color: props.color,
+  color: color.value,
   size: props.size,
   variant: variant.value,
   layout: layout.value,
   position: position.value,
   multiple: props.multiple,
-  highlight: props.highlight,
+  highlight: highlight.value,
   disabled: props.disabled
 }));
 function createObjectUrl(file) {

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

@@ -11,7 +11,7 @@ export interface FormFieldProps {
     as?: any;
     /** The name of the FormField. Also used to match form errors. */
     name?: string;
-    /** A regular expression to match form error names. */
+    /** A regular expression to match form error names. Useful for components with array values such as InputTags, where errors include array indices in their name (e.g. `tags.0`). */
     errorPattern?: RegExp;
     label?: string;
     description?: string;

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

@@ -11,7 +11,7 @@ export interface FormFieldProps {
     as?: any;
     /** The name of the FormField. Also used to match form errors. */
     name?: string;
-    /** A regular expression to match form error names. */
+    /** A regular expression to match form error names. Useful for components with array values such as InputTags, where errors include array indices in their name (e.g. `tags.0`). */
     errorPattern?: RegExp;
     label?: string;
     description?: string;

package/dist/runtime/components/Header.vue

@@ -54,11 +54,7 @@ const Menu = computed(() => ({
   modal: UModal,
   drawer: UDrawer
 })[props.mode]);
-const menuProps = toRef(() => defu(props.menu, {
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
-}, props.mode === "modal" ? { fullscreen: true, transition: false } : {}));
+const menuProps = toRef(() => defu(props.menu, {}, props.mode === "modal" ? { fullscreen: true, transition: false } : {}));
 function toggleOpen() {
   open.value = !open.value;
 }

package/dist/runtime/components/Input.vue

@@ -51,10 +51,10 @@ const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("input", props);
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { emitFormBlur, emitFormInput, emitFormChange, size: formFieldSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} })({
   type: props.type,
   color: color.value,

package/dist/runtime/components/InputDate.vue

@@ -39,14 +39,14 @@ const props = defineProps({
   trailingIcon: { type: null, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: null, required: false },
-  defaultPlaceholder: { type: null, required: false },
-  placeholder: { type: null, required: false },
+  defaultPlaceholder: { type: Object, required: false },
+  placeholder: { type: Object, required: false },
   hourCycle: { type: null, required: false },
   step: { type: Object, required: false },
   granularity: { type: String, required: false },
   hideTimeZone: { type: Boolean, required: false },
-  maxValue: { type: null, required: false },
-  minValue: { type: null, required: false },
+  maxValue: { type: Object, required: false },
+  minValue: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   isDateUnavailable: { type: Function, required: false },
@@ -59,11 +59,11 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputDate", props);
 const rootProps = useForwardPropsEmits(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: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, 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 || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputDate || {} })({
   color: color.value,
   variant: props.variant,

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

@@ -241,7 +241,6 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(InputMenuProps<T, VK, M, Mod, C> & {
         searchTerm?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
@@ -269,6 +268,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>;
         } | undefined) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: (Mod extends {
@@ -323,7 +323,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: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -346,7 +346,7 @@ 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: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
+    } | undefined) => void) & ((evt: "clear") => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;

package/dist/runtime/components/InputMenu.vue

@@ -11,7 +11,7 @@ import { isEqual } from "ohash/utils";
 import { reactivePick, reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
-import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFieldGroup, FieldGroupReset } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useFilter } from "../composables/useFilter";
@@ -100,10 +100,10 @@ const virtualizerProps = toRef(() => {
     estimateSize: getEstimateSize(filteredItems.value, inputSize.value || "md", props.descriptionKey, !!slots["item-description"])
   });
 });
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, 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 || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -453,50 +453,52 @@ defineExpose({
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps" @focus-outside.prevent>
-        <slot name="content-top" />
+      <FieldGroupReset>
+        <Component.Content data-slot="content" :class="ui.content({ class: uiProp?.content })" v-bind="contentProps" @focus-outside.prevent>
+          <slot name="content-top" />
 
-        <Component.Empty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
-          <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
-          </slot>
-        </Component.Empty>
+          <Component.Empty data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+            <slot name="empty" :search-term="searchTerm">
+              {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
+            </slot>
+          </Component.Empty>
 
-        <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
-          <template v-if="!!virtualize">
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+          <div ref="viewportRef" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+            <template v-if="!!virtualize">
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
-            <Component.Virtualizer
-              v-slot="{ option: item, virtualItem }"
-              :options="filteredItems"
-              :text-content="(item2) => isInputItem(item2) ? get(item2, props.labelKey) : String(item2)"
-              v-bind="virtualizerProps"
-            >
-              <ReuseItemTemplate :item="item" :index="virtualItem.index" />
-            </Component.Virtualizer>
+              <Component.Virtualizer
+                v-slot="{ option: item, virtualItem }"
+                :options="filteredItems"
+                :text-content="(item2) => isInputItem(item2) ? get(item2, props.labelKey) : String(item2)"
+                v-bind="virtualizerProps"
+              >
+                <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+              </Component.Virtualizer>
 
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-          </template>
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+            </template>
 
-          <template v-else>
-            <Component.Group v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-              <ReuseCreateItemTemplate />
-            </Component.Group>
+            <template v-else>
+              <Component.Group v-if="createItem && createItemPosition === 'top'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ReuseCreateItemTemplate />
+              </Component.Group>
 
-            <Component.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-              <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
-            </Component.Group>
+              <Component.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
+              </Component.Group>
 
-            <Component.Group v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-              <ReuseCreateItemTemplate />
-            </Component.Group>
-          </template>
-        </div>
+              <Component.Group v-if="createItem && createItemPosition === 'bottom'" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+                <ReuseCreateItemTemplate />
+              </Component.Group>
+            </template>
+          </div>
 
-        <slot name="content-bottom" />
+          <slot name="content-bottom" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </Component.Content>
+          <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </Component.Content>
+      </FieldGroupReset>
     </Component.Portal>
   </Component.Root>
 </template>

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

@@ -241,7 +241,6 @@ declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(InputMenuProps<T, VK, M, Mod, C> & {
         searchTerm?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
@@ -269,6 +268,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>;
         } | undefined) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: (Mod extends {
@@ -323,7 +323,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: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -346,7 +346,7 @@ 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: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
+    } | undefined) => void) & ((evt: "clear") => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;