@nuxt/ui 4.6.1 → 4.7.0

package/dist/runtime/components/InputTags.vue

@@ -57,10 +57,10 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputTags", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), 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 inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags || {} })({
   color: color.value,
   variant: props.variant,

package/dist/runtime/components/InputTime.vue

@@ -60,10 +60,10 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("inputTime", 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, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 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?.inputTime || {} })({
   color: color.value,
   variant: props.variant,

package/dist/runtime/components/Link.vue

@@ -5,10 +5,11 @@ import theme from "#build/ui/link";
 <script setup>
 import { computed } from "vue";
 import { isEqual } from "ohash/utils";
-import { useForwardProps } from "reka-ui";
+import { useForwardProps, Slot } from "reka-ui";
 import { defu } from "defu";
+import { hasProtocol } from "ufo";
 import { reactiveOmit } from "@vueuse/core";
-import { useRoute, useAppConfig } from "#imports";
+import { useRoute, useAppConfig, useNuxtApp } from "#imports";
 import { mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { isPartiallyEqual } from "../utils/link";
@@ -46,6 +47,7 @@ const props = defineProps({
 defineSlots();
 const route = useRoute();
 const appConfig = useAppConfig();
+const nuxtApp = useNuxtApp();
 const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
@@ -58,11 +60,39 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-const to = computed(() => props.to ?? props.href);
-function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+const to = computed(() => {
+  const path = props.to ?? props.href;
+  if (!path) return path;
+  if (typeof path !== "string") return path;
+  if (props.external || hasProtocol(path, { acceptRelative: true })) {
+    return path;
+  }
+  const localePath = nuxtApp.$localePath;
+  if (localePath) {
+    return localePath(path);
+  }
+  return path;
+});
+const isInternalLink = computed(() => {
+  if (!to.value) return false;
+  if (props.external) return false;
+  if (typeof to.value !== "string") return true;
+  if (hasProtocol(to.value, { acceptRelative: true })) return false;
+  if (props.target && props.target !== "_self") return false;
+  return true;
+});
+const externalRel = computed(() => {
+  if (props.noRel) return null;
+  if (props.rel) return props.rel;
+  return "noopener noreferrer";
+});
+function isLinkActive({ route: linkRoute, isActive, isExactActive } = {}) {
   if (props.active !== void 0) {
     return props.active;
   }
+  if (!to.value) {
+    return false;
+  }
   if (props.exactQuery === "partial") {
     if (!isPartiallyEqual(linkRoute.query, route.query)) return false;
   } else if (props.exactQuery === true) {
@@ -79,7 +109,7 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   }
   return false;
 }
-function resolveLinkClass({ route: route2, isActive, isExactActive }) {
+function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
   const active = isLinkActive({ route: route2, isActive, isExactActive });
   if (props.raw) {
     return [props.class, active ? props.activeClass : props.inactiveClass];
@@ -89,8 +119,8 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
-    <template v-if="custom">
+  <NuxtLink v-if="isInternalLink" v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive, ...rest }" v-bind="nuxtLinkProps" :to="to" custom>
+    <Slot v-if="custom">
       <slot
         v-bind="{
   ...$attrs,
@@ -106,7 +136,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
 }"
       />
-    </template>
+    </Slot>
     <ULinkBase
       v-else
       v-bind="{
@@ -126,4 +156,30 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
       <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
     </ULinkBase>
   </NuxtLink>
+
+  <Slot v-else-if="custom">
+    <slot
+      v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {},
+  active: active ?? false
+}"
+    />
+  </Slot>
+  <ULinkBase
+    v-else
+    v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  ...to ? { href: String(to), target: props.target, rel: externalRel, isExternal: true } : {}
+}"
+    :class="resolveLinkClass()"
+  >
+    <slot :active="active ?? false" />
+  </ULinkBase>
 </template>

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

@@ -0,0 +1,228 @@
+import type { VNode } from 'vue';
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/listbox';
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
+import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Listbox = ComponentConfig<typeof theme, AppConfig, 'listbox'>;
+export interface ListboxItem {
+    label?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    chip?: ChipProps;
+    /**
+     * The item type.
+     * @defaultValue 'item'
+     */
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?: (e: Event) => void;
+    class?: any;
+    ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
+    [key: string]: any;
+}
+export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {
+    id?: string;
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Listbox['variants']['size'];
+    /**
+     * The items to display in the list.
+     */
+    items?: T;
+    /**
+     * The controlled value of the Listbox. Can be bound with `v-model`.
+     */
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    modelModifiers?: Mod;
+    /**
+     * The default value when not controlled.
+     */
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>;
+    /**
+     * Whether multiple items can be selected.
+     * @defaultValue false
+     */
+    multiple?: M & boolean;
+    /**
+     * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+     * @defaultValue undefined
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether the list is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * The icon displayed when loading.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Whether to display a filter input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    /**
+     * The fields to filter by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
+    /**
+     * The icon displayed when an item is selected.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    selectedIcon?: IconProps['name'];
+    /**
+     * Enable virtualization for large lists.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 32
+         */
+        estimateSize?: number | ((index: number) => number);
+    };
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    class?: any;
+    ui?: Listbox['slots'];
+}
+export type ListboxEmits<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> = Pick<ListboxRootEmits, 'entryFocus' | 'highlight' | 'leave'> & {
+    'change': [event: Event];
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<T, VK, M>, Mod>];
+};
+type SlotProps<T> = (props: {
+    item: T;
+    index: number;
+    ui: Listbox['ui'];
+}) => VNode[];
+export type ListboxSlots<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>> = {
+    'loading'?(props?: {}): VNode[];
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'item'?: SlotProps<NestedItem<T>>;
+    'item-leading'?: SlotProps<NestedItem<T>>;
+    'item-label'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-description'?(props: {
+        item: NestedItem<T>;
+        index: number;
+    }): VNode[];
+    'item-trailing'?: SlotProps<NestedItem<T>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ListboxProps<T, VK, M, Mod> & {
+        searchTerm?: string;
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+        onLeave?: ((event: Event) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ListboxSlots<T>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Listbox.vue

@@ -0,0 +1,242 @@
+<script>
+import { computed, toRaw, toRef } from "vue";
+import theme from "#build/ui/listbox";
+</script>
+
+<script setup>
+import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter, useForwardPropsEmits } from "reka-ui";
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useFilter } from "../composables/useFilter";
+import { useFormField } from "../composables/useFormField";
+import { useLocale } from "../composables/useLocale";
+import { get, isArrayOfArray, looseToNumber } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+import UChip from "./Chip.vue";
+import UInput from "./Input.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  modelModifiers: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  filter: { type: [Boolean, Object], required: false, default: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  selectedIcon: { type: null, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  highlight: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  by: { type: [String, Function], required: false },
+  disabled: { type: Boolean, required: false },
+  highlightOnHover: { type: Boolean, required: false, default: true },
+  name: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false }
+});
+const emits = defineEmits(["entryFocus", "highlight", "leave", "change", "update:modelValue"]);
+const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("listbox", props);
+const { filterGroups } = useFilter();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "multiple", "selectionBehavior", "highlightOnHover", "by", "orientation", "required"), emits);
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, size.value || "md", props.descriptionKey, !!slots["item-description"])
+  });
+});
+const inputProps = toRef(() => defu(typeof props.filter === "object" ? props.filter : {}, { placeholder: t("listbox.search"), variant: "none" }));
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(props, { bind: false });
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.listbox || {} })({
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
+  disabled: disabled.value,
+  virtualize: !!props.virtualize
+}));
+function onUpdate(value) {
+  if (toRaw(props.modelValue) === value) {
+    return;
+  }
+  if (props.modelModifiers?.trim && (typeof value === "string" || value === null || value === void 0)) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
+    value ??= void 0;
+  }
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onSelect(e, item) {
+  if (item.disabled) {
+    e.preventDefault();
+    return;
+  }
+  item.onSelect?.(e);
+}
+const groups = computed(
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
+);
+function isStructuralItem(item) {
+  return !!item.type && ["label", "separator"].includes(item.type);
+}
+const filteredGroups = computed(() => {
+  if (props.ignoreFilter || !searchTerm.value) {
+    return groups.value;
+  }
+  const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
+  return filterGroups(groups.value, searchTerm.value, {
+    fields,
+    isStructural: isStructuralItem
+  });
+});
+const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group));
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, index }">
+    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+      {{ get(item, props.labelKey) }}
+    </ListboxGroupLabel>
+
+    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+
+    <RekaListboxItem
+      v-else
+      :value="props.valueKey ? get(item, props.valueKey) : item"
+      :disabled="item.disabled"
+      data-slot="item"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      @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="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UChip
+            v-else-if="item.chip"
+            :size="item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+            inset
+            standalone
+            v-bind="item.chip"
+            data-slot="itemLeadingChip"
+            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+          />
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || get(item, props.descriptionKey) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
+          <span v-if="get(item, props.labelKey) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel] })">
+            <slot name="item-label" :item="item" :index="index">
+              {{ get(item, props.labelKey) }}
+            </slot>
+          </span>
+
+          <span v-if="get(item, props.descriptionKey) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+            <slot name="item-description" :item="item" :index="index">
+              {{ get(item, props.descriptionKey) }}
+            </slot>
+          </span>
+        </span>
+
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+          <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
+
+          <ListboxItemIndicator as-child>
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+          </ListboxItemIndicator>
+        </span>
+      </slot>
+    </RekaListboxItem>
+  </DefineItemTemplate>
+
+  <ListboxRoot
+    :id="id"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :disabled="disabled"
+    :name="name"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <ListboxFilter v-if="filter" v-model="searchTerm" as-child>
+      <UInput
+        :autofocus="autofocus"
+        :autofocus-delay="autofocusDelay"
+        :size="size"
+        v-bind="inputProps"
+        data-slot="input"
+        :class="ui.input({ class: uiProp?.input })"
+      />
+    </ListboxFilter>
+
+    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+      <div v-if="loading" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+        <slot name="loading">
+          <UIcon :name="loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: uiProp?.loadingIcon })" />
+        </slot>
+      </div>
+      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t("listbox.noMatch", { searchTerm }) : t("listbox.noData") }}
+        </slot>
+      </div>
+
+      <ListboxVirtualizer
+        v-else-if="!!virtualize"
+        v-slot="{ option: item, virtualItem }"
+        :options="filteredItems"
+        :text-content="(item2) => get(item2, props.labelKey)"
+        v-bind="virtualizerProps"
+      >
+        <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+      </ListboxVirtualizer>
+
+      <template v-else>
+        <ListboxGroup 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" />
+        </ListboxGroup>
+      </template>
+    </ListboxContent>
+  </ListboxRoot>
+</template>