@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/Select.vue

@@ -3,29 +3,37 @@ import theme from "#build/ui/select";
 </script>
 
 <script setup>
-import { reactivePick } from "@vueuse/core";
+import { createReusableTemplate, reactivePick } from "@vueuse/core";
 import { defu } from "defu";
-import { SelectArrow, SelectContent, SelectGroup, SelectItem as RekaSelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, useForwardPropsEmits } from "reka-ui";
-import { computed, onMounted, shallowRef, toRef } from "vue";
+import { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, FocusScope, useFilter, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, shallowRef, toRaw, toRef } from "vue";
 import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
+import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { get, getDisplayValue, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
+import Button from "./Button.vue";
 import Chip from "./Chip.vue";
 import Icon from "./Icon.vue";
+import Input from "./Input.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
   placeholder: { type: String, required: false },
+  searchInput: { type: [Boolean, Object], required: false, default: false },
+  searchTerm: { type: String, required: false, default: "" },
+  required: { type: Boolean, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
   color: { type: null, required: false },
   trailingIcon: { type: [String, Object], required: false },
   selectedIcon: { type: [String, Object], required: false },
+  clear: { type: [Boolean, Object], required: false },
+  clearIcon: { type: [String, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
@@ -35,8 +43,12 @@ const props = defineProps({
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  createItem: { type: [Boolean, String, Object], required: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
   ui: { type: null, required: false },
@@ -50,17 +62,25 @@ const props = defineProps({
   loadingIcon: { type: [String, Object], required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  autocomplete: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   name: { type: String, required: false },
-  required: { type: Boolean, required: false }
+  resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
+  resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
+  resetModelValueOnClear: { type: Boolean, required: false, default: true },
+  highlightOnHover: { type: Boolean, required: false }
 });
-const emit = defineEmits(["update:open", "change", "blur", "focus", "update:modelValue"]);
+const emit = defineEmits(["highlight", "update:open", "change", "blur", "focus", "create", "clear", "update:searchTerm", "update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emit);
+const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
+const { t } = useLocale();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { contains } = useFilter({ sensitivity: "base" });
+const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover"), emit);
 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 clearProps = computed(() => typeof props.clear === "object" ? props.clear : {});
+const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("select.search"), ...props.searchInput ? {} : { readonly: true } }));
 const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormField(props);
 const { size: fieldGroupSize, orientation } = useFieldGroup(props);
 const appConfig = useAppConfig();
@@ -76,13 +96,41 @@ const ui = computed(() => {
     color: color.value,
     highlight: highlight.value,
     leading: isLeading.value || !!props.avatar || !!slots.leading,
-    trailing: isTrailing.value || !!slots.trailing
+    trailing: isTrailing.value || !!slots.trailing,
+    searchInput: !!props.searchInput
   });
 });
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
 );
 const items = computed(() => groups.value.flat());
+const filteredGroups = computed(() => {
+  if (props.ignoreFilter || !searchTerm.value)
+    return groups.value;
+  const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
+  return groups.value.map((items2) => items2.filter((item) => {
+    if (item == null)
+      return false;
+    if (typeof item !== "object")
+      return contains(String(item), searchTerm.value);
+    if (item.type && ["label", "separator"].includes(item.type))
+      return true;
+    return fields.some((field) => {
+      const value = get(item, field);
+      return value != null && contains(String(value), searchTerm.value);
+    });
+  })).filter((group) => group.some((item) => !isSelectItem(item) || (!item.type || !["label", "separator"].includes(item.type))));
+});
+const filteredItems = computed(() => filteredGroups.value.flat());
+const createItem = computed(() => {
+  if (!props.createItem || !searchTerm.value)
+    return false;
+  const newItem = props.valueKey ? { [props.valueKey]: searchTerm.value } : searchTerm.value;
+  if (typeof props.createItem === "object" && props.createItem.when === "always" || props.createItem === "always")
+    return !filteredItems.value.some((item) => compare(item, newItem, props.valueKey));
+  return !filteredItems.value.length;
+});
+const createItemPosition = computed(() => typeof props.createItem === "object" ? props.createItem.position : "bottom");
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
     const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
@@ -108,167 +156,270 @@ onMounted(() => {
   setTimeout(() => autoFocus(), props.autofocusDelay);
 });
 function onUpdate(value) {
+  if (toRaw(props.modelValue) === value)
+    return;
+  if (props.modelModifiers?.trim)
+    value = value?.trim() ?? null;
+  if (props.modelModifiers?.number)
+    value = looseToNumber(value);
+  if (props.modelModifiers?.nullable)
+    value ??= null;
+  if (props.modelModifiers?.optional)
+    value ??= void 0;
   const event = new Event("change", { target: { value } });
   emit("change", event);
   emitFormChange();
   emitFormInput();
+  if (props.resetSearchTermOnSelect)
+    searchTerm.value = "";
 }
 function onUpdateOpen(value) {
+  let timeoutId;
   if (value) {
     const event = new FocusEvent("focus");
     emit("focus", event);
     emitFormFocus();
+    clearTimeout(timeoutId);
   } else {
     const event = new FocusEvent("blur");
     emit("blur", event);
     emitFormBlur();
+    if (props.resetSearchTermOnBlur) {
+      const STATE_ANIMATION_DELAY_MS = 100;
+      timeoutId = setTimeout(() => {
+        searchTerm.value = "";
+      }, STATE_ANIMATION_DELAY_MS);
+    }
+  }
+}
+function onCreate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  emit("create", searchTerm.value);
+}
+function onSelect(e, item) {
+  if (!isSelectItem(item))
+    return;
+  if (item.disabled) {
+    e.preventDefault();
+    return;
   }
+  item.onSelect?.(e);
 }
 function isSelectItem(item) {
   return typeof item === "object" && item !== null;
 }
+function isModelValueEmpty(modelValue) {
+  if (props.multiple && Array.isArray(modelValue))
+    return modelValue.length === 0;
+  return modelValue == null || modelValue === "";
+}
+function onClear() {
+  emit("clear");
+}
 defineExpose({
-  triggerRef
+  triggerRef: toRef(() => triggerRef.value?.$el)
 });
 </script>
 
 <template>
-  <SelectRoot
-    v-slot="{ modelValue, open }"
-    :name="name"
-    v-bind="rootProps"
-    :default-value="defaultValue"
-    :model-value="modelValue"
-    :autocomplete="props.autocomplete"
-    :disabled="disabled"
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-  >
-    <SelectTrigger
-      ref="triggerRef"
-      v-bind="{ id, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
-      data-part="base"
-    >
-      <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
-          <Icon
-            v-if="isLeading && leadingIconName"
-            :name="leadingIconName"
-            :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-            data-part="leadingIcon"
-          />
-          <Avatar
-            v-else-if="props.avatar"
-            :size="props.ui?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
-            v-bind="props.avatar"
-            :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-            data-part="leadingAvatar"
-          />
-        </slot>
-      </span>
-
-      <slot :model-value="modelValue" :open="open" :ui="ui">
-        <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
-          <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
-            {{ displayedModelValue }}
-          </span>
-          <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
-            <template v-if="props.placeholder">{{ props.placeholder }}</template>
-            <template v-else>&nbsp;</template>
-          </span>
-        </template>
-      </slot>
-
-      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
-          <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
-        </slot>
-      </span>
-    </SelectTrigger>
-
-    <SelectPortal v-bind="portalProps">
-      <SelectContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
-        <slot name="content-top"></slot>
-
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
-            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })" data-part="label">
-                {{ get(item, props.labelKey) }}
-              </SelectLabel>
-
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" data-part="separator" />
-
-              <RekaSelectItem
-                v-else
-                :value="isSelectItem(item) ? get(item, props.valueKey) : item"
-                :disabled="isSelectItem(item) && item.disabled"
-                :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
-                data-part="item"
-                @select="isSelectItem(item) && item.onSelect?.($event)"
-              >
-                <slot name="item" :item="item" :index="index" :ui="ui">
-                  <slot name="item-leading" :item="item" :index="index" :ui="ui">
-                    <Icon
-                      v-if="isSelectItem(item) && item.icon"
-                      :name="item.icon"
-                      :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
-                      data-part="itemLeadingIcon"
-                    />
-                    <Avatar
-                      v-else-if="isSelectItem(item) && item.avatar"
-                      :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
-                      v-bind="item.avatar"
-                      :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
-                      data-part="itemLeadingAvatar"
-                    />
-                    <Chip
-                      v-else-if="isSelectItem(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] })"
-                      data-part="itemLeadingChip"
-                    />
-                  </slot>
-
-                  <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, ...isSelectItem(item) ? [item.ui?.itemWrapper] : []] })" data-part="itemWrapper">
-                    <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
-                      <slot name="item-label" :item="item" :index="index">
-                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                      </slot>
-                    </SelectItemText>
-
-                    <span
-                      v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
-                      :class="ui.itemDescription({ class: [props.ui?.itemDescription, ...isSelectItem(item) ? [item.ui?.itemDescription] : []] })"
-                      data-part="itemDescription"
-                    >
-                      <slot name="item-description" :item="item" :index="index">
-                        {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
-                      </slot>
-                    </span>
-                  </span>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
-                    <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
-
-                    <SelectItemIndicator as-child>
-                      <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
-                    </SelectItemIndicator>
-                  </span>
-                </slot>
-              </RekaSelectItem>
-            </template>
-          </SelectGroup>
-        </div>
-
-        <slot name="content-bottom"></slot>
-
-        <SelectArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+  <DefineCreateItemTemplate>
+    <ComboboxItem
+      :value="searchTerm"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+      @select="onCreate"
+    >
+      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })" data-part="itemLabel">
+        <slot name="create-item-label" :item="searchTerm">
+          {{ t("select.create", { label: searchTerm }) }}
+        </slot>
+      </span>
+    </ComboboxItem>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :name="name"
+    :disabled="disabled"
+    ignore-filter
+    as-child
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+  >
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base" tabindex="0">
+        <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+          <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
+            <Icon
+              v-if="isLeading && leadingIconName"
+              :name="leadingIconName"
+              :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+              data-part="leadingIcon"
+            />
+            <Avatar
+              v-else-if="props.avatar"
+              :size="props.ui?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
+              v-bind="props.avatar"
+              :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+              data-part="leadingAvatar"
+            />
+          </slot>
+        </span>
+
+        <slot :model-value="modelValue" :open="open" :ui="ui">
+          <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+            <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
+              {{ displayedModelValue }}
+            </span>
+            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
+              <template v-if="props.placeholder">{{ props.placeholder }}</template>
+              <template v-else>&nbsp;</template>
+            </span>
+          </template>
+        </slot>
+
+        <span v-if="isTrailing || !!slots.trailing || props.clear" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+          <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
+            <ComboboxCancel v-if="props.clear && !isModelValueEmpty(modelValue)" as-child>
+              <Button
+                as="span"
+                :icon="props.clearIcon || appConfig.ui.icons.close"
+                variant="link"
+                color="neutral"
+                tabindex="-1"
+                v-bind="clearProps"
+                :class="ui.trailingClear({ class: props.ui?.trailingClear })"
+                data-part="trailingClear"
+                @click.stop="onClear"
+              />
+            </ComboboxCancel>
+            <Icon v-else-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+          </slot>
+        </span>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-bind="portalProps">
+      <ComboboxContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
+        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })" data-part="focusScope">
+          <slot name="content-top"></slot>
+
+          <ComboboxInput v-model="searchTerm" :display-value="() => searchTerm" as-child>
+            <Input
+              autofocus
+              autocomplete="off"
+              :size="props.size"
+              v-bind="searchInputProps"
+              :class="ui.input({ class: props.ui?.input })"
+              data-part="input"
+              @change.stop
+            />
+          </ComboboxInput>
+
+          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })" data-part="empty">
+            <slot name="empty" :search-term="searchTerm">
+              {{ searchTerm ? t("select.noMatch", { searchTerm }) : t("select.noData") }}
+            </slot>
+          </ComboboxEmpty>
+
+          <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+            <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
+
+            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+                <ComboboxLabel
+                  v-if="isSelectItem(item) && item.type === 'label'"
+                  :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"
+                  data-part="label"
+                >
+                  {{ get(item, props.labelKey) }}
+                </ComboboxLabel>
+
+                <ComboboxSeparator
+                  v-else-if="isSelectItem(item) && item.type === 'separator'"
+                  :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })"
+                  data-part="separator"
+                />
+
+                <ComboboxItem
+                  v-else
+                  :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
+                  :disabled="isSelectItem(item) && item.disabled"
+                  :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
+                  data-part="item"
+                  @select="onSelect($event, item)"
+                >
+                  <slot name="item" :item="item" :index="index" :ui="ui">
+                    <slot name="item-leading" :item="item" :index="index" :ui="ui">
+                      <Icon
+                        v-if="isSelectItem(item) && item.icon"
+                        :name="item.icon"
+                        :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
+                        data-part="itemLeadingIcon"
+                      />
+                      <Avatar
+                        v-else-if="isSelectItem(item) && item.avatar"
+                        :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
+                        v-bind="item.avatar"
+                        :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
+                        data-part="itemLeadingAvatar"
+                      />
+                      <Chip
+                        v-else-if="isSelectItem(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] })"
+                        data-part="itemLeadingChip"
+                      />
+                    </slot>
+
+                    <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })" data-part="itemWrapper">
+                      <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
+                        <slot name="item-label" :item="item" :index="index">
+                          {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                        </slot>
+                      </span>
+
+                      <span
+                        v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
+                        :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })"
+                        data-part="itemDescription"
+                      >
+                        <slot name="item-description" :item="item" :index="index">
+                          {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
+                        </slot>
+                      </span>
+                    </span>
+
+                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
+                      <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
+
+                      <ComboboxItemIndicator as-child>
+                        <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
+                      </ComboboxItemIndicator>
+                    </span>
+                  </slot>
+                </ComboboxItem>
+              </template>
+            </ComboboxGroup>
+
+            <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })" data-part="group">
+              <ReuseCreateItemTemplate />
+            </ComboboxGroup>
+          </div>
+
+          <slot name="content-bottom"></slot>
+        </FocusScope>
+
+        <ComboboxArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>