[4.x] Ability to duplicate fields in blueprint/fieldset builders

resources/js/components/blueprints/Fields.vue

@@ -21,6 +21,7 @@
                 @updated="$emit('field-updated', i, $event)"
                 @deleted="$emit('field-deleted', i)"
                 @editor-closed="$emit('editor-closed')"
+                @duplicate="duplicateField(field)"
             />
         </div>
 
@@ -140,7 +141,24 @@ export default {
 
             this.$toast.success(__('Field added'));
             this.pendingCreatedField = null;
-        }
+        },
+
+        duplicateField(field) {
+            let handle = `${field.handle}_duplicate`;
+            let display = field.config.display ? `${field.config.display} (Duplicate)` : `${field.handle} (Duplicate)`;
+
+            let pending = {
+                ...field,
+                _id: uniqid(),
+                handle: handle,
+                config: {
+                    ...field.config,
+                    display,
+                }
+            };
+
+            this.$nextTick(() => this.pendingCreatedField = pending);
+        },
 
     }
 

resources/js/components/blueprints/RegularField.vue

@@ -24,7 +24,10 @@
                     >
                         <svg-icon name="light/earth" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950 flex items-center">
+                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 hover:text-gray-950 flex items-center mr-2" v-tooltip="__('Duplicate')">
+                        <svg-icon name="light/duplicate" class="h-4 w-4" />
+                    </button>
+                    <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950 flex items-center" v-tooltip="__('Remove')">
                         <svg-icon name="micro/trash" class="h-4 w-4" />
                     </button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">