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

Merge remote-tracking branch 'refs/remotes/origin/master'

Browse Source
This commit is contained in:
Szymon Haczyk
2024-01-11 07:25:49 +01:00
parent 7e31c9d34e 92ce5c02c2
commit f309bc3863
4 changed files with 167 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/PagebuilderSection.vue
View File

@@ -7,15 +7,20 @@
class="col-sm-12"
v-for="(column, index) in value.columns"
:value="column"
:key="'section_' + index"
:id="'section_' + index"
:key="index"
@change="onChange"
></PagebuilderContent>
</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
@@ -39,23 +44,43 @@
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"> 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>
@@ -63,60 +88,73 @@
<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 };
},
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;
},
},
mounted: function () {}
}
mounted: function () {},
};
</script>
<style>
#pagebuilder {