Initial commit

2025-12-21 09:57:09 -05:00
commit 8ac20d8b45
38 changed files with 4677 additions and 0 deletions
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { FileActionsMenu } from '@/components'
+
+defineProps<{
+  collections: FileCollectionObject[]
+  entities: FileEntityObject[]
+  selectedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+</script>
+
+<template>
+  <div class="files-grid pa-4">
+    <!-- Folders -->
+    <div
+      v-for="folder in collections"
+      :key="folder.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(folder.id) }"
+      @click="emit('item-click', folder, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="folder"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="amber-darken-2">mdi-folder</v-icon>
+      <div class="files-grid-label">{{ folder.label }}</div>
+    </div>
+    
+    <!-- Files -->
+    <div
+      v-for="entity in entities"
+      :key="entity.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(entity.id) }"
+      @click="emit('item-click', entity, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="entity"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      <div class="files-grid-label">{{ entity.label }}</div>
+      <div class="files-grid-size">{{ formatSize(entity.size) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 16px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+}
+
+.files-grid-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  content-visibility: auto;
+  contain-intrinsic-size: 120px 120px;
+}
+
+.files-grid-item:hover {
+  background-color: rgb(var(--v-theme-surface-variant), 0.5);
+}
+
+.files-grid-item.selected {
+  background-color: rgb(var(--v-theme-primary), 0.12);
+}
+
+.files-grid-item-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.files-grid-item:hover .files-grid-item-actions,
+.files-grid-item.selected .files-grid-item-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.files-grid-label {
+  margin-top: 8px;
+  font-size: 13px;
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.files-grid-size {
+  font-size: 11px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-top: 2px;
+}
+
+@media (max-width: 600px) {
+  .files-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 8px;
+  }
+}
+</style>