From 60add34529524cdc2af86cccb05b9634b99cb5d6 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Mon, 17 Nov 2025 09:32:40 +0100
Subject: [PATCH] refactor: update section title and add dropdown options in
 PagebuilderSection

---
 package.json                          |  2 +-
 src/components/PagebuilderSection.vue | 86 ++++++++++-----------------
 2 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 39c8ec7..3645de2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/PagebuilderSection.vue b/src/components/PagebuilderSection.vue
index d22fd47..9fa702a 100644
--- a/src/components/PagebuilderSection.vue
+++ b/src/components/PagebuilderSection.vue
@@ -1,69 +1,37 @@
 <template>
   <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
     <div class="col-sm-12">
-      <h5 class="mt-4" v-if="value.user_label">{{ value.user_label }}</h5>
+      <h5 class="mt-4" v-if="value.title">{{ value.title }}</h5>
       <div class="row p-0 mt-3 me-2">
-        <PagebuilderContent
-          class="col-sm-12"
-          v-for="(column, index) in value.columns"
-          :value="column"
-          :key="keyIndex + 's' + index"
-          :id="keyIndex + 's' + index"
-          :keyIndex="keyIndex + 's' + index"
-          @change="onChange"
-        ></PagebuilderContent>
+        <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
+          :key="keyIndex + 's' + index" :id="keyIndex + 's' + index" :keyIndex="keyIndex + 's' + index"
+          @change="onChange"></PagebuilderContent>
       </div>
     </div>
 
     <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px">
-      <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"
-        ><i class="material-icons-outlined">sort</i></a
-      >
-      <a
-        href="#"
-        title="Duplikuj sekcje"
-        @click.prevent="copySection"
-        class="box-settings-icon box-copy text-warning"
-        ><i class="material-icons-outlined">file_copy</i></a
-      >
-      <a
-        href="#"
-        title="Ustawienia sekcji"
-        @click.prevent="toggleSettings"
-        class="box-settings-icon box-settings text-secondary"
-        ><i class="material-icons-outlined">settings</i></a
-      >
-      <a
-        href="#"
-        title="Usuń sekcje"
-        @click.prevent="deleteSection"
-        class="box-settings-icon box-delete text-danger"
-        ><i class="material-icons-outlined">delete</i></a
-      >
-      <b-modal
-        v-model="show_settings"
-        :title="t('pagebuilder.section_settings')"
-        @onClose="ustawieniaSave()"
-      >
+      <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i
+          class="material-icons-outlined">sort</i></a>
+      <a href="#" title="Duplikuj sekcje" @click.prevent="copySection"
+        class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
+      <a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings"
+        class="box-settings-icon box-settings text-secondary"><i class="material-icons-outlined">settings</i></a>
+      <a href="#" title="Usuń sekcje" @click.prevent="deleteSection" class="box-settings-icon box-delete text-danger"><i
+          class="material-icons-outlined">delete</i></a>
+      <b-modal v-model="show_settings" :title="t('pagebuilder.section_settings')" @onClose="ustawieniaSave()">
         <div>
           <div class="form-group mb-2">
             <label class="w-100 col-form-label"> {{ t('pagebuilder.section_type') }} </label>
             <div class="row">
               <div class="col-6">
-                <button
-                  class="btn w-100"
-                  @click="setType('container')"
-                  :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'"
-                >
+                <button class="btn w-100" @click="setType('container')"
+                  :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'">
                   {{ t('pagebuilder.container') }}
                 </button>
               </div>
               <div class="col-6">
-                <button
-                  class="btn w-100"
-                  @click="setType('full')"
-                  :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'"
-                >
+                <button class="btn w-100" @click="setType('full')"
+                  :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'">
                   {{ t('pagebuilder.full_width') }}
                 </button>
               </div>
@@ -71,10 +39,21 @@
           </div>
 
           <div>
-            <div class="form-group mb-2">
-              <label class="w-100 col-form-label"> Nazwa sekcji </label>
-              <input type="text" class="form-control" v-model="value.user_label" />
+   
+            <div class="form-group mb-3">
+              <label class="w-100 col-form-label">Tytuł sekcji</label>
+              <input type="text" class="form-control" v-model="value.title">
             </div>
+            <div class="form-group mb-3 ml-4">
+              <input type="checkbox" id="dropdown" class="form-check-input" v-model="value.dropdown">
+              <label for="dropdown" class="form-check-label">Sekcja rozwijana</label>
+            </div>
+            <div v-if="value.dropdown" class="form-group mb-3 ml-4">
+              <input type="checkbox" id="dropdown_default_open" class="form-check-input"
+                v-model="value.dropdown_default_open">
+              <label for="dropdown_default_open" class="form-check-label">Domyślnie rozwinięta</label>
+            </div>
+
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Klasa sekcji </label>
               <input type="text" class="form-control" v-model="value.class" />
@@ -169,7 +148,7 @@ export default {
 .pb_section {
   background-color: #fff;
 
-  > div {
+  >div {
     overflow: hidden;
   }
 }
@@ -182,6 +161,7 @@ export default {
   margin-bottom: 0px;
   margin-right: 4px;
 }
+
 .material-icons-outlined {
   font-size: 20px;
 }