public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

section type choose

Browse Source
This commit is contained in:
Szymon Haczyk
2023-10-13 08:10:00 +02:00
parent a0d55eb5a1
commit 54719ea98c
2 changed files with 152 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/PagebuilderSection.vue
View File

@@ -13,14 +13,8 @@
</div>
</div>
<div
class="pb_section_options position-absolute"
style="top: 12px; right: 14px; width: 20px"
>
<a
href="#"
title="Przenieś sekcje"
class="box-settings-icon box-move"
<div class="pb_section_options position-absolute" 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
v-model="show_settings"
title="Ustawienia sekcji"
@onClose="ustawieniaSave()"
>
<b-modal 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
type="text"
class="form-control"
v-model="value.user_label"
/>
<input 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
type="text"
class="form-control"
v-model="value.class"
/>
<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"
/>
<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
>
<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
type="number"
class="form-control"
v-model="value.margin_bottom"
/>
<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
>
<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>
<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";
import grid from './grid.js'
import MagicoModal from './MagicoModal.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,
PagebuilderContent,
'b-modal': MagicoModal,
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.onChange();
this.show_settings = false
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 {