@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

package/dist/runtime/components/Select.vue

@@ -126,100 +126,100 @@ defineExpose({
 </script>
 
 <template>
-  <SelectRoot
-    v-slot="{ modelValue, open }"
-    :name="name"
-    v-bind="rootProps"
-    :autocomplete="autocomplete"
-    :disabled="disabled"
-    :default-value="defaultValue"
-    :model-value="modelValue"
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-  >
-    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
-      <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>
-
-      <slot :model-value="modelValue" :open="open">
-        <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
-          <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
-            {{ displayedModelValue }}
-          </span>
-          <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
-            {{ placeholder ?? "\xA0" }}
-          </span>
-        </template>
-      </slot>
-
-      <span 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>
-      </span>
-    </SelectTrigger>
-
-    <SelectPortal v-bind="portalProps">
-      <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <slot name="content-top" />
-
-        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.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] })">
-                {{ 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] })" />
-
-              <SelectItem
-                v-else
-                :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
-                :disabled="isSelectItem(item) && item.disabled"
-                :value="isSelectItem(item) ? get(item, props.valueKey) : item"
-                @select="isSelectItem(item) && item.onSelect?.($event)"
-              >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
-                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                    <UAvatar 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?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                    <UChip
-                      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] })"
-                    />
-                  </slot>
-
-                  <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </SelectItemText>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                    <slot name="item-trailing" :item="item" :index="index" />
-
-                    <SelectItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
-                    </SelectItemIndicator>
-                  </span>
-                </slot>
-              </SelectItem>
-            </template>
-          </SelectGroup>
-        </div>
-
-        <slot name="content-bottom" />
-
-        <SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+  <SelectRoot
+    v-slot="{ modelValue, open }"
+    :name="name"
+    v-bind="rootProps"
+    :autocomplete="autocomplete"
+    :disabled="disabled"
+    :default-value="defaultValue"
+    :model-value="modelValue"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+  >
+    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+      <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>
+
+      <slot :model-value="modelValue" :open="open">
+        <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+          <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+            {{ displayedModelValue }}
+          </span>
+          <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
+            {{ placeholder ?? "\xA0" }}
+          </span>
+        </template>
+      </slot>
+
+      <span 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>
+      </span>
+    </SelectTrigger>
+
+    <SelectPortal v-bind="portalProps">
+      <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <slot name="content-top" />
+
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.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] })">
+                {{ 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] })" />
+
+              <SelectItem
+                v-else
+                :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+                :disabled="isSelectItem(item) && item.disabled"
+                :value="isSelectItem(item) ? get(item, props.valueKey) : item"
+                @select="isSelectItem(item) && item.onSelect?.($event)"
+              >
+                <slot name="item" :item="item" :index="index">
+                  <slot name="item-leading" :item="item" :index="index">
+                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                    <UAvatar 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?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                    <UChip
+                      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] })"
+                    />
+                  </slot>
+
+                  <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+                    <slot name="item-label" :item="item" :index="index">
+                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                    </slot>
+                  </SelectItemText>
+
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+                    <slot name="item-trailing" :item="item" :index="index" />
+
+                    <SelectItemIndicator as-child>
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+                    </SelectItemIndicator>
+                  </span>
+                </slot>
+              </SelectItem>
+            </template>
+          </SelectGroup>
+        </div>
+
+        <slot name="content-bottom" />
+
+        <SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>

package/dist/runtime/components/SelectMenu.vue

