play with this sphathegi code

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: [
+    // add more generic rulesets here, such as:
+    // 'eslint:recommended',
+    "plugin:vue/vue3-recommended",
+    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+    "vue/no-mutating-props": 1,
+    "vue/html-indent": 0,
+    "vue/html-self-closing": ["warn", {
+      "html": {
+        "void": "any",
+        "normal": "always",
+        "component": "always"
+      },
+      "svg": "always",
+      "math": "always"
+    }],
+    "vue/max-attributes-per-line": [
+      "warn",
+      {
+        singleline: {
+          max: 2,
+        },
+        multiline: {
+          max: 2,
+        },
+      },
+    ],
+  },
+};

package.json

@@ -9,22 +9,22 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "@tinymce/tinymce-vue": "^3.2.8",
+    "@tinymce/tinymce-vue": "^4",
-    "boostrap": "^2.0.0",
+    "bootstrap": "^5.3.1",
-    "bootstrap": "^5.1.3",
     "core-js": "^3.6.5",
+    "magico-section": "../magico-section",
     "tinymce": "^6.0.3",
-    "vue": "^2.6.11",
+    "vue": "^3.2.36",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.11",
+    "@babel/eslint-parser": "^7.22.9",
-    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-service": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^8.46.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.16.1"
-    "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": true,
@@ -36,13 +36,8 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
-  },
+  }
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ]
 }

src/components/DropdownSectionGrid.vue

@@ -1,44 +1,48 @@
 <template>
-    <div class="row p-2">
+  <div class="row p-2">
-        <div v-for="(item, index) in items" :key="index" class="col-md-3">
+    <div
-
+      v-for="(item, index) in items"
-            <div class="my-check v2">
+      :key="index"
-
+      class="col-md-3"
-                <input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
+    >
-                    type="radio" v-model="value" :value="item.name">
+      <div class="my-check v2">
-
+        <label
-                <label :for="item.name"><img style="width:100%"
+          @click="emitEvent(item)"
-                        :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
+          :for="item.name"
-                        :alt="item.label" /></label>
+          ><img
-            </div>
+            style="width: 100%"
-
+            :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
-        </div>
+            :alt="item.label"
-
+        /></label>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import grid from './grid.js'
+import { ref } from "vue";
+import grid from "./grid.js";
 
 export default {
+  emits: ["choose"],
+  setup(props, { emit }) {
+    const items = ref(grid);
 
-    methods: {},
+    function emitEvent(item) {
-    data: function () {
+      emit("choose", item);
-        return {
+    }
-            items: grid,
+    return { items, emitEvent };
-            value: '',
+  },
-        }
+};
-    },
-}
 </script>
 <style>
 .my-check input {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    opacity: 0;
+  opacity: 0;
 }
 
 .my-check label {
-    cursor: pointer;
+  cursor: pointer;
 }
-</style>
+</style>

src/components/DropdownSectionSection.vue

@@ -1,28 +1,45 @@
 <template>
-    <div>
+  <div>
-        <div class="row col-md-12 pagebuilder_section">
+    <div class="row col-md-12 pagebuilder_section">
-            <div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
+      <div
-                <template v-if="!item.type || item.type != 'custom'">
+        v-for="(item, index) in $pagebuilder.items"
-                    <div class="my-check v2">
+        :key="index"
-                        <label @click="$emit('input', index)" :for="'pos_' + index">
+        class="col-md-2"
-                            <div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
+      >
-                            <img v-else style="width:100%"
+        <template v-if="!item.type || item.type != 'custom'">
-                                :src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'" alt="1 kolumna">
+          <div class="my-check v2">
-                            <span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
+            <label
-                                    item.label
+              @click="$emit('choose', index)"
-                            }}</span>
+              :for="'pos_' + index"
-                        </label>
+            >
-                    </div>
+              <div
-                </template>
+                style="width: 100%"
-            </div>
+                v-if="item.svg"
-        </div>
+                v-html="item.svg"
-        <!-- <div class="col-md-12 text-center">
+              ></div>
+              <img
+                v-else
+                style="width: 100%"
+                :src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'"
+                alt="1 kolumna"
+              />
+              <span
+                style="cursor: pointer"
+                class="d-inline-block w-100 text-center mt-1 mb-1"
+                >{{ item.label }}</span
+              >
+            </label>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- <div class="col-md-12 text-center">
             <h3>DESIGN SYSTEM</h3>
             <div>
                 <div class="row col-md-12 pagebuilder_section">
                     <div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
                         <div class="form-check v2">
-                            <input @input="event => { $emit('input', index) }" type="radio" :id="'pos_' + index"
+                            <input @input="event => { $emit('update:modelValue', index) }" type="radio" :id="'pos_' + index"
                                 name="pos">
                             <label :for="'pos_' + index">
                                 <div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
@@ -38,13 +55,14 @@
                 </div>
             </div>
         </div> -->
