fix v-models

src/components/PagebuilderContent.vue

@@ -11,10 +11,7 @@
       title="Dodaj widżet"
     >
       <div>
-        <DropdownSectionSection
-          @choose="clickAdd"
-        >
-        </DropdownSectionSection>
+        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
       </div>
     </b-modal>
 
@@ -61,8 +58,8 @@
             :key="index"
             v-bind:is="element.name"
             v-bind:value="element"
-            v-model.value="value.items[index]"
-            @input="onChange"
+            v-model="value.items[index]"
+            @update:model-value="onChange"
             @change="onChange"
           ></component>
         </div>
@@ -112,6 +109,7 @@ export default {
     return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
   },
   props: { value: Object },
+  emits: ["update:modelValue"],
   components: {
     draggable,
     "b-modal": MagicoModal,

src/components/PagebuilderSection.vue

@@ -1,42 +1,77 @@
 <template>
   <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
-
     <div class="col-sm-12">
       <div class="row p-0 mt-3 me-2">
-                <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
-                    :key="index" @change="onChange"></PagebuilderContent>
+        <PagebuilderContent
+          class="col-sm-12"
+          v-for="(column, index) in value.columns"
+          :value="column"
+          :key="index"
+          @change="onChange"
+        ></PagebuilderContent>
       </div>
     </div>
 
-
-        <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
-            <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i
-                    class="material-icons-outlined">sort</i></a>
-            <a href="#" title="Duplikuj sekcje" @click.prevent="copySection"
-                class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
-            <a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings"
-                class="box-settings-icon box-settings text-secondary"><i
-                    class="material-icons-outlined">settings</i></a>
-            <a href="#" title="Usuń sekcje" @click.prevent="deleteSection"
-                class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a>
-            <b-modal v-model="show_settings" title="Ustawienia sekcji"
-                @onClose="ustawieniaSave()">
-
+    <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">
+              <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">
+                <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>
+                  <span
+                    class="input-group-text"
+                    id="basic-addon1"
+                    >px</span
+                  >
                 </div>
               </div>
             </div>
@@ -44,55 +79,73 @@
           <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">
+              <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>
+                <span
+                  class="input-group-text"
+                  id="basic-addon1"
+                  >px</span
+                >
               </div>
             </div>
           </div>
-
-
         </div>
-                <div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
+        <div>
+          <button
+            class="btn btn-outline-secondary"
+            @click.prevent="ustawieniaSave"
+          >
             Zapisz
-                    </button></div>
-            </b-modal>
-
+          </button>
+        </div>
+      </b-modal>
     </div>
-
   </div>
 </template>
 <script>
-import grid from './grid.js'
-import MagicoModal from './MagicoModal.vue'
-import PagebuilderContent from './PagebuilderContent.vue'
+import grid from "./grid.js";
+import MagicoModal from "./MagicoModal.vue";
+import PagebuilderContent from "./PagebuilderContent.vue";
 export default {
   props: { value: Object },
+  emits: ["update:modelValue", "copy", "deleteSection"],
   components: {
-        'b-modal': MagicoModal,
-        PagebuilderContent
+    "b-modal": MagicoModal,
+    PagebuilderContent,
+  },
+  data: function () {
+    return { items: grid, value2: "", show_settings: false };
   },
-    data: function () { return { items: grid, value2: '', show_settings: false } },
   methods: {
     changeSelect: function () {
       this.onChange();
     },
     onChange: function () {
-            this.$emit('change');
+      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 },
-
+    deleteSection: function () {
+      this.$emit("deleteSection", this.value);
     },
-    mounted: function () {
+    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 {
@@ -102,20 +155,20 @@ export default {
 .pb_section {
   background-color: #fff;
 
-    >div {
+  > div {
     overflow: hidden;
   }
 }
 
-.btn.btn-icon-sm, .btn.drp-icon-sm {
+.btn.btn-icon-sm,
+.btn.drp-icon-sm {
   width: 34px;
   height: 34px;
   padding: 6px 6px;
   margin-bottom: 0px;
   margin-right: 4px;
 }
-.material-icons-outlined{
+.material-icons-outlined {
   font-size: 20px;
 }
-
 </style>

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.text = (this.value && this.value.text) ? this.value.text : this.text;
-        if (this.value.open) this.modalBox = true;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+        if (this.modelValue.open) this.modalBox = true;
         console.log('mounted html');
-        this.$emit('update:modelValue',this.value);
+        this.$emit('update:modelValue',this.modelValue);
     },
     data: function () {
         return {
@@ -58,12 +57,12 @@ 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;
@@ -73,6 +72,5 @@ export default {
             })
         }
     },
-
 }
 </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);
-        this.alt = (this.value && this.value.alt) ? this.value.alt : this.alt;
-        this.title = (this.value && this.value.title) ? this.value.title : this.title;
-        this.name = (this.value && this.value.name) ? this.value.name : this.name;
-        this.text = (this.value && this.value.text) ? this.value.text : this.text;
-        this.width = (this.value && this.value.width) ? this.value.width : this.width;
-        this.height = (this.value && this.value.height) ? this.value.height : this.height;
-        this.ratio = (this.value && this.value.ratio) ? this.value.ratio : this.ratio;
-        this.scale = (this.value && this.value.scale) ? this.value.scale : this.scale;
-        this.href = (this.value && this.value.href) ? this.value.href : this.href;
-        this.figcaption = (this.value && this.value.figcaption) ? this.value.figcaption : this.figcaption;
+        console.log('mount image', this.modelValue);
+        this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
+        this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+        this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
+        this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
+        this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
+        this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
+        this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
+        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) {

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

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.value="modalBox" :title="langs.label"
+            <b-modal no-enforce-focus class_other="modal-xl" v-model="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.value="text" :init="vtinymce" />
+                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
                     </div>
                 </div>
                 <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
@@ -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.text = (this.value && this.value.text) ? this.value.text : this.text;
-        if (this.value.open) this.modalBox = true;
+        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+        if (this.modelValue.open) this.modalBox = true;
         console.log('mounted textarea');
-        this.$emit('update:modelValue', this.value);
+        this.$emit('update:modelValue', this.modelValue);
 
     },
     data: function () {
@@ -86,12 +87,12 @@ 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;