vue2 to vue3 migration

.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,21 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "@tinymce/tinymce-vue": "^3.2.8",
-    "boostrap": "^2.0.0",
+    "@tinymce/tinymce-vue": "^4",
     "bootstrap": "^5.1.3",
     "core-js": "^3.6.5",
     "tinymce": "^6.0.3",
-    "vue": "^2.6.11",
-    "vuedraggable": "^2.24.3"
+    "vue": "^3.2.36",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
+    "@babel/eslint-parser": "^7.22.9",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint": "^8.46.0",
+    "eslint-plugin-vue": "^9.16.1"
   },
   "eslintConfig": {
     "root": true,
@@ -36,13 +35,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,34 +1,38 @@
 <template>
   <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"
+      :key="index"
+      class="col-md-3"
+    >
       <div class="my-check v2">
-
-                <input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
-                    type="radio" v-model="value" :value="item.name">
-
-                <label :for="item.name"><img style="width:100%"
+        <label
+          @click="emitEvent(item)"
+          :for="item.name"
+          ><img
+            style="width: 100%"
             :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
-                        :alt="item.label" /></label>
+            :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: {},
-    data: function () {
-        return {
-            items: grid,
-            value: '',
+    function emitEvent(item) {
+      emit("choose", item);
     }
+    return { items, emitEvent };
   },
-}
+};
 </script>
 <style>
 .my-check input {

src/components/DropdownSectionSection.vue

@@ -1,16 +1,33 @@
 <template>
   <div>
     <div class="row col-md-12 pagebuilder_section">
-            <div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
+      <div
+        v-for="(item, index) in $pagebuilder.items"
+        :key="index"
+        class="col-md-2"
+      >
         <template v-if="!item.type || item.type != 'custom'">
           <div class="my-check v2">
-                        <label @click="$emit('input', index)" :for="'pos_' + index">
-                            <div style="width:100%" v-if="item.svg" v-html="item.svg"></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
+              @click="$emit('choose', index)"
+              :for="'pos_' + index"
+            >
+              <div
+                style="width: 100%"
+                v-if="item.svg"
+                v-html="item.svg"
+              ></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>
@@ -22,7 +39,7 @@
                 <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>
@@ -44,7 +61,8 @@
 
 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'},

src/components/MagicoModal.vue

@@ -1,69 +1,90 @@
 <template>
-    <div class="modal" :id="id">
-        <div class="modal-dialog " :class="class_other">
-            <div v-if="modal" class="modal-content">
-                <div v-if="title" class="modal-header">
-                    <h4 class="modal-title" v-html="title"></h4>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  <div
+    :id="id"
+    class="modal"
+  >
+    <div
+      class="modal-dialog"
+      :class="class_other"
+    >
+      <div
+        v-if="modal"
+        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></slot>
+          <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'],
-    data: function () {
-        return {
-            id: 'modal' + Math.round(Math.random() * 100000),
-            modal: null,
-        }
-    },
-    mounted() {
-        document.body.append(document.getElementById(this.id));
-        this.modal = new Modal(document.getElementById(this.id))
-        let vm = this;
-        document.getElementById(this.id).addEventListener('hidden.bs.modal', function () {
-            vm.triggerModal(false);
-        })
-        this.triggerModal(this.value, false);
-    },
-    methods: {
-        triggerModal: function (value, emit = true) {
+  props: ["modelValue", "title", "class_other"],
+  setup(props, { emit }) {
+    const id = "modal" + Math.round(Math.random() * 100000);
+    const modal = ref(null);
+
+    const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-                this.modal.show();
+        modal.value.show();
       } else {
-                this.modal.hide()
-                if (emit) {
-                    this.$emit('hide');
+        modal.value.hide();
+        if (emitEvent) {
+          emit("hide");
         }
       }
-            this.$emit('input', value);
+      emit("update:modelValue", value);
+    };
+
+    onMounted(() => {
+      document.body.append(document.getElementById(id));
+      modal.value = new Modal(document.getElementById(id));
+      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
+        triggerModal(false);
+      });
+      triggerModal(props.modelValue, false);
+    });
+
+    onBeforeUnmount(() => {
+      document.getElementById(id).remove();
+    });
+
+    watch(
+      () => props.modelValue,
+      () => {
+        triggerModal(props.modelValue);
       }
+    );
+
+    return { id, modal };
   },
-    watch: {
-        value: function () {
-            this.triggerModal(this.value);
-        }
-    },
-    onDestroy: function () {
-        document.getElementById(this.id).remove();
-    }
-}
+};
 </script>
+
 <style>
 .modal-xxl {
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 10px !important;
 }
