Merge remote-tracking branch 'refs/remotes/origin/master'

src/components/MagicoPagebuilder.vue

@@ -92,8 +92,9 @@
       >
         <div>
           <PagebuilderTemplateLoad
-            v-model.value="pageType"
+            v-model="pageType"
-            @input="modalLoadClick"
+            v-if="modalLoad"
+            @update:modelValue="modalLoadClick"
           ></PagebuilderTemplateLoad>
         </div>
       </b-modal>
@@ -103,7 +104,7 @@
         v-model.value="modalCopy"
         v-on:onClose="modalCopy = false"
       >
-        <PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
+        <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
         <div>
           <button
             class="btn btn-primary mr-1"

src/components/PagebuilderSection.vue

@@ -7,15 +7,20 @@
           class="col-sm-12"
           v-for="(column, index) in value.columns"
           :value="column"
-          :key="'section_' + index"
+          :key="index"
-          :id="'section_' + index"
           @change="onChange"
         ></PagebuilderContent>
       </div>
     </div>
 
-    <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"
+      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
@@ -39,23 +44,43 @@
         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()">
+      <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"> Nazwa sekcji </label>
-              <input type="text" class="form-control" v-model="value.user_label" />
+              <input
+                type="text"
+                class="form-control"
+                v-model="value.user_label"
+              />
             </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" />
+              <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>
@@ -63,60 +88,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">Zapisz</button>
+          <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 },
-  emits: ['update:modelValue', 'copy', 'deleteSection'],
+  emits: ["update:modelValue", "copy", "deleteSection"],
   components: {
-    'b-modal': MagicoModal,
+    "b-modal": MagicoModal,
-    PagebuilderContent
+    PagebuilderContent,
   },
   data: function () {
-    return { items: grid, value2: '', show_settings: false }
+    return { items: grid, value2: "", show_settings: false };
   },
   methods: {
     changeSelect: function () {
-      this.onChange()
+      this.onChange();
     },
     onChange: function () {
-      this.$emit('change')
+      this.$emit("change");
     },
     deleteSection: function () {
-      this.$emit('deleteSection', this.value)
+      this.$emit("deleteSection", this.value);
     },
     copySection: function () {
-      this.$emit('copy', this.value)
+      this.$emit("copy", this.value);
     },
     toggleSettings: function () {
-      this.show_settings = !this.show_settings
+      this.show_settings = !this.show_settings;
     },
     ustawieniaSave: function () {
-      this.show_settings = false
+      this.show_settings = false;
-      this.onChange()
+      this.onChange();
     },
     rand: function (index) {
-      return 'column' + index + Math.random() * 100
+      return "column" + index + Math.random() * 100;
-    }
+    },
   },
-  mounted: function () {}
+  mounted: function () {},
-}
+};
 </script>
 <style>
 #pagebuilder {

src/components/PagebuilderTemplateLoad.vue

@@ -11,7 +11,7 @@
 </template>
 <script>
 export default {
-    created() {
+    mounted() {
         this.getPost();
     },
     data: function () {

src/components/grid.js

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