Fix sorting flexible groups

dist/css/field.css

@@ -1 +1,38 @@
-.flexible-search-menu-multiselect{--ms-font-size:0.875rem;--ms-option-font-size:0.875rem;--ms-ring-color:rgb(var(--colors-primary-100));--ms-border-color:rgb(var(--colors-gray-300))}html.dark .flexible-search-menu-multiselect{--ms-ring-color:rgb(var(--colors-gray-700));--ms-border-color:rgb(var(--colors-gray-700));--ms-dropdown-border-color:var(--ms-border-color);--ms-bg:rgb(var(--colors-gray-900));--ms-dropdown-bg:var(--ms-bg);--ms-option-bg-pointed:rgb(var(--colors-gray-700));--ms-option-color-pointed:rgb(var(--colors-gray-400))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-50),var(--tw-bg-opacity))}.dark .dark\:hover\:bg-gray-900:hover{--tw-bg-opacity:1;background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}.nova-flexible-content-sortable-ghost{opacity:.5}.nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-100),var(--tw-bg-opacity));border-radius:10px}.dark .nova-flexible-content-sortable-drag{background-color:rgba(var(--colors-gray-900),var(--tw-bg-opacity))}
+.flexible-search-menu-multiselect {
+  --ms-font-size: 0.875rem;
+  --ms-option-font-size: 0.875rem;
+  --ms-ring-color: rgb(var(--colors-primary-100));
+  --ms-border-color: rgb(var(--colors-gray-300));
+}
+html.dark .flexible-search-menu-multiselect {
+  --ms-ring-color: rgb(var(--colors-gray-700));
+  --ms-border-color: rgb(var(--colors-gray-700));
+  --ms-dropdown-border-color: var(--ms-border-color);
+  --ms-bg: rgb(var(--colors-gray-900));
+  --ms-dropdown-bg: var(--ms-bg);
+  --ms-option-bg-pointed: rgb(var(--colors-gray-700));
+  --ms-option-color-pointed: rgb(var(--colors-gray-400));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-50), var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}
+
+.nova-flexible-content-sortable-ghost {
+  opacity: 0.5;
+}
+
+.nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-100), var(--tw-bg-opacity));
+  border-radius: 10px;
+}
+
+.dark .nova-flexible-content-sortable-drag {
+  background-color: rgba(var(--colors-gray-900), var(--tw-bg-opacity));
+}

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /**!
- * Sortable 1.15.0
+ * Sortable 1.15.2
  * @author	RubaXa   <[email protected]>
  * @author	owenm    <[email protected]>
  * @license MIT

package.json

@@ -7,7 +7,7 @@
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "mix --production",
+        "production": "mix --production --mix-config=webpack.mix.js.dist",
         "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
@@ -26,6 +26,8 @@
         "sass-loader": "10.*",
         "sortablejs": "^1.15.0",
         "vue-loader": "^16.8.3",
-        "vuex": "^4.0.2"
-    }
+        "vuex": "^4.0.2",
+        "laravel-nova-ui": "^0.4.12"
+    },
+    "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

resources/js/components/FormField.vue

@@ -272,16 +272,14 @@ export default {
                 scrollSpeed: 5,
                 animation: 500,
                 onEnd: (evt) => {
-                    const item = evt.item;
-                    const key = item.id;
-                    const oldIndex = evt.oldIndex;
-                    const newIndex = evt.newIndex;
-
-                    if (newIndex < oldIndex) {
-                        this.moveUp(key);
-                    } else if (newIndex > oldIndex) {
-                        this.moveDown(key);
+                    let neighborIndex;
+                    this.order.splice(this.order.indexOf(evt.item.id), 1);
+                    if (evt.oldIndex < evt.newIndex) {
+                        neighborIndex = this.order.indexOf(evt.item.previousElementSibling.id) + 1;
+                    } else {
+                        neighborIndex = this.order.indexOf(evt.item.nextElementSibling.id);
                     }
+                    this.order.splice(neighborIndex, 0, evt.item.id);
                  }
             });
         },

resources/js/components/FormGroup.vue

@@ -189,6 +189,13 @@ export default {
             this.collapsed = true;
         }
     },
+
+    watch: {
+      // https://github.com/whitecube/nova-flexible-content/issues/156#issuecomment-932327771
+      index(index) {
+        Nova.$emit('flexible-content-order-changed', index);
+      }
+    },
 }
 </script>