shadcn-vue/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
zernonia 02fe76d1f0
refactor: replace iconify icons with @radix-icons/vue for newyork style (#87)
* refactor: changes all instance of unplugin-icons to radix-icons

* chore: build registry

* test: fix new deps
2023-09-27 12:26:24 +08:00

36 lines
1.1 KiB
Vue

<script setup lang="ts">
import { DotsHorizontalIcon } from '@radix-icons/vue'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
import { Button } from '@/lib/registry/new-york/ui/button'
defineProps<{
payment: {
id: string
}
}>()
function copy(id: string) {
navigator.clipboard.writeText(id)
}
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="h-8 w-8 p-0">
<span class="sr-only">Open menu</span>
<DotsHorizontalIcon class="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem @click="copy(payment.id)">
Copy payment ID
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>View customer</DropdownMenuItem>
<DropdownMenuItem>View payment details</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>