52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
|
|
import Button from "../ui/button/Button.vue";
|
|
|
|
const props = defineProps({
|
|
align: {
|
|
type: String,
|
|
default: "right", // left, right
|
|
validator: (v) => ["left", "right"].includes(v),
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "md", // sm, md
|
|
validator: (v) => ["sm", "md"].includes(v),
|
|
},
|
|
});
|
|
|
|
const sizeClasses = {
|
|
sm: "h-6 w-6",
|
|
md: "h-8 w-8",
|
|
};
|
|
|
|
const emit = defineEmits(["action"]);
|
|
|
|
function handleAction(action) {
|
|
emit("action", action);
|
|
if (action.onClick) {
|
|
action.onClick();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="icon" aria-label="Actions">
|
|
<FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent :align="align === 'right' ? 'end' : 'start'" class="py-1">
|
|
<slot :handle-action="handleAction" />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|