From e08263ff3886b43030c9c8903ecce510f10fef12 Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Wed, 12 Jul 2023 15:52:57 +0300
Subject: [PATCH] docs(Dropdown): add an example item slot (#304)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../content/examples/DropdownExampleSlot.vue  | 47 ++++++++++++++
 docs/content/2.elements/4.dropdown.md         | 64 +++++++++++++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 docs/components/content/examples/DropdownExampleSlot.vue

diff --git a/docs/components/content/examples/DropdownExampleSlot.vue b/docs/components/content/examples/DropdownExampleSlot.vue
new file mode 100644
index 00000000..80a3dea0
--- /dev/null
+++ b/docs/components/content/examples/DropdownExampleSlot.vue
@@ -0,0 +1,47 @@
+<script setup>
+const items = [
+  [{
+    label: 'ben@example.com',
+    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>
diff --git a/docs/content/2.elements/4.dropdown.md b/docs/content/2.elements/4.dropdown.md
index 67b7e71b..f2667880 100644
--- a/docs/content/2.elements/4.dropdown.md
+++ b/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: 'ben@example.com',
+    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