use sections plugin

src/components/DropdownSectionSection.vue

@@ -17,6 +17,12 @@
                 v-if="item.svg"
                 v-html="item.svg"
               ></div>
+
+              <img
+                style="width: 100%"
+                v-else-if="item.image"
+                :src="item.image"
+              >
               <img
                 v-else
                 style="width: 100%"
@@ -69,7 +75,6 @@ export default {
         }
     },
     mounted() {
-
     }
 }
 </script>

src/components/PagebuilderContent.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    style="min-height: 100px"
-    class="pagebuilder-column"
-    :class="value.name"
-  >
+  <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
     <b-modal
       v-model.value="modalAddBox"
       class_other="modal-xl"
@@ -11,7 +7,7 @@
       title="Dodaj widżet"
     >
       <div>
-        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
+        <DropdownSectionSection v-if="modalAddBox" @choose="clickAdd"> </DropdownSectionSection>
       </div>
     </b-modal>
 
@@ -24,19 +20,11 @@
       <div>
         <div class="from-group">
           <label>Klasa kolumny</label>
-          <input
-            @input="onChange"
-            v-model="value.class"
-            type="text"
-            class="form-control"
-          />
+          <input @input="onChange" v-model="value.class" type="text" class="form-control" />
         </div>
       </div>
       <div>
-        <button
-          @click="modalColumnsSettings = false"
-          class="btn btn-outline-secondary"
-        >
+        <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
           Zapisz i zamknij
         </button>
       </div>
@@ -47,7 +35,7 @@
       @start="drag = true"
       @end="
         drag = false;
-        onChange();
+        onChange()
       "
       group="people"
     >
@@ -95,53 +83,58 @@
   </div>
 </template>
 <script>
-import draggable from "vuedraggable";
-import MagicoModal from "./MagicoModal.vue";
-import SectionText from "./plugin/SectionText.vue";
-import SectionTextarea from "./plugin/SectionTextarea.vue";
-import SectionHtml from "./plugin/SectionHtml.vue";
-import SectionImage from "./plugin/SectionImage.vue";
+import draggable from 'vuedraggable'
+import MagicoModal from './MagicoModal.vue'
+import SectionText from './plugin/SectionText.vue'
+import SectionTextarea from './plugin/SectionTextarea.vue'
+import SectionHtml from './plugin/SectionHtml.vue'
+import SectionImage from './plugin/SectionImage.vue'
 
-import DropdownSectionSection from "./DropdownSectionSection.vue";
+import DropdownSectionSection from './DropdownSectionSection.vue'
 
 export default {
   data: function () {
-    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
+    return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false }
   },
   props: { value: Object },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue'],
   components: {
     draggable,
-    "b-modal": MagicoModal,
+    'b-modal': MagicoModal,
     core_section_textarea: SectionTextarea,
     core_section_text: SectionText,
     core_section_html: SectionHtml,
     core_section_image: SectionImage,
 
-    DropdownSectionSection,
+    DropdownSectionSection
   },
   methods: {
     onChange: function () {
-      this.$emit("change");
+      this.$emit('change')
     },
     rand: function () {
-      return "component" + Math.random() * 100;
+      return 'component' + Math.random() * 100
     },
     removeItem(item) {
-      this.value.items.indexOf(item);
-      this.value.items.splice(this.value.items.indexOf(item), 1);
+      this.value.items.indexOf(item)
+      this.value.items.splice(this.value.items.indexOf(item), 1)
 
-      this.onChange();
+      this.onChange()
     },
     clickAdd: function (item) {
-      console.log(item);
-      this.modalAddBox = false;
-      var a = { name: item, open: true };
-      this.value.items.push(a);
-      this.onChange();
-    },
-  },
-};
+      console.log(item)
+      const sectionobj = this.$pagebuilder.items[item]
+      console.log('addedd', sectionobj)
+      this.modalAddBox = false
+      var a = { name: item, open: true }
+      if (sectionobj.section_id) {
+        a.section_id = sectionobj.section_id;
+      }
+      this.value.items.push(a)
+      this.onChange()
+    }
+  }
+}
 </script>
 <style>
 .pagebuilder-column-hover {

src/components/registerSections.js

@@ -1,16 +1,20 @@
-import PagebuilderSectionPlugin from "../../../magico-section/src/components/PagebuilderSectionPlugin.vue";
+import PagebuilderSectionPlugin from 'magico-section/src/components/PagebuilderSectionPlugin.vue'
 
 export function useSections() {
-  console.log('DUPA',PagebuilderSectionPlugin);
-  function register(vm) {
-    vm.registerPlugin(
-      "SectionX1",
-      {
-        label: "Sekcja 1",
-        svg_off: ``,
-      },
-      PagebuilderSectionPlugin
-    );
+  function register(vm, sections) {
+    console.log('sections', sections, vm)
+    sections.forEach((item) => {
+      vm.registerPlugin(
+        'section_' + item.section_id,
+        {
+          label: item.title,
+          svg_off: ``,
+          section_id: item.section_id,
+          image: item.image
+        },
+        PagebuilderSectionPlugin
+      )
+    })
   }
-  return { register };
+  return { register }
 }