Add minimum fields option

docs/README.md

@@ -89,6 +89,17 @@ Flexible::make('Content')->limit(2);
 
 You can specify any integer, or no integer at all; in that case it will default to 1.
 
+#### Minimum number of layouts
+
+You can set the minimum of how many layouts can appear using the following:
+
+```php
+Flexible::make('Content')->minimum(2);
+```
+
+You can specify any integer. If the number of layouts is at or below this integer,
+the delete icon will not be visible.
+
 #### Layout removal confirmation
 
 You can choose to display a confirmation prompt before a layout is deleted by doing:
@@ -183,9 +194,9 @@ class MyFlexibleCast extends FlexibleCast
     protected function getLayoutMappings()
     {
         $mappings = [];
-        
+
         // Conditionally add mappings however you want
-        
+
         return $mappings;
     }
 }

resources/js/components/FormField.vue

@@ -6,7 +6,6 @@
         :errors="errors"
         full-width-content>
         <template slot="field">
-
             <div
                 v-if="order.length > 0">
                 <form-nova-flexible-content-group
@@ -20,6 +19,8 @@
                     :resource-id="resourceId"
                     :resource="resource"
                     :errors="errors"
+                    :is-above-minimum="isAboveMinimum"
+                    :is-orderable="isOrderable"
                     @move-up="moveUp(group.key)"
                     @move-down="moveDown(group.key)"
                     @remove="remove(group.key)"
@@ -30,7 +31,7 @@
                 :layouts="layouts"
                 :is="field.menu.component"
                 :field="field"
-                :limit-counter="limitCounter"
+                :is-below-limit="isBelowLimit"
                 :errors="errors"
                 :resource-name="resourceName"
                 :resource-id="resourceId"
@@ -64,15 +65,26 @@ export default {
                 groups.push(this.groups[key]);
                 return groups;
             }, []);
-        }
+        },
+        isBelowLimit() {
+            return this.groupCounter < (this.field.limit || Infinity);
+        },
+        isAboveMinimum() {
+            return this.groupCounter > (this.field.minimum || 0);
+        },
+        groupCounter() {
+            return Object.keys(this.groups).length;
+        },
+        isOrderable() {
+            return this.groupCounter > 1;
+        },
     },
 
     data() {
         return {
             order: [],
             groups: {},
             files: {},
-            limitCounter: this.field.limit
         };
     },
 
@@ -181,12 +193,11 @@ export default {
             let fields = attributes || JSON.parse(JSON.stringify(layout.fields)),
                 group = new Group(layout.name, layout.title, fields, this.field, key, collapsed);
 
-            this.groups[group.key] = group;
+            this.groups = {
+                ...this.groups,
+                [group.key]: group,
+            };
             this.order.push(group.key);
-
-            if (this.limitCounter > 0) {
-                this.limitCounter--;
-            }
         },
 
         /**
@@ -220,11 +231,11 @@ export default {
             if(index < 0) return;
 
             this.order.splice(index, 1);
-            delete this.groups[key];
 
-            if (this.limitCounter >= 0) {
-                this.limitCounter++;
-            }
+            const groups = { ...this.groups };
+            delete groups[key];
+
+            this.groups = groups;
         }
     }
 }

resources/js/components/FormGroup.vue

@@ -19,24 +19,29 @@
                     @click.prevent="collapse">
                     <icon class="align-top" type="minus-square" width="16" height="16" view-box="0 0 24 24" />
                 </button>
+
                 <div v-if="!readonly">
+                    <template v-if="isOrderable">
+                        <button
+                            dusk="move-up-group"
+                            type="button"
+                            class="group-control btn border-t border-r border-40 w-8 h-8 block"
+                            :title="__('Move up')"
+                            @click.prevent="moveUp">
+                            <icon type="arrow-up" view-box="0 0 8 4.8" width="10" height="10" />
+                        </button>
+                        <button
+                            dusk="move-down-group"
+                            type="button"
+                            class="group-control btn border-t border-r border-40 w-8 h-8 block"
+                            :title="__('Move down')"
+                            @click.prevent="moveDown">
+                            <icon type="arrow-down" view-box="0 0 8 4.8" width="10" height="10" />
+                        </button>
+                    </template>
+
                     <button
-                        dusk="move-up-group"
-                        type="button"
-                        class="group-control btn border-t border-r border-40 w-8 h-8 block"
-                        :title="__('Move up')"
-                        @click.prevent="moveUp">
-                        <icon type="arrow-up" view-box="0 0 8 4.8" width="10" height="10" />
-                    </button>
-                    <button
-                        dusk="move-down-group"
-                        type="button"
-                        class="group-control btn border-t border-r border-40 w-8 h-8 block"
-                        :title="__('Move down')"
-                        @click.prevent="moveDown">
-                        <icon type="arrow-down" view-box="0 0 8 4.8" width="10" height="10" />
-                    </button>
-                    <button
+                        v-if="isAboveMinimum"
                         dusk="delete-group"
                         type="button"
                         class="group-control btn border-t border-r border-40 w-8 h-8 block"
@@ -91,7 +96,7 @@ import { BehavesAsPanel } from 'laravel-nova';
 export default {
     mixins: [BehavesAsPanel],
 
-    props: ['errors', 'group', 'index', 'field'],
+    props: ['errors', 'group', 'index', 'field', 'isAboveMinimum', 'isOrderable'],
 
     data() {
         return {

resources/js/components/OriginalDropMenu.vue

@@ -24,7 +24,7 @@
             tabindex="0"
             class="btn btn-default btn-primary inline-flex items-center relative"
             @click="toggleLayoutsDropdownOrAddDefault"
-            v-if="this.limitCounter != 0"
+            v-if="isBelowLimit"
         >
             <span>{{ field.button }}</span>
         </button>
@@ -34,7 +34,7 @@
 <script>
 
     export default {
-        props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'limitCounter'],
+        props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'isBelowLimit'],
 
         data() {
             return {

resources/js/components/SearchMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-3/5" v-if="layouts">
 
-        <div v-if="this.limitCounter != 0">
+        <div v-if="isBelowLimit">
             <div v-if="layouts.length === 1">
                 <button
                     dusk="toggle-layouts-dropdown-or-add-default"
@@ -38,7 +38,7 @@
     export default {
         components: {Multiselect},
 
-        props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'limitCounter'],
+        props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'isBelowLimit'],
 
         data() {
             return {

src/Flexible.php

@@ -112,7 +112,7 @@ public function fullWidth()
     }
 
     /**
-     *  Prevent the 'Add Layout' button from appearing more than once
+     * Prevent the 'Add Layout' button from appearing more than once
      *
      * @return $this
      */
@@ -121,6 +121,17 @@ public function limit($limit = 1)
         return $this->withMeta(['limit' => $limit]);
     }
 
+    /**
+     * Prevent the 'Delete' button from appearing when reaching a minimum
+     * number of resources.
+     *
+     * @return $this
+     */
+    public function minimum($minimum = 0)
+    {
+        return $this->withMeta(['minimum' => $minimum]);
+    }
+
     /**
      * Confirm remove
      *
@@ -182,7 +193,7 @@ public function addLayout(...$arguments)
         }
 
         $layout = $arguments[0];
-        
+
         if(is_string($layout) && is_a($layout, LayoutInterface::class, true)) {
             $layout = new $layout();
         }