@fy-/fws-vue 2.3.85 → 2.3.87

package/components/ui/DefaultGallery.vue

@@ -101,6 +101,8 @@ const props = withDefaults(
     saveOrderText?: string
     onSaveOrder?: Function
     showSaveOrder?: boolean
+    getItemPosition?: Function
+    onPositionChange?: Function
   }>(),
   {
     modelValue: 0,
@@ -131,6 +133,8 @@ const props = withDefaults(
     saveOrderText: 'Save Order',
     onSaveOrder: undefined,
     showSaveOrder: false,
+    getItemPosition: (item: any, index: number) => item.UserIndex ?? index,
+    onPositionChange: undefined,
   },
 )
 
@@ -151,6 +155,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),
@@ -159,6 +179,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()
@@ -902,14 +926,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"
+        >
+          {{ saveOrderText }}
+        </button>
       </div>
 
       <!-- Bulk Actions Bar TOP (shown when in edit mode) -->
@@ -941,13 +972,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"
@@ -958,6 +982,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 -->
@@ -1070,6 +1121,21 @@ onUnmounted(() => {
                 </div>
               </div>
 
+              <!-- Position input for reorder mode -->
+              <div
+                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-16 h-7 text-sm text-center rounded border border-blue-400 bg-white/95 dark:bg-black/95 dark:text-white font-medium"
+                  @change="(e: Event) => onPositionChange(images[i - 1], parseInt((e.target as HTMLInputElement).value))"
+                  @click.stop
+                >
+              </div>
+
               <!-- Selection overlay -->
               <div
                 v-if="localEditMode && isItemSelected(images[i - 1], i - 1)"
@@ -1133,13 +1199,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"
@@ -1152,6 +1211,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.85",
+  "version": "2.3.87",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",