@geode/opengeodeweb-front 10.10.2-rc.1 → 10.10.2-rc.3

package/app/components/DragAndDrop.vue

@@ -1,106 +1,144 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import { onMounted, onUnmounted, ref } from "vue";
+import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
+import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 
-const { multiple, accept, loading, showExtensions } = defineProps({
-  multiple: { type: Boolean, default: false },
-  accept: { type: String, default: "" },
-  loading: { type: Boolean, default: false },
-  showExtensions: { type: Boolean, default: true },
-});
+const { multiple, accept, loading, showExtensions, fullscreen, inline, showOverlay, texts } =
+  defineProps({
+    multiple: { type: Boolean, default: false },
+    accept: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+    showExtensions: { type: Boolean, default: true },
+    fullscreen: { type: Boolean, default: false },
+    inline: { type: Boolean, default: true },
+    showOverlay: { type: Boolean, default: true },
+    texts: {
+      type: Object,
+      default: () => ({
+        idle: "Click or drag and drop",
+        drop: "Drop files here",
+        loading: "Loading...",
+      }),
+    },
+  });
 
 const emit = defineEmits(["files-selected"]);
 
 const isDragging = ref(false);
+const isInternalDrag = ref(false);
+const dragCounter = ref(0);
 const fileInput = ref(undefined);
 
 function triggerFileDialog() {
   fileInput.value?.click();
 }
 
-function handleDrop(event) {
+function onDragEnter(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    dragCounter.value += 1;
+    isDragging.value = true;
+  }
+}
+
+function onDragLeave() {
+  dragCounter.value -= 1;
+  if (dragCounter.value <= 0) {
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
+}
+
+function onDragOver(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    event.preventDefault();
+  }
+}
+
+function onDrop(event) {
+  event.preventDefault();
+  dragCounter.value = 0;
   isDragging.value = false;
   const files = [...event.dataTransfer.files];
-  emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
+}
+
+function onKeyDown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
 }
 
 function handleFileSelect(event) {
   const files = [...event.target.files];
-  emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
   event.target.value = "";
 }
+
+function onInternalDragStart() {
+  isInternalDrag.value = true;
+}
+
+function onInternalDragEnd() {
+  isInternalDrag.value = false;
+}
+
+onMounted(() => {
+  globalThis.addEventListener("dragstart", onInternalDragStart);
+  globalThis.addEventListener("dragend", onInternalDragEnd);
+  globalThis.addEventListener("dragenter", onDragEnter);
+  globalThis.addEventListener("dragover", onDragOver);
+  globalThis.addEventListener("dragleave", onDragLeave);
+  globalThis.addEventListener("drop", onDrop);
+  globalThis.addEventListener("keydown", onKeyDown);
+});
+
+onUnmounted(() => {
+  globalThis.removeEventListener("dragstart", onInternalDragStart);
+  globalThis.removeEventListener("dragend", onInternalDragEnd);
+  globalThis.removeEventListener("dragenter", onDragEnter);
+  globalThis.removeEventListener("dragover", onDragOver);
+  globalThis.removeEventListener("dragleave", onDragLeave);
+  globalThis.removeEventListener("drop", onDrop);
+  globalThis.removeEventListener("keydown", onKeyDown);
+});
+
+defineExpose({ triggerFileDialog });
 </script>
 
 <template>