-    </div>
+  </div>
 </template>
 <script>
 
 export default {
     methods: {},
-    props:['value'],
+
+    emits:['choose'],
     data: function () {
         return {
             items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
@@ -57,13 +75,13 @@ export default {
 </script>
 <style>
 .my-check input {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    opacity: 0;
+  opacity: 0;
 }
 
 .my-check label {
-    cursor: pointer;
+  cursor: pointer;
 }
-</style>
+</style>

src/components/MagicoModal.vue

@@ -1,69 +1,90 @@
 <template>
-    <div class="modal" :id="id">
+  <div
-        <div class="modal-dialog " :class="class_other">
+    :id="id"
-            <div v-if="modal" class="modal-content">
+    class="modal"
-                <div v-if="title" class="modal-header">
+  >
-                    <h4 class="modal-title" v-html="title"></h4>
+    <div
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      class="modal-dialog"
-                </div>
+      :class="class_other"
-                <div class="p-3">
+    >
-                    <slot></slot>
+      <div
-                </div>
+        v-if="modal"
-            </div>
+        class="modal-content"
+      >
+        <div
+          v-if="title"
+          class="modal-header"
+        >
+          <h4
+            class="modal-title"
+            v-html="title"
+          />
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          />
         </div>
+        <div class="p-3">
+          <slot />
+        </div>
+      </div>
     </div>
+  </div>
 </template>
+
 <script>
-import { Modal } from 'bootstrap';
+import { Modal } from "bootstrap";
+import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+
 export default {
-    props: ['value', 'title', 'class_other'],
+  props: ["modelValue", "title", "class_other"],
-    data: function () {
+  setup(props, { emit }) {
-        return {
+    const id = "modal" + Math.round(Math.random() * 100000);
-            id: 'modal' + Math.round(Math.random() * 100000),
+    const modal = ref(null);
-            modal: null,
+
+    const triggerModal = (value, emitEvent = true) => {
+      if (value == true) {
+        modal.value.show();
+      } else {
+        modal.value.hide();
+        if (emitEvent) {
+          emit("hide");
         }
-    },
+      }
-    mounted() {
+      emit("update:modelValue", value);
-        document.body.append(document.getElementById(this.id));
+    };
-        this.modal = new Modal(document.getElementById(this.id))
+
-        let vm = this;
+    onMounted(() => {
-        document.getElementById(this.id).addEventListener('hidden.bs.modal', function () {
+      document.body.append(document.getElementById(id));
-            vm.triggerModal(false);
+      modal.value = new Modal(document.getElementById(id));
-        })
+      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
-        this.triggerModal(this.value, false);
+        triggerModal(false);
-    },
+      });
-    methods: {
+      triggerModal(props.modelValue, false);
-        triggerModal: function (value, emit = true) {
+    });
-            if (value == true) {
+
-                this.modal.show();
+    onBeforeUnmount(() => {
-            } else {
+      document.getElementById(id).remove();
-                this.modal.hide()
+    });
-                if (emit) {
+
-                    this.$emit('hide');
+    watch(
-                }
+      () => props.modelValue,
-            }
+      () => {
-            this.$emit('input', value);
+        triggerModal(props.modelValue);
-        }
+      }
-    },
+    );
-    watch: {
+
-        value: function () {
+    return { id, modal };
-            this.triggerModal(this.value);
+  },
-        }
+};
-    },
-    onDestroy: function () {
-        document.getElementById(this.id).remove();
-    }
-}
 </script>
+
 <style>
 .modal-xxl {
-    width: 100% !important;
+  width: 100% !important;
-    max-width: 100% !important;
+  max-width: 100% !important;
-    padding: 0 10px !important;
+  padding: 0 10px !important;
 }
-.modal-xlg {
+</style>
-    width: 75% !important;
-    max-width: 75% !important;
-    padding: 0 10px !important;
-}
-</style>

src/components/MagicoPagebuilder.vue

@@ -1,72 +1,140 @@
 <template>
-  <section :class="{ 'pagebuilder-fullscreen': fullscreen }" class="content card-body " id="pagebuilder">
+  <section
+    :class="{ 'pagebuilder-fullscreen': fullscreen }"
+    class="content card-body p-3"
+    id="pagebuilder"
+  >
     <div class="pagebuilder-body">
-
-
       <div class="d-flex justify-content-between">
-        <button @click.prevent="fullscreen = !fullscreen" title="Tryb pełnoekranowy"
+        <button
-          class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">fullscreen</span></button>
+          @click.prevent="fullscreen = !fullscreen"
+          title="Tryb pełnoekranowy"
+          class="btn btn-outline-primary btn-icon-sm"
+        >
+          <span class="material-icons-outlined">fullscreen</span>
+        </button>
         <div>
-
+          <button
-          <button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
+            @click.prevent="
-            class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
+              modalLoad = !modalLoad;
-          <button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
+              pageType = { name: null };
-            class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
+            "
+            title="Wczytaj szablon do schowka"
+            class="btn btn-outline-primary btn-icon-sm"
+          >
+            <span class="material-icons-outlined">find_replace</span>
+          </button>
+          <button
+            @click.prevent="
+              modalSave = !modalSave;
+              pageType = { name: null };
+            "
+            title="Zapisz szablon do schowka"
+            class="btn btn-outline-success btn-icon-sm"
+          >
+            <span class="material-icons-outlined">save</span>
+          </button>
         </div>
 
         <!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
         układ z innej strony</button> -->
       </div>
 
-      <draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
+      <draggable
-        <div v-for="(item, index) in comps" :key="index">
+        :options="{ handle: '.box-move' }"
-          <PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
+        v-model.value="comps"
+        @start="drag = true"
+        item-key="d"
+        @end="
+          drag = false;
+          onChange();
+        "
+      >
+        <template #item="{ element }">
+          <PagebuilderSection
+            :value="element"
+            v-on:deleteSection="deleteSection"
+            v-on:copy="copySection"
+            @change="onChange"
+          >
           </PagebuilderSection>
-        </div>
+        </template>
       </draggable>
 
-      <b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
+      <b-modal
-        v-on:onClose="modalSave = false">
+        class_other="modal-xl"
-        <div slot="modal-title"><span></span></div>
+        v-model.value="modalSave"
+        title="Zapisz szablon do schowka"
+        v-on:onClose="modalSave = false"
+      >
+        <PagebuilderTemplateSave
+          v-model.value="pageType"
+          :szablon="value"
+        >
+        </PagebuilderTemplateSave>
         <div>
-          <PagebuilderTemplateSave v-model="pageType" :szablon="value">
+          <button
-          </PagebuilderTemplateSave>
+            @click.prevent="modalSaveSave"
+            title="Zapisz do schowka"
+            class="btn btn-success mr-1"
+            :disabled="!pageType.name"
+          >
+            Zapisz do schowka
+          </button>
         </div>
-        <div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
-            :disabled="!pageType.name">Zapisz do schowka </button></div>
       </b-modal>
 
-      <b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
+      <b-modal
-        v-on:onClose="modalLoad = false">
+        class_other="modal-xl"
+        v-model.value="modalLoad"
+        title="Wczytaj szablon ze schowka"
+        v-on:onClose="modalLoad = false"
+      >
         <div>
-          <PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
+          <PagebuilderTemplateLoad
+            v-model.value="pageType"
+            @input="modalLoadClick"
+          ></PagebuilderTemplateLoad>
         </div>
-
       </b-modal>
 
-      <b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
+      <b-modal
-        <div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
+        class_other="modal-xl"
+        v-model.value="modalCopy"
+        v-on:onClose="modalCopy = false"
+      >
+        <PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
         <div>
-          <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
+          <button
+            class="btn btn-primary mr-1"
+            :disabled="!pageType.id"
+            @click.prevent="changeBody"
+          >
+            Skopiuj układ i treść
+          </button>
         </div>
-        <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
-            @click.prevent="changeBody">Skopiuj układ i treść </button></div>
       </b-modal>
 
-      <b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
+      <b-modal
-        v-on:onClose="modalAddSection = false" hide-footer>
+        class_other="modal-xl"
-        <div slot="modal-title"><span>
+        v-model.value="modalAddSection"
-
+        title=" Dodaj sekcję"
-          </span></div>
+        v-on:onClose="modalAddSection = false"
+        hide-footer
+      >
         <div>
-          <DropdownSectionGrid v-on:input="addSection" v-model="optionx">
+          <DropdownSectionGrid @choose="addSection"> </DropdownSectionGrid>
-          </DropdownSectionGrid>
         </div>
-        <div slot="modal-footer"></div>
+        <div></div>
       </b-modal>
       <div class="text-center">
         <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
-          class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
+          class="btn btn-block btn-primary mt-4"
+          @click.prevent="
+            modalAddSection = !modalAddSection;
+            optionx = false;
+          "
+        >
           Dodaj sekcję
         </button>
       </div>
@@ -75,96 +143,100 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
-import grid from './grid.js'
+import grid from "./grid.js";
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from "./MagicoModal.vue";
-import PagebuilderSection from './PagebuilderSection.vue'
+import PagebuilderSection from "./PagebuilderSection.vue";
-import DropdownSectionGrid from './DropdownSectionGrid.vue'
+import DropdownSectionGrid from "./DropdownSectionGrid.vue";
-import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
+import PagebuilderTemplateSave from "./PagebuilderTemplateSave.vue";
-import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
+import PagebuilderTemplateLoad from "./PagebuilderTemplateLoad.vue";
 
 export default {
-  name: 'HelloWorld',
+  name: "MagicoPagebuilder",
+  emits: ["update:modelValue"],
   components: {
-    'b-modal': MagicoModal,
+    "b-modal": MagicoModal,
     PagebuilderSection,
     draggable,
     DropdownSectionGrid,
     PagebuilderTemplateSave,
-    PagebuilderTemplateLoad
+    PagebuilderTemplateLoad,
   },
   data: function () {
     return {
       fullscreen: false,
       grid: grid,
-      namex: 'body', //podmieniane przez name
+      namex: "body", //podmieniane przez name
       drag: false,
-      optionx: '',
+      optionx: "",
       comps: [],
       modalAddSection: false,
       modalCopy: false,
       pageType: { id: false },
       modalSave: false,
       modalLoad: false,
-    }
+    };
   },
-  props: ['name', 'value', 'showcopy', 'lang'],
+  props: ["name", "modelValue", "showcopy", "lang"],
   mounted: function () {
     //var trimmed = $("#body_pagebuilder").val().replace((/  |\r\n|\n|\r/gm),"");
-    var trimmed = this.value//.replace((/{2} |\r\n|\n|\r/gm), "");
+    var trimmed = this.modelValue; //.replace((/{2} |\r\n|\n|\r/gm), "");
     try {
       this.comps = JSON.parse(trimmed);
     } catch (e) {
       console.warn(e);
-      this.comps = [{ "label": "1 kolumna  ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
+      this.comps = [
+        {
+          label: "1 kolumna  ",
+          name: "col_1",
+          columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
+        },
+      ];
     }
-
   },
   created: function () {
-    if (this.name) this.namex = this.name; else this.namxe = "body";
+    if (this.name) this.namex = this.name;
+    else this.namxe = "body";
   },
   watch: {
     // whenever question changes, this function will run
     comps: function (newQuestion) {
-      console.log('nq', newQuestion)
+      console.log("nq", newQuestion);
-    }
+    },
   },
   methods: {
     onChange: function () {
-      this.$emit('input', JSON.stringify(this.comps));
+      this.$emit("update:modelValue", JSON.stringify(this.comps));
-      this.$emit('change');
+      this.$emit("change");
     },
     copySection: function (item) {
       this.comps.push(JSON.parse(JSON.stringify(item)));
       this.onChange();
-
     },
     deleteSection: function (item) {
       this.comps.splice(this.comps.indexOf(item), 1);
       this.onChange();
     },
-    addSection: function () {
+    addSection: function (it) {
       this.modalAddSection = false;
-      var columna = grid;
+      this.comps.push(JSON.parse(JSON.stringify(it)));
-      this.comps.push(JSON.parse(JSON.stringify(columna[this.optionx])));
       this.onChange();
-
     },
     modalSaveSave: function () {
       console.log(this.pageType);
       var data = {
         id: this.pageType.id,
         name: this.pageType.name,
-        source: this.value,
+        source: this.modelValue,
         description: this.pageType.description,
-      }
+      };
       if (this.$pagebuilder.axios) {
-        this.$pagebuilder.axios.post('api/v1/pagebuilder/template', data).then(() => {
+        this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
           this.pageType = {};
           this.modalSave = false;
         });
       } else {
-        console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
+        console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
       }
     },
     modalLoadClick: function () {
@@ -174,28 +246,33 @@ export default {
     changeBody() {
       var t = this;
       var value = this.pageType.body;
-      var trimmed = value
+      var trimmed = value;
       try {
         //this.comps.forEach((item)=>{
         //    this.deleteSection(item);
         //})
-        this.comps = []
+        this.comps = [];
         setTimeout(function () {
           t.comps = JSON.parse(trimmed);
           t.onChange();
-
         }, 300);
         //this.comps =JSON.parse(trimmed);
       } catch (e) {
-        this.comps = [{ "label": "1 kolumna  ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
+        this.comps = [
+          {
+            label: "1 kolumna  ",
+            name: "col_1",
+            columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
+          },
+        ];
       }
 
       this.modalCopy = false;
       this.modalSave = false;
       this.modalLoad = false;
-    }
+    },
   },
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/MagicoPagebuilderPlugin.js

@@ -1,34 +1,36 @@
-import MagicoPagebuilder from './MagicoPagebuilder.vue'
+import MagicoPagebuilder from "./MagicoPagebuilder.vue";
 
 export default {
-    install: (app) => {
+  install: (app) => {
-        app.component('MagicoPagebuilder', MagicoPagebuilder);
+    app.component("MagicoPagebuilder", MagicoPagebuilder);
 
-        console.log(app);
+    console.log(app);
-        app.prototype.$pagebuilder = {
+    app.config.globalProperties.$pagebuilder = {
-            items: {
+      items: {
-                'core_section_text': {
+        core_section_text: {
-                    label: 'Pole nagłowek',
+          label: "Pole nagłowek",
-                    svg_off: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="31.29px" height="31.29px" viewBox="0 0 31.29 31.29" style="enable-background:new 0 0 31.29 31.29;" xml:space="preserve"><g><g><path d="M18.585,31.226v-1.833h0.577c0.497,0,0.961-0.036,1.395-0.105c0.436-0.072,0.812-0.219,1.131-0.438s0.576-0.537,0.769-0.948c0.192-0.412,0.287-0.959,0.287-1.643V16.03H8.547v10.229c0,0.683,0.095,1.229,0.287,1.644c0.192,0.41,0.448,0.729,0.768,0.947c0.32,0.221,0.699,0.365,1.14,0.438c0.442,0.07,0.902,0.106,1.386,0.106h0.577v1.833H0v-1.833h0.555c0.497,0,0.961-0.036,1.396-0.106c0.434-0.071,0.813-0.217,1.141-0.438c0.326-0.221,0.582-0.537,0.769-0.947c0.184-0.412,0.275-0.961,0.275-1.644v-21.4c0-0.639-0.096-1.153-0.287-1.545c-0.194-0.392-0.454-0.693-0.78-0.906C2.742,2.195,2.363,2.056,1.927,1.992c-0.431-0.065-0.89-0.096-1.373-0.096H0V0.063h12.705v1.833h-0.577c-0.483,0-0.943,0.035-1.386,0.107c-0.44,0.07-0.819,0.217-1.14,0.437C9.283,2.66,9.027,2.976,8.834,3.389C8.642,3.8,8.547,4.348,8.547,5.03v8.823h14.195V5.03c0-0.683-0.096-1.23-0.287-1.642s-0.448-0.729-0.768-0.948c-0.32-0.22-0.696-0.366-1.131-0.437c-0.435-0.072-0.897-0.107-1.396-0.107h-0.577V0.063h12.705v1.833h-0.553c-0.498,0-0.961,0.035-1.396,0.107c-0.434,0.07-0.812,0.217-1.141,0.437c-0.326,0.22-0.582,0.536-0.768,0.948c-0.186,0.411-0.277,0.959-0.277,1.642v21.442c0,0.64,0.097,1.155,0.287,1.545c0.192,0.392,0.453,0.687,0.779,0.884c0.326,0.2,0.705,0.331,1.141,0.396c0.434,0.064,0.892,0.096,1.373,0.096h0.556v1.833H18.585z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
+          svg_off: "",
-                },
+        },
-                'core_section_textarea': {
+        core_section_textarea: {
-                    label: 'Pole tekstowe',
+          label: "Pole tekstowe",
-                    svg_off: '<svg id="Capa_1" enable-background="new 0 0 512 512" height="128" viewBox="0 0 512 512" width="128" xmlns="http://www.w3.org/2000/svg"><g><path d="m15 114.235c8.284 0 15-6.716 15-15v-69.235h69.235c8.284 0 15-6.716 15-15s-6.716-15-15-15h-84.235c-8.284 0-15 6.716-15 15v84.235c0 8.285 6.716 15 15 15z"/><path d="m497 0h-84.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h69.235v69.235c0 8.284 6.716 15 15 15s15-6.716 15-15v-84.235c0-8.284-6.716-15-15-15z"/><path d="m497 397.765c-8.284 0-15 6.716-15 15v69.235h-69.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h84.235c8.284 0 15-6.716 15-15v-84.235c0-8.285-6.716-15-15-15z"/><path d="m99.235 482h-69.235v-69.235c0-8.284-6.716-15-15-15s-15 6.716-15 15v84.235c0 8.284 6.716 15 15 15h84.235c8.284 0 15-6.716 15-15s-6.715-15-15-15z"/><path d="m419.66 191.38v-94.73c0-4.7-3.81-8.51-8.52-8.51h-155.14-155.14c-4.71 0-8.52 3.81-8.52 8.51v94.73c0 4.71 3.81 8.52 8.52 8.52h45.24c4.7 0 8.51-3.81 8.51-8.52v-32.45c0-4.71 3.82-8.52 8.52-8.52h53.21c4.71 0 8.52 3.81 8.52 8.52v234.14c0 4.71-3.81 8.52-8.52 8.52h-23.27c-4.71 0-8.52 3.81-8.52 8.52v45.24c0 4.7 3.81 8.51 8.52 8.51h62.93 62.93c4.71 0 8.52-3.81 8.52-8.51v-45.24c0-4.71-3.81-8.52-8.52-8.52h-23.27c-4.71 0-8.52-3.81-8.52-8.52v-234.14c0-4.71 3.81-8.52 8.52-8.52h53.21c4.7 0 8.52 3.81 8.52 8.52v32.45c0 4.71 3.81 8.52 8.51 8.52h45.24c4.71 0 8.52-3.81 8.52-8.52z"/></g></svg>'
+          svg_off: "",
-                },
+        },
-                'core_section_html': {
+        core_section_html: {
-                    label: 'Pole HTML',
+          label: "Pole HTML",
-                    svg_off: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
+          svg_off: "",
-                },
+        },
-                'core_section_image': {
+        core_section_image: {
-                    label: 'Obrazek',
+          label: "Obrazek",
-                    svg_off: '<svg version="1.1" id="Capa_1" height="128" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M446.575,0H65.425C29.349,0,0,29.35,0,65.426v381.149C0,482.65,29.349,512,65.425,512h381.15C482.651,512,512,482.65,512,446.574V65.426C512,29.35,482.651,0,446.575,0z M481.842,446.575c0,19.447-15.821,35.267-35.267,35.267H65.425c-19.447,0-35.268-15.821-35.268-35.267v-55.007l99.255-84.451c3.622-3.082,8.906-3.111,12.562-0.075l62.174,51.628c5.995,4.977,14.795,4.569,20.304-0.946L372.181,209.77c2.67-2.675,5.783-2.935,7.408-2.852c1.62,0.083,4.695,0.661,7.078,3.596l95.176,117.19V446.575z M481.842,279.865l-71.766-88.366c-7.117-8.764-17.666-14.122-28.942-14.701c-11.268-0.57-22.317,3.672-30.294,11.662L212.832,326.681l-51.59-42.839c-14.959-12.422-36.563-12.293-51.373,0.308l-79.712,67.822V65.426c0-19.447,15.821-35.268,35.268-35.268h381.15c19.447,0,35.267,15.821,35.267,35.268V279.865z"/></g></g><g><g><path d="M161.174,62.995c-40.095,0-72.713,32.62-72.713,72.713c0,40.094,32.619,72.713,72.713,72.713s72.713-32.619,72.713-72.713S201.269,62.995,161.174,62.995z M161.174,178.264c-23.466,0-42.556-19.091-42.556-42.556c0-23.466,19.09-42.556,42.556-42.556c23.466,0,42.556,19.091,42.556,42.556S184.64,178.264,161.174,178.264z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
+          svg_off: "",
-                }
+        },
-            },
+      },
-            axios: null,
+      axios: null,
-            registerPlugin(name, item, component) {
+      registerPlugin(name, item, component) {
-                this.items[name] = item;
+        this.items[name] = item;
-                app.component(name, component);
+        if(component){
-            }
+          app.component(name, component);
         }
-    }
+      },
-}
+    };
+  },
+};

src/components/PagebuilderContent.vue

@@ -1,113 +1,162 @@
 <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"
+      v-on:onClose="modalAddBox = false"
+      title="Dodaj widżet"
+    >
+      <div>
+        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
+      </div>
+    </b-modal>
 
-        <b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
+    <b-modal
-
+      v-model="modalColumnsSettings"
-            <div>
+      title="Ustawienia kolumny"
-                <DropdownSectionSection v-on:input="clickAdd" v-model="opcja">
+      size="sm"
-                </DropdownSectionSection>
+      v-on:onClose="modalColumnsSettings = false"
-            </div>
+    >
-            <div slot="modal-footer"></div>
+      <div>
-        </b-modal>
+        <div class="from-group">
-
+          <label>Klasa kolumny</label>
-
+          <input
-        <b-modal v-model="modalColumnsSettings" title="Ustawienia kolumny" size="sm"
+            @input="onChange"
-            v-on:onClose="modalColumnsSettings = false">
+            v-model="value.class"
-
+            type="text"
-            <div>
+            class="form-control"
-                <div class="from-group">
+          />
-                    <label>Klasa kolumny</label>
-                    <input @input="onChange" v-model="value.class" type="text" class="form-control">
-                </div>
-            </div>
-            <div slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
-                    i zamknij</button></div>
-        </b-modal>
-        <draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
-            @end="drag = false; onChange()" group="people">
-
-            <div v-for="(item, index) in value.items" :key="index"
-                class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
-                <component @itemRemoved="removeItem" :key="index" v-bind:is="item.name" v-bind:value="item"
-                    v-model="value.items[index]" @input="onChange" @change="onChange"></component>
-            </div>
-        </draggable>
-        <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
-        <div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
-            <div class="flex-fill mr-0 pr-0 ">
-                <button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
-                    @click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
-                        class="material-icons-outlined">add_circle_outline</i></button>
-            </div>
-            <div class="ml-0 pl-0">
-                <a title="Ustawienia kolumny" class="btn-icon-sm"
-                    @click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
-                        style="  cursor:pointer; position: relative; top:5px; margin-left: 5px;"
-                        class="material-icons-outlined">create</i></a>
-            </div>
         </div>
+      </div>
+      <div>
+        <button
+          @click="modalColumnsSettings = false"
+          class="btn btn-outline-secondary"
+        >
+          Zapisz i zamknij
+        </button>
+      </div>
+    </b-modal>
+    <draggable
+      :options="{ handle: '.box-move' }"
+      v-model="value.items"
+      @start="drag = true"
+      @end="
+        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"
+            v-bind:is="element.name"
+            v-bind:value="element"
+            v-model="value.items[index]"
+            @update:model-value="onChange"
+            @change="onChange"
+          ></component>
+        </div>
+      </template>
+    </draggable>
+    <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
+    <div
+      class="posistion-relative"
+      :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
+    >
+      <div class="flex-fill mr-0 pr-0">
+        <button
+          class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
+          @click.prevent="modalAddBox = !modalAddBox"
+          title="Dodaj widget"
+        >
+          <i class="material-icons-outlined">add_circle_outline</i>
+        </button>
+      </div>
+      <div class="ml-0 pl-0">
+        <a
+          title="Ustawienia kolumny"
+          class="btn-icon-sm"
+          @click.prevent="modalColumnsSettings = !modalColumnsSettings"
+          ><i
+            style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
+            class="material-icons-outlined"
+            >create</i
+          ></a
+        >
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from "./MagicoModal.vue";
-import SectionText from './plugin/SectionText.vue'
+import SectionText from "./plugin/SectionText.vue";
-import SectionTextarea from './plugin/SectionTextarea.vue'
+import SectionTextarea from "./plugin/SectionTextarea.vue";
-import SectionHtml from './plugin/SectionHtml.vue'
+import SectionHtml from "./plugin/SectionHtml.vue";
-import SectionImage from './plugin/SectionImage.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 } },
+  data: function () {
-    props: { value: Object },
+    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
-    components: {
+  },
-        draggable,
+  props: { value: Object },
-        'b-modal': MagicoModal,
+  emits: ["update:modelValue"],
-        'core_section_textarea': SectionTextarea,
+  components: {
-        'core_section_text': SectionText,
+    draggable,
-        'core_section_html': SectionHtml,
+    "b-modal": MagicoModal,
-        'core_section_image': SectionImage,
+    core_section_textarea: SectionTextarea,
-
+    core_section_text: SectionText,
-        DropdownSectionSection
+    core_section_html: SectionHtml,
+    core_section_image: SectionImage,
 
+    DropdownSectionSection,
+  },
+  methods: {
+    onChange: function () {
+      this.$emit("change");
     },
-    methods: {
+    rand: function () {
-        onChange: function () {
+      return "component" + Math.random() * 100;
-            this.$emit('change');
+    },
-        },
+    removeItem(item) {
-        rand: function () { return 'component' + Math.random() * 100 },
+      this.value.items.indexOf(item);
-        removeItem(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) {
+    clickAdd: function (item) {
-            console.log(item);
+      console.log(item);
-            this.modalAddBox = false;
+      this.modalAddBox = false;
-            var a = { name: item, open: true }
+      var a = { name: item, open: true };
-            this.value.items.push(a);
+      this.value.items.push(a);
-            this.onChange();
+      this.onChange();
-            this.opcja = '';
+    },
-        }
+  },
-    }
+};
-}
 </script>
 <style>
 .pagebuilder-column-hover {
-    display: none;
+  display: none;
 }
 
 .pagebuilder-column-hover-padding {
-    padding: 17px;
+  padding: 17px;
 }
 
 .pagebuilder-column:hover .pagebuilder-column-hover {
-    display: flex;
+  display: flex;
 }
 
 .pagebuilder-column:hover .pagebuilder-column-hover-padding {
-    padding: 0px;
+  padding: 0px;
 }
-</style>
+</style>

src/components/PagebuilderSection.vue

@@ -1,121 +1,174 @@
 <template>
-    <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
+  <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
-
+    <div class="col-sm-12">
-        <div class="col-sm-12">
+      <div class="row p-0 mt-3 me-2">
-            <div class="row p-0 mt-3 me-2">
+        <PagebuilderContent
-                <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
+          class="col-sm-12"
-                    :key="index" @change="onChange"></PagebuilderContent>
+          v-for="(column, index) in value.columns"
-            </div>
+          :value="column"
-        </div>
+          :key="index"
-
+          @change="onChange"
-
+        ></PagebuilderContent>
-        <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
+      </div>
-            <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="Ustawienia sekcji"
-                @onClose="ustawieniaSave()">
-
-                <div>
-                    <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">
-                        </div>
-                        <div class="form-group mb-2">
-                            <label>Margines górny</label>
-                            <div class="input-group mb-3">
-
-                                <input type="number" class="form-control" v-model="value.margin_top">
-                                <div class="input-group-append">
-                                    <span class="input-group-text" id="basic-addon1">px</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group mb-2">
-                        <label>Margines dolny</label>
-                        <div class="input-group mb-3">
-
-                            <input type="number" class="form-control" v-model="value.margin_bottom">
-                            <div class="input-group-append">
-                                <span class="input-group-text" id="basic-addon1">px</span>
-                            </div>
-                        </div>
-                    </div>
-
-
-                </div>
-                <div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
-                        Zapisz
-                    </button></div>
-            </b-modal>
-
-        </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="Ustawienia sekcji"
+        @onClose="ustawieniaSave()"
+      >
+        <div>
+          <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"
+              />
+            </div>
+            <div class="form-group mb-2">
+              <label>Margines górny</label>
+              <div class="input-group mb-3">
+                <input
+                  type="number"
+                  class="form-control"
+                  v-model="value.margin_top"
+                />
+                <div class="input-group-append">
+                  <span
+                    class="input-group-text"
+                    id="basic-addon1"
+                    >px</span
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-group mb-2">
+            <label>Margines dolny</label>
+            <div class="input-group mb-3">
+              <input
+                type="number"
+                class="form-control"
+                v-model="value.margin_bottom"
+              />
+              <div class="input-group-append">
+                <span
+                  class="input-group-text"
+                  id="basic-addon1"
+                  >px</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button
+            class="btn btn-outline-secondary"
+            @click.prevent="ustawieniaSave"
+          >
+            Zapisz
+          </button>
+        </div>
+      </b-modal>
+    </div>
+  </div>
 </template>
 <script>
-import grid from './grid.js'
+import grid from "./grid.js";
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from "./MagicoModal.vue";
-import PagebuilderContent from './PagebuilderContent.vue'
+import PagebuilderContent from "./PagebuilderContent.vue";
 export default {
-    props: { value: Object },
+  props: { value: Object },
-    components: {
+  emits: ["update:modelValue", "copy", "deleteSection"],
-        'b-modal': MagicoModal,
+  components: {
-        PagebuilderContent
+    "b-modal": MagicoModal,
+    PagebuilderContent,
+  },
+  data: function () {
+    return { items: grid, value2: "", show_settings: false };
+  },
+  methods: {
+    changeSelect: function () {
+      this.onChange();
     },
-    data: function () { return { items: grid, value2: '', show_settings: false } },
+    onChange: function () {
-    methods: {
+      this.$emit("change");
-        changeSelect: function () {
-            this.onChange();
-        },
-        onChange: function () {
-            this.$emit('change');
-        },
-        deleteSection: function () { this.$emit('deleteSection', this.value) },
-        copySection: function () { this.$emit('copy', this.value); },
-        toggleSettings: function () { this.show_settings = !this.show_settings; },
-        ustawieniaSave: function () { this.show_settings = false; this.onChange(); },
-        rand: function (index) { return 'column' + index + Math.random() * 100 },
-
     },
-    mounted: function () {
+    deleteSection: function () {
+      this.$emit("deleteSection", this.value);
     },
-
+    copySection: function () {
-}
+      this.$emit("copy", this.value);
-
+    },
+    toggleSettings: function () {
+      this.show_settings = !this.show_settings;
+    },
+    ustawieniaSave: function () {
+      this.show_settings = false;
+      this.onChange();
+    },
+    rand: function (index) {
+      return "column" + index + Math.random() * 100;
+    },
+  },
+  mounted: function () {},
+};
 </script>
 <style>
 #pagebuilder {
-    background-color: #f5f5f5;
+  background-color: #f5f5f5;
 }
 
 .pb_section {
-    background-color: #fff;
+  background-color: #fff;
 
-    >div {
+  > div {
-        overflow: hidden;
+    overflow: hidden;
-    }
+  }
 }
 
-.btn.btn-icon-sm, .btn.drp-icon-sm {
+.btn.btn-icon-sm,
-    width: 34px;
+.btn.drp-icon-sm {
-    height: 34px;
+  width: 34px;
-    padding: 6px 6px;
+  height: 34px;
-    margin-bottom: 0px;
+  padding: 6px 6px;
-    margin-right: 4px;
+  margin-bottom: 0px;
+  margin-right: 4px;
 }
-.material-icons-outlined{
+.material-icons-outlined {
-    font-size: 20px;
+  font-size: 20px;
 }
-
+</style>
-</style>

src/components/PagebuilderTemplateLoad.vue

@@ -22,7 +22,7 @@ export default {
     },
     methods: {
         changeSelect() {
-            this.$emit('input', this.itemselected);
+            this.$emit('update:modelValue', this.itemselected);
         },
         getPost() {
             if (this.$pagebuilder.axios) {

src/components/PagebuilderTemplateSave.vue

@@ -1,66 +1,101 @@
 <template>
-    <div>
+  <div>
-        <div class="form-group mb-3 ">
+    <div class="form-group mb-3">
-            <label v-if="id < 1" class="col-4">Tworzysz nowy szablon</label>
+      <label
-            <label v-if="id > 0" class="col-4">Nadpiszesz istniejacy szablon</label>
+        v-if="id < 1"
-            <div class="col-8"><b v-if="id > 0" class="">{{ name2 }}</b></div>
+        class="col-4"
-        </div>
+        >Tworzysz nowy szablon</label
-        <div class="form form-group mb-3">
+      >
-            <label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
+      <label
-            <select v-model="itemselected" @change="changeSelect" class="form-control">
+        v-if="id > 0"
-                <option :value="{ 'new': 1 }">Stwórz nowy szablon</option>
+        class="col-4"
-                <option :key="ii" v-for="item, ii in items" :value="item">Nadpisz: {{ item.name }}</option>
+        >Nadpiszesz istniejacy szablon</label
-            </select>
+      >
-        </div>
+      <div class="col-8">
-        <div v-show="itemselected.new == 1">
+        <b
-            <div class="form form-group mb-3"><label class="w-100">Nazwa szablonu</label><input @change="change"
+          v-if="id > 0"
-                    class="form-control" type="text" v-model="name"></div>
+          class=""
-            <div class="form form-group mb-3"><label class="w-100">Opis</label><input @change="change"
+          >{{ name2 }}</b
-                    class="form-control" type="text" v-model="description"></div>
+        >
-        </div>
+      </div>
-
     </div>
+    <div class="form form-group mb-3">
+      <label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
+      <select
+        v-model="itemselected"
+        @change="changeSelect"
+        class="form-control"
+      >
+        <option :value="{ new: 1 }">Stwórz nowy szablon</option>
+        <option
+          :key="ii"
+          v-for="(item, ii) in items"
+          :value="item"
+        >
+          Nadpisz: {{ item.name }}
+        </option>
+      </select>
+    </div>
+    <div v-show="itemselected.new == 1">
+      <div class="form form-group mb-3">
+        <label class="w-100">Nazwa szablonu</label
+        ><input
+          @change="change"
+          class="form-control"
+          type="text"
+          v-model="name"
+        />
+      </div>
+      <div class="form form-group mb-3">
+        <label class="w-100">Opis</label
+        ><input
+          @change="change"
+          class="form-control"
+          type="text"
+          v-model="description"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-
-
 export default {
-    created() {
+  created() {
-        this.getPost();
+    this.getPost();
+  },
+  data: function () {
+    return {
+      items: [],
+      itemselected: { new: 1 },
+      name: "",
+      description: "",
+      id: 0,
+    };
+  },
+  methods: {
+    change() {
+      this.$emit("update:modelValue", {
+        id: this.id,
+        name: this.name,
+        description: this.description,
+      });
     },
-    data: function () {
+    changeSelect() {
-        return {
+      this.id = this.itemselected.id;
-            items: [],
+      this.name = this.itemselected.name;
-            itemselected: {new:1},
+      this.name2 = this.itemselected.naem;
-            name: '',
+      this.description = this.itemselected.description;
-            description: '',
+      this.change();
-            id: 0,
-        }
     },
-    methods: {
+    getPost() {
-        change() {
+      if (this.$pagebuilder.axios) {
-            this.$emit('input', {
+        this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
-                id: this.id,
+          this.items = response.data.data;
-                name: this.name,
+        });
-                description: this.description,
+      } else {
-            });
+        console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
-        },
+      }
-        changeSelect() {
+    },
-            this.id = this.itemselected.id;
+  },
-            this.name = this.itemselected.name;
+};
-            this.name2 = this.itemselected.naem;
+</script>
-            this.description = this.itemselected.description;
-            this.change();
-        },
-        getPost() {
-            if (this.$pagebuilder.axios) {
-                this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
-                    this.items = response.data.data;
-                });
-            } else {
-                console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
-            }
-        }
-    }
-}
-</script>

src/components/grid.js

@@ -1,14 +1,117 @@
 export default {
-    'col_1': { label: '1 kolumna  ', name: 'col_1', class: '', columns: [{ name: 'col-md-12', items: [] }] },
+  col_1: {
-    'col_2': { label: '2 kolumny po 6 ', name: 'col_2', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
+    label: "1 kolumna  ",
-    'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
+    name: "col_1",
-    'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', class: '', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
+    class: "",
-    'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
+    columns: [{ name: "col-md-12", items: [] }],
-    'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', class: '', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
+  },
-    'col_3': { label: '3 kolumny po 4 ', name: 'col_3', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
+  col_2: {
-    'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
+    label: "2 kolumny po 6 ",
-    'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    name: "col_2",
-    'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
+    class: "",
-    'col_4': { label: '4 kolumny po 3 ', name: 'col_4', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    columns: [
-    'col_6': { label: '6 kolumn po 2 ', name: 'col_6', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
+      { name: "col-md-6", items: [] },
-}
+      { name: "col-md-6", items: [] },
+    ],
+  },
+  col_4_8: {
+    label: "2 kolumny 2 i 8 ",
+    name: "col_4_8",
+    class: "",
+    columns: [
+      { name: "col-md-4", items: [] },
+      { name: "col-md-8", items: [] },
+    ],
+  },
+  col_8_4: {
+    label: "2 kolkumny 8 i 2 ",
+    name: "col_8_4",
+    class: "",
+    columns: [
+      { name: "col-md-8", items: [] },
+      { name: "col-md-4", items: [] },
+    ],
+  },
+  col_2_10: {
+    label: "2 kolumny 2 i 10 ",
+    name: "col_2_10",
+    class: "",
+    columns: [
+      { name: "col-md-2", items: [] },
+      { name: "col-md-10", items: [] },
+    ],
+  },
+  col_10_2: {
+    label: "2 kolkumny 10 i 2 ",
+    name: "col_10_2",
+    class: "",
+    columns: [
+      { name: "col-md-10", items: [] },
+      { name: "col-md-2", items: [] },
+    ],
+  },
+  col_3: {
+    label: "3 kolumny po 4 ",
+    name: "col_3",
+    class: "",
+    columns: [
+      { name: "col-md-4", items: [] },
+      { name: "col-md-4", items: [] },
+      { name: "col-md-4", items: [] },
+    ],
+  },
+  col_3_6_3: {
+    label: "3 kolumny: 3 ,6, 3 ",
+    name: "col_3_6_3",
+    class: "",
+    columns: [
+      { name: "col-md-3", items: [] },
+      { name: "col-md-6", items: [] },
+      { name: "col-md-3", items: [] },
+    ],
+  },
+  col_6_3_3: {
+    label: "3 kolumny: 6,3,3 ",
+    name: "col_6_3_3",
+    class: "",
+    columns: [
+      { name: "col-md-6", items: [] },
+      { name: "col-md-3", items: [] },
+      { name: "col-md-3", items: [] },
+    ],
+  },
+  col_3_3_6: {
+    label: "3 kolumny: 3,3,6 ",
+    name: "col_3_3_6",
+    class: "",
+    columns: [
+      { name: "col-md-3", items: [] },
+      { name: "col-md-3", items: [] },
+      { name: "col-md-6", items: [] },
+    ],
+  },
+  col_4: {
+    label: "4 kolumny po 3 ",
+    name: "col_4",
+    class: "",
+    columns: [
+      { name: "col-md-3", items: [] },
+      { name: "col-md-3", items: [] },
+      { name: "col-md-3", items: [] },
+      { name: "col-md-3", items: [] },
+    ],
+  },
+  col_6: {
+    label: "6 kolumn po 2 ",
+    name: "col_6",
+    class: "",
+    columns: [
+      { name: "col-md-2", items: [] },
+      { name: "col-md-2", items: [] },
+      { name: "col-md-2", items: [] },
+      { name: "col-md-2", items: [] },
+      { name: "col-md-2", items: [] },
+      { name: "col-md-2", items: [] },
+    ],
+  },
+};

src/components/plugin/SectionHtml.vue

@@ -31,17 +31,16 @@ import MagicoModal from './../MagicoModal.vue'
 export default {
     components: {
         'b-modal': MagicoModal,
-
     },
     props: {
-        value: Object
+        modelValue: Object
     },
     mounted: function () {
-        this.name = (this.value && this.value.name) ? this.value.name : this.name;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.value && this.value.text) ? this.value.text : this.text;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        if (this.value.open) this.modalBox = true;
+        if (this.modelValue.open) this.modalBox = true;
         console.log('mounted html');
-        this.$emit('input',this.value);
+        this.$emit('update:modelValue',this.modelValue);
     },
     data: function () {
         return {
@@ -58,21 +57,20 @@ export default {
     },
     computed: {
         ctext: function () {
-            return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):'';
+            return this.modelValue.text?this.modelValue.text.replace(/<(?:.|\n)*?>/gm, ''):'';
         }
     },
     methods: {
         removeItem: function () {
-            this.$emit('itemRemoved', this.value);
+            this.$emit('itemRemoved', this.modelValue);
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
             })
         }
     },
-
 }
 </script>

src/components/plugin/SectionImage.vue

@@ -39,7 +39,7 @@
                     <div class="form-group ">
                         <label class="w-100 col-form-label">{{ langs.scaling }}</label>
                         <select v-model="scale" class="form-select">
-                            <option v-for="item, ii  in scales" :key="ii" :value="item.key">{{ item.value }}
+                            <option v-for="item, ii  in scales" :key="ii" :value="item.key">{{ item.modelValue }}
                             </option>
                         </select>
                     </div>
@@ -82,7 +82,7 @@ import MagicoModal from './../MagicoModal.vue'
 
 export default {
     props: {
-        value: Object,
+        modelValue: Object,
     },
     data: function () {
         return {
@@ -126,26 +126,26 @@ export default {
         }
     },
     mounted: function () {
-        console.log('mount image', this.value);
+        console.log('mount image', this.modelValue);
-        this.alt = (this.value && this.value.alt) ? this.value.alt : this.alt;
+        this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
-        this.title = (this.value && this.value.title) ? this.value.title : this.title;
+        this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
-        this.name = (this.value && this.value.name) ? this.value.name : this.name;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.value && this.value.text) ? this.value.text : this.text;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        this.width = (this.value && this.value.width) ? this.value.width : this.width;
+        this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
-        this.height = (this.value && this.value.height) ? this.value.height : this.height;
+        this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
-        this.ratio = (this.value && this.value.ratio) ? this.value.ratio : this.ratio;
+        this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
-        this.scale = (this.value && this.value.scale) ? this.value.scale : this.scale;
+        this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
-        this.href = (this.value && this.value.href) ? this.value.href : this.href;
+        this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
-        this.figcaption = (this.value && this.value.figcaption) ? this.value.figcaption : this.figcaption;
+        this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
 
-        if (this.value.open) this.modalBox = true;
+        if (this.modelValue.open) this.modalBox = true;
     },
     components: {
         'b-modal': MagicoModal,
     },
     methods: {
         removeItem: function () {
-            this.$emit('itemRemoved', this.value);
+            this.$emit('itemRemoved', this.modelValue);
         },
         chooseImage: function () {
             if (this.$filechooser) {
@@ -161,7 +161,7 @@ export default {
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
                 height: this.height,
@@ -176,7 +176,7 @@ export default {
         },
         setText: function (item) {
             this.text = 'files/images/' + item;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
                 height: this.height,

src/components/plugin/SectionText.vue

@@ -70,8 +70,9 @@ export default {
         'b-modal': MagicoModal,
     },
     props: {
-        value: Object
+        modelValue: Object
     },
+    emits:['update:modelValue'],
     data: function () {
         return {
             langs: {
@@ -91,23 +92,23 @@ export default {
         }
     },
     mounted: function () {
-        this.name = (this.value && this.value.name) ? this.value.name : this.name;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.value && this.value.text) ? this.value.text : this.text;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type;
+        this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
-        this.align = (this.value && this.value.align) ? this.value.align : this.align;
+        this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
-        if (this.value.open) this.modalBox = true;
+        if (this.modelValue.open) this.modalBox = true;
         console.log('mounted text');
-        this.$emit('input', this.value);
+        this.$emit('update:modelValue', this.modelValue);
 
     },
 
     methods: {
         removeItem: function () {
-            this.$emit('itemRemoved', this.value);
+            this.$emit('itemRemoved', this.modelValue);
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
                 h_type: this.h_type,

src/components/plugin/SectionTextarea.vue

@@ -31,20 +31,21 @@ import tinymceConfig from '../tinymce/config.js'
 
 import Editor from '@tinymce/tinymce-vue'
 export default {
+    emits:['update:modelValue'],
     components: {
         'b-modal': MagicoModal,
 
         'editor': Editor // <- To jest TINYMCE
     },
     props: {
-        value: Object
+        modelValue: Object
     },
     mounted: function () {
-        this.name = (this.value && this.value.name) ? this.value.name : this.name;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.value && this.value.text) ? this.value.text : this.text;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        if (this.value.open) this.modalBox = true;
+        if (this.modelValue.open) this.modalBox = true;
         console.log('mounted textarea');
-        this.$emit('input', this.value);
+        this.$emit('update:modelValue', this.modelValue);
 
     },
     data: function () {
@@ -86,16 +87,16 @@ export default {
     },
     computed: {
         ctext: function () {
-            return this.value.text ? this.value.text.replace(/<(?:.|\n)*?>/gm, '') : '';
+            return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
         }
     },
     methods: {
         removeItem: function () {
-            this.$emit('itemRemoved', this.value);
+            this.$emit('itemRemoved', this.modelValue);
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
             })

src/components/registerSections.js

@@ -0,0 +1,16 @@
+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
+    );
+  }
+  return { register };
+}

src/main.js

@@ -1,9 +1,10 @@
-import Vue from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
-import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
+import MagicoPagebuilder from "./components/MagicoPagebuilderPlugin.js";
-Vue.config.productionTip = false
+import { useSections } from "./components/registerSections";
-Vue.use(MagicoPagebuilder);
+
-new Vue({
+const app = createApp(App).use(MagicoPagebuilder).mount("#app");
-  render: h => h(App),
+
-}).$mount('#app')
+const { register: sectionRegister } = useSections();
+sectionRegister(app.$pagebuilder);