134 lines
4.2 KiB
Vue
134 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Cloud,
|
|
CreditCard,
|
|
Github,
|
|
Keyboard,
|
|
LifeBuoy,
|
|
LogOut,
|
|
Mail,
|
|
MessageSquare,
|
|
Plus,
|
|
PlusCircle,
|
|
Settings,
|
|
User,
|
|
UserPlus,
|
|
Users,
|
|
} from 'lucide-vue-next'
|
|
import { ref } from 'vue'
|
|
import { Button } from '@/registry/default/ui/button'
|
|
import {
|
|
DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel,
|
|
DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
|
|
} from '@/registry/default/ui/dropdown-menu'
|
|
|
|
const dark = ref(true)
|
|
const radio = ref('top')
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="outline">
|
|
Open Dropdown Menu
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-56">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<User class="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<CreditCard class="mr-2 h-4 w-4" />
|
|
<span>Billing</span>
|
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Settings class="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Keyboard class="mr-2 h-4 w-4" />
|
|
<span>Keyboard shortcuts</span>
|
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<Users class="mr-2 h-4 w-4" />
|
|
<span>Team</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<UserPlus class="mr-2 h-4 w-4" />
|
|
<span>Invite users</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<Mail class="mr-2 h-4 w-4" />
|
|
<span>Email</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<MessageSquare class="mr-2 h-4 w-4" />
|
|
<span>Message</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<PlusCircle class="mr-2 h-4 w-4" />
|
|
<span>More...</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem>
|
|
<Plus class="mr-2 h-4 w-4" />
|
|
<span>New Team</span>
|
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<Github class="mr-2 h-4 w-4" />
|
|
<span>GitHub</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<LifeBuoy class="mr-2 h-4 w-4" />
|
|
<span>Support</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>
|
|
<Cloud class="mr-2 h-4 w-4" />
|
|
<span>API</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem v-model:checked="dark">
|
|
<span>Dark</span>
|
|
<DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuRadioGroup v-model="radio">
|
|
<DropdownMenuRadioItem value="top">
|
|
Top
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bottom">
|
|
Bottom
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="right">
|
|
Right
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogOut class="mr-2 h-4 w-4" />
|
|
<span>Log out</span>
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|