-  <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <GlassCard
-      v-bind="hoverProps"
-      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
-      :class="{
-        'elevation-4': isHovering || isDragging,
-        'elevation-0': !(isHovering || isDragging),
-      }"
-      :style="{
-        position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        background:
-          isHovering || isDragging
-            ? 'rgba(255, 255, 255, 0.08) !important'
-            : 'rgba(255, 255, 255, 0.03) !important',
-        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
-        pointerEvents: loading ? 'none' : 'auto',
-        opacity: loading ? 0.6 : 1,
-      }"
-      variant="panel"
-      padding="pa-0"
-      @click="triggerFileDialog"
-      @dragover.prevent="isDragging = true"
-      @dragleave.prevent="isDragging = false"
-      @drop.prevent="handleDrop"
-    >
-      <v-card-text class="pa-8">
-        <v-sheet
-          class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'"
-          rounded="circle"
-          width="80"
-          height="80"
-          style="transition: all 0.3s ease"
-        >
-          <v-icon
-            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-            size="40"
-            :color="isHovering || isDragging ? 'primary' : 'white'"
-            :class="{ rotating: loading }"
-          />
-        </v-sheet>
-
-        <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
-          style="transition: color 0.3s ease"
-        >
-          {{
-            loading ? "Uploading..." : isDragging ? "Drop to upload" : "Click or Drag & Drop files"
-          }}
-        </v-card-title>
-
-        <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">
-          {{ accept ? `(${accept} files)` : "All files allowed" }}
-        </v-card-subtitle>
-      </v-card-text>
-
-      <input
-        ref="fileInput"
-        type="file"
-        class="d-none"
-        :multiple="multiple"
-        :accept="accept"
-        @change="handleFileSelect"
-      />
-    </GlassCard>
-  </v-hover>
+  <DragAndDropInline
+    v-if="inline"
+    :is-dragging
+    :loading
+    :texts
+    :accept
+    :show-extensions
+    @click="triggerFileDialog"
+  />
+
+  <DragAndDropOverlay
+    v-if="isDragging && showOverlay"
+    :is-dragging
+    :show-overlay
+    :fullscreen
+    :loading
+    :texts
+    :multiple
+    :accept
+    :show-extensions
+  />
+
+  <input ref="fileInput" type="file" class="d-none" :multiple :accept @change="handleFileSelect" />
 </template>
 
