vue app

src/App.vue

@@ -1,17 +1,25 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app" class="container">
+    <img alt="Vue logo" style="width:100px" src="./assets/logo.png">
+    <h2>Pagebuilder Magico</h2>
+    <MagicoPagebuilder v-model="data" />
+
+    <div class="bg-dark text-light mt-4 p-2">{{data}}</div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import MagicoPagebuilder from './components/MagicoPagebuilder.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    MagicoPagebuilder
+  },
+  data: function(){
+    return {
+      data:''
+    }
   }
 }
 </script>

src/components/DropdownSectionGrid.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="row p-2">
+        <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%"
+                        :src="'https:/magico.pl/assets/images/pagebuilder/' + item.name + '.jpg'"
+                        :alt="item.label" /></label>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+<script>
+import grid from './grid.js'
+
+export default {
+
+    methods: {},
+    data: function () {
+        return {
+            items: grid,
+            value: '',
+        }
+    },
+}
+</script>
+<style>
+.my-check input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+}
+
+.my-check label {
+    cursor: pointer;
+}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/MagicoModal.vue

@@ -0,0 +1,52 @@
+<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>
+                <div class="p-3">
+
+                    <slot></slot>
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Modal } from 'bootstrap';
+export default {
+    props: ['value', 'title', 'class_other'],
+    data: function() {
+        return {
+            id: 'modal' + Math.round(Math.random() * 100000),
+            modal: null,
+        }
+    },
+    mounted() {
+        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);
+    },
+    methods: {
+        triggerModal: function(value) {
+            if (value == true) {
+                this.modal.show();
+            } else {
+                this.modal.hide()
+                this.$emit('hide');
+            }
+            this.$emit('input',value);
+        }
+    },
+    watch: {
+        value: function() {
+            this.triggerModal(this.value);
+        }
+    }
+}
+</script>

src/components/MagicoPagebuilder.vue

