@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Header.vue

@@ -0,0 +1,137 @@
+<script>
+import theme from "#build/ui/header";
+</script>
+
+<script setup>
+import { computed, watch, toRef } from "vue";
+import { Primitive } from "reka-ui";
+import { defu } from "defu";
+import { createReusableTemplate } from "@vueuse/core";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+import { useAppConfig, useRoute } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "header" },
+  title: { type: String, required: false, default: "Nuxt UI Pro" },
+  to: { type: String, required: false, default: "/" },
+  mode: { type: null, required: false, default: "modal" },
+  menu: { type: null, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "right" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const route = useRoute();
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
+const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Nuxt UI Pro").trim();
+});
+watch(() => route.fullPath, () => {
+  open.value = false;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.header || {} })());
+const Menu = computed(() => ({
+  slideover: USlideover,
+  modal: UModal,
+  drawer: UDrawer
+})[props.mode]);
+const menuProps = toRef(() => defu(props.menu, {
+  content: {
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }
+}, props.mode === "modal" ? { fullscreen: true, transition: false } : {}));
+function toggleOpen() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UButton
+        v-if="toggle"
+        color="neutral"
+        variant="ghost"
+        :aria-label="open ? t('header.close') : t('header.open')"
+        :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        @click="toggleOpen"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <DefineLeftTemplate>
+    <div :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left">
+        <ULink :to="to" :aria-label="ariaLabel" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </ULink>
+      </slot>
+    </div>
+  </DefineLeftTemplate>
+
+  <DefineRightTemplate>
+    <div :class="ui.right({ class: props.ui?.right })">
+      <slot name="right" />
+
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+    </div>
+  </DefineRightTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot name="top" />
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <ReuseLeftTemplate />
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot />
+      </div>
+
+      <ReuseRightTemplate />
+    </UContainer>
+
+    <slot name="bottom" />
+  </Primitive>
+
+  <Menu
+    v-model:open="open"
+    :title="t('header.title')"
+    :description="t('header.description')"
+    v-bind="menuProps"
+    :ui="{
+  overlay: ui.overlay({ class: props.ui?.overlay }),
+  content: ui.content({ class: props.ui?.content })
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
+          <ReuseLeftTemplate />
+
+          <ReuseRightTemplate />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body })">
+          <slot name="body" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
+</template>

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