@@ -195,134 +195,134 @@ 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("selectMenu.create", { label: searchTerm }) }}
-          </slot>
-        </span>
-      </ComboboxItem>
-    </ComboboxGroup>
-  </DefineCreateItemTemplate>
-
-  <ComboboxRoot
-    :id="id"
-    v-slot="{ modelValue, open }"
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
-    ignore-filter
-    as-child
-    :name="name"
-    :disabled="disabled"
-    @update:model-value="onUpdate"
-    @update:open="onUpdateOpen"
-  >
-    <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
-        <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>
-
-        <slot :model-value="modelValue" :open="open">
-          <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
-            <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
-              {{ displayedModelValue }}
-            </span>
-            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
-              {{ placeholder ?? "\xA0" }}
-            </span>
-          </template>
-        </slot>
-
-        <span 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>
-        </span>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
-        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })">
-          <slot name="content-top" />
-
-          <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <UInput autofocus autocomplete="off" :size="size" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
-          </ComboboxInput>
-
-          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
-            <slot name="empty" :search-term="searchTerm">
-              {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.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="isSelectItem(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="isSelectItem(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, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
-                  :disabled="isSelectItem(item) && item.disabled"
-                  :value="props.valueKey && isSelectItem(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="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                      <UAvatar 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?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                      <UChip
-                        v-else-if="isSelectItem(item) && item.chip"
-                        :size="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, isSelectItem(item) && item.ui?.itemLabel] })">
-                      <slot name="item-label" :item="item" :index="index">
-                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                      </slot>
-                    </span>
-
-                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(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, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
-                      </ComboboxItemIndicator>
-                    </span>
-                  </slot>
-                </ComboboxItem>
-              </template>
-            </ComboboxGroup>
-
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-          </div>
-
-          <slot name="content-bottom" />
-        </FocusScope>
-
-        <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("selectMenu.create", { label: searchTerm }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
+  <ComboboxRoot
+    :id="id"
+    v-slot="{ modelValue, open }"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    ignore-filter
+    as-child
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
+  >
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+        <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>
+
+        <slot :model-value="modelValue" :open="open">
+          <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+            <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
+              {{ displayedModelValue }}
+            </span>
+            <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
+              {{ placeholder ?? "\xA0" }}
+            </span>
+          </template>
+        </slot>
+
+        <span 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>
+        </span>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-bind="portalProps">
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+        <FocusScope trapped :class="ui.focusScope({ class: props.ui?.focusScope })">
+          <slot name="content-top" />
+
+          <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
+            <UInput autofocus autocomplete="off" :size="size" v-bind="searchInputProps" :class="ui.input({ class: props.ui?.input })" />
+          </ComboboxInput>
+
+          <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty" :search-term="searchTerm">
+              {{ searchTerm ? t("selectMenu.noMatch", { searchTerm }) : t("selectMenu.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="isSelectItem(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="isSelectItem(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, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+                  :disabled="isSelectItem(item) && item.disabled"
+                  :value="props.valueKey && isSelectItem(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="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                      <UAvatar 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?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+                      <UChip
+                        v-else-if="isSelectItem(item) && item.chip"
+                        :size="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, isSelectItem(item) && item.ui?.itemLabel] })">
+                      <slot name="item-label" :item="item" :index="index">
+                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                      </slot>
+                    </span>
+
+                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(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, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+                      </ComboboxItemIndicator>
+                    </span>
+                  </slot>
+                </ComboboxItem>
+              </template>
+            </ComboboxGroup>
+
+            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+          </div>
+
+          <slot name="content-bottom" />
+        </FocusScope>
+
+        <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>

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

@@ -175,11 +175,11 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
         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"> & (SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
@@ -289,10 +289,10 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
     }>): void;
     attrs: any;
     slots: SelectMenuSlots<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>;
 };

package/dist/runtime/components/Separator.vue

@@ -35,19 +35,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator ||
 </script>
 
 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.border({ class: props.ui?.border })" />
-
-    <template v-if="label || icon || avatar || !!slots.default">
-      <div :class="ui.container({ class: props.ui?.container })">
-        <slot>
-          <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
-          <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-          <UAvatar v-else-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-        </slot>
-      </div>
-
-      <div :class="ui.border({ class: props.ui?.border })" />
-    </template>
-  </Separator>
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.border({ class: props.ui?.border })" />
+
+    <template v-if="label || icon || avatar || !!slots.default">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <slot>
+          <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UAvatar v-else-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+        </slot>
+      </div>
+
+      <div :class="ui.border({ class: props.ui?.border })" />
+    </template>
+  </Separator>
 </template>

package/dist/runtime/components/Skeleton.vue

@@ -16,14 +16,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {
 </script>
 
 <template>
-  <Primitive
-    :as="as"
-    aria-busy="true"
-    aria-label="loading"
-    aria-live="polite"
-    role="alert"
-    :class="ui({ class: props.class })"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    :as="as"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    role="alert"
+    :class="ui({ class: props.class })"
+  >
+    <slot />
+  </Primitive>
 </template>