86 lines
3.1 KiB
Vue
86 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { CollectionObject } from '@DocumentsManager/models/collection'
|
|
import { EntityObject } from '@DocumentsManager/models/entity'
|
|
|
|
defineProps<{
|
|
item: CollectionObject | EntityObject
|
|
size?: 'x-small' | 'small' | 'default'
|
|
variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
|
|
buttonClass?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'open': [item: CollectionObject | EntityObject]
|
|
'rename': [item: CollectionObject | EntityObject]
|
|
'delete': [item: CollectionObject | EntityObject]
|
|
'download': [item: CollectionObject | EntityObject]
|
|
'show-details': [item: CollectionObject | EntityObject]
|
|
}>()
|
|
|
|
const menuOpen = ref(false)
|
|
|
|
function handleAction(action: string, item: CollectionObject | EntityObject, event: Event) {
|
|
event.stopPropagation()
|
|
menuOpen.value = false
|
|
|
|
if (action === 'open') {
|
|
emit('open', item)
|
|
} else if (action === 'rename') {
|
|
emit('rename', item)
|
|
} else if (action === 'delete') {
|
|
emit('delete', item)
|
|
} else if (action === 'download') {
|
|
emit('download', item)
|
|
} else if (action === 'details') {
|
|
emit('show-details', item)
|
|
}
|
|
}
|
|
|
|
function isEntity(item: CollectionObject | EntityObject): item is EntityObject {
|
|
return item instanceof EntityObject
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-menu v-model="menuOpen" location="bottom end">
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
v-bind="menuProps"
|
|
icon="mdi-dots-vertical"
|
|
:size="size ?? 'small'"
|
|
:variant="variant ?? 'text'"
|
|
:class="buttonClass"
|
|
@click.stop
|
|
/>
|
|
</template>
|
|
<v-list density="compact">
|
|
<v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('open', item, e)">
|
|
<template #prepend><v-icon size="small">mdi-open-in-app</v-icon></template>
|
|
<v-list-item-title>Open</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="(e: Event) => handleAction('details', item, e)">
|
|
<template #prepend><v-icon size="small">mdi-information-outline</v-icon></template>
|
|
<v-list-item-title>Details</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('download', item, e)">
|
|
<template #prepend><v-icon size="small">mdi-download</v-icon></template>
|
|
<v-list-item-title>Download</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item v-else @click="(e: Event) => handleAction('download', item, e)">
|
|
<template #prepend><v-icon size="small">mdi-folder-download</v-icon></template>
|
|
<v-list-item-title>Download as ZIP</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="(e: Event) => handleAction('rename', item, e)">
|
|
<template #prepend><v-icon size="small">mdi-pencil</v-icon></template>
|
|
<v-list-item-title>Rename</v-list-item-title>
|
|
</v-list-item>
|
|
<v-divider />
|
|
<v-list-item @click="(e: Event) => handleAction('delete', item, e)" class="text-error">
|
|
<template #prepend><v-icon size="small" color="error">mdi-delete</v-icon></template>
|
|
<v-list-item-title>Delete</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</template>
|