Initial commit

src/components/FileActionsMenu.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+defineProps<{
+  item: FileCollectionObject | FileEntityObject
+  size?: 'x-small' | 'small' | 'default'
+  variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+  buttonClass?: string
+}>()
+
+const emit = defineEmits<{
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+
+const menuOpen = ref(false)
+
+function handleAction(action: string, item: FileCollectionObject | FileEntityObject, event: Event) {
+  event.stopPropagation()
+  menuOpen.value = false
+  
+  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: FileCollectionObject | FileEntityObject): item is FileEntityObject {
+  return item['@type'] === 'files.entity'
+}
+</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 @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>