section type choose

src/components/PagebuilderSection.vue

@@ -13,14 +13,8 @@
       </div>
     </div>
 
-    <div
+    <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px">
-      class="pb_section_options position-absolute"
+      <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"
-      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
@@ -44,43 +38,47 @@
         class="box-settings-icon box-delete text-danger"
         ><i class="material-icons-outlined">delete</i></a
       >
-      <b-modal
+      <b-modal v-model="show_settings" title="Ustawienia sekcji" @onClose="ustawieniaSave()">
-        v-model="show_settings"
-        title="Ustawienia sekcji"
-        @onClose="ustawieniaSave()"
-      >
         <div>
           <div>
+            <div class="form-group mb-2">
+              <label class="w-100 col-form-label"> Typ sekcji </label>
+              <div class="row">
+                <div class="col-6">
+                  <button
+                    class="btn w-100"
+                    @click="setType('container')"
+                    :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'"
+                  >
+                    Kontener
+                  </button>
+                </div>
+                <div class="col-6">
+                  <button
+                    class="btn btn-outline-primary w-100"
+                    @click="setType('full')"
+                    :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'"
+                  >
+                    Cała szerokość
+                  </button>
+                </div>
+              </div>
+            </div>
+
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Nazwa sekcji </label>
-              <input
+              <input type="text" class="form-control" v-model="value.user_label" />
-                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
+              <input type="text" class="form-control" v-model="value.class" />
-                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
+                <input type="number" class="form-control" v-model="value.margin_top" />
-                  type="number"
-                  class="form-control"
-                  v-model="value.margin_top"
-                />
                 <div class="input-group-append">
-                  <span
+                  <span class="input-group-text" id="basic-addon1">px</span>
-                    class="input-group-text"
-                    id="basic-addon1"
-                    >px</span
-                  >
                 </div>
               </div>
             </div>
@@ -88,73 +86,67 @@
           <div class="form-group mb-2">
             <label>Margines dolny</label>
             <div class="input-group mb-3">
-              <input
+              <input type="number" class="form-control" v-model="value.margin_bottom" />
-                type="number"
-                class="form-control"
-                v-model="value.margin_bottom"
-              />
               <div class="input-group-append">
-                <span
+                <span class="input-group-text" id="basic-addon1">px</span>
-                  class="input-group-text"
-                  id="basic-addon1"
-                  >px</span
-                >
               </div>
             </div>
           </div>
         </div>
         <div>
-          <button
+          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">Zapisz</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, type: '' }
   },
   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
     },
+    setType: function (type) {
+      this.type = type
+      this.value.type = type
+      this.onChange()
+    }
   },
-  mounted: function () {},
+  mounted: function () {
-};
+    this.type = this.value.type
+  }
+}
 </script>
 <style>
 #pagebuilder {

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: [] }
-    ],
+    ]
-  },
+  }
-};
+}