88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
// label - The label of the item.
|
||
|
|
// labelClass - The class of the item label.
|
||
|
|
// icon - The icon of the item.
|
||
|
|
// iconClass - The class of the item icon.
|
||
|
|
// avatar - The avatar of the item. You can pass all the props of the Avatar component.
|
||
|
|
// shortcuts - The shortcuts of the item.
|
||
|
|
// slot - The slot of the item.
|
||
|
|
// disabled - Whether the item is disabled.
|
||
|
|
// class - The class of the item.
|
||
|
|
// click - The click handler of the item.
|
||
|
|
|
||
|
|
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
|
||
|
|
mode="hover"
|
||
|
|
:items="items"
|
||
|
|
:popper="{ placement: 'bottom-start' }"
|
||
|
|
>
|
||
|
|
<UButton
|
||
|
|
color="white"
|
||
|
|
label="Options"
|
||
|
|
trailing-icon="i-heroicons-chevron-down-20-solid"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- <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>
|