name for seciton and col

src/components/PagebuilderContent.vue

@@ -1,5 +1,6 @@
 <template>
   <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
+    <h6 v-if="value.user_label">{{ value.user_label }}</h6>
     <b-modal
       v-model.value="modalAddBox"
       class_other="modal-xl"
@@ -18,12 +19,16 @@
       v-on:onClose="modalColumnsSettings = false"
     >
       <div>
+        <div class="from-group">
+          <label>Nazwa kolumny</label>
+          <input @input="onChange" v-model="value.user_label" type="text" class="form-control" />
+        </div>
         <div class="from-group">
           <label>Klasa kolumny</label>
           <input @input="onChange" v-model="value.class" type="text" class="form-control" />
         </div>
       </div>
-      <div>
+      <div class="mt-4">
         <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
           Zapisz i zamknij
         </button>
@@ -34,13 +39,13 @@
       v-model="value.items"
       @start="drag = true"
       @end="
-        drag = false;
-        onChange()
+        drag = false; onChange()
       "
       group="people"
     >
       <template #item="{ element, index }">
         <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
+
           <component
             @itemRemoved="removeItem"
             :key="index"
@@ -128,7 +133,7 @@ export default {
       this.modalAddBox = false
       var a = { name: item, open: true }
       if (sectionobj.section_id) {
-        a.section_id = sectionobj.section_id;
+        a.section_id = sectionobj.section_id
       }
       this.value.items.push(a)
       this.onChange()