Allow accordion style replicator sets. Rename config to collapse.

statamic · Oct 30, 2020 · 979daeb · 979daeb
1 parent b2a4250
commit 979daeb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -2,7 +2,7 @@
 
     <div class="replicator-fieldtype-container">
 
-        <div class="absolute top-0 right-0 p-3 text-2xs" v-if="values.length > 0">
+        <div class="absolute top-0 right-0 p-3 text-2xs" v-if="config.collapse !== 'accordion' && values.length > 0">
             <button @click="collapseAll" class="text-blue hover:text-black mr-1" v-text="__('Collapse All')" />
             <button @click="expandAll" class="text-blue hover:text-black" v-text="__('Expand All')" />
         </div>
@@ -131,6 +131,8 @@ export default {
             this.updateSetMeta(set._id, this.meta.new[handle]);
 
             this.values.splice(index, 0, set);
+
+            this.expandSet(set._id);
         },
 
         collapseSet(id) {
@@ -140,6 +142,11 @@ export default {
         },
 
         expandSet(id) {
+            if (this.config.collapse === 'accordion') {
+                this.collapsed = this.value.map(v => v._id).filter(v => v !== id);
+                return;
+            }
+
             if (this.collapsed.includes(id)) {
                 var index = this.collapsed.indexOf(id);
                 this.collapsed.splice(index, 1);
@@ -165,7 +172,7 @@ export default {
     },
 
     mounted() {
-        if (this.config.collapsed) this.collapseAll();
+        if (this.config.collapse) this.collapseAll();
     },
 
     watch: {

diff --git a/resources/lang/en/fieldtypes.php b/resources/lang/en/fieldtypes.php
@@ -67,7 +67,10 @@
     'range.config.prepend' => 'Add text to the beginning (left-side) of the slider.',
     'range.config.step' => 'The minimum size between values.',
     'relationship.config.mode' => 'Choose your preferred UI style.',
-    'replicator.config.collapsed' => 'Collapse all sets by default.',
+    'replicator.config.collapse' => 'The set collapsing behavior.',
+    'replicator.config.collapse.disabled' => 'All sets expanded by default',
+    'replicator.config.collapse.enabled' => 'All sets collapsed by default',
+    'replicator.config.collapse.accordion' => 'Only allow one set to be expanded at a time',
     'select.config.clearable' => 'Enable to allow deselecting your option.',
     'select.config.multiple' => 'Allow multiple selections.',
     'select.config.options' => 'Set the keys and their optional labels.',

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
@@ -13,11 +13,18 @@ class Replicator extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'collapsed' => [
-                'display' => __('Collapsed'),
-                'instructions' => __('statamic::fieldtypes.replicator.config.collapsed'),
-                'type' => 'toggle',
+            'collapse' => [
+                'display' => __('Collapse'),
+                'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
+                'type' => 'select',
+                'cast_booleans' => true,
                 'width' => 50,
+                'options' => [
+                    'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
+                    'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
+                    'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
+                ],
+                'default' => false,
             ],
             'sets' => [
                 'type' => 'sets',