@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

package/dist/runtime/components/InputMenu.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/input-menu";
 
 <script setup>
 import { computed, ref, toRef, onMounted, toRaw, nextTick } from "vue";
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
@@ -37,8 +37,10 @@ const props = defineProps({
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
   valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -76,11 +78,32 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
+const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 36,
+    xl: 40
+  }[props.size || "md"]
+}));
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, 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 [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: [Object, String, Number, Boolean],
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu || {} })({
   color: color.value,
   variant: props.variant,
@@ -90,7 +113,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   multiple: props.multiple,
-  fieldGroup: orientation.value
+  fieldGroup: orientation.value,
+  virtualize: !!props.virtualize
 }));
 const items = computed(() => groups.value.flatMap((group) => group));
 function displayValue(value) {
@@ -190,9 +214,8 @@ function onUpdateOpen(value) {
     clearTimeout(timeoutId);
   }
 }
-function onRemoveTag(event) {
+function onRemoveTag(event, modelValue) {
   if (props.multiple) {
-    const modelValue = props.modelValue;
     const filteredValue = modelValue.filter((value) => !isEqual(value, event));
     emits("update:modelValue", filteredValue);
     emits("remove-tag", event);
@@ -219,21 +242,72 @@ defineExpose({
 
 <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>
+    <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>
   </DefineCreateItemTemplate>
 
+  <DefineItemTemplate v-slot="{ item, 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" :ui="ui">
+        <slot name="item-leading" :item="item" :index="index" :ui="ui">
+          <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.itemWrapper({ class: [props.ui?.itemWrapper, isInputItem(item) && item.ui?.itemWrapper] })">
+          <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 v-if="isInputItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isInputItem(item) && item.ui?.itemDescription] })">
+            <slot name="item-description" :item="item" :index="index">
+              {{ get(item, props.descriptionKey) }}
+            </slot>
+          </span>
+        </span>
+
+        <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
+          <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
+
+          <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>
+  </DefineItemTemplate>
+
   <ComboboxRoot
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
@@ -257,9 +331,9 @@ defineExpose({
         as-child
         @blur="onBlur"
         @focus="onFocus"
-        @remove-tag="onRemoveTag"
+        @remove-tag="onRemoveTag($event, modelValue)"
       >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="isInputItem(item) ? item : String(item)" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+        <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) }}
@@ -267,7 +341,7 @@ defineExpose({
           </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">
+            <slot name="tags-item-delete" :item="item" :index="index" :ui="ui">
               <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.tagsItemDeleteIcon({ class: [props.ui?.tagsItemDeleteIcon, isInputItem(item) && item.ui?.tagsItemDeleteIcon] })" />
             </slot>
           </TagsInputItemDelete>
@@ -324,56 +398,34 @@ defineExpose({
         </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] })" />
+          <template v-if="!!virtualize">
+            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
-              <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>
+            <ComboboxVirtualizer
+              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" />
+            </ComboboxVirtualizer>
 
-                  <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>
+            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+          </template>
 
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isInputItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
+          <template v-else>
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
 
-                    <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>
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+              <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
+            </ComboboxGroup>
 
-          <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
+          </template>
         </div>
 
         <slot name="content-bottom" />

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

@@ -11,6 +11,7 @@ type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
 export type InputMenuValue = AcceptableValue;
 export type InputMenuItem = InputMenuValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -23,9 +24,9 @@ export type InputMenuItem = InputMenuValue | {
      */
     type?: 'label' | 'separator' | 'item';
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
@@ -87,6 +88,23 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
     /**
      * When `items` is an array of objects, select the field to use as the value instead of the object itself.
      * @defaultValue undefined
@@ -97,6 +115,11 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -144,30 +167,37 @@ export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends Ge
 type SlotProps<T extends InputMenuItem> = (props: {
     item: T;
     index: number;
+    ui: InputMenu['ui'];
 }) => any;
 export interface InputMenuSlots<A extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: InputMenu['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: InputMenu['ui'];
     }): any;
     'empty'(props: {
         searchTerm?: string;
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
-    'tags-item-text': SlotProps<T>;
+    'tags-item-text'(props: {
+        item: T;
+        index: number;
+    }): any;
     'tags-item-delete': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
@@ -175,24 +205,14 @@ export interface InputMenuSlots<A extends ArrayOrNested<InputMenuItem> = ArrayOr
         item: string;
     }): any;
 }
-declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
-        readonly onCreate?: ((item: string) => any) | undefined;
-        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
-        readonly onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: GetModelValue<T, VK, M>;
-        } | undefined) => any) | undefined;
-        readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-        readonly "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
+declare const __VLS_export: <T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(InputMenuProps<T, VK, M> & {
         searchTerm?: string;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: GetModelValue<T, VK, M>;
+    } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
             $data: {};
@@ -314,7 +334,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                 default?: (props: {}) => any;
             };
         }) | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
     emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
@@ -324,6 +344,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -27,7 +27,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * Configure the increment button. The `color` and `size` are inherited.
      * @defaultValue { variant: 'link' }
      */
-    increment?: ButtonProps;
+    increment?: boolean | ButtonProps;
     /**
      * The icon displayed to increment the value.
      * @defaultValue appConfig.ui.icons.plus
@@ -40,7 +40,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * Configure the decrement button. The `color` and `size` are inherited.
      * @defaultValue { variant: 'link' }
      */
-    decrement?: ButtonProps;
+    decrement?: boolean | ButtonProps;
     /**
      * The icon displayed to decrement the value.
      * @defaultValue appConfig.ui.icons.minus
@@ -69,7 +69,7 @@ export interface InputNumberSlots {
     increment(props?: {}): any;
     decrement(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
     inputRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -178,8 +178,11 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
+    decrement: boolean | ButtonProps;
+    increment: boolean | ButtonProps;
     orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/InputNumber.vue

@@ -21,10 +21,10 @@ const props = defineProps({
   size: { type: null, required: false },
   highlight: { type: Boolean, required: false },
   orientation: { type: String, required: false, default: "horizontal" },
-  increment: { type: Object, required: false },
+  increment: { type: [Boolean, Object], required: false, default: true },
   incrementIcon: { type: [String, Object], required: false },
   incrementDisabled: { type: Boolean, required: false },
-  decrement: { type: Object, required: false },
+  decrement: { type: [Boolean, Object], required: false, default: true },
   decrementIcon: { type: [String, Object], required: false },
   decrementDisabled: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
@@ -64,7 +64,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber |
   size: inputSize.value,
   highlight: highlight.value,
   orientation: props.orientation,
-  fieldGroup: orientation.value
+  fieldGroup: orientation.value,
+  increment: props.orientation === "vertical" ? !!props.increment || !!props.decrement : !!props.increment,
+  decrement: props.orientation === "vertical" ? false : !!props.decrement
 }));
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp));
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));
@@ -118,7 +120,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="!!increment" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -133,7 +135,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="!!decrement" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton

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

@@ -27,7 +27,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * Configure the increment button. The `color` and `size` are inherited.
      * @defaultValue { variant: 'link' }
      */
-    increment?: ButtonProps;
+    increment?: boolean | ButtonProps;
     /**
      * The icon displayed to increment the value.
      * @defaultValue appConfig.ui.icons.plus
@@ -40,7 +40,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * Configure the decrement button. The `color` and `size` are inherited.
      * @defaultValue { variant: 'link' }
      */
-    decrement?: ButtonProps;
+    decrement?: boolean | ButtonProps;
     /**
      * The icon displayed to decrement the value.
      * @defaultValue appConfig.ui.icons.minus
@@ -69,7 +69,7 @@ export interface InputNumberSlots {
     increment(props?: {}): any;
     decrement(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
     inputRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -178,8 +178,11 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
     onChange?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
+    decrement: boolean | ButtonProps;
+    increment: boolean | ButtonProps;
     orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -49,25 +49,24 @@ export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmi
 type SlotProps<T extends InputTagItem> = (props: {
     item: T;
     index: number;
+    ui: InputTags['ui'];
 }) => any;
 export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
-    'leading'(props?: {}): any;
-    'default'(props?: {}): any;
-    'trailing'(props?: {}): any;
+    'leading'(props: {
+        ui: InputTags['ui'];
+    }): any;
+    'default'(props: {
+        ui: InputTags['ui'];
+    }): any;
+    'trailing'(props: {
+        ui: InputTags['ui'];
+    }): any;
     'item-text': SlotProps<T>;
     'item-delete': SlotProps<T>;
 }
-declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
-        readonly onInvalid?: ((payload: T) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
-        readonly onAddTag?: ((payload: T) => any) | undefined;
-        readonly onRemoveTag?: ((payload: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInvalid" | "onUpdate:modelValue" | "onRemoveTag" | "onAddTag"> & InputTagsProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+declare const __VLS_export: <T extends InputTagItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<InputTagsProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "removeTag", payload: T) => void) & ((evt: "addTag", payload: T) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
             $data: {};
@@ -173,13 +172,14 @@ declare const _default: <T extends InputTagItem>(__VLS_props: NonNullable<Awaite
                 default?: (props: {}) => any;
             };
         }) | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: InputTagsSlots<T>;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "removeTag", payload: T) => void) & ((evt: "addTag", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/InputTags.vue

@@ -120,14 +120,14 @@ defineExpose({
       :class="ui.item({ class: [props.ui?.item] })"
     >
       <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
-        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" />
+        <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
         :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
-        <slot name="item-delete" :item="item" :index="index">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
           <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
@@ -143,17 +143,17 @@ defineExpose({
       @focus="onFocus"
     />
 
-    <slot />
+    <slot :ui="ui" />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <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">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>