feat(Select/SelectMenu): handle size prop (#133)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app/pages/alert.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/alert'
 
-const variants = Object.keys(theme.variants.variant)
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
 
 const actions = (variant?: string) => [{
   label: 'Action',
@@ -37,7 +37,7 @@ const data = {
       v-bind="data"
       :actions="actions(variant)"
       color="primary"
-      :variant="(variant as any)"
+      :variant="variant"
     />
   </div>
 </template>

playground/app/pages/avatar.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import theme from '#build/ui/avatar'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 </script>
 
 <template>
   <div class="flex flex-col gap-2 items-center">
     <div class="flex items-center gap-1.5">
-      <UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="(size as any)" />
+      <UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="size" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="(size as any)" />
+      <UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="size" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="(size as any)" />
+      <UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="size" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar v-for="size in sizes" :key="size" :text="size" :size="(size as any)" />
+      <UAvatar v-for="size in sizes" :key="size" :text="size" :size="size" />
     </div>
 
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="2">
+      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="size" :max="2">
         <UChip inset text="1">
           <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
         </UChip>
@@ -29,7 +29,7 @@ const sizes = Object.keys(theme.variants.size)
       </UAvatarGroup>
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="(size as any)" :max="4">
+      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="size" :max="4">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
         <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
         <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />

playground/app/pages/badge.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import theme from '#build/ui/badge'
 
-const sizes = Object.keys(theme.variants.size)
-const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const variants = Object.keys(theme.variants.variant)
       </UBadge>
     </div>
     <div class="flex items-center gap-2">
-      <UBadge v-for="variant in variants" :key="variant" label="Badge" :variant="(variant as any)" />
+      <UBadge v-for="variant in variants" :key="variant" label="Badge" :variant="variant" />
     </div>
     <div class="flex items-center gap-2">
       <UBadge label="Badge" color="white" />
@@ -25,7 +25,7 @@ const variants = Object.keys(theme.variants.variant)
       <UBadge label="Badge" color="black" />
     </div>
     <div class="flex items-center gap-2 ml-[-56px]">
-      <UBadge v-for="size in sizes" :key="size" label="Badge" :size="(size as any)" />
+      <UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
     </div>
   </div>
 </template>

playground/app/pages/button-group.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/button'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 </script>
 
 <template>
@@ -46,7 +46,7 @@ const sizes = Object.keys(theme.variants.size)
     </div>
 
     <div class="flex gap-4 items-center justify-center">
-      <UButtonGroup v-for="size in sizes" :key="size" :size="(size as any)">
+      <UButtonGroup v-for="size in sizes" :key="size" :size="size">
         <UInput />
         <UButton color="white">
           Click me!

playground/app/pages/button.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import theme from '#build/ui/button'
 
-const sizes = Object.keys(theme.variants.size)
-const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
 </script>
 
 <template>
@@ -28,7 +28,7 @@ const variants = Object.keys(theme.variants.variant)
       </UButton>
     </div>
     <div class="flex items-center gap-2">
-      <UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" label="Button" :variant="(variant as any)" />
+      <UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" label="Button" :variant="variant" />
     </div>
     <div class="flex items-center gap-2">
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
@@ -46,10 +46,10 @@ const variants = Object.keys(theme.variants.variant)
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
     <div class="flex items-center gap-2 ml-[-129px]">
-      <UButton v-for="size in sizes" :key="size" label="Button" :size="(size as any)" />
+      <UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
     </div>
     <div class="flex items-center gap-2 ml-[-171px]">
-      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="(size as any)" />
+      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
     </div>
     <div class="flex items-center gap-2 ml-[-159px]">
       <UButton
@@ -58,11 +58,11 @@ const variants = Object.keys(theme.variants.variant)
         icon="i-heroicons-rocket-launch"
         label="Square"
         square
-        :size="(size as any)"
+        :size="size"
       />
     </div>
     <div class="flex items-center gap-2 ml-[-68px]">
-      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="(size as any)" />
+      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
     </div>
     <div class="flex items-center gap-2">
       <UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" block />

playground/app/pages/checkbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/checkbox'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const checked = ref(false)
 </script>
@@ -18,10 +18,10 @@ const checked = ref(false)
       <UCheckbox label="Icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
     </div>
     <div class="flex items-center gap-4 mr-[-11px]">
-      <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />
     </div>
     <div class="flex items-center gap-4 mr-[-96px]">
-      <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="(size as any)" />
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="size" />
     </div>
   </div>
 </template>

playground/app/pages/chip.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import theme from '#build/ui/chip'
 
-const sizes = Object.keys(theme.variants.size)
-const positions = Object.keys(theme.variants.position)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const positions = Object.keys(theme.variants.position) as Array<keyof typeof theme.variants.position>
 
 const items = [{
   name: 'messages',
@@ -18,7 +18,7 @@ const items = [{
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex items-center gap-2">
-      <UChip v-for="position in positions" :key="position" :position="(position as any)">
+      <UChip v-for="position in positions" :key="position" :position="position">
         <UButton icon="i-heroicons-inbox" color="gray" />
       </UChip>
     </div>
@@ -30,7 +30,7 @@ const items = [{
     </div>
 
     <div class="flex items-center gap-2">
-      <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
+      <UChip v-for="size in sizes" :key="size" :size="size" inset text="1">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
       </UChip>
     </div>

playground/app/pages/command-palette.vue

@@ -11,7 +11,7 @@ const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
 const selected = ref([])
 
-const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   // params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -98,7 +98,7 @@ defineShortcuts({
     <UCommandPalette
       v-model="selected"
       v-model:search-term="searchTerm"
-      :loading="pending"
+      :loading="status === 'pending'"
       :groups="groups"
       :fuse="{
         fuseOptions: {

playground/app/pages/form-field.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import theme from '#build/ui/form-field'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+
 const feedbacks = [
   { description: 'This is a description' },
   { error: 'This is an error' },
@@ -25,7 +26,7 @@ const feedbacks = [
       <UFormField
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Email"
         name="email"
       >
@@ -37,7 +38,7 @@ const feedbacks = [
       <UFormField
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Email"
         description="This is a description"
         name="email"

playground/app/pages/input-menu.vue

@@ -3,7 +3,7 @@ import { refDebounced } from '@vueuse/core'
 import type { User } from '~/types'
 import theme from '#build/ui/input-menu'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -31,7 +31,7 @@ const statuses = [{
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
 
-const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -51,57 +51,51 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
       <UInputMenu :items="items" placeholder="Required" required />
       <UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
       <UInputMenu :items="items" loading placeholder="Search..." />
-      <UInputMenu :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid">
-        <template #leading="{ modelValue }">
-          <UIcon v-if="modelValue?.icon" :name="modelValue.icon" class="size-5" />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputMenu
+        v-for="size in sizes"
+        :key="size"
+        :items="items"
+        placeholder="Search..."
+        :size="size"
+        class="w-60"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputMenu
+        v-for="size in sizes"
+        :key="size"
+        :items="statuses"
+        placeholder="Search status..."
+        icon="i-heroicons-magnifying-glass"
+        trailing-icon="i-heroicons-chevron-up-down-20-solid"
+        :size="size"
+        class="w-60"
+      >
+        <template #leading="{ modelValue, ui }">
+          <UIcon v-if="modelValue?.icon" :name="modelValue.icon" :class="ui.leadingIcon()" />
         </template>
       </UInputMenu>
+    </div>
+    <div class="flex items-center gap-4">
       <UInputMenu
+        v-for="size in sizes"
+        :key="size"
         v-model:search-term="searchTerm"
         :items="users || []"
-        :loading="pending"
+        :loading="status === 'pending'"
         :filter="false"
         icon="i-heroicons-user"
         placeholder="Search users..."
+        :size="size"
+        class="w-60"
       >
-        <template #leading="{ modelValue }">
-          <UAvatar v-if="modelValue?.avatar" size="2xs" v-bind="modelValue.avatar" />
+        <template #leading="{ modelValue, ui }">
+          <UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
         </template>
       </UInputMenu>
     </div>
-    <div class="flex items-center gap-4">
-      <UInputMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
-    <div class="flex items-center gap-4">
-      <UInputMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        icon="i-heroicons-magnifying-glass"
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
-    <div class="flex items-center gap-4">
-      <UInputMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        icon="i-heroicons-magnifying-glass"
-        trailing
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
     <div class="flex items-center gap-4">
       <UInputMenu
         v-for="size in sizes"
@@ -111,7 +105,7 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
         multiple
         icon="i-heroicons-magnifying-glass"
         placeholder="Search..."
-        :size="(size as any)"
+        :size="size"
         class="w-60"
       />
     </div>

playground/app/pages/input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/input'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 </script>
 
 <template>
@@ -26,7 +26,7 @@ const sizes = Object.keys(theme.variants.size)
         v-for="size in sizes"
         :key="size"
         placeholder="Search..."
-        :size="(size as any)"
+        :size="size"
         class="w-60"
       />
     </div>
@@ -36,7 +36,7 @@ const sizes = Object.keys(theme.variants.size)
         :key="size"
         icon="i-heroicons-magnifying-glass"
         placeholder="Search..."
-        :size="(size as any)"
+        :size="size"
         class="w-60"
       />
     </div>
@@ -47,7 +47,7 @@ const sizes = Object.keys(theme.variants.size)
         icon="i-heroicons-magnifying-glass"
         trailing
         placeholder="Search..."
-        :size="(size as any)"
+        :size="size"
         class="w-60"
       />
     </div>

playground/app/pages/kbd.vue

@@ -2,7 +2,8 @@
 import theme from '#build/ui/kbd'
 import { kbdKeysMap } from '@nuxt/ui/runtime/composables/useKbd.js'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+
 const kbdKeys = Object.keys(kbdKeysMap)
 </script>
 
@@ -21,7 +22,7 @@ const kbdKeys = Object.keys(kbdKeysMap)
       <UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
     </div>
     <div class="flex items-center gap-1 ml-[-22px]">
-      <UKbd v-for="size in sizes" :key="size" value="meta" :size="(size as any)" />
+      <UKbd v-for="size in sizes" :key="size" value="meta" :size="size" />
     </div>
   </div>
 </template>

playground/app/pages/modal.vue

@@ -2,11 +2,13 @@
 import { LazyModalProgrammaticExample } from '#components'
 
 const open = ref(false)
+const count = ref(0)
 
 const modal = useModal()
-const count = ref(0)
-const openModal = () => {
+
+function openModal() {
   count.value++
+
   modal.open(LazyModalProgrammaticExample, {
     description: 'And you can even provide a description !',
     count: count.value

playground/app/pages/progress.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue'
 import theme from '#build/ui/progress'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const value1 = ref(0)
 const value2 = ref(0)
@@ -43,7 +43,7 @@ onMounted(() => {
     </div>
 
     <div class="flex items-center gap-4">
-      <UProgress v-for="size in sizes" :key="size" v-model="value1" :size="(size as any)" class="w-48" />
+      <UProgress v-for="size in sizes" :key="size" v-model="value1" :size="size" class="w-48" />
     </div>
 
     <div class="h-48 flex items-center gap-8">
@@ -63,7 +63,7 @@ onMounted(() => {
     </div>
 
     <div class="h-48 flex items-center gap-8">
-      <UProgress v-for="size in sizes" :key="size" v-model="value1" orientation="vertical" :size="(size as any)" />
+      <UProgress v-for="size in sizes" :key="size" v-model="value1" orientation="vertical" :size="size" />
     </div>
   </div>
 </template>

playground/app/pages/radio-group.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/radio-group'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const literalOptions = [
   'Option 1',
@@ -33,11 +33,11 @@ const itemsWithDescription = [
     </div>
 
     <div class="flex items-center gap-4 ml-[34px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="items" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="items" />
     </div>
 
     <div class="flex items-center gap-4 ml-[74px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="itemsWithDescription" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="itemsWithDescription" />
     </div>
 
     <div class="flex gap-4">

playground/app/pages/select-menu.vue

@@ -3,7 +3,7 @@ import { refDebounced } from '@vueuse/core'
 import theme from '#build/ui/select-menu'
 import type { User } from '~/types'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -36,7 +36,7 @@ const statuses = [{
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
 
-const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -56,57 +56,51 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
       <USelectMenu :items="items" placeholder="Required" required />
       <USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
       <USelectMenu :items="items" loading placeholder="Search..." />
-      <USelectMenu :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid">
-        <template #leading="{ modelValue }">
-          <UIcon v-if="modelValue" :name="modelValue.icon" class="size-5" />
+    </div>
+    <div class="flex items-center gap-4">
+      <USelectMenu
+        v-for="size in sizes"
+        :key="size"
+        :items="items"
+        placeholder="Search..."
+        :size="size"
+        class="w-60"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <USelectMenu
+        v-for="size in sizes"
+        :key="size"
+        :items="statuses"
+        placeholder="Search status..."
+        icon="i-heroicons-magnifying-glass"
+        trailing-icon="i-heroicons-chevron-up-down-20-solid"
+        :size="size"
+        class="w-60"
+      >
+        <template #leading="{ modelValue, ui }">
+          <UIcon v-if="modelValue" :name="modelValue.icon" :class="ui.leadingIcon()" />
         </template>
       </USelectMenu>
+    </div>
+    <div class="flex items-center gap-4">
       <USelectMenu
+        v-for="size in sizes"
+        :key="size"
         v-model:search-term="searchTerm"
         :items="users || []"
-        :loading="pending"
+        :loading="status === 'pending'"
         :filter="false"
         icon="i-heroicons-user"
         placeholder="Search users..."
+        :size="size"
+        class="w-60"
         @update:open="searchTerm = ''"
       >
-        <template #leading="{ modelValue }">
-          <UAvatar v-if="modelValue?.avatar" size="2xs" v-bind="modelValue.avatar" />
+        <template #leading="{ modelValue, ui }">
+          <UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
         </template>
       </USelectMenu>
     </div>
-    <div class="flex items-center gap-4">
-      <USelectMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
-    <div class="flex items-center gap-4">
-      <USelectMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        icon="i-heroicons-magnifying-glass"
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
-    <div class="flex items-center gap-4">
-      <USelectMenu
-        v-for="size in sizes"
-        :key="size"
-        :items="items"
-        icon="i-heroicons-magnifying-glass"
-        trailing
-        placeholder="Search..."
-        :size="(size as any)"
-        class="w-60"
-      />
-    </div>
   </div>
 </template>

playground/app/pages/select.vue

@@ -2,7 +2,7 @@
 import theme from '#build/ui/select'
 import type { User } from '~/types'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
 const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -31,12 +31,20 @@ const statuses = [{
   icon: 'i-heroicons-x-circle'
 }]
 
-const { data: users, pending } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   transform: (data: User[]) => {
-    return data?.map(user => ({ label: user.name, value: user.id, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+    return data?.map(user => ({ label: user.name, value: String(user.id), avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
   },
   lazy: true
 })
+
+function getStatusIcon(value: string): string {
+  return statuses.find(status => status.value === value)?.icon || 'i-heroicons-user'
+}
+
+function getUserAvatar(value: string) {
+  return users.value?.find(user => user.value === value)?.avatar || {}
+}
 </script>
 
 <template>
@@ -49,8 +57,6 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
       <USelect :items="items" placeholder="Disabled" disabled />
       <USelect :items="items" placeholder="Required" required />
       <USelect :items="items" loading placeholder="Search..." />
-      <USelect :items="statuses" placeholder="Search status..." icon="i-heroicons-magnifying-glass" trailing-icon="i-heroicons-chevron-up-down-20-solid" />
-      <USelect :items="users || []" :loading="pending" icon="i-heroicons-user" placeholder="Search users..." />
     </div>
     <div class="flex items-center gap-4">
       <USelect
@@ -58,7 +64,7 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
         :key="size"
         :items="items"
         placeholder="Search..."
-        :size="(size as any)"
+        :size="size"
         class="w-60"
       />
     </div>
@@ -66,24 +72,33 @@ const { data: users, pending } = await useFetch('https://jsonplaceholder.typicod
       <USelect
         v-for="size in sizes"
         :key="size"
-        :items="items"
+        :items="statuses"
+        placeholder="Search status..."
         icon="i-heroicons-magnifying-glass"
-        placeholder="Search..."
-        :size="(size as any)"
+        trailing-icon="i-heroicons-chevron-up-down-20-solid"
+        :size="size"
         class="w-60"
-      />
+      >
+        <template #leading="{ modelValue, ui }">
+          <UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
+        </template>
+      </USelect>
     </div>
     <div class="flex items-center gap-4">
       <USelect
         v-for="size in sizes"
         :key="size"
-        :items="items"
-        icon="i-heroicons-magnifying-glass"
-        trailing
-        placeholder="Search..."
-        :size="(size as any)"
+        :items="users || []"
+        :loading="status === 'pending'"
+        icon="i-heroicons-user"
+        placeholder="Search users..."
+        :size="size"
         class="w-60"
-      />
+      >
+        <template #leading="{ modelValue, ui }">
+          <UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue)" />
+        </template>
+      </USelect>
     </div>
   </div>
 </template>

playground/app/pages/slideover.vue

@@ -2,11 +2,13 @@
 import { LazySlideoverProgrammaticExample } from '#components'
 
 const open = ref(false)
+const count = ref(0)
 
 const slideover = useSlideover()
-const count = ref(0)
-const openSlideover = () => {
+
+function openSlideover() {
   count.value++
+
   slideover.open(LazySlideoverProgrammaticExample, {
     description: 'And you can even provide a description!',
     count: count.value

playground/app/pages/slider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/slider'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const value = ref(50)
 </script>
@@ -26,7 +26,7 @@ const value = ref(50)
     </div>
 
     <div class="flex items-center gap-6">
-      <USlider v-for="size in sizes" :key="size" v-model="value" :size="(size as any)" class="w-48" />
+      <USlider v-for="size in sizes" :key="size" v-model="value" :size="size" class="w-48" />
     </div>
 
     <div class="h-48 flex items-center gap-6">

playground/app/pages/switch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/switch'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const checked = ref(false)
 </script>
@@ -17,13 +17,13 @@ const checked = ref(false)
       <USwitch color="red" label="Red" :default-value="true" />
     </div>
     <div class="flex items-center gap-4 ml-[-82px]">
-      <USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />
+      <USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />
     </div>
     <div class="flex items-center gap-4 ml-[-82px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Switch me"
         unchecked-icon="i-heroicons-x-mark-20-solid"
         checked-icon="i-heroicons-check-20-solid"
@@ -33,7 +33,7 @@ const checked = ref(false)
       <USwitch
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Switch me"
         unchecked-icon="i-heroicons-x-mark-20-solid"
         checked-icon="i-heroicons-check-20-solid"
@@ -44,7 +44,7 @@ const checked = ref(false)
       <USwitch
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Switch me"
         description="This is a description"
       />
@@ -53,7 +53,7 @@ const checked = ref(false)
       <USwitch
         v-for="size in sizes"
         :key="size"
-        :size="(size as any)"
+        :size="size"
         label="Switch me"
         description="This is a description"
         unchecked-icon="i-heroicons-x-mark-20-solid"

playground/app/pages/textarea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import theme from '#build/ui/textarea'
 
-const sizes = Object.keys(theme.variants.size)
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 </script>
 
 <template>
@@ -15,7 +15,7 @@ const sizes = Object.keys(theme.variants.size)
       <UTextarea autoresize :maxrows="5" :rows="1" />
     </div>
     <div class="flex items-center gap-4">
-      <UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="(size as any)" class="w-60" />
+      <UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="size" class="w-60" />
     </div>
   </div>
 </template>