[5.x] Add duplicate stacked row option to Grid fieldtype (#10556)

statamic · Aug 2, 2024 · 1c9cce5 · 1c9cce5
1 parent 20089a8
commit 1c9cce5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -39,6 +39,7 @@
                 :can-delete="canDeleteRows"
                 :can-add-rows="canAddRows"
                 @updated="(row, value) => $emit('updated', row, value)"
+                @duplicate="(row) => $emit('duplicate', row)"
                 @meta-updated="$emit('meta-updated', row._id, $event)"
                 @removed="(row) => $emit('removed', row)"
                 @focus="$emit('focus')"

diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -8,6 +8,9 @@
         <div class="replicator-set-header">
             <div class="item-move cursor-grab sortable-handle" :class="{ [sortableHandleClass]: grid.isReorderable }" />
             <div class="py-2 rtl:pr-2 ltr:pl-2 replicator-set-header-inner flex justify-end items-end w-full">
+                <button v-if="canAddRows" class="flex self-end group items-center rtl:ml-2 ltr:mr-2" @click="$emit('duplicate', index)" :aria-label="__('Duplicate Row')">
+                    <svg-icon name="light/duplicate" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
+                </button>
                 <button v-if="canDelete" class="flex self-end group items-center" @click="$emit('removed', index)" :aria-label="__('Delete Row')">
                     <svg-icon name="micro/trash" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
                 </button>