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>

docs/content/3.components/input.md

@@ -86,6 +86,7 @@ ignore:
 props:
   color: gray
   variant: subtle
+  highlight: false
   placeholder: 'Search...'
 ---
 ::

docs/content/3.components/radio-group.md

@@ -20,6 +20,7 @@ Use the `items` prop as an array of strings, numbers or booleans:
 
 ::component-code
 ---
+prettier: true
 ignore:
   - modelValue
   - items
@@ -65,9 +66,11 @@ props:
 ---
 ::
 
+::important
 When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
+::
 
-However, you can change the property that is used to set the value by using the `value-key` prop.
+You can change the property that is used to set the value by using the `value-key` prop.
 
 ::component-code
 ---
@@ -100,24 +103,19 @@ Use the `legend` prop to set the legend of the RadioGroup.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - defaultValue
   - items
 external:
   - items
 props:
-  defaultValue: 'system'
   legend: 'Theme'
+  defaultValue: 'System'
   items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
+    - 'System'
+    - 'Light'
+    - 'Dark'
 ---
 ::
 
@@ -127,24 +125,19 @@ Use the `orientation` prop to change the orientation of the RadioGroup. Defaults
 
 ::component-code
 ---
+prettier: true
 ignore:
   - defaultValue
   - items
 external:
   - items
 props:
-  defaultValue: 'system'
   orientation: 'horizontal'
+  defaultValue: 'System'
   items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
+    - 'System'
+    - 'Light'
+    - 'Dark'
 ---
 ::
 
@@ -154,24 +147,19 @@ Use the `color` prop to change the color of the RadioGroup.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - defaultValue
   - items
 external:
   - items
 props:
-  defaultValue: 'system'
   color: 'gray'
+  defaultValue: 'System'
   items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
+    - 'System'
+    - 'Light'
+    - 'Dark'
 ---
 ::
 
@@ -181,24 +169,19 @@ Use the `size` prop to change the size of the RadioGroup.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - defaultValue
   - items
 external:
   - items
 props:
-  defaultValue: 'system'
   size: 'xl'
+  defaultValue: 'System'
   items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
+    - 'System'
+    - 'Light'
+    - 'Dark'
 ---
 ::
 
@@ -208,24 +191,19 @@ Use the `disabled` prop to disable the RadioGroup.
 
 ::component-code
 ---
+prettier: true
 ignore:
   - defaultValue
   - items
 external:
   - items
 props:
-  defaultValue: 'system'
   disabled: true
+  defaultValue: 'System'
   items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
+    - 'System'
+    - 'Light'
+    - 'Dark'
 ---
 ::