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

id for sections

Browse Source
This commit is contained in:
Szymon Haczyk
2024-01-11 07:45:44 +01:00
parent 8785aae615
commit c5b4c18d2f
2 changed files with 34 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/PagebuilderContent.vue
View File

@@ -48,8 +48,8 @@
<div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
<component
@itemRemoved="removeItem"
:key="contentId+'_'+index"
:id="contentId+'_'+index"
:key="keyIndex+contentId + '_' + index"
:id="keyIndex+contentId + '_' + index"
v-bind:is="element.name"
v-bind:value="element"
v-model="value.items[index]"
@@ -108,7 +108,7 @@ export default {
contentId: 'content' + Math.round(Math.random() * 1000)
}
},
props: { value: Object },
props: { value: Object, keyIndex: String },
emits: ['update:modelValue'],
components: {
draggable,

100
src/components/PagebuilderSection.vue
View File

@@ -7,21 +7,16 @@
class="col-sm-12"
v-for="(column, index) in value.columns"
:value="column"
:key="'section_'+index"
:id="'section_'+index"
:key="'section_' + index"
:id="'section_' + index"
:keyIndex="'section_' + 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
@@ -45,43 +40,23 @@
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>
@@ -89,73 +64,60 @@
<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 {