@@ -0,0 +1,200 @@
+<template>
+  <section class="content card-body table-bordered" id="pagebuilder">
+    <div class="d-flex justify-content-end">
+
+      <!-- <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">save</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 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"></PagebuilderSection>
+      </div>
+    </draggable>
+
+    <b-modal class_other="modal-xl" v-model="modalSave" v-on:onClose="modalSave = false">
+      <div slot="modal-title"><span>Zapisz szablon do schowka</span></div>
+      <div>
+        <!-- <core_tempaltes_select_pagebuilder_save v-model="pageType" :szablon="value">
+        </core_tempaltes_select_pagebuilder_save> -->
+      </div>
+      <div slot="modal-footer"><button @click.prevent="modalSaveSave" 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" v-on:onClose="modalLoad = false">
+      <div slot="modal-title"><span>Wczytaj szablon ze schowka</span></div>
+      <div>
+        <!-- <core_tempaltes_select_pagebuilder v-model="pageType"></core_tempaltes_select_pagebuilder> -->
+      </div>
+      <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
+          @click.prevent="modalLoadClick">Wczytaj ze schowka</button></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>
+      <div>
+        <!-- <cms_pages_select_page v-model="pageType"></cms_pages_select_page> -->
+      </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>
+      <div>
+        <DropdownSectionGrid  v-on:input="addSection" v-model="optionx">
+        </DropdownSectionGrid>
+      </div>
+      <div slot="modal-footer"></div>
+    </b-modal>
+    <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
+      class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
+      Dodaj sekcję
+    </button>
+
+  </section>
+</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'
+
+export default {
+  name: 'HelloWorld',
+  components: {
+    'b-modal': MagicoModal,
+    PagebuilderSection,
+    draggable,
+    DropdownSectionGrid
+  },
+  data: function () {
+    return {
+      grid: grid,
+      namex: 'body', //podmieniane przez name
+      drag: false,
+      optionx: '',
+      comps: [],
+      modalAddSection: false,
+      modalCopy: false,
+      pageType: { id: false },
+      modalSave: false,
+      modalLoad: false,
+    }
+  },
+  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), "");
+    try {
+      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" }] }] }]
+    }
+
+  },
+  created: function () {
+    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)
+    }
+  },
+  methods: {
+    onChange: function () {
+      this.$emit('input', 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 () {
+      this.modalAddSection = false;
+      var columna = grid;
+      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,
+      //   description: this.pageType.description,
+      // }
+      // axios.post(BASE_URL + 'api/pagebuilder/index', data).then(response => {
+      //   this.pageType = {};
+      //   this.modalSave = false;
+      // });
+    },
+    modalLoadClick: function () {
+      this.pageType.body = this.pageType.source;
+      this.changeBody();
+    },
+    changeBody() {
+      var t = this;
+      var value = this.pageType.body;
+      var trimmed = value
+      try {
+        //this.comps.forEach((item)=>{
+        //    this.deleteSection(item);
+        //})
+        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.modalCopy = false;
+      this.modalSave = false;
+      this.modalLoad = false;
+    }
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/components/PagebuilderContent.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="value.name">
+
+        <b-modal v-model="modalAddBox" size="lg" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
+
+            <div>
+                <!-- <core_pagebuilder_dropdown_section_section v-on:input="clickAdd" v-model="opcja" :value="opcja">
+                </core_pagebuilder_dropdown_section_section> -->
+            </div>
+            <div slot="modal-footer"></div>
+        </b-modal>
+
+
+        <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 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="rand(index)"
+                class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
+                <component @itemRemoved="removeItem" :key="rand(index)" v-bind:is="item.name" v-bind:value="item"
+                    v-model="value.items[index]" @input="onChange" @change="onChange"></component>
+            </div>
+        </draggable>
+        <div class="row">
+            <div class="col-11 mr-0 pr-0">
+                <button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off"
+                    @click.prevent="modalAddBox = !modalAddBox" title=" "> <i
+                        class="material-icons-outlined">add_circle_outline</i></button>
+            </div>
+            <div class="col-1 ml-0 pl-0">
+                <a title="Ustawienia kolumny" class="btn-icon-sm"
+                    @click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
+                        style="position:absolute; top:5px; right:0; cursor:pointer"
+                        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'
+
+export default {
+    data: function () { return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false } },
+    props: { value: Object },
+    components: {
+        draggable,
+        'b-modal': MagicoModal,
+        'core_section_text': SectionText,
+    },
+    methods: {
+        onChange: function () {
+            this.$emit('change');
+        },
+        rand: function () { return 'component' + Math.random() * 100 },
+        removeItem(item) {
+            this.value.items.indexOf(item);
+            this.value.items.splice(this.value.items.indexOf(item), 1);
+
+            this.onChange();
+        },
+        clickAdd: function () {
+            this.modalAddBox = false;
+            var a = { name: this.opcja, open: true }
+            this.value.items.push(a);
+            this.onChange();
+        }
+    }
+}
+</script>

src/components/PagebuilderSection.vue

@@ -0,0 +1,121 @@
+<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">
+                <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
+                    :key="rand(index)" @change="onChange"></PagebuilderContent>
+            </div>
+        </div>
+
+
+        <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
+            <a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i
+                    class="material-icons-outlined">sort</i></a>
+            <a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection"
+                class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
+            <a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings"
+                class="box-settings-icon box-settings text-secondary"><i
+                    class="material-icons-outlined">settings</i></a>
+            <a href="#" title="pagebuilder_addsection_deleteicon" @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="pagebuilder_addsection_settings_settings"
+                @onClose="ustawieniaSave()">
+
+                <div>
+                    <div>
+                        <div class="form-group mb-2">
+                            <label class="w-100 col-form-label">
+                                pagebuilder_addsection_settings_cssclass
+                            </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">
+                        pagebuilder_addsection_settings_saveclose
+                    </button></div>
+            </b-modal>
+
+        </div>
+
+    </div>
+</template>
+<script>
+import grid from './grid.js'
+import MagicoModal from './MagicoModal.vue'
+import PagebuilderContent from './PagebuilderContent.vue'
+export default {
+    props: { value: Object },
+    components: {
+        'b-modal': MagicoModal,
+        PagebuilderContent
+    },
+    data: function () { return { items: grid, value2: '', show_settings: false } },
+    methods: {
+        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 () {
+    },
+
+}
+
+</script>
+<style>
+#pagebuilder {
+    background-color: #f5f5f5;
+}
+
+.pb_section {
+    background-color: #fff;
+
+    >div {
+        overflow: hidden;
+    }
+}
+
+.btn.btn-icon-sm, .btn.drp-icon-sm {
+    width: 34px;
+    height: 34px;
+    padding: 6px 6px;
+    margin-bottom: 0px;
+    margin-right: 4px;
+}
+.material-icons-outlined{
+    font-size: 20px;
+}
+
+</style>

src/components/grid.js

@@ -0,0 +1,14 @@
+export default {
+    'col_1': { label: '1 kolumna  ', name: 'col_1', columns: [{ name: 'col-md-12', items: [] }] },
+    'col_2': { label: '2 kolumny po 6 ', name: 'col_2', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
+    'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
+    'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
+    'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
+    'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
+    'col_3': { label: '3 kolumny po 4 ', name: 'col_3', 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', 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', 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', 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', 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', 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/SectionText.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="row m-0 p-0 align-items-center">
+        <div class="col-sm-12 col-md-6 p-0">
+            <span class="material-icons-outlined mr-1 box-move" style="cursor:move;">open_with</span><span
+                class="font-weight-bold text-primary">{{ langs.label }}</span>
+        </div>
+
+        <div class="col-sm-12 col-md-6 p-0 text-right">
+            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary mr-2"><i
+                    class="material-icons-outlined">create</i></a>
+            <b-modal v-model="modalBox" @close="onCloseModal">
+                <div slot="modal-title">{{ langs.label }}</div>
+                <p>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">{{ langs.content }}</label>
+                    <input class="form-control" type="text" v-model="text" />
+                </div>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">{{ langs.type }}</label>
+                    <select class="form-control" v-model="h_type">
+                        <option value="">{{ langs.typeplaintext }}</option>
+                        <option value="h1">{{ langs.typeheader }} 1</option>
+                        <option value="h2">{{ langs.typeheader }} 2</option>
+                        <option value="h3">{{ langs.typeheader }} 3</option>
+                        <option value="h4">{{ langs.typeheader }} 4</option>
+                        <option value="h5">{{ langs.typeheader }} 5</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">Wyrównanie</label>
+                    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
+                        <b-form-radio-group id="btn-radios-1" v-model="align" :aria-describedby="ariaDescribedby"
+                            name="radios-btn-default" buttons>
+                            <b-form-radio value="left"><span class="material-icons">format_align_left</span>
+                            </b-form-radio>
+                            <b-form-radio value="center"><span class="material-icons">format_align_center</span>
+                            </b-form-radio>
+                            <b-form-radio value="right"><span class="material-icons">format_align_right</span>
+                            </b-form-radio>
+
+                        </b-form-radio-group>
+                    </b-form-group>
+                </div>
+                
+                <div slot="modal-footer"><button class="btn btn-outline-secondary mr-1"
+                        @click.prevent="onCloseModal">{{ langs.saveclose }}</button></div>
+            </b-modal>
+            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
+                    class="material-icons-outlined">delete</i></a>
+        </div>
+        <div>
+            <strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
+            <strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        value: Object
+    },
+    data: function () {
+        return {
+            langs: {
+                label: "<?=lang('pagebuilder_core_section_text_title')?>",
+                close: "<?=lang('pagebuilder_core_section_text_close')?>",
+                content: "<?=lang('pagebuilder_core_section_text_content')?>",
+                type: "<?=lang('pagebuilder_core_section_text_type')?>",
+                typeplaintext: "<?=lang('pagebuilder_core_section_text_typeplaintext')?>",
+                typeheader: "<?=lang('pagebuilder_core_section_text_typeheader')?>",
+                saveclose: "<?=lang('saveclose')?>"
+            },
+            modalBox: false,
+            text: '',
+            name: '',
+            h_type: '',
+            align: 'left',
+        }
+    },
+    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;
+    },
+    methods: {
+        removeItem: function () {
+            this.$emit('itemRemoved', this.value);
+        },
+        onCloseModal: function () {
+            this.modalBox = false;
+            this.$emit('input', {
+                name: this.name,
+                text: this.text,
+                h_type: this.h_type,
+                align: this.align,
+            })
+        }
+    },
+
+}
+</script>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import 'bootstrap/dist/css/bootstrap.min.css';
 Vue.config.productionTip = false
 
 new Vue({