-<style scoped>
+<style>
 .rotating {
   animation: rotate 1s linear infinite;
 }

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -0,0 +1,73 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+
+const { isDragging, loading, texts, accept, showExtensions } = defineProps({
+  isDragging: { type: Boolean, required: true },
+  loading: { type: Boolean, required: true },
+  texts: {
+    type: Object,
+    default: () => ({
+      idle: "Click or drag and drop",
+      drop: "Drop files here",
+      loading: "Loading...",
+    }),
+  },
+  accept: { type: String, default: "" },
+  showExtensions: { type: Boolean, required: true },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <GlassCard
+      v-bind="hoverProps"
+      class="drag-card-inline text-center cursor-pointer transition-swing"
+      :class="{ 'dragging-active': isDragging, 'elevation-8': isHovering }"
+      variant="ui"
+      @click="emit('click')"
+    >
+      <v-sheet
+        class="mx-auto mb-4 d-flex align-center justify-center transition-swing"
+        :color="isHovering || isDragging ? 'primary' : 'rgba(255,255,255,0.05)'"
+        rounded="circle"
+        width="64"
+        height="64"
+      >
+        <v-icon
+          :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+          size="32"
+          :color="isHovering || isDragging ? 'white' : 'primary'"
+          :class="{ rotating: loading }"
+        />
+      </v-sheet>
+
+      <v-card-text class="pa-0">
+        <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
+          {{ loading ? texts.loading : isDragging ? texts.drop : texts.idle }}
+        </v-sheet>
+        <v-sheet
+          v-if="accept && showExtensions"
+          class="text-body-2 text-white opacity-60 bg-transparent"
+        >
+          {{ accept }}
+        </v-sheet>
+      </v-card-text>
+    </GlassCard>
+  </v-hover>
+</template>
+
+<style scoped>
+.drag-card-inline {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drag-card-inline:hover,
+.drag-card-inline.dragging-active {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.05) !important;
+}
+</style>

package/app/components/DragAndDropInternal/DragAndDropOverlay.vue

@@ -0,0 +1,162 @@
+<script setup>
+const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, showExtensions } =
+  defineProps({
+    isDragging: { type: Boolean, required: true },
+    showOverlay: { type: Boolean, required: true },
+    fullscreen: { type: Boolean, required: true },
+    loading: { type: Boolean, required: true },
+    texts: {
+      type: Object,
+      default: () => ({
+        idle: "Click or drag and drop",
+        drop: "Drop files here",
+        loading: "Loading...",
+      }),
+    },
+    multiple: { type: Boolean, required: true },
+    accept: { type: String, default: "" },
+    showExtensions: { type: Boolean, required: true },
+  });
+</script>
+
+<template>
+  <Teleport to="body">
+    <v-fade-transition>
+      <v-overlay
+        v-if="isDragging && showOverlay"
+        :model-value="true"
+        :scrim="false"
+        class="drag-overlay"
+        content-class="w-100 h-100"
+        persistent
+      >
+        <v-container class="fill-height" :fluid="fullscreen">
+          <v-row align="center" justify="center">
+            <v-col
+              cols="12"
+              :md="fullscreen ? 12 : 8"
+              :lg="fullscreen ? 12 : 6"
+              class="text-center"
+            >
+              <v-sheet
+                class="mx-auto mb-8 pulse-animation d-flex align-center justify-center"
+                color="primary"
+                rounded="circle"
+                :width="fullscreen ? 140 : 120"
+                :height="fullscreen ? 140 : 120"
+              >
+                <v-icon icon="mdi-cloud-upload" :size="fullscreen ? 80 : 64" color="white" />
+              </v-sheet>
+
+              <v-sheet
+                class="font-weight-black mb-6 text-white text-glow d-block bg-transparent"
+                :class="fullscreen ? 'text-h2' : 'text-h3'"
+              >
+                {{
+                  loading ? texts.loading : fullscreen ? "Drop your files here" : "Drop your files"
+                }}
+              </v-sheet>
+
+              <v-sheet
+                class="text-white opacity-70 d-block mb-8 mx-auto bg-transparent"
+                :class="fullscreen ? 'text-h5' : 'text-h6'"
+                :style="fullscreen ? 'max-width:700px' : 'max-width:500px'"
+              >
+                {{
+                  multiple
+                    ? "Drag your files anywhere on the screen to import them."
+                    : "Drag your file anywhere on the screen to import it."
+                }}
+              </v-sheet>
+
+              <v-chip
+                v-if="accept && showExtensions"
+                color="white"
+                variant="outlined"
+                :size="fullscreen ? 'x-large' : 'large'"
+                class="px-8 glow-chip"
+              >
+                Accepted formats: {{ accept }}
+              </v-chip>
+
+              <v-sheet
+                class="text-white opacity-40 d-block mt-12 bg-transparent"
+                :class="fullscreen ? 'text-h6' : 'text-body-2'"
+              >
+                Press
+                <v-kbd class="escape-kbd mx-1">Esc</v-kbd>
+                to cancel
+              </v-sheet>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <v-sheet v-if="fullscreen" class="drag-frame-border" color="transparent" />
+      </v-overlay>
+    </v-fade-transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.drag-overlay :deep(.v-overlay__content) {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(24px);
+}
+
+.drag-frame-border {
+  position: absolute;
+  inset: 32px;
+  border: 4px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 32px;
+  pointer-events: none;
+  animation: border-glimmer 4s infinite ease-in-out;
+}
+
+.glow-chip {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.escape-kbd {
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: bold;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.text-glow {
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0.4);
+  }
+  70% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(var(--v-theme-primary), 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0);
+  }
+}
+
+@keyframes border-glimmer {
+  0%,
+  100% {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    border-color: rgba(var(--v-theme-primary), 0.4);
+  }
+}
+</style>

package/app/components/FileSelector.vue

