Hide the delete button if a section cant be deleted

Author: jasonvarga

resources/js/components/blueprints/Section.vue

@@ -19,7 +19,7 @@
                     <button @click.prevent="toggleEditing" class="text-grey-60 hover:text-grey-100 mr-1">
                         <svg-icon :name="isEditing ? 'shrink' : 'expand'" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="text-grey-60 hover:text-grey-100">
+                    <button @click.prevent="$emit('deleted')" class="text-grey-60 hover:text-grey-100" v-if="deletable">
                         <svg-icon name="trash" />
                     </button>
                 </div>
@@ -69,6 +69,10 @@ export default {
         isSingle: {
             type: Boolean,
             default: false
+        },
+        deletable: {
+            type: Boolean,
+            default: true
         }
     },
 

resources/js/components/blueprints/Sections.vue

@@ -10,6 +10,7 @@
                 :key="section._id"
                 :section="section"
                 :is-single="singleSection"
+                :deletable="isSectionDeletable(i)"
                 @updated="updateSection(i, $event)"
                 @deleted="deleteSection(i)"
             />
@@ -181,6 +182,14 @@ export default {
             if (this.requireSection && this.sections.length === 0) {
                 this.addSection();
             }
+        },
+
+        isSectionDeletable(i) {
+            if (this.sections.length > 1) return true;
+
+            if (i > 0) return true;
+
+            return !this.requireSection;
         }
 
     }