@eslamdevui/ui 3.2.0-beta.1 → 3.2.0-beta.2

package/dist/runtime/components/Pagination.vue

@@ -47,51 +47,51 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination ||
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
-        <slot name="first">
-          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
-        </slot>
-      </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
-        <slot name="prev">
-          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
-        </slot>
-      </PaginationPrev>
-
-      <template v-for="(item, index) in items">
-        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value" :class="ui.item({ class: props.ui?.item })">
-          <slot name="item" v-bind="{ item, index, page, pageCount }">
-            <UButton
-              :color="page === item.value ? activeColor : color"
-              :variant="page === item.value ? activeVariant : variant"
-              :size="size"
-              :label="String(item.value)"
-              :ui="{ label: ui.label() }"
-              :to="to?.(item.value)"
-              square
-            />
-          </slot>
-        </PaginationListItem>
-
-        <PaginationEllipsis v-else :key="item.type" :index="index" as-child :class="ui.ellipsis({ class: props.ui?.ellipsis })">
-          <slot name="ellipsis">
-            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
-          </slot>
-        </PaginationEllipsis>
-      </template>
-
-      <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
-        <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
-        </slot>
-      </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">
-        <slot name="last">
-          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
-        </slot>
-      </PaginationLast>
-    </PaginationList>
-  </PaginationRoot>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
+        <slot name="first">
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
+        <slot name="prev">
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value" :class="ui.item({ class: props.ui?.item })">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <UButton
+              :color="page === item.value ? activeColor : color"
+              :variant="page === item.value ? activeVariant : variant"
+              :size="size"
+              :label="String(item.value)"
+              :ui="{ label: ui.label() }"
+              :to="to?.(item.value)"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child :class="ui.ellipsis({ class: props.ui?.ellipsis })">
+          <slot name="ellipsis">
+            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
+        <slot name="next">
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">
+        <slot name="last">
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
 </template>

package/dist/runtime/components/PinInput.vue

@@ -71,24 +71,24 @@ defineExpose({
 </script>
 
 <template>
-  <PinInputRoot
-    v-bind="{ ...rootProps, ...ariaAttrs }"
-    :id="id"
-    :name="name"
-    :placeholder="placeholder"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @update:model-value="emitFormInput()"
-    @complete="onComplete"
-  >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => inputsRef[index] = el"
-      :index="index"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-  </PinInputRoot>
+  <PinInputRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    :name="name"
+    :placeholder="placeholder"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="emitFormInput()"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :ref="(el) => inputsRef[index] = el"
+      :index="index"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+  </PinInputRoot>
 </template>

package/dist/runtime/components/Popover.vue

@@ -53,21 +53,21 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 </script>
 
 <template>
-  <Component.Root v-slot="{ open }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
-    </Component.Trigger>
-
-    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" />
-    </Component.Anchor>
-
-    <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
-        <slot name="content" />
-
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
-      </Component.Content>
-    </Component.Portal>
-  </Component.Root>
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </Component.Trigger>
+
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" />
+    </Component.Anchor>
+
+    <Component.Portal v-bind="portalProps">
+      <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+        <slot name="content" />
+
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
 </template>

package/dist/runtime/components/Progress.vue

@@ -110,23 +110,23 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
-      <slot name="status" :percent="percent">
-        {{ percent }}%
-      </slot>
-    </div>
-
-    <ProgressRoot v-bind="rootProps" :max="realMax" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
-    </ProgressRoot>
-
-    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })">
-      <div v-for="(step, index) in max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
-        <slot :name="`step-${index}`" :step="step">
-          {{ step }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+      <slot name="status" :percent="percent">
+        {{ percent }}%
+      </slot>
+    </div>
+
+    <ProgressRoot v-bind="rootProps" :max="realMax" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
+      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+    </ProgressRoot>
+
+    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })">
+      <div v-for="(step, index) in max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
+        <slot :name="`step-${index}`" :step="step">
+          {{ step }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/RadioGroup.vue

@@ -87,47 +87,47 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <RadioGroupRoot
-    :id="id"
-    v-slot="{ modelValue }"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @update:model-value="onUpdate"
-  >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
-        <slot name="legend">
-          {{ legend }}
-        </slot>
-      </legend>
-
-      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-          <RadioGroupItem
-            :id="item.id"
-            :value="item.value"
-            :disabled="item.disabled"
-            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
-          >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
-          </RadioGroupItem>
-        </div>
-
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
-            <slot name="label" :item="item" :model-value="modelValue">
-              {{ item.label }}
-            </slot>
-          </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
-            <slot name="description" :item="item" :model-value="modelValue">
-              {{ item.description }}
-            </slot>
-          </p>
-        </div>
-      </component>
-    </fieldset>
-  </RadioGroupRoot>
+  <RadioGroupRoot
+    :id="id"
+    v-slot="{ modelValue }"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+
+      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
+          <RadioGroupItem
+            :id="item.id"
+            :value="item.value"
+            :disabled="item.disabled"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
+          >
+            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
+          </RadioGroupItem>
+        </div>
+
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+            <slot name="label" :item="item" :model-value="modelValue">
+              {{ item.label }}
+            </slot>
+          </component>
+          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+            <slot name="description" :item="item" :model-value="modelValue">
+              {{ item.description }}
+            </slot>
+          </p>
+        </div>
+      </component>
+    </fieldset>
+  </RadioGroupRoot>
 </template>

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>