mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 19:17:48 +00:00
b116ab5ad3
--------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
|
|
|
const emit = defineEmits(['add', 'import', 'export']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const contactMenuItems = [
|
|
{
|
|
label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
|
|
action: 'add',
|
|
value: 'add',
|
|
icon: 'i-lucide-plus',
|
|
},
|
|
{
|
|
label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
|
|
action: 'export',
|
|
value: 'export',
|
|
icon: 'i-lucide-upload',
|
|
},
|
|
{
|
|
label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
|
|
action: 'import',
|
|
value: 'import',
|
|
icon: 'i-lucide-download',
|
|
},
|
|
];
|
|
const showActionsDropdown = ref(false);
|
|
|
|
const handleContactAction = ({ action }) => {
|
|
if (action === 'add') {
|
|
emit('add');
|
|
} else if (action === 'import') {
|
|
emit('import');
|
|
} else if (action === 'export') {
|
|
emit('export');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
|
|
<Button
|
|
icon="i-lucide-ellipsis-vertical"
|
|
color="slate"
|
|
variant="ghost"
|
|
size="sm"
|
|
:class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
|
|
@click="showActionsDropdown = !showActionsDropdown"
|
|
/>
|
|
<DropdownMenu
|
|
v-if="showActionsDropdown"
|
|
:menu-items="contactMenuItems"
|
|
class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
|
|
@action="handleContactAction($event)"
|
|
/>
|
|
</div>
|
|
</template>
|