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

fix v-models

Browse Source
This commit is contained in:
Szymon Haczyk
2023-08-02 13:36:01 +02:00
parent 5277849312
commit ae877784ee
6 changed files with 200 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/PagebuilderContent.vue
View File

@@ -11,10 +11,7 @@
title="Dodaj widżet" title="Dodaj widżet"
> >
<div> <div>
<DropdownSectionSection <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
@choose="clickAdd"
>
</DropdownSectionSection>
</div> </div>
</b-modal> </b-modal>
@@ -61,8 +58,8 @@
:key="index" :key="index"
v-bind:is="element.name" v-bind:is="element.name"
v-bind:value="element" v-bind:value="element"
v-model.value="value.items[index]" v-model="value.items[index]"
@input="onChange" @update:model-value="onChange"
@change="onChange" @change="onChange"
></component> ></component>
</div> </div>
@@ -112,6 +109,7 @@ export default {
return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false }; return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
}, },
props: { value: Object }, props: { value: Object },
emits: ["update:modelValue"],
components: { components: {
draggable, draggable,
"b-modal": MagicoModal, "b-modal": MagicoModal,

159
src/components/PagebuilderSection.vue
View File

@@ -1,42 +1,77 @@
<template> <template>
<div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5"> <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="row p-0 mt-3 me-2"> <div class="row p-0 mt-3 me-2">
<PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column" <PagebuilderContent
:key="index" @change="onChange"></PagebuilderContent> class="col-sm-12"
v-for="(column, index) in value.columns"
:value="column"
:key="index"
@change="onChange"
></PagebuilderContent>
</div> </div>
</div> </div>
<div
<div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;"> class="pb_section_options position-absolute"
<a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i style="top: 12px; right: 14px; width: 20px"
class="material-icons-outlined">sort</i></a> >
<a href="#" title="Duplikuj sekcje" @click.prevent="copySection" <a
class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a> href="#"
<a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings" title="Przenieś sekcje"
class="box-settings-icon box-settings text-secondary"><i class="box-settings-icon box-move"
class="material-icons-outlined">settings</i></a> ><i class="material-icons-outlined">sort</i></a
<a href="#" title="Usuń sekcje" @click.prevent="deleteSection" >
class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a> <a
<b-modal v-model="show_settings" title="Ustawienia sekcji" href="#"
@onClose="ustawieniaSave()"> title="Duplikuj sekcje"
@click.prevent="copySection"
class="box-settings-icon box-copy text-warning"
><i class="material-icons-outlined">file_copy</i></a
>
<a
href="#"
title="Ustawienia sekcji"
@click.prevent="toggleSettings"
class="box-settings-icon box-settings text-secondary"
><i class="material-icons-outlined">settings</i></a
>
<a
href="#"
title="Usuń sekcje"
@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="Ustawienia sekcji"
@onClose="ustawieniaSave()"
>
<div> <div>
<div> <div>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label class="w-100 col-form-label"> <label class="w-100 col-form-label"> Klasa sekcji </label>
Klasa sekcji <input
</label> type="text"
<input type="text" class="form-control" v-model="value.class"> class="form-control"
v-model="value.class"
/>
</div> </div>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label>Margines górny</label> <label>Margines górny</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input
<input type="number" class="form-control" v-model="value.margin_top"> type="number"
class="form-control"
v-model="value.margin_top"
/>
<div class="input-group-append"> <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> </div>
@@ -44,55 +79,73 @@
<div class="form-group mb-2"> <div class="form-group mb-2">
<label>Margines dolny</label> <label>Margines dolny</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input
<input type="number" class="form-control" v-model="value.margin_bottom"> type="number"
class="form-control"
v-model="value.margin_bottom"
/>
<div class="input-group-append"> <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> </div>
</div> </div>
<div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave"> <div>
<button
class="btn btn-outline-secondary"
@click.prevent="ustawieniaSave"
>
Zapisz Zapisz
</button></div> </button>
</b-modal> </div>
</b-modal>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import grid from './grid.js' import grid from "./grid.js";
import MagicoModal from './MagicoModal.vue' import MagicoModal from "./MagicoModal.vue";
import PagebuilderContent from './PagebuilderContent.vue' import PagebuilderContent from "./PagebuilderContent.vue";
export default { export default {
props: { value: Object }, props: { value: Object },
emits: ["update:modelValue", "copy", "deleteSection"],
components: { components: {
'b-modal': MagicoModal, "b-modal": MagicoModal,
PagebuilderContent PagebuilderContent,
},
data: function () {
return { items: grid, value2: "", show_settings: false };
}, },
data: function () { return { items: grid, value2: '', show_settings: false } },
methods: { methods: {
changeSelect: function () { changeSelect: function () {
this.onChange(); this.onChange();
}, },
onChange: function () { onChange: function () {
this.$emit('change'); this.$emit("change");
}, },
deleteSection: function () { this.$emit('deleteSection', this.value) }, deleteSection: function () {
copySection: function () { this.$emit('copy', this.value); }, this.$emit("deleteSection", 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 () { 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> </script>
<style> <style>
#pagebuilder { #pagebuilder {
@@ -107,7 +160,8 @@ export default {
} }
} }
.btn.btn-icon-sm, .btn.drp-icon-sm { .btn.btn-icon-sm,
.btn.drp-icon-sm {
width: 34px; width: 34px;
height: 34px; height: 34px;
padding: 6px 6px; padding: 6px 6px;
@@ -117,5 +171,4 @@ export default {
.material-icons-outlined { .material-icons-outlined {
font-size: 20px; font-size: 20px;
} }
</style> </style>

16
src/components/plugin/SectionHtml.vue
View File

@@ -31,17 +31,16 @@ import MagicoModal from './../MagicoModal.vue'
export default { export default {
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal,
}, },
props: { props: {
value: Object modelValue: Object
}, },
mounted: function () { mounted: function () {
this.name = (this.value && this.value.name) ? this.value.name : this.name; this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text; this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
if (this.value.open) this.modalBox = true; if (this.modelValue.open) this.modalBox = true;
console.log('mounted html'); console.log('mounted html');
this.$emit('update:modelValue',this.value); this.$emit('update:modelValue',this.modelValue);
}, },
data: function () { data: function () {
return { return {
@@ -58,12 +57,12 @@ export default {
}, },
computed: { computed: {
ctext: function () { ctext: function () {
return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):''; return this.modelValue.text?this.modelValue.text.replace(/<(?:.|\n)*?>/gm, ''):'';
} }
}, },
methods: { methods: {
removeItem: function () { removeItem: function () {
this.$emit('itemRemoved', this.value); this.$emit('itemRemoved', this.modelValue);
}, },
onCloseModal: function () { onCloseModal: function () {
this.modalBox = false; this.modalBox = false;
@@ -73,6 +72,5 @@ export default {
}) })
} }
}, },
} }
</script> </script>

30
src/components/plugin/SectionImage.vue
View File

@@ -39,7 +39,7 @@
<div class="form-group "> <div class="form-group ">
<label class="w-100 col-form-label">{{ langs.scaling }}</label> <label class="w-100 col-form-label">{{ langs.scaling }}</label>
<select v-model="scale" class="form-select"> <select v-model="scale" class="form-select">
<option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.value }} <option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.modelValue }}
</option> </option>
</select> </select>
</div> </div>
@@ -82,7 +82,7 @@ import MagicoModal from './../MagicoModal.vue'
export default { export default {
props: { props: {
value: Object, modelValue: Object,
}, },
data: function () { data: function () {
return { return {
@@ -126,26 +126,26 @@ export default {
} }
}, },
mounted: function () { mounted: function () {
console.log('mount image', this.value); console.log('mount image', this.modelValue);
this.alt = (this.value && this.value.alt) ? this.value.alt : this.alt; this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
this.title = (this.value && this.value.title) ? this.value.title : this.title; this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
this.name = (this.value && this.value.name) ? this.value.name : this.name; this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text; this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
this.width = (this.value && this.value.width) ? this.value.width : this.width; this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
this.height = (this.value && this.value.height) ? this.value.height : this.height; this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
this.ratio = (this.value && this.value.ratio) ? this.value.ratio : this.ratio; this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
this.scale = (this.value && this.value.scale) ? this.value.scale : this.scale; this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
this.href = (this.value && this.value.href) ? this.value.href : this.href; this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
this.figcaption = (this.value && this.value.figcaption) ? this.value.figcaption : this.figcaption; this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
if (this.value.open) this.modalBox = true; if (this.modelValue.open) this.modalBox = true;
}, },
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal,
}, },
methods: { methods: {
removeItem: function () { removeItem: function () {
this.$emit('itemRemoved', this.value); this.$emit('itemRemoved', this.modelValue);
}, },
chooseImage: function () { chooseImage: function () {
if (this.$filechooser) { if (this.$filechooser) {

17
src/components/plugin/SectionText.vue
View File

@@ -70,8 +70,9 @@ export default {
'b-modal': MagicoModal, 'b-modal': MagicoModal,
}, },
props: { props: {
value: Object modelValue: Object
}, },
emits:['update:modelValue'],
data: function () { data: function () {
return { return {
langs: { langs: {
@@ -91,19 +92,19 @@ export default {
} }
}, },
mounted: function () { mounted: function () {
this.name = (this.value && this.value.name) ? this.value.name : this.name; this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text; this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type; this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
this.align = (this.value && this.value.align) ? this.value.align : this.align; this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
if (this.value.open) this.modalBox = true; if (this.modelValue.open) this.modalBox = true;
console.log('mounted text'); console.log('mounted text');
this.$emit('update:modelValue', this.value); this.$emit('update:modelValue', this.modelValue);
}, },
methods: { methods: {
removeItem: function () { removeItem: function () {
this.$emit('itemRemoved', this.value); this.$emit('itemRemoved', this.modelValue);
}, },
onCloseModal: function () { onCloseModal: function () {
this.modalBox = false; this.modalBox = false;

19
src/components/plugin/SectionTextarea.vue
View File

@@ -8,11 +8,11 @@
<div class="col-sm-12 col-md-6 p-0 text-end"> <div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
class="material-icons-outlined">create</i></a> class="material-icons-outlined">create</i></a>
<b-modal no-enforce-focus class_other="modal-xl" v-model.value="modalBox" :title="langs.label" <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
v-on:hide="onCloseModal"> v-on:hide="onCloseModal">
<div class="mb-4"> <div class="mb-4">
<div class="form-group"> <div class="form-group">
<editor api-key="no-api-key" rows="12" class="form-control" v-model.value="text" :init="vtinymce" /> <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
</div> </div>
</div> </div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{ <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
@@ -31,20 +31,21 @@ import tinymceConfig from '../tinymce/config.js'
import Editor from '@tinymce/tinymce-vue' import Editor from '@tinymce/tinymce-vue'
export default { export default {
emits:['update:modelValue'],
components: { components: {
'b-modal': MagicoModal, 'b-modal': MagicoModal,
'editor': Editor // <- To jest TINYMCE 'editor': Editor // <- To jest TINYMCE
}, },
props: { props: {
value: Object modelValue: Object
}, },
mounted: function () { mounted: function () {
this.name = (this.value && this.value.name) ? this.value.name : this.name; this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text; this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
if (this.value.open) this.modalBox = true; if (this.modelValue.open) this.modalBox = true;
console.log('mounted textarea'); console.log('mounted textarea');
this.$emit('update:modelValue', this.value); this.$emit('update:modelValue', this.modelValue);
}, },
data: function () { data: function () {
@@ -86,12 +87,12 @@ export default {
}, },
computed: { computed: {
ctext: function () { ctext: function () {
return this.value.text ? this.value.text.replace(/<(?:.|\n)*?>/gm, '') : ''; return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
} }
}, },
methods: { methods: {
removeItem: function () { removeItem: function () {
this.$emit('itemRemoved', this.value); this.$emit('itemRemoved', this.modelValue);
}, },
onCloseModal: function () { onCloseModal: function () {
this.modalBox = false; this.modalBox = false;