fix: reactive field layout

frontend/src/components/FieldLayout.vue

@@ -26,22 +26,20 @@
               :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
             />
             <Section
-              class="text-lg font-medium"
-              :class="{ 'px-3 sm:px-5': hasTabs }"
+              class="flex gap-4 text-lg font-medium"
+              :class="{
+                'px-3 sm:px-5': hasTabs,
+                'mt-6': section.label && !section.hideLabel,
+              }"
+              :labelClass="[
+                'text-lg font-medium',
+                { 'px-3 sm:px-5': hasTabs },
+              ]"
               :label="section.label"
               :hideLabel="section.hideLabel || !section.label"
               :opened="section.opened"
               :collapsible="section.collapsible"
               collapseIconPosition="right"
-            >
-              <div
-                class="flex gap-4"
-                :class="[
-                  {
-                    'px-3 sm:px-5': hasTabs,
-                    'mt-6': section.label && !section.hideLabel,
-                  },
-                ]"
             >
               <div
                 class="column flex flex-col gap-4 w-full"
@@ -55,8 +53,17 @@
                 >
                   {{ column.label }}
                 </div>
-                  <div v-for="field in column.fields" :key="field.name">
-                    <div class="settings-field">
+                <template v-for="field in column.fields" :key="field.name">
+                  <div
+                    v-if="
+                      (field.type == 'Check' ||
+                        (field.read_only && data[field.name]) ||
+                        !field.read_only) &&
+                      (!field.depends_on || field.display_via_depends_on) &&
+                      !field.hidden
+                    "
+                    class="field"
+                  >
                     <div
                       v-if="field.type != 'Check'"
                       class="mb-2 text-sm text-ink-gray-5"
@@ -243,8 +250,7 @@
                       :disabled="Boolean(field.read_only)"
                     />
                   </div>
-                  </div>
-                </div>
+                </template>
               </div>
             </Section>
           </div>
@@ -295,8 +301,7 @@ const _tabs = computed(() => {
   return props.tabs.map((tab) => {
     tab.sections = tab.sections.map((section) => {
       section.columns = section.columns.map((column) => {
-        column.fields = column.fields
-          .map((field) => {
+        column.fields = column.fields.map((field) => {
           if (field.type == 'Link' && field.options == 'User') {
             field.type = 'User'
           }
@@ -312,15 +317,6 @@ const _tabs = computed(() => {
             ),
           }
         })
-          .filter((field) => {
-            return (
-              (field.type == 'Check' ||
-                (field.read_only && props.data[field.name]) ||
-                !field.read_only) &&
-              (!field.depends_on || field.display_via_depends_on) &&
-              !field.hidden
-            )
-          })
         return column
       })
       return section
@@ -352,7 +348,7 @@ const getPlaceholder = (field) => {
   display: none;
 }
 
-.section:has(.settings-field) {
+.section:has(.field) {
   display: block;
 }
 

frontend/src/components/Modals/SidePanelModal.vue

@@ -46,7 +46,7 @@
               }"
             >
               <Section
-                class="p-2"
+                labelClass="p-2"
                 :label="section.label"
                 :opened="section.opened"
               >

frontend/src/components/Section.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div v-if="!hide" class="flex items-center justify-between">
+      <div v-if="!hide" class="column-header flex items-center justify-between">
         <div
           class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
-          v-bind="$attrs"
+          :class="labelClass"
           @click="collapsible && toggle()"
         >
           <FeatherIcon
@@ -34,7 +34,7 @@
       enter-from-class="max-h-0 overflow-hidden"
       leave-to-class="max-h-0 overflow-hidden"
     >
-      <div v-show="opened">
+      <div class="columns" v-bind="$attrs" v-show="opened">
         <slot v-bind="{ opened, open, close, toggle }" />
       </div>
     </transition>
@@ -64,6 +64,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  labelClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
 })
 
 const hide = ref(props.hideLabel)

frontend/src/pages/Contact.vue

@@ -127,7 +127,11 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :label="section.label" :opened="section.opened">
+            <Section
+              labelClass="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"

frontend/src/pages/Deal.vue

@@ -125,7 +125,7 @@
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section
-              class="px-2 font-semibold"
+              labelClass="px-2 font-semibold"
               :label="section.label"
               :opened="section.opened"
             >

frontend/src/pages/Lead.vue

@@ -178,7 +178,7 @@
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
             <Section
-              class="px-2 font-semibold"
+              labelClass="px-2 font-semibold"
               :label="section.label"
               :opened="section.opened"
             >

frontend/src/pages/Organization.vue

@@ -112,7 +112,11 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :label="section.label" :opened="section.opened">
+            <Section
+              labelClass="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"