feat(Alert): new component (#449)

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

@@ -0,0 +1,171 @@
+---
+description: Display a list of actions in a dropdown menu.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
+  - label: Menu
+    icon: i-simple-icons-headlessui
+    to: https://headlessui.com/vue/menu
+---
+
+## Usage
+
+Pass an array of arrays to the `items` prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:
+
+- `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.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+::component-example
+#default
+:dropdown-example-basic
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }], [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E'],
+    click: () => {
+      console.log('Edit')
+    }
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D'],
+    disabled: true
+  }], [{
+    label: 'Archive',
+    icon: 'i-heroicons-archive-box-20-solid'
+  }, {
+    label: 'Move',
+    icon: 'i-heroicons-arrow-right-circle-20-solid'
+  }], [{
+    label: 'Delete',
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>
+```
+::
+
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+::component-example
+#default
+:dropdown-example-mode
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>
+```
+::
+
+## 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
+
+## Preset
+
+:component-preset