@fy-/fws-vue 2.3.79 → 2.3.80

package/components/ui/DefaultGallery.vue

@@ -894,22 +894,19 @@ onUnmounted(() => {
 
     <!-- Edit Mode Controls (only if editEnabled is true) -->
     <div v-if="editEnabled && images.length > 0 && (mode === 'grid' || mode === 'mason' || mode === 'custom')">
-      <!-- Edit Mode Toggle Button -->
-      <div class="flex justify-end mb-3">
+      <!-- Edit Mode Toggle Button (only show when not in edit mode) -->
+      <div v-if="!localEditMode" class="flex justify-end mb-3">
         <button
-          class="px-4 py-2 rounded-lg font-medium text-sm transition-colors"
-          :class="localEditMode
-            ? 'bg-red-600 hover:bg-red-700 text-white'
-            : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200'"
+          class="px-4 py-2 rounded-lg font-medium text-sm transition-colors bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200"
           @click="toggleEditMode"
         >
-          {{ localEditMode ? cancelButtonText : editButtonText }}
+          {{ editButtonText }}
         </button>
       </div>
 
-      <!-- Bulk Actions Bar (shown when items are selected) -->
+      <!-- Bulk Actions Bar TOP (shown when in edit mode) -->
       <div
-        v-if="localEditMode && localSelectedItems.size > 0"
+        v-if="localEditMode"
         class="flex flex-wrap items-center justify-between gap-2 p-3 mb-3 bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700"
       >
         <div class="flex items-center gap-3">
@@ -929,12 +926,22 @@ onUnmounted(() => {
             {{ clearSelectionText }}
           </button>
         </div>
-        <button
-          class="px-4 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
-          @click="handleBulkAction"
-        >
-          {{ bulkActionText }}
-        </button>
+        <div class="flex items-center gap-2">
+          <button
+            class="px-4 py-1.5 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors font-medium"
+            @click="toggleEditMode"
+          >
+            {{ cancelButtonText }}
+          </button>
+          <button
+            class="px-4 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
+            :disabled="localSelectedItems.size === 0"
+            :class="{ 'opacity-50 cursor-not-allowed': localSelectedItems.size === 0 }"
+            @click="handleBulkAction"
+          >
+            {{ bulkActionText }}
+          </button>
+        </div>
       </div>
     </div>
 
@@ -1082,6 +1089,47 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Bulk Actions Bar BOTTOM (duplicate bar below gallery when in edit mode) -->
+    <div v-if="editEnabled && localEditMode && images.length > 0 && (mode === 'grid' || mode === 'mason' || mode === 'custom')" class="mt-3">
+      <div
+        class="flex flex-wrap items-center justify-between gap-2 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-medium">
+            {{ localSelectedItems.size }} {{ selectedCountText }}
+          </span>
+          <button
+            class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors"
+            @click="selectAll"
+          >
+            {{ selectAllText }}
+          </button>
+          <button
+            class="px-3 py-1 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors"
+            @click="clearSelection"
+          >
+            {{ clearSelectionText }}
+          </button>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            class="px-4 py-1.5 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors font-medium"
+            @click="toggleEditMode"
+          >
+            {{ cancelButtonText }}
+          </button>
+          <button
+            class="px-4 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
+            :disabled="localSelectedItems.size === 0"
+            :class="{ 'opacity-50 cursor-not-allowed': localSelectedItems.size === 0 }"
+            @click="handleBulkAction"
+          >
+            {{ bulkActionText }}
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- Button Mode -->
     <button
       v-if="mode === 'button'"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.79",
+  "version": "2.3.80",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",