113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<template>
|
|
<div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
|
|
|
|
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
|
|
|
|
<div>
|
|
<DropdownSectionSection v-on:input="clickAdd" v-model="opcja">
|
|
</DropdownSectionSection>
|
|
</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 @input="onChange" 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="index"
|
|
class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
|
|
<component @itemRemoved="removeItem" :key="index" v-bind:is="item.name" v-bind:value="item"
|
|
v-model="value.items[index]" @input="onChange" @change="onChange"></component>
|
|
</div>
|
|
</draggable>
|
|
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
|
|
<div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
|
|
<div class="flex-fill mr-0 pr-0 ">
|
|
<button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
|
|
@click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
|
|
class="material-icons-outlined">add_circle_outline</i></button>
|
|
</div>
|
|
<div class="ml-0 pl-0">
|
|
<a title="Ustawienia kolumny" class="btn-icon-sm"
|
|
@click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
|
|
style=" cursor:pointer; position: relative; top:5px; margin-left: 5px;"
|
|
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'
|
|
import SectionTextarea from './plugin/SectionTextarea.vue'
|
|
import SectionHtml from './plugin/SectionHtml.vue'
|
|
import SectionImage from './plugin/SectionImage.vue'
|
|
|
|
import DropdownSectionSection from './DropdownSectionSection.vue'
|
|
|
|
export default {
|
|
data: function () { return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false } },
|
|
props: { value: Object },
|
|
components: {
|
|
draggable,
|
|
'b-modal': MagicoModal,
|
|
'core_section_textarea': SectionTextarea,
|
|
'core_section_text': SectionText,
|
|
'core_section_html': SectionHtml,
|
|
'core_section_image': SectionImage,
|
|
|
|
DropdownSectionSection
|
|
|
|
},
|
|
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 (item) {
|
|
console.log(item);
|
|
this.modalAddBox = false;
|
|
var a = { name: item, open: true }
|
|
this.value.items.push(a);
|
|
this.onChange();
|
|
this.opcja = '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.pagebuilder-column-hover {
|
|
display: none;
|
|
}
|
|
|
|
.pagebuilder-column-hover-padding {
|
|
padding: 17px;
|
|
}
|
|
|
|
.pagebuilder-column:hover .pagebuilder-column-hover {
|
|
display: flex;
|
|
}
|
|
|
|
.pagebuilder-column:hover .pagebuilder-column-hover-padding {
|
|
padding: 0px;
|
|
}
|
|
</style> |