@@ -9,10 +9,11 @@ const schema = schemas.opengeodeweb_back.allowed_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, files, auto_upload } = defineProps({
+const { multiple, files, auto_upload, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
+  show_overlay: { type: Boolean, default: true },
 });
 
 const internal_files = ref(files);
@@ -63,6 +64,7 @@ await get_allowed_files();
       accept,
       files: internal_files,
       auto_upload: internal_auto_upload,
+      show_overlay,
     }"
     @files_uploaded="files_uploaded_event"
   />

package/app/components/FileUploader.vue

@@ -1,15 +1,25 @@
 <script setup>
-import DragAndDrop from "@ogw_front/components/DragAndDrop";
 import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useTemplateRef } from "vue";
+
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, mini } = defineProps({
+const {
+  multiple,
+  accept,
+  files,
+  auto_upload,
+  mini,
+  show_overlay: showOverlay,
+} = defineProps({
   multiple: { type: Boolean, required: true },
   accept: { type: String, required: true },
   files: { type: Array, required: false, default: [] },
   auto_upload: { type: Boolean, required: false, default: false },
   mini: { type: Boolean, required: false, default: false },
+  show_overlay: { type: Boolean, required: false, default: true },
 });
 
 const geodeStore = useGeodeStore();
@@ -17,6 +27,7 @@ const geodeStore = useGeodeStore();
 const internal_files = ref(files);
 const loading = ref(false);
 const files_uploaded = ref(false);
+const dragAndDropRef = useTemplateRef("dragAndDropRef");
 
 const toggle_loading = useToggle(loading);
 
@@ -71,20 +82,53 @@ watch(internal_files, (value) => {
 
 <template>
   <DragAndDrop
-    :multiple="multiple"
-    :accept="accept"
-    :loading="loading"
+    v-if="!internal_files.length"
+    ref="dragAndDropRef"
+    :multiple
+    :accept
+    :loading
+    :show-extensions="false"
+    :inline="true"
+    :show-overlay="showOverlay"
+    :texts="{
+      idle: 'Select files',
+      drop: 'Drop files here',
+      loading: 'Loading...',
+    }"
+    @files-selected="processSelectedFiles"
+  />
+
+  <DragAndDrop
+    v-else
+    ref="dragAndDropRef"
+    :multiple
+    :accept
+    :loading
     :show-extensions="false"
+    :inline="false"
+    :show-overlay="showOverlay"
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-6">
+  <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected Files </span>
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
       <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
+      <v-spacer />
+      <v-btn
+        v-if="multiple"
+        variant="text"
+        color="white"
+        size="small"
+        class="text-none opacity-60"
+        prepend-icon="mdi-plus"
+        @click="dragAndDropRef?.triggerFileDialog"
+      >
+        Add
+      </v-btn>
     </v-sheet>
 
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
@@ -108,7 +152,7 @@ watch(internal_files, (value) => {
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-6 pa-0">
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -124,3 +168,20 @@ watch(internal_files, (value) => {
     </v-btn>
   </v-card-actions>
 </template>
+
+<style scoped>
+.border-dashed {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.3s ease;
+}
+
+.border-dashed:hover {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.02) !important;
+}
+
+.custom-upload-btn {
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.10.2-rc.1",
+  "version": "10.10.2-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/tests/vitest.config.js

@@ -7,6 +7,10 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const RETRIES = 3;
 const DEFAULT_RETRY = 0;
+const TIMEOUTS = {
+  unit: 5000,
+  integration: 15_000,
+};
 
 const globalRetry = process.env.CI ? RETRIES : DEFAULT_RETRY;
 
@@ -27,6 +31,7 @@ export default defineConfig({
           globals: false,
           include: ["tests/unit/**/*.test.js"],
           environment: "nuxt",
+          testTimeout: TIMEOUTS.unit,
           setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
           server: {
             deps: {
@@ -43,6 +48,7 @@ export default defineConfig({
           include: ["tests/integration/**/*.test.js"],
           environment: "nuxt",
           fileParallelism: false,
+          testTimeout: TIMEOUTS.integration,
           setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
           server: {
             deps: {