docs(Dropdown): add an example item slot (#304)

Co-authored-by: Benjamin Canac <[email protected]>

docs/components/content/examples/DropdownExampleSlot.vue

@@ -0,0 +1,47 @@
+<script setup>
+const items = [
+  [{
+    label: '[email protected]',
+    slot: 'account',
+    disabled: true
+  }], [{
+    label: 'Settings',
+    icon: 'i-heroicons-cog-8-tooth'
+  }], [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open'
+  }, {
+    label: 'Changelog',
+    icon: 'i-heroicons-megaphone'
+  }, {
+    label: 'Status',
+    icon: 'i-heroicons-signal'
+  }], [{
+    label: 'Sign out',
+    icon: 'i-heroicons-arrow-left-on-rectangle'
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+
+    <template #account="{ item }">
+      <div class="text-left">
+        <p>
+          Signed in as
+        </p>
+        <p class="truncate font-medium text-gray-900 dark:text-white">
+          {{ item.label }}
+        </p>
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <span class="truncate">{{ item.label }}</span>
+
+      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+    </template>
+  </UDropdown>
+</template>

docs/content/2.elements/4.dropdown.md

@@ -12,8 +12,10 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 
 - `label` - The label of the item.
 - `icon` - The icon of the item.
+- `iconClass` - The class of the icon of the item.
 - `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
 - `shortcuts` - The shortcuts of the item.
+- `slot` - The slot of the item.
 - `disabled` - Whether the item is disabled.
 - `click` - The click handler of the item.
 
@@ -95,6 +97,68 @@ const items = [
 ```
 ::
 
+## Slots
+
+### `item`
+
+Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item` property in the slot scope.
+
+::component-example
+#default
+:dropdown-example-slot
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: '[email protected]',
+    slot: 'account',
+    disabled: true
+  }], [{
+    label: 'Settings',
+    icon: 'i-heroicons-cog-8-tooth'
+  }], [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open'
+  }, {
+    label: 'Changelog',
+    icon: 'i-heroicons-megaphone'
+  }, {
+    label: 'Status',
+    icon: 'i-heroicons-signal'
+  }], [{
+    label: 'Sign out',
+    icon: 'i-heroicons-arrow-left-on-rectangle'
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+
+    <template #account="{ item }">
+      <div class="text-left">
+        <p>
+          Signed in as
+        </p>
+        <p class="truncate font-medium text-gray-900 dark:text-white">
+          {{ item.label }}
+        </p>
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <span class="truncate">{{ item.label }}</span>
+
+      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+    </template>
+  </UDropdown>
+</template>
+```
+::
+
 ## Props
 
 :component-props