@@ -0,0 +1,72 @@
+import theme from '#build/ui/header';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, ComponentConfig } from '../types';
+type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
+type HeaderMode = 'modal' | 'slideover' | 'drawer';
+type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface HeaderProps<T extends HeaderMode = HeaderMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'header'
+     */
+    as?: any;
+    title?: string;
+    to?: string;
+    /**
+     * The mode of the header menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the header menu component.
+     */
+    menu?: HeaderMenu<T>;
+    /**
+     * Customize the toggle button to open the header menu displayed when the `content` slot is used.
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     */
+    toggle?: boolean | Partial<ButtonProps>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'right'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    ui?: Header['slots'];
+}
+export interface HeaderSlots {
+    title(props?: {}): any;
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    toggle(props: {
+        open: boolean;
+        toggle: () => void;
+    }): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+    body(props?: {}): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HeaderProps<HeaderMode> & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<HeaderProps<HeaderMode> & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    toggle: boolean | Partial<ButtonProps>;
+    title: string;
+    to: string;
+    mode: HeaderMode;
+    as: any;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, HeaderSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Icon.vue

@@ -15,5 +15,5 @@ const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "c
 </script>
 
 <template>
-  <Icon v-bind="iconProps" />
+  <Icon v-bind="iconProps" />
 </template>

package/dist/runtime/components/Input.vue

@@ -110,38 +110,38 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <input
-      :id="id"
-      ref="inputRef"
-      :type="type"
-      :value="modelValue"
-      :name="name"
-      :placeholder="placeholder"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      :required="required"
-      :autocomplete="autocomplete"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    >
-
-    <slot />
-
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-      </slot>
-    </span>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    >
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/InputMenu.vue

@@ -207,167 +207,167 @@ defineExpose({
 </script>
 
 <template>
-  <DefineCreateItemTemplate>
-    <ComboboxGroup :class="ui.group({ class: props.ui?.group })">
-      <ComboboxItem
-        :class="ui.item({ class: props.ui?.item })"
-        :value="searchTerm"
-        @select.prevent="emits('create', searchTerm)"
-      >
-        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
-          <slot name="create-item-label" :item="searchTerm">
-            {{ t("inputMenu.create", { label: searchTerm }) }}
-          </slot>
-        </span>
-      </ComboboxItem>
-    </ComboboxGroup>
-  </DefineCreateItemTemplate>
-
-  <ComboboxRoot
-    :id="id"
-    v-slot="{ modelValue, open }"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :as-child="!!multiple"
-    ignore-filter
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-    @keydown.enter="$event.preventDefault()"
-  >
-    <ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
-      <TagsInputRoot
-        v-if="multiple"
-        v-slot="{ modelValue: tags }"
-        :model-value="modelValue"
-        :disabled="disabled"
-        :required="required"
-        delimiter=""
-        as-child
-        @blur="onBlur"
-        @focus="onFocus"
-        @remove-tag="onRemoveTag"
-      >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
-          <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
-            <slot name="tags-item-text" :item="item" :index="index">
-              {{ displayValue(item) }}
-            </slot>
-          </TagsInputItemText>
-
-          <TagsInputItemDelete :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
-            <slot name="tags-item-delete" :item="item" :index="index">
-              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
-            </slot>
-          </TagsInputItemDelete>
-        </TagsInputItem>
-
-        <ComboboxInput v-model="searchTerm" as-child>
-          <TagsInputInput
-            ref="inputRef"
-            v-bind="{ ...$attrs, ...ariaAttrs }"
-            :placeholder="placeholder"
-            :class="ui.tagsInput({ class: props.ui?.tagsInput })"
-            @keydown.enter.prevent
-          />
-        </ComboboxInput>
-      </TagsInputRoot>
-
-      <ComboboxInput
-        v-else
-        ref="inputRef"
-        :display-value="displayValue"
-        v-bind="{ ...$attrs, ...ariaAttrs }"
-        :type="type"
-        :placeholder="placeholder"
-        :required="required"
-        @blur="onBlur"
-        @focus="onFocus"
-        @update:model-value="searchTerm = $event"
-      />
-
-      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
-        </slot>
-      </span>
-
-      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-        </slot>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <slot name="content-top" />
-
-        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
-          <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
-          </slot>
-        </ComboboxEmpty>
-
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
-
-          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
-            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-                {{ get(item, props.labelKey) }}
-              </ComboboxLabel>
-
-              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
-
-              <ComboboxItem
-                v-else
-                :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
-                :disabled="isInputItem(item) && item.disabled"
-                :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey) : item"
-                @select="onSelect($event, item)"
-              >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
-                    <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                    <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                    <UChip
-                      v-else-if="isInputItem(item) && item.chip"
-                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                      inset
-                      standalone
-                      v-bind="item.chip"
-                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
-                    />
-                  </slot>
-
-                  <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isInputItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </span>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
-
-                    <ComboboxItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
-                    </ComboboxItemIndicator>
-                  </span>
-                </slot>
-              </ComboboxItem>
-            </template>
-          </ComboboxGroup>
-
-          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-        </div>
-
-        <slot name="content-bottom" />
-
-        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+  <DefineCreateItemTemplate>
+    <ComboboxGroup :class="ui.group({ class: props.ui?.group })">
+      <ComboboxItem
+        :class="ui.item({ class: props.ui?.item })"
+        :value="searchTerm"
+        @select.prevent="emits('create', searchTerm)"
+      >
+        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+          <slot name="create-item-label" :item="searchTerm">
+            {{ t("inputMenu.create", { label: searchTerm }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :as-child="!!multiple"
+    ignore-filter
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+    @keydown.enter="$event.preventDefault()"
+  >
+    <ComboboxAnchor :as-child="!multiple" :class="ui.base({ class: props.ui?.base })">
+      <TagsInputRoot
+        v-if="multiple"
+        v-slot="{ modelValue: tags }"
+        :model-value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        delimiter=""
+        as-child
+        @blur="onBlur"
+        @focus="onFocus"
+        @remove-tag="onRemoveTag"
+      >
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+          <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
+            <slot name="tags-item-text" :item="item" :index="index">
+              {{ displayValue(item) }}
+            </slot>
+          </TagsInputItemText>
+
+          <TagsInputItemDelete :class="ui.tagsItemDelete({ class: [props.ui?.tagsItemDelete, isInputItem(item) && item.ui?.tagsItemDelete] })" :disabled="disabled">
+            <slot name="tags-item-delete" :item="item" :index="index">
+              <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
+            </slot>
+          </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <ComboboxInput v-model="searchTerm" as-child>
+          <TagsInputInput
+            ref="inputRef"
+            v-bind="{ ...$attrs, ...ariaAttrs }"
+            :placeholder="placeholder"
+            :class="ui.tagsInput({ class: props.ui?.tagsInput })"
+            @keydown.enter.prevent
+          />
+        </ComboboxInput>
+      </TagsInputRoot>
+
+      <ComboboxInput
+        v-else
+        ref="inputRef"
+        :display-value="displayValue"
+        v-bind="{ ...$attrs, ...ariaAttrs }"
+        :type="type"
+        :placeholder="placeholder"
+        :required="required"
+        @blur="onBlur"
+        @focus="onFocus"
+        @update:model-value="searchTerm = $event"
+      />
+
+      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+        </slot>
+      </span>
+
+      <ComboboxTrigger v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
+          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        </slot>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-bind="portalProps">
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <slot name="content-top" />
+
+        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ searchTerm ? t("inputMenu.noMatch", { searchTerm }) : t("inputMenu.noData") }}
+          </slot>
+        </ComboboxEmpty>
+
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+
+          <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <ComboboxLabel v-if="isInputItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+                {{ get(item, props.labelKey) }}
+              </ComboboxLabel>
+
+              <ComboboxSeparator v-else-if="isInputItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+
+              <ComboboxItem
+                v-else
+                :class="ui.item({ class: [props.ui?.item, isInputItem(item) && item.ui?.item, isInputItem(item) && item.class] })"
+                :disabled="isInputItem(item) && item.disabled"
+                :value="props.valueKey && isInputItem(item) ? get(item, props.valueKey) : item"
+                @select="onSelect($event, item)"
+              >
+                <slot name="item" :item="item" :index="index">
+                  <slot name="item-leading" :item="item" :index="index">
+                    <UIcon v-if="isInputItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                    <UAvatar v-else-if="isInputItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                    <UChip
+                      v-else-if="isInputItem(item) && item.chip"
+                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                      inset
+                      standalone
+                      v-bind="item.chip"
+                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+                    />
+                  </slot>
+
+                  <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isInputItem(item) && item.ui?.itemLabel] })">
+                    <slot name="item-label" :item="item" :index="index">
+                      {{ isInputItem(item) ? get(item, props.labelKey) : item }}
+                    </slot>
+                  </span>
+
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
+                    <slot name="item-trailing" :item="item" :index="index" />
+
+                    <ComboboxItemIndicator as-child>
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isInputItem(item) && item.ui?.itemTrailingIcon] })" />
+                    </ComboboxItemIndicator>
+                  </span>
+                </slot>
+              </ComboboxItem>
+            </template>
+          </ComboboxGroup>
+
+          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+        </div>
+
+        <slot name="content-bottom" />
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>

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

@@ -179,11 +179,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
         readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
         readonly onCreate?: ((item: string) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
@@ -521,10 +521,10 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
     }>): void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };