121 lines
4.4 KiB
Vue
121 lines
4.4 KiB
Vue
<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 me-2">
|
|
<PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
|
|
:key="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">
|
|
Zapisz
|
|
</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> |