From 730bdd1b1f38807e743bb167f8ffa6a9040283d0 Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Tue, 28 Nov 2023 15:54:55 +0530
Subject: [PATCH] Refactor editor panels (#245)

* Refactor editor panels

* EditorOptionsPanel icon fixes

* manage editor panel open/close

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../open/editors/EditorOptionsPanel.vue       | 46 +++++++++++++++++++
 .../form-components/FormAboutSubmission.vue   | 29 +++++-------
 .../components/form-components/FormAccess.vue | 28 ++++-------
 .../form-components/FormCustomCode.vue        | 24 ++++------
 .../form-components/FormCustomSeo.vue         | 29 ++++--------
 .../form-components/FormCustomization.vue     | 29 +++++-------
 .../form-components/FormInformation.vue       | 23 ++++------
 .../form-components/FormNotifications.vue     | 23 ++++------
 .../form-components/FormSecurityPrivacy.vue   | 22 ++++-----
 .../form-components/FormStructure.vue         | 23 ++++------
 tailwind.config.js                            |  1 +
 11 files changed, 132 insertions(+), 145 deletions(-)
 create mode 100644 resources/js/components/open/editors/EditorOptionsPanel.vue

diff --git a/resources/js/components/open/editors/EditorOptionsPanel.vue b/resources/js/components/open/editors/EditorOptionsPanel.vue
new file mode 100644
index 0000000..47c6926
--- /dev/null
+++ b/resources/js/components/open/editors/EditorOptionsPanel.vue
@@ -0,0 +1,46 @@
+<template>
+  <collapse class="p-4 w-full border-b" v-model="show">
+    <template #title>
+      <div class="flex items-center pr-8">
+        <div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
+          <slot name="icon" />
+        </div>
+        <h3 id="v-step-2" class="font-semibold flex-grow">
+          {{ name }}
+        </h3>
+        <pro-tag v-if="hasProTag" />
+      </div>
+    </template>
+
+    <slot />
+  </collapse>
+</template>
+
+<script>
+import Collapse from '../../common/Collapse.vue'
+import ProTag from '../../common/ProTag.vue'
+
+export default {
+  name: 'EditorOptionsPanel',
+  components: { Collapse, ProTag },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    hasProTag: {
+      type: Boolean,
+      default: false
+    },
+    alreadyOpened: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      show: this.alreadyOpened
+    }
+  }
+}
+</script>
diff --git a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
index 4407c4a..9cc5f83 100644
--- a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
+++ b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -1,17 +1,11 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg relative">
-        <svg
-          class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-          viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
-            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        About Submissions
-      </h3>
+  <editor-options-panel name="About Submissions" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
+          stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
 
     <text-input name="submit_button_text" class="mt-4"
@@ -130,21 +124,20 @@
                             :required="false"
       />
     </template>
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 import VTransition from '../../../../common/transitions/VTransition.vue'
 
 export default {
-  components: {Collapse, ProTag, VTransition},
+  components: {EditorOptionsPanel, ProTag, VTransition},
   props: {},
   data() {
     return {
-      submissionOptions: {},
-      isCollapseOpen: true,
+      submissionOptions: {}
     }
   },
 
diff --git a/resources/js/components/open/forms/components/form-components/FormAccess.vue b/resources/js/components/open/forms/components/form-components/FormAccess.vue
index e98c9e2..9f65751 100644
--- a/resources/js/components/open/forms/components/form-components/FormAccess.vue
+++ b/resources/js/components/open/forms/components/form-components/FormAccess.vue
@@ -1,18 +1,12 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 transition-colors" 
-            :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-          />
-        </svg>
-        Form Access
-      </h3>
+  <editor-options-panel name="Form Access" :already-opened="false">
+    <template #icon>
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+        />
+      </svg>
     </template>
-    <pro-tag class="float-right" />
     <text-input name="password" :form="form" class="mt-4"
                 label="Form Password" help="Leave empty to disable password"
     />
@@ -40,19 +34,17 @@
                           help="This message will be shown when the form will have the maximum number of submissions"
                           :required="false"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel },
   props: {},
   data () {
     return {
-      isCollapseOpen: false
     }
   },
   computed: {
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
index bada8b1..f15767d 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
@@ -1,15 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors"
-             :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Custom Code
-        <pro-tag />
-      </h3>
+  <editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
     <p class="mt-4">
       The code will be injected in the <span class="font-semibold">head</span> section of your form page.
@@ -19,21 +13,19 @@
                      your actual form page (save changes beforehand)."
                 label="Custom Code"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import CodeInput from '../../../../forms/CodeInput.vue'
 
 export default {
-  components: { Collapse, ProTag, CodeInput },
+  components: { EditorOptionsPanel, CodeInput },
   props: {
   },
   data () {
     return {
-      isCollapseOpen: false
     }
   },
 
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue b/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
index 9f1fea5..44a136c 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -1,18 +1,11 @@
 <template>
-  <collapse class="p-5 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-             class="h-5 w-5 inline -ml-1 mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-          />
-        </svg>
-
-        Link Settings - SEO
-        <pro-tag />
-      </h3>
+  <editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
+    <template #icon>
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+        />
+      </svg>
     </template>
     <p class="mt-4 text-gray-500 text-sm">
       Customize the image and text that appear when you share your form on other sites (Open Graph).
@@ -26,19 +19,17 @@
     <image-input v-model="form.seo_meta.page_thumbnail" name="page_thumbnail" class="mt-4"
                  label="Page Thumbnail Image" help="Also know as og:image - 1200 X 630"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel },
   props: {},
   data () {
     return {
-      isCollapseOpen: false
     }
   },
   computed: {
diff --git a/resources/js/components/open/forms/components/form-components/FormCustomization.vue b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
index 26eb5a5..fc2b129 100644
--- a/resources/js/components/open/forms/components/form-components/FormCustomization.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
@@ -1,16 +1,12 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Customization
-      </h3>
+  <editor-options-panel name="Customization" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
 
     <select-input name="theme" class="mt-4"
@@ -81,21 +77,20 @@
                          label="Auto save form response"
                          help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel, ProTag },
   props: {
   },
   data () {
     return {
-      isMounted: false,
-      isCollapseOpen: true
+      isMounted: false
     }
   },
 
diff --git a/resources/js/components/open/forms/components/form-components/FormInformation.vue b/resources/js/components/open/forms/components/form-components/FormInformation.vue
index 07de6a4..d6e45ba 100644
--- a/resources/js/components/open/forms/components/form-components/FormInformation.vue
+++ b/resources/js/components/open/forms/components/form-components/FormInformation.vue
@@ -1,13 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-0" class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Information
-      </h3>
+  <editor-options-panel name="Information" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
     <text-input name="title" class="mt-4"
                 :form="form"
@@ -66,17 +62,17 @@
         </div>
       </div>
     </modal>
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'
 import { mapState } from 'vuex'
 import clonedeep from 'clone-deep'
 
 export default {
-  components: { SelectInput, Collapse },
+  components: { SelectInput, EditorOptionsPanel },
   props: {},
   data () {
     return {
@@ -95,8 +91,7 @@ export default {
           name: "Closed - won\'t accept new submissions",
           value: "closed"
         }
-      ],
-      isCollapseOpen: true
+      ]
     }
   },
 
