56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import Dropdown from '../Dropdown.vue';
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
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>
|
|
<Dropdown :align="align" :content-classes="['py-1']">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
:class="[
|
|
'inline-flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 transition-colors',
|
|
sizeClasses[size],
|
|
]"
|
|
aria-label="Actions"
|
|
>
|
|
<FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<slot :handle-action="handleAction" />
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
|
|
|