@fy-/fws-vue 2.3.86 → 2.3.88

package/components/ui/DefaultGallery.vue

@@ -99,6 +99,7 @@ const props = withDefaults(
     selectedCountText?: string
     // Save order support
     saveOrderText?: string
+    reorderButtonText?: string
     onSaveOrder?: Function
     showSaveOrder?: boolean
     getItemPosition?: Function
@@ -131,6 +132,7 @@ const props = withDefaults(
     selectedCountText: 'selected',
     // Save order defaults
     saveOrderText: 'Save Order',
+    reorderButtonText: 'Reorder',
     onSaveOrder: undefined,
     showSaveOrder: false,
     getItemPosition: (item: any, index: number) => item.UserIndex ?? index,
@@ -155,6 +157,22 @@ const localEditMode = computed({
   set: value => emit('update:editMode', value),
 })
 
+// Reorder mode - separate from delete mode
+const localReorderMode = ref(false)
+
+function toggleReorderMode() {
+  localReorderMode.value = !localReorderMode.value
+  if (localReorderMode.value) {
+    // Exit delete mode when entering reorder mode
+    localEditMode.value = false
+    localSelectedItems.value = new Set()
+  }
+}
+
+function exitReorderMode() {
+  localReorderMode.value = false
+}
+
 const localSelectedItems = computed({
   get: () => props.selectedItems,
   set: value => emit('update:selectedItems', value),
@@ -163,6 +181,10 @@ const localSelectedItems = computed({
 // Edit mode functions
 function toggleEditMode() {
   localEditMode.value = !localEditMode.value
+  if (localEditMode.value) {
+    // Exit reorder mode when entering delete mode
+    localReorderMode.value = false
+  }
   if (!localEditMode.value) {
     // Clear selections when exiting edit mode
     localSelectedItems.value = new Set()
@@ -906,14 +928,21 @@ 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 (only show when not in edit mode) -->
-      <div v-if="!localEditMode" class="flex justify-end mb-3">
+      <!-- Mode Toggle Buttons (only show when not in any edit mode) -->
+      <div v-if="!localEditMode && !localReorderMode" class="flex justify-end mb-3 gap-2">
         <button
           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"
         >
           {{ editButtonText }}
         </button>
+        <button
+          v-if="showSaveOrder"
+          class="px-4 py-2 rounded-lg font-medium text-sm transition-colors bg-blue-600 hover:bg-blue-700 text-white"
+          @click="toggleReorderMode"
+        >
+          {{ reorderButtonText }}
+        </button>
       </div>
 
       <!-- Bulk Actions Bar TOP (shown when in edit mode) -->
@@ -945,13 +974,6 @@ onUnmounted(() => {
           >
             {{ cancelButtonText }}
           </button>
-          <button
-            v-if="showSaveOrder && onSaveOrder"
-            class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium"
-            @click="onSaveOrder()"
-          >
-            {{ saveOrderText }}
-          </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"
@@ -962,6 +984,33 @@ onUnmounted(() => {
           </button>
         </div>
       </div>
+
+      <!-- Reorder Mode Bar TOP (shown when in reorder mode) -->
+      <div
+        v-if="localReorderMode"
+        class="flex flex-wrap items-center justify-between gap-2 p-3 mb-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg border border-blue-300 dark:border-blue-700"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-medium text-blue-800 dark:text-blue-200">
+            Set position numbers on images (lower = earlier)
+          </span>
+        </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="exitReorderMode"
+          >
+            {{ cancelButtonText }}
+          </button>
+          <button
+            v-if="onSaveOrder"
+            class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium"
+            @click="onSaveOrder()"
+          >
+            {{ saveOrderText }}
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Thumbnail Grid/Masonry/Custom Layouts if gallery is not open -->
@@ -1076,14 +1125,14 @@ onUnmounted(() => {
 
               <!-- Position input for reorder mode -->
               <div
-                v-if="showSaveOrder && onPositionChange"
+                v-if="localReorderMode && onPositionChange"
                 class="absolute top-2 right-2 z-20"
               >
                 <input
                   type="number"
                   min="0"
                   :value="getItemPosition(images[i - 1], i - 1)"
-                  class="w-12 h-6 text-xs text-center rounded border border-gray-400 bg-white/90 dark:bg-black/90 dark:text-white"
+                  class="w-20 h-8 text-base text-center rounded border-2 border-blue-400 bg-white/95 dark:bg-black/95 dark:text-white font-bold"
                   @change="(e: Event) => onPositionChange(images[i - 1], parseInt((e.target as HTMLInputElement).value))"
                   @click.stop
                 >
@@ -1152,13 +1201,6 @@ onUnmounted(() => {
           >
             {{ cancelButtonText }}
           </button>
-          <button
-            v-if="showSaveOrder && onSaveOrder"
-            class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium"
-            @click="onSaveOrder()"
-          >
-            {{ saveOrderText }}
-          </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"
@@ -1171,6 +1213,34 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Reorder Mode Bar BOTTOM -->
+    <div v-if="editEnabled && localReorderMode && 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-blue-50 dark:bg-blue-900/30 rounded-lg border border-blue-300 dark:border-blue-700"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-medium text-blue-800 dark:text-blue-200">
+            Set position numbers on images (lower = earlier)
+          </span>
+        </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="exitReorderMode"
+          >
+            {{ cancelButtonText }}
+          </button>
+          <button
+            v-if="onSaveOrder"
+            class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium"
+            @click="onSaveOrder()"
+          >
+            {{ saveOrderText }}
+          </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.86",
+  "version": "2.3.88",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",