diff --git a/resources/js/components/open/forms/components/form-components/FormNotifications.vue b/resources/js/components/open/forms/components/form-components/FormNotifications.vue
index f76513a..fd275d2 100644
--- a/resources/js/components/open/forms/components/form-components/FormNotifications.vue
+++ b/resources/js/components/open/forms/components/form-components/FormNotifications.vue
@@ -1,14 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 transition-colors"
-             :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        Notifications & Integrations
-        <pro-tag />
-      </h3>
+  <editor-options-panel name="Notifications & Integrations" :already-opened="true" :has-pro-tag="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
 
     <form-notifications-option class="mt-2" />
@@ -32,12 +27,11 @@
       </div>
     </v-button>
 
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import FormNotificationsOption from './components/FormNotificationsOption.vue'
 import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
 import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue'
@@ -45,12 +39,11 @@ import FormNotificationsSubmissionConfirmation from './components/FormNotificati
 import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
 
 export default {
-  components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, Collapse, ProTag, FormNotificationsWebhook },
+  components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
   props: {
   },
   data () {
     return {
-      isCollapseOpen: true
     }
   },
 
diff --git a/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue b/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
index 3186629..e736d25 100644
--- a/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
+++ b/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
@@ -1,13 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors"
-          :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-          fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-        </svg> Security & Privacy
-      </h3>
+  <editor-options-panel name="Security & Privacy" :already-opened="false">
+    <template #icon>
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
     </template>
     <toggle-switch-input name="can_be_indexed" :form="form" class="mt-4"
                     label="Indexable by Google"
@@ -17,20 +13,18 @@
                     label="Protect your form with a Captcha"
                     help="If enabled we will make sure respondant is a human"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel },
   props: {
   },
   data () {
     return {
-      isCollapseOpen: false
     }
   },
   computed: {
diff --git a/resources/js/components/open/forms/components/form-components/FormStructure.vue b/resources/js/components/open/forms/components/form-components/FormStructure.vue
index 70eee36..20b901f 100644
--- a/resources/js/components/open/forms/components/form-components/FormStructure.vue
+++ b/resources/js/components/open/forms/components/form-components/FormStructure.vue
@@ -1,30 +1,25 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <div class="flex">
-        <h3 id="v-step-1" class="font-semibold block text-lg">
-          <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg> Form Structure
-        </h3>
-      </div>
+  <editor-options-panel name="Form Structure" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
     <form-fields-editor class="mt-5" />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import FormFieldsEditor from '../FormFieldsEditor.vue'
 
 export default {
-  components: { Collapse, FormFieldsEditor },
+  components: { EditorOptionsPanel, FormFieldsEditor },
   props: {
   },
   data () {
     return {
-      isCollapseOpen: true
     }
   },
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 42dc0aa..cfc0f10 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,6 +74,7 @@ module.exports = {
       transitionProperty: {
         height: 'height',
         width: 'width',
+        maxWidth: 'max-width',
         spacing: 'margin, padding'
       }
     }