docs(select): update

docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue

@@ -6,7 +6,9 @@
       color="gray"
       variant="subtle"
       trailing-icon="i-heroicons-chevron-down-20-solid"
-      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      :ui="{
+        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+      }"
       block
     />
 

docs/app/components/content/examples/select/SelectFetchExample.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  transform: (data: { name: string, id: number }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    })) || []
+  },
+  lazy: true
+})
+
+function getUserAvatar(value: string) {
+  return users.value?.find(user => user.value === value)?.avatar || {}
+}
+</script>
+
+<template>
+  <USelect
+    :items="users || []"
+    :loading="status === 'pending'"
+    icon="i-heroicons-user"
+    placeholder="Select user"
+    class="w-48"
+  >
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="getUserAvatar(modelValue)"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+  </USelect>
+</template>

docs/app/components/content/examples/select/SelectIconExample.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+</script>
+
+<template>
+  <USelect
+    default-value="Backlog"
+    :items="items"
+    :ui="{
+      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+    }"
+  />
+</template>

docs/app/components/content/examples/select/SelectItemsAvatarExample.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'benjamincanac',
+    value: 'benjamincanac',
+    avatar: {
+      src: 'https://github.com/benjamincanac.png',
+      alt: 'benjamincanac'
+    }
+  },
+  {
+    label: 'romhml',
+    value: 'romhml',
+    avatar: {
+      src: 'https://github.com/romhml.png',
+      alt: 'romhml'
+    }
+  },
+  {
+    label: 'noook',
+    value: 'noook',
+    avatar: {
+      src: 'https://github.com/noook.png',
+      alt: 'noook'
+    }
+  }
+])
+
+function getAvatar(value: string) {
+  return items.value.find(item => item.value === value)?.avatar
+}
+</script>
+
+<template>
+  <USelect default-value="benjamincanac" :items="items" class="w-40">
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="getAvatar(modelValue)"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+  </USelect>
+</template>

docs/app/components/content/examples/select/SelectItemsChipExample.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'bug',
+    value: 'bug',
+    chip: {
+      color: 'red' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'blue' as const
+    }
+  },
+  {
+    label: 'feature',
+    value: 'feature',
+    chip: {
+      color: 'violet' as const
+    }
+  }
+])
+
+function getChip(value: string) {
+  return items.value.find(item => item.value === value)?.chip
+}
+</script>
+
+<template>
+  <USelect default-value="bug" :items="items" class="w-40">
+    <template #leading="{ modelValue, ui }">
+      <UChip
+        v-if="modelValue"
+        v-bind="getChip(modelValue)"
+        inset
+        standalone
+        :size="ui.itemLeadingChipSize()"
+        :class="ui.itemLeadingChip()"
+      />
+    </template>
+  </USelect>
+</template>

docs/app/components/content/examples/select/SelectItemsIconExample.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const selected = ref('backlog')
+const items = ref([
+  {
+    label: 'Backlog',
+    value: 'backlog',
+    icon: 'i-heroicons-question-mark-circle'
+  },
+  {
+    label: 'Todo',
+    value: 'todo',
+    icon: 'i-heroicons-plus-circle'
+  },
+  {
+    label: 'In Progress',
+    value: 'in_progress',
+    icon: 'i-heroicons-arrow-up-circle'
+  },
+  {
+    label: 'Done',
+    value: 'done',
+    icon: 'i-heroicons-check-circle'
+  }
+])
+
+const icon = computed(() => items.value.find(item => item.value === selected.value)?.icon)
+</script>
+
+<template>
+  <USelect v-model="selected" :icon="icon" :items="items" class="w-40" />
+</template>

docs/app/components/content/examples/select/SelectOpenExample.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const open = ref(false)
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <USelect v-model:open="open" default-value="Backlog" :items="items" />
+</template>