vue app

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>