[6.x] Ability to drag and drop between replicators

resources/js/bootstrap/globals.js

@@ -157,3 +157,22 @@ export function str_slug(string) {
 export function snake_case(string) {
     return Statamic.$slug.separatedBy('_').create(string);
 }
+
+export function arrayAdd(items, item, index) {
+    return [
+        ...items.slice(0, index),
+        item,
+        ...items.slice(index, items.length)
+    ]
+}
+
+export function arrayRemove(items, index) {
+    return [
+        ...items.slice(0, index),
+        ...items.slice(index + 1, items.length)
+    ]
+}
+
+export function arrayMove(items, oldIndex, newIndex) {
+    return arrayAdd(arrayRemove(items, oldIndex), items[oldIndex], newIndex);
+}

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -20,11 +20,17 @@
                         <sortable-list
                             :model-value="value"
                             :vertical="true"
-                            :item-class="sortableItemClass"
-                            :handle-class="sortableHandleClass"
+                            :owner="this"
+                            group="replicator-fieldtype"
+                            :group-validator="sortableGroupValidator"
+                            class="min-h-px"
+                            item-class="replicator-sortable-item"
+                            handle-class="replicator-sortable-handle"
                             append-to="body"
                             constrain-dimensions
                             @update:model-value="sorted($event)"
+                            @groupstart="sortableGroupStart"
+                            @groupend="sortableGroupEnd"
                             @dragstart="$emit('focus')"
                             @dragend="$emit('blur')"
                             v-slot="{}"
@@ -39,8 +45,9 @@
                                     :meta-path="setMetaPathPrefix"
                                     :values="set"
                                     :config="setConfig(set.type)"
-                                    :sortable-item-class="sortableItemClass"
-                                    :sortable-handle-class="sortableHandleClass"
+                                    :config-hash="setConfigHash(set.type)"
+                                    sortable-item-class="replicator-sortable-item"
+                                    sortable-handle-class="replicator-sortable-handle"
                                     :collapsed="collapsed.includes(set._id)"
                                     :enabled="set.enabled"
                                     :read-only
@@ -105,6 +112,7 @@ export default {
             focused: false,
             collapsed: clone(this.meta.collapsed),
             fullScreenMode: false,
+            canDropSet: null,
             provide: {
                 replicatorSets: this.config.sets,
                 showReplicatorFieldPreviews: this.config.previews,
@@ -134,6 +142,10 @@ export default {
             }, []);
         },
 
+        setConfigHashes() {
+            return this.meta.setConfigHashes;
+        },
+
         groupConfigs() {
             return this.config.sets;
         },
@@ -184,6 +196,10 @@ export default {
             return this.setConfigs.find((c) => c.handle === handle) || {};
         },
 
+        setConfigHash(handle) {
+            return this.setConfigHashes[handle];
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
@@ -194,9 +210,31 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-        sorted(value) {
-            this.update(value);
-        },
+        sorted({ operation, oldIndex, newIndex, oldList }) {
+            if (operation === 'move') {
+                // Move set within this replicator
+                this.update(arrayMove(this.value, oldIndex, newIndex));
+            } else if (operation === 'add') {
+                // Add set to this replicator
+                const oldReplicator = oldList.owner;
+                const set = oldReplicator.value[oldIndex];
+                const meta = oldReplicator.meta.existing[set._id];
+                this.updateSetMeta(set._id, meta);
+                this.update(arrayAdd(this.value, set, newIndex));
+                if (oldReplicator.collapsed.includes(set._id)) {
+                    this.collapseSet(set._id);
+                } else {
+                    this.expandSet(set._id);
+                }
+                // Remove set from old replicator
+                // Do this from the target replicator in order to avoid race conditions with nested
+                // replicators both trying to update their parent's value at the same time.
+                this.$nextTick(() => {
+                    oldReplicator.removeSetMeta(set._id);
+                    oldReplicator.update(arrayRemove(oldReplicator.value, oldIndex)); 
+                });
+            }
+        },        
 
         addSet(handle, index) {
             const set = {
@@ -273,6 +311,20 @@ export default {
 
             return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
         },
+
+        sortableGroupValidator({ source }) {
+            this.canDropSet = this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
+            return this.canDropSet;
+        },
+
+        sortableGroupStart({ valid }) {
+            this.canDropSet = valid;
+        },
+
+        sortableGroupEnd() {
+            this.canDropSet = null;
+        },
+
     },
 
     mounted() {

resources/js/components/fieldtypes/replicator/Set.vue

@@ -25,6 +25,7 @@ const replicatorSets = inject('replicatorSets');
 
 const props = defineProps({
     config: Object,
+    configHash: String,
     id: String,
     fieldPath: String,
     metaPath: String,
@@ -120,7 +121,7 @@ function destroy() {
 </script>
 
 <template>
-    <div :class="sortableItemClass">
+    <div :class="sortableItemClass" :data-config-hash="configHash">
         <slot name="picker" />
         <div
             layout

resources/js/components/sortable/SortableList.vue

@@ -1,15 +1,9 @@
 <script>
 import { Sortable, Plugins, Draggable } from '@shopify/draggable';
+import uniqid from 'uniqid';
 
-function move(items, oldIndex, newIndex) {
-    const itemRemovedArray = [...items.slice(0, oldIndex), ...items.slice(oldIndex + 1, items.length)];
-
-    return [
-        ...itemRemovedArray.slice(0, newIndex),
-        items[oldIndex],
-        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length),
-    ];
-}
+const groups = {};
+const lists = {};
 
 export default {
     emits: ['dragstart', 'dragend', 'update:model-value'],
@@ -18,6 +12,15 @@ export default {
         modelValue: {
             required: true,
         },
+        owner: {
+            default: null,
+        },
+        group: {
+            default: null,
+        },
+        groupValidator: {
+            default: null,
+        },
         itemClass: {
             default: 'sortable-item',
         },
@@ -61,6 +64,8 @@ export default {
     data() {
         return {
             sortable: null,
+            groupId: this.group || uniqid(),
+            listId: uniqid(),
         };
     },
 
@@ -127,22 +132,74 @@ export default {
 
     methods: {
         setupSortableList() {
-            this.sortable = new Sortable(this.$el, this.computedOptions);
-
+            this.sortable = this.connectSortable();
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
-
-            this.sortable.on('sortable:stop', ({ oldIndex, newIndex }) => {
-                this.$emit('update:model-value', move(this.modelValue, oldIndex, newIndex));
+            this.sortable.on('sortable:stop', (event) => {
+                const { oldIndex, newIndex, oldContainer, newContainer } = event;
+                if (!this.group) {
+                    this.$emit('update:model-value', arrayMove(this.value, oldIndex, newIndex));
+                    return;           
+                }
+                const payload = { oldIndex, newIndex };
+                if (newContainer === this.$el && oldContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'move', oldList: this, newList: this, ...payload });
+                } else if (newContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'add', oldList: lists[oldContainer.dataset.listId], newList: this, ...payload });
+                } else if (oldContainer === this.$el) {
+                    this.$emit('update:model-value', { operation: 'remove', oldList: this, newList: lists[newContainer.dataset.listId], ...payload });
+                }
             });
-
+            if (this.group && this.groupValidator) {
+                this.sortable.on('sortable:sort', (event) => {
+                    const { dragEvent } = event;
+                    const { sourceContainer, overContainer, source } = dragEvent;
+                    if (overContainer !== this.$el || sourceContainer === this.$el) {
+                        return;
+                    }
+                    if (!this.groupValidator({ source })) {
+                        event.cancel();
+                    }
+                });
+                this.sortable.on('sortable:start', (event) => {
+                    const { dragEvent } = event;
+                    const { source } = dragEvent;
+                    const valid = this.groupValidator({ source });
+                    this.$emit('groupstart', { valid });
+                });
+                this.sortable.on('sortable:stop', () => {
+                    this.$emit('groupend');
+                });
+            }
             if (this.mirror === false) {
                 this.sortable.on('mirror:create', (e) => e.cancel());
             }
         },
 
         destroySortableList() {
-            this.sortable?.destroy();
+            this.disconnectSortable();
+        },
+
+        connectSortable() {
+            this.$el.dataset.listId = this.listId;
+            lists[this.listId] = this;
+            if (!groups[this.groupId]) {
+                groups[this.groupId] = new Sortable(this.$el, this.computedOptions);
+            } else {
+                groups[this.groupId].addContainer(this.$el);
+            }
+            return groups[this.groupId];
+        },
+
+        disconnectSortable() {
+            delete lists[this.listId];
+            if (groups[this.groupId]) {
+                groups[this.groupId].removeContainer(this.$el);
+                if (groups[this.groupId].containers.length === 0) {
+                    groups[this.groupId].destroy();
+                    delete groups[this.groupId];
+                }
+            }
         },
     },
 

src/Fields/Field.php

@@ -20,6 +20,7 @@ class Field implements Arrayable
     protected $handle;
     protected $prefix;
     protected $config;
+    protected $configHash;
     protected $value;
     protected $parent;
     protected $parentField;
@@ -470,6 +471,15 @@ public function form(): ?Form
         return $this->form;
     }
 
+    public function configHash(): string
+    {
+        if (! isset($this->configHash)) {
+            $this->configHash = md5($this->handle.json_encode($this->config));
+        }
+
+        return $this->configHash;
+    }
+
     public static function commonFieldOptions(): Fields
     {
         $reserved = [