-.modal-xlg {
-    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"
-          class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">fullscreen</span></button>
+        <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 @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" 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>
+          <button
+            @click.prevent="
+              modalLoad = !modalLoad;
+              pageType = { name: null };
+            "
+            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()">
-        <div v-for="(item, index) in comps" :key="index">
-          <PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
+      <draggable
+        :options="{ handle: '.box-move' }"
+        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"
-        v-on:onClose="modalSave = false">
-        <div slot="modal-title"><span></span></div>
-        <div>
-          <PagebuilderTemplateSave v-model="pageType" :szablon="value">
+      <b-modal
+        class_other="modal-xl"
+        v-model.value="modalSave"
+        title="Zapisz szablon do schowka"
+        v-on:onClose="modalSave = false"
+      >
+        <PagebuilderTemplateSave
+          v-model.value="pageType"
+          :szablon="value"
+        >
         </PagebuilderTemplateSave>
+        <div>
+          <button
+            @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"
-        v-on:onClose="modalLoad = false">
+      <b-modal
+        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">
-        <div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
+      <b-modal
+        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ę"
-        v-on:onClose="modalAddSection = false" hide-footer>
-        <div slot="modal-title"><span>
-
-          </span></div>
+      <b-modal
+        class_other="modal-xl"
+        v-model.value="modalAddSection"
+        title=" Dodaj sekcję"
+        v-on:onClose="modalAddSection = false"
+        hide-footer
+      >
         <div>
-          <DropdownSectionGrid v-on:input="addSection" v-model="optionx">
-          </DropdownSectionGrid>
+          <DropdownSectionGrid @choose="addSection"> </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,80 +143,84 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import grid from './grid.js'
-import MagicoModal from './MagicoModal.vue'
-import PagebuilderSection from './PagebuilderSection.vue'
-import DropdownSectionGrid from './DropdownSectionGrid.vue'
-import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
-import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
+import draggable from "vuedraggable";
+import grid from "./grid.js";
+import MagicoModal from "./MagicoModal.vue";
+import PagebuilderSection from "./PagebuilderSection.vue";
+import DropdownSectionGrid from "./DropdownSectionGrid.vue";
+import PagebuilderTemplateSave from "./PagebuilderTemplateSave.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", "value", "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.value; //.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('change');
+      this.$emit("update:modelValue", JSON.stringify(this.comps));
+      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(columna[this.optionx])));
+      this.comps.push(JSON.parse(JSON.stringify(it)));
       this.onChange();
-
     },
     modalSaveSave: function () {
       console.log(this.pageType);
@@ -157,14 +229,14 @@ export default {
         name: this.pageType.name,
         source: this.value,
         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,34 @@
-import MagicoPagebuilder from './MagicoPagebuilder.vue'
+import MagicoPagebuilder from "./MagicoPagebuilder.vue";
 
 export default {
   install: (app) => {
-        app.component('MagicoPagebuilder', MagicoPagebuilder);
+    app.component("MagicoPagebuilder", MagicoPagebuilder);
 
     console.log(app);
-        app.prototype.$pagebuilder = {
+    app.config.globalProperties.$pagebuilder = {
       items: {
-                'core_section_text': {
-                    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>'
+        core_section_text: {
+          label: "Pole nagłowek",
+          svg_off: "",
         },
-                'core_section_textarea': {
-                    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>'
+        core_section_textarea: {
+          label: "Pole tekstowe",
+          svg_off: "",
         },
-                'core_section_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>'
+        core_section_html: {
+          label: "Pole HTML",
+          svg_off: "",
+        },
+        core_section_image: {
+          label: "Obrazek",
+          svg_off: "",
         },
-                'core_section_image': {
-                    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>'
-                }
       },
       axios: null,
       registerPlugin(name, item, component) {
         this.items[name] = item;
         app.component(name, component);
-            }
-        }
-    }
-}
+      },
+    };
+  },
+};

src/components/PagebuilderContent.vue

@@ -1,82 +1,134 @@
 <template>
-    <div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
-
-        <b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
-
+  <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 v-on:input="clickAdd" v-model="opcja">
+        <DropdownSectionSection
+          @choose="clickAdd"
+        >
         </DropdownSectionSection>
       </div>
-            <div slot="modal-footer"></div>
     </b-modal>
 
-
-        <b-modal v-model="modalColumnsSettings" title="Ustawienia kolumny" size="sm"
-            v-on:onClose="modalColumnsSettings = false">
-
+    <b-modal
+      v-model="modalColumnsSettings"
+      title="Ustawienia kolumny"
+      size="sm"
+      v-on:onClose="modalColumnsSettings = false"
+    >
       <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 slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
-                    i zamknij</button></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">
-
-            <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>
+    <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="value.items[index]"
+            @input="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="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>
+        <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>
+        <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 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 } },
+  data: function () {
+    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
+  },
   props: { value: Object },
   components: {
     draggable,
-        'b-modal': MagicoModal,
-        'core_section_textarea': SectionTextarea,
-        'core_section_text': SectionText,
-        'core_section_html': SectionHtml,
-        'core_section_image': SectionImage,
-
-        DropdownSectionSection
+    "b-modal": MagicoModal,
+    core_section_textarea: SectionTextarea,
+    core_section_text: SectionText,
+    core_section_html: SectionHtml,
+    core_section_image: SectionImage,
 
+    DropdownSectionSection,
   },
   methods: {
     onChange: function () {
-            this.$emit('change');
+      this.$emit("change");
+    },
+    rand: function () {
+      return "component" + Math.random() * 100;
     },
-        rand: function () { return 'component' + Math.random() * 100 },
     removeItem(item) {
       this.value.items.indexOf(item);
       this.value.items.splice(this.value.items.indexOf(item), 1);
@@ -86,13 +138,12 @@ export default {
     clickAdd: function (item) {
       console.log(item);
       this.modalAddBox = false;
-            var a = { name: item, open: true }
+      var a = { name: item, open: true };
       this.value.items.push(a);
       this.onChange();
-            this.opcja = '';
-        }
-    }
-}
+    },
+  },
+};
 </script>
 <style>
 .pagebuilder-column-hover {

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,29 +1,64 @@
 <template>
   <div>
     <div class="form-group mb-3">
-            <label v-if="id < 1" class="col-4">Tworzysz nowy szablon</label>
-            <label v-if="id > 0" class="col-4">Nadpiszesz istniejacy szablon</label>
-            <div class="col-8"><b v-if="id > 0" class="">{{ name2 }}</b></div>
+      <label
+        v-if="id < 1"
+        class="col-4"
+        >Tworzysz nowy szablon</label
+      >
+      <label
+        v-if="id > 0"
+        class="col-4"
+        >Nadpiszesz istniejacy szablon</label
+      >
+      <div class="col-8">
+        <b
+          v-if="id > 0"
+          class=""
+          >{{ name2 }}</b
+        >
+      </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
+        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 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() {
     this.getPost();
@@ -32,14 +67,14 @@ export default {
     return {
       items: [],
       itemselected: { new: 1 },
-            name: '',
-            description: '',
+      name: "",
+      description: "",
       id: 0,
-        }
+    };
   },
   methods: {
     change() {
-            this.$emit('input', {
+      this.$emit("update:modelValue", {
         id: this.id,
         name: this.name,
         description: this.description,
@@ -54,13 +89,13 @@ export default {
     },
     getPost() {
       if (this.$pagebuilder.axios) {
-                this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
+        this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
           this.items = response.data.data;
         });
       } else {
-                console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
-            }
-        }
-    }
+        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_2': { label: '2 kolumny po 6 ', name: 'col_2', class: '', columns: [{ 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: [] }] },
-}
+  col_1: {
+    label: "1 kolumna  ",
+    name: "col_1",
+    class: "",
+    columns: [{ name: "col-md-12", items: [] }],
+  },
+  col_2: {
+    label: "2 kolumny po 6 ",
+    name: "col_2",
+    class: "",
+    columns: [
+      { 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

@@ -41,7 +41,7 @@ export default {
         this.text = (this.value && this.value.text) ? this.value.text : this.text;
         if (this.value.open) this.modalBox = true;
         console.log('mounted html');
-        this.$emit('input',this.value);
+        this.$emit('update:modelValue',this.value);
     },
     data: function () {
         return {
@@ -67,7 +67,7 @@ export default {
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
             })

src/components/plugin/SectionImage.vue

@@ -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

@@ -97,7 +97,7 @@ export default {
         this.align = (this.value && this.value.align) ? this.value.align : this.align;
         if (this.value.open) this.modalBox = true;
         console.log('mounted text');
-        this.$emit('input', this.value);
+        this.$emit('update:modelValue', this.value);
 
     },
 
@@ -107,7 +107,7 @@ export default {
         },
         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

@@ -8,11 +8,11 @@
         <div class="col-sm-12 col-md-6 p-0 text-end">
             <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
                     class="material-icons-outlined">create</i></a>
-            <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
+            <b-modal no-enforce-focus class_other="modal-xl" v-model.value="modalBox" :title="langs.label"
                 v-on:hide="onCloseModal">
                 <div class="mb-4">
                     <div class="form-group">
-                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
+                        <editor api-key="no-api-key" rows="12" class="form-control" v-model.value="text" :init="vtinymce" />
                     </div>
                 </div>
                 <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
@@ -44,7 +44,7 @@ export default {
         this.text = (this.value && this.value.text) ? this.value.text : this.text;
         if (this.value.open) this.modalBox = true;
         console.log('mounted textarea');
-        this.$emit('input', this.value);
+        this.$emit('update:modelValue', this.value);
 
     },
     data: function () {
@@ -95,7 +95,7 @@ export default {
         },
         onCloseModal: function () {
             this.modalBox = false;
-            this.$emit('input', {
+            this.$emit('update:modelValue', {
                 name: this.name,
                 text: this.text,
             })

src/main.js

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