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

vue2 to vue3 migration

Browse Source
This commit is contained in:
Szymon Haczyk
2023-08-02 12:03:37 +02:00
parent ec02fe865e
commit 7d4cc6ee70
18 changed files with 6925 additions and 28585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.eslintrc.js Normal file
View File

@@ -0,0 +1,34 @@
module.exports = {
extends: [
// add more generic rulesets here, such as:
// 'eslint:recommended',
"plugin:vue/vue3-recommended",
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
],
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
"vue/no-mutating-props": 1,
"vue/html-indent": 0,
"vue/html-self-closing": ["warn", {
"html": {
"void": "any",
"normal": "always",
"component": "always"
},
"svg": "always",
"math": "always"
}],
"vue/max-attributes-per-line": [
"warn",
{
singleline: {
max: 2,
},
multiline: {
max: 2,
},
},
],
},
};

28168
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
package.json
View File

@@ -9,22 +9,21 @@
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"@tinymce/tinymce-vue": "^3.2.8",
"boostrap": "^2.0.0",
"@tinymce/tinymce-vue": "^4",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"tinymce": "^6.0.3",
"vue": "^2.6.11",
"vuedraggable": "^2.24.3"
"vue": "^3.2.36",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.11",
"@vue/cli-plugin-eslint": "~4.5.11",
"@vue/cli-service": "~4.5.11",
"@babel/eslint-parser": "^7.22.9",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"eslint": "^8.46.0",
"eslint-plugin-vue": "^9.16.1"
},
"eslintConfig": {
"root": true,
@@ -36,13 +35,8 @@
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}

64
src/components/DropdownSectionGrid.vue
View File

@@ -1,44 +1,48 @@
<template>
<div class="row p-2">
<div v-for="(item, index) in items" :key="index" class="col-md-3">
<div class="my-check v2">
<input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
type="radio" v-model="value" :value="item.name">
<label :for="item.name"><img style="width:100%"
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
:alt="item.label" /></label>
</div>
</div>
<div class="row p-2">
<div
v-for="(item, index) in items"
:key="index"
class="col-md-3"
>
<div class="my-check v2">
<label
@click="emitEvent(item)"
:for="item.name"
><img
style="width: 100%"
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
:alt="item.label"
/></label>
</div>
</div>
</div>
</template>
<script>
import grid from './grid.js'
import { ref } from "vue";
import grid from "./grid.js";
export default {
emits: ["choose"],
setup(props, { emit }) {
const items = ref(grid);
methods: {},
data: function () {
return {
items: grid,
value: '',
}
},
}
function emitEvent(item) {
emit("choose", item);
}
return { items, emitEvent };
},
};
</script>
<style>
.my-check input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.my-check label {
cursor: pointer;
cursor: pointer;
}
</style>
</style>

72
src/components/DropdownSectionSection.vue
View File

@@ -1,28 +1,45 @@
<template>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
<template v-if="!item.type || item.type != 'custom'">
<div class="my-check v2">
<label @click="$emit('input', index)" :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
<img v-else style="width:100%"
:src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'" alt="1 kolumna">
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
item.label
}}</span>
</label>
</div>
</template>
</div>
</div>
<!-- <div class="col-md-12 text-center">
<div>
<div class="row col-md-12 pagebuilder_section">
<div
v-for="(item, index) in $pagebuilder.items"
:key="index"
class="col-md-2"
>
<template v-if="!item.type || item.type != 'custom'">
<div class="my-check v2">
<label
@click="$emit('choose', index)"
:for="'pos_' + index"
>
<div
style="width: 100%"
v-if="item.svg"
v-html="item.svg"
></div>
<img
v-else
style="width: 100%"
:src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'"
alt="1 kolumna"
/>
<span
style="cursor: pointer"
class="d-inline-block w-100 text-center mt-1 mb-1"
>{{ item.label }}</span
>
</label>
</div>
</template>
</div>
</div>
<!-- <div class="col-md-12 text-center">
<h3>DESIGN SYSTEM</h3>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
<div class="form-check v2">
<input @input="event => { $emit('input', index) }" type="radio" :id="'pos_' + index"
<input @input="event => { $emit('update:modelValue', index) }" type="radio" :id="'pos_' + index"
name="pos">
<label :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
@@ -38,13 +55,14 @@
</div>
</div>
</div> -->
</div>
</div>
</template>
<script>
export default {
methods: {},
props:['value'],
emits:['choose'],
data: function () {
return {
items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
@@ -57,13 +75,13 @@ export default {
</script>
<style>
.my-check input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.my-check label {
cursor: pointer;
cursor: pointer;
}
</style>
</style>

137
src/components/MagicoModal.vue
View File

@@ -1,69 +1,90 @@
<template>
<div class="modal" :id="id">
<div class="modal-dialog " :class="class_other">
<div v-if="modal" class="modal-content">
<div v-if="title" class="modal-header">
<h4 class="modal-title" v-html="title"></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="p-3">
<slot></slot>
</div>
</div>
<div
:id="id"
class="modal"
>
<div
class="modal-dialog"
:class="class_other"
>
<div
v-if="modal"
class="modal-content"
>
<div
v-if="title"
class="modal-header"
>
<h4
class="modal-title"
v-html="title"
/>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
</div>
<div class="p-3">
<slot />
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from 'bootstrap';
import { Modal } from "bootstrap";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
export default {
props: ['value', 'title', 'class_other'],
data: function () {
return {
id: 'modal' + Math.round(Math.random() * 100000),
modal: null,
props: ["modelValue", "title", "class_other"],
setup(props, { emit }) {
const id = "modal" + Math.round(Math.random() * 100000);
const modal = ref(null);
const triggerModal = (value, emitEvent = true) => {
if (value == true) {
modal.value.show();
} else {
modal.value.hide();
if (emitEvent) {
emit("hide");
}
},
mounted() {
document.body.append(document.getElementById(this.id));
this.modal = new Modal(document.getElementById(this.id))
let vm = this;
document.getElementById(this.id).addEventListener('hidden.bs.modal', function () {
vm.triggerModal(false);
})
this.triggerModal(this.value, false);
},
methods: {
triggerModal: function (value, emit = true) {
if (value == true) {
this.modal.show();
} else {
this.modal.hide()
if (emit) {
this.$emit('hide');
}
}
this.$emit('input', value);
}
},
watch: {
value: function () {
this.triggerModal(this.value);
}
},
onDestroy: function () {
document.getElementById(this.id).remove();
}
}
}
emit("update:modelValue", value);
};
onMounted(() => {
document.body.append(document.getElementById(id));
modal.value = new Modal(document.getElementById(id));
document.getElementById(id).addEventListener("hidden.bs.modal", function () {
triggerModal(false);
});
triggerModal(props.modelValue, false);
});
onBeforeUnmount(() => {
document.getElementById(id).remove();
});
watch(
() => props.modelValue,
() => {
triggerModal(props.modelValue);
}
);
return { id, modal };
},
};
</script>
<style>
.modal-xxl {
width: 100% !important;
max-width: 100% !important;
padding: 0 10px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 10px !important;
}
.modal-xlg {
width: 75% !important;
max-width: 75% !important;
padding: 0 10px !important;
}
</style>
</style>

227
src/components/MagicoPagebuilder.vue
View File

@@ -1,72 +1,140 @@
<template>
<section :class="{ 'pagebuilder-fullscreen': fullscreen }" class="content card-body " id="pagebuilder">
<section
:class="{ 'pagebuilder-fullscreen': fullscreen }"
class="content card-body p-3"
id="pagebuilder"
>
<div class="pagebuilder-body">
<div class="d-flex justify-content-between">
<button @click.prevent="fullscreen = !fullscreen" title="Tryb pełnoekranowy"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">fullscreen</span></button>
<button
@click.prevent="fullscreen = !fullscreen"
title="Tryb pełnoekranowy"
class="btn btn-outline-primary btn-icon-sm"
>
<span class="material-icons-outlined">fullscreen</span>
</button>
<div>
<button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
<button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
<button
@click.prevent="
modalLoad = !modalLoad;
pageType = { name: null };
"
title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"
>
<span class="material-icons-outlined">find_replace</span>
</button>
<button
@click.prevent="
modalSave = !modalSave;
pageType = { name: null };
"
title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"
>
<span class="material-icons-outlined">save</span>
</button>
</div>
<!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
układ z innej strony</button> -->
</div>
<draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
<div v-for="(item, index) in comps" :key="index">
<PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
<draggable
:options="{ handle: '.box-move' }"
v-model.value="comps"
@start="drag = true"
item-key="d"
@end="
drag = false;
onChange();
"
>
<template #item="{ element }">
<PagebuilderSection
:value="element"
v-on:deleteSection="deleteSection"
v-on:copy="copySection"
@change="onChange"
>
</PagebuilderSection>
</div>
</template>
</draggable>
<b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
v-on:onClose="modalSave = false">
<div slot="modal-title"><span></span></div>
<b-modal
class_other="modal-xl"
v-model.value="modalSave"
title="Zapisz szablon do schowka"
v-on:onClose="modalSave = false"
>
<PagebuilderTemplateSave
v-model.value="pageType"
:szablon="value"
>
</PagebuilderTemplateSave>
<div>
<PagebuilderTemplateSave v-model="pageType" :szablon="value">
</PagebuilderTemplateSave>
<button
@click.prevent="modalSaveSave"
title="Zapisz do schowka"
class="btn btn-success mr-1"
:disabled="!pageType.name"
>
Zapisz do schowka
</button>
</div>
<div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
:disabled="!pageType.name">Zapisz do schowka </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
v-on:onClose="modalLoad = false">
<b-modal
class_other="modal-xl"
v-model.value="modalLoad"
title="Wczytaj szablon ze schowka"
v-on:onClose="modalLoad = false"
>
<div>
<PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
<PagebuilderTemplateLoad
v-model.value="pageType"
@input="modalLoadClick"
></PagebuilderTemplateLoad>
</div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
<div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
<b-modal
class_other="modal-xl"
v-model.value="modalCopy"
v-on:onClose="modalCopy = false"
>
<PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
<div>
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
<button
class="btn btn-primary mr-1"
:disabled="!pageType.id"
@click.prevent="changeBody"
>
Skopiuj układ i treść
</button>
</div>
<div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
@click.prevent="changeBody">Skopiuj układ i treść </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
v-on:onClose="modalAddSection = false" hide-footer>
<div slot="modal-title"><span>
</span></div>
<b-modal
class_other="modal-xl"
v-model.value="modalAddSection"
title=" Dodaj sekcję"
v-on:onClose="modalAddSection = false"
hide-footer
>
<div>
<DropdownSectionGrid v-on:input="addSection" v-model="optionx">
</DropdownSectionGrid>
<DropdownSectionGrid @choose="addSection"> </DropdownSectionGrid>
</div>
<div slot="modal-footer"></div>
<div></div>
</b-modal>
<div class="text-center">
<!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
class="btn btn-block btn-primary mt-4"
@click.prevent="
modalAddSection = !modalAddSection;
optionx = false;
"
>
Dodaj sekcję
</button>
</div>
@@ -75,80 +143,84 @@
</template>
<script>
import draggable from 'vuedraggable'
import grid from './grid.js'
import MagicoModal from './MagicoModal.vue'
import PagebuilderSection from './PagebuilderSection.vue'
import DropdownSectionGrid from './DropdownSectionGrid.vue'
import PagebuilderTemplateSave from './PagebuilderTemplateSave.vue'
import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
import draggable from "vuedraggable";
import grid from "./grid.js";
import MagicoModal from "./MagicoModal.vue";
import PagebuilderSection from "./PagebuilderSection.vue";
import DropdownSectionGrid from "./DropdownSectionGrid.vue";
import PagebuilderTemplateSave from "./PagebuilderTemplateSave.vue";
import PagebuilderTemplateLoad from "./PagebuilderTemplateLoad.vue";
export default {
name: 'HelloWorld',
name: "MagicoPagebuilder",
emits: ["update:modelValue"],
components: {
'b-modal': MagicoModal,
"b-modal": MagicoModal,
PagebuilderSection,
draggable,
DropdownSectionGrid,
PagebuilderTemplateSave,
PagebuilderTemplateLoad
PagebuilderTemplateLoad,
},
data: function () {
return {
fullscreen: false,
grid: grid,
namex: 'body', //podmieniane przez name
namex: "body", //podmieniane przez name
drag: false,
optionx: '',
optionx: "",
comps: [],
modalAddSection: false,
modalCopy: false,
pageType: { id: false },
modalSave: false,
modalLoad: false,
}
};
},
props: ['name', 'value', 'showcopy', 'lang'],
props: ["name", "value", "showcopy", "lang"],
mounted: function () {
//var trimmed = $("#body_pagebuilder").val().replace((/ |\r\n|\n|\r/gm),"");
var trimmed = this.value//.replace((/{2} |\r\n|\n|\r/gm), "");
var trimmed = this.value; //.replace((/{2} |\r\n|\n|\r/gm), "");
try {
this.comps = JSON.parse(trimmed);
} catch (e) {
console.warn(e);
this.comps = [{ "label": "1 kolumna ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
this.comps = [
{
label: "1 kolumna ",
name: "col_1",
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
},
];
}
},
created: function () {
if (this.name) this.namex = this.name; else this.namxe = "body";
if (this.name) this.namex = this.name;
else this.namxe = "body";
},
watch: {
// whenever question changes, this function will run
comps: function (newQuestion) {
console.log('nq', newQuestion)
}
console.log("nq", newQuestion);
},
},
methods: {
onChange: function () {
this.$emit('input', JSON.stringify(this.comps));
this.$emit('change');
this.$emit("update:modelValue", JSON.stringify(this.comps));
this.$emit("change");
},
copySection: function (item) {
this.comps.push(JSON.parse(JSON.stringify(item)));
this.onChange();
},
deleteSection: function (item) {
this.comps.splice(this.comps.indexOf(item), 1);
this.onChange();
},
addSection: function () {
addSection: function (it) {
this.modalAddSection = false;
var columna = grid;
this.comps.push(JSON.parse(JSON.stringify(columna[this.optionx])));
this.comps.push(JSON.parse(JSON.stringify(it)));
this.onChange();
},
modalSaveSave: function () {
console.log(this.pageType);
@@ -157,14 +229,14 @@ export default {
name: this.pageType.name,
source: this.value,
description: this.pageType.description,
}
};
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.post('api/v1/pagebuilder/template', data).then(() => {
this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
this.pageType = {};
this.modalSave = false;
});
} else {
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
}
},
modalLoadClick: function () {
@@ -174,28 +246,33 @@ export default {
changeBody() {
var t = this;
var value = this.pageType.body;
var trimmed = value
var trimmed = value;
try {
//this.comps.forEach((item)=>{
// this.deleteSection(item);
//})
this.comps = []
this.comps = [];
setTimeout(function () {
t.comps = JSON.parse(trimmed);
t.onChange();
}, 300);
//this.comps =JSON.parse(trimmed);
} catch (e) {
this.comps = [{ "label": "1 kolumna ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
this.comps = [
{
label: "1 kolumna ",
name: "col_1",
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
},
];
}
this.modalCopy = false;
this.modalSave = false;
this.modalLoad = false;
}
},
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

62
src/components/MagicoPagebuilderPlugin.js
View File

@@ -1,34 +1,34 @@
import MagicoPagebuilder from './MagicoPagebuilder.vue'
import MagicoPagebuilder from "./MagicoPagebuilder.vue";
export default {
install: (app) => {
app.component('MagicoPagebuilder', MagicoPagebuilder);
install: (app) => {
app.component("MagicoPagebuilder", MagicoPagebuilder);
console.log(app);
app.prototype.$pagebuilder = {
items: {
'core_section_text': {
label: 'Pole nagłowek',
svg_off: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="31.29px" height="31.29px" viewBox="0 0 31.29 31.29" style="enable-background:new 0 0 31.29 31.29;" xml:space="preserve"><g><g><path d="M18.585,31.226v-1.833h0.577c0.497,0,0.961-0.036,1.395-0.105c0.436-0.072,0.812-0.219,1.131-0.438s0.576-0.537,0.769-0.948c0.192-0.412,0.287-0.959,0.287-1.643V16.03H8.547v10.229c0,0.683,0.095,1.229,0.287,1.644c0.192,0.41,0.448,0.729,0.768,0.947c0.32,0.221,0.699,0.365,1.14,0.438c0.442,0.07,0.902,0.106,1.386,0.106h0.577v1.833H0v-1.833h0.555c0.497,0,0.961-0.036,1.396-0.106c0.434-0.071,0.813-0.217,1.141-0.438c0.326-0.221,0.582-0.537,0.769-0.947c0.184-0.412,0.275-0.961,0.275-1.644v-21.4c0-0.639-0.096-1.153-0.287-1.545c-0.194-0.392-0.454-0.693-0.78-0.906C2.742,2.195,2.363,2.056,1.927,1.992c-0.431-0.065-0.89-0.096-1.373-0.096H0V0.063h12.705v1.833h-0.577c-0.483,0-0.943,0.035-1.386,0.107c-0.44,0.07-0.819,0.217-1.14,0.437C9.283,2.66,9.027,2.976,8.834,3.389C8.642,3.8,8.547,4.348,8.547,5.03v8.823h14.195V5.03c0-0.683-0.096-1.23-0.287-1.642s-0.448-0.729-0.768-0.948c-0.32-0.22-0.696-0.366-1.131-0.437c-0.435-0.072-0.897-0.107-1.396-0.107h-0.577V0.063h12.705v1.833h-0.553c-0.498,0-0.961,0.035-1.396,0.107c-0.434,0.07-0.812,0.217-1.141,0.437c-0.326,0.22-0.582,0.536-0.768,0.948c-0.186,0.411-0.277,0.959-0.277,1.642v21.442c0,0.64,0.097,1.155,0.287,1.545c0.192,0.392,0.453,0.687,0.779,0.884c0.326,0.2,0.705,0.331,1.141,0.396c0.434,0.064,0.892,0.096,1.373,0.096h0.556v1.833H18.585z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
},
'core_section_textarea': {
label: 'Pole tekstowe',
svg_off: '<svg id="Capa_1" enable-background="new 0 0 512 512" height="128" viewBox="0 0 512 512" width="128" xmlns="http://www.w3.org/2000/svg"><g><path d="m15 114.235c8.284 0 15-6.716 15-15v-69.235h69.235c8.284 0 15-6.716 15-15s-6.716-15-15-15h-84.235c-8.284 0-15 6.716-15 15v84.235c0 8.285 6.716 15 15 15z"/><path d="m497 0h-84.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h69.235v69.235c0 8.284 6.716 15 15 15s15-6.716 15-15v-84.235c0-8.284-6.716-15-15-15z"/><path d="m497 397.765c-8.284 0-15 6.716-15 15v69.235h-69.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h84.235c8.284 0 15-6.716 15-15v-84.235c0-8.285-6.716-15-15-15z"/><path d="m99.235 482h-69.235v-69.235c0-8.284-6.716-15-15-15s-15 6.716-15 15v84.235c0 8.284 6.716 15 15 15h84.235c8.284 0 15-6.716 15-15s-6.715-15-15-15z"/><path d="m419.66 191.38v-94.73c0-4.7-3.81-8.51-8.52-8.51h-155.14-155.14c-4.71 0-8.52 3.81-8.52 8.51v94.73c0 4.71 3.81 8.52 8.52 8.52h45.24c4.7 0 8.51-3.81 8.51-8.52v-32.45c0-4.71 3.82-8.52 8.52-8.52h53.21c4.71 0 8.52 3.81 8.52 8.52v234.14c0 4.71-3.81 8.52-8.52 8.52h-23.27c-4.71 0-8.52 3.81-8.52 8.52v45.24c0 4.7 3.81 8.51 8.52 8.51h62.93 62.93c4.71 0 8.52-3.81 8.52-8.51v-45.24c0-4.71-3.81-8.52-8.52-8.52h-23.27c-4.71 0-8.52-3.81-8.52-8.52v-234.14c0-4.71 3.81-8.52 8.52-8.52h53.21c4.7 0 8.52 3.81 8.52 8.52v32.45c0 4.71 3.81 8.52 8.51 8.52h45.24c4.71 0 8.52-3.81 8.52-8.52z"/></g></svg>'
},
'core_section_html': {
label: 'Pole HTML',
svg_off: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
},
'core_section_image': {
label: 'Obrazek',
svg_off: '<svg version="1.1" id="Capa_1" height="128" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M446.575,0H65.425C29.349,0,0,29.35,0,65.426v381.149C0,482.65,29.349,512,65.425,512h381.15C482.651,512,512,482.65,512,446.574V65.426C512,29.35,482.651,0,446.575,0z M481.842,446.575c0,19.447-15.821,35.267-35.267,35.267H65.425c-19.447,0-35.268-15.821-35.268-35.267v-55.007l99.255-84.451c3.622-3.082,8.906-3.111,12.562-0.075l62.174,51.628c5.995,4.977,14.795,4.569,20.304-0.946L372.181,209.77c2.67-2.675,5.783-2.935,7.408-2.852c1.62,0.083,4.695,0.661,7.078,3.596l95.176,117.19V446.575z M481.842,279.865l-71.766-88.366c-7.117-8.764-17.666-14.122-28.942-14.701c-11.268-0.57-22.317,3.672-30.294,11.662L212.832,326.681l-51.59-42.839c-14.959-12.422-36.563-12.293-51.373,0.308l-79.712,67.822V65.426c0-19.447,15.821-35.268,35.268-35.268h381.15c19.447,0,35.267,15.821,35.267,35.268V279.865z"/></g></g><g><g><path d="M161.174,62.995c-40.095,0-72.713,32.62-72.713,72.713c0,40.094,32.619,72.713,72.713,72.713s72.713-32.619,72.713-72.713S201.269,62.995,161.174,62.995z M161.174,178.264c-23.466,0-42.556-19.091-42.556-42.556c0-23.466,19.09-42.556,42.556-42.556c23.466,0,42.556,19.091,42.556,42.556S184.64,178.264,161.174,178.264z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
}
},
axios: null,
registerPlugin(name, item, component) {
this.items[name] = item;
app.component(name, component);
}
}
}
}
console.log(app);
app.config.globalProperties.$pagebuilder = {
items: {
core_section_text: {
label: "Pole nagłowek",
svg_off: "",
},
core_section_textarea: {
label: "Pole tekstowe",
svg_off: "",
},
core_section_html: {
label: "Pole HTML",
svg_off: "",
},
core_section_image: {
label: "Obrazek",
svg_off: "",
},
},
axios: null,
registerPlugin(name, item, component) {
this.items[name] = item;
app.component(name, component);
},
};
},
};

227
src/components/PagebuilderContent.vue
View File

@@ -1,113 +1,164 @@
<template>
<div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
<div
style="min-height: 100px"
class="pagebuilder-column"
:class="value.name"
>
<b-modal
v-model.value="modalAddBox"
class_other="modal-xl"
v-on:onClose="modalAddBox = false"
title="Dodaj widżet"
>
<div>
<DropdownSectionSection
@choose="clickAdd"
>
</DropdownSectionSection>
</div>
</b-modal>
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
<div>
<DropdownSectionSection v-on:input="clickAdd" v-model="opcja">
</DropdownSectionSection>
</div>
<div slot="modal-footer"></div>
</b-modal>
<b-modal v-model="modalColumnsSettings" title="Ustawienia kolumny" size="sm"
v-on:onClose="modalColumnsSettings = false">
<div>
<div class="from-group">
<label>Klasa kolumny</label>
<input @input="onChange" v-model="value.class" type="text" class="form-control">
</div>
</div>
<div slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
i zamknij</button></div>
</b-modal>
<draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
@end="drag = false; onChange()" group="people">
<div v-for="(item, index) in value.items" :key="index"
class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
<component @itemRemoved="removeItem" :key="index" v-bind:is="item.name" v-bind:value="item"
v-model="value.items[index]" @input="onChange" @change="onChange"></component>
</div>
</draggable>
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
<div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
<div class="flex-fill mr-0 pr-0 ">
<button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
class="material-icons-outlined">add_circle_outline</i></button>
</div>
<div class="ml-0 pl-0">
<a title="Ustawienia kolumny" class="btn-icon-sm"
@click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
style=" cursor:pointer; position: relative; top:5px; margin-left: 5px;"
class="material-icons-outlined">create</i></a>
</div>
<b-modal
v-model="modalColumnsSettings"
title="Ustawienia kolumny"
size="sm"
v-on:onClose="modalColumnsSettings = false"
>
<div>
<div class="from-group">
<label>Klasa kolumny</label>
<input
@input="onChange"
v-model="value.class"
type="text"
class="form-control"
/>
</div>
</div>
<div>
<button
@click="modalColumnsSettings = false"
class="btn btn-outline-secondary"
>
Zapisz i zamknij
</button>
</div>
</b-modal>
<draggable
:options="{ handle: '.box-move' }"
v-model="value.items"
@start="drag = true"
@end="
drag = false;
onChange();
"
group="people"
>
<template #item="{ element, index }">
<div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
<component
@itemRemoved="removeItem"
:key="index"
v-bind:is="element.name"
v-bind:value="element"
v-model.value="value.items[index]"
@input="onChange"
@change="onChange"
></component>
</div>
</template>
</draggable>
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
<div
class="posistion-relative"
:class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
>
<div class="flex-fill mr-0 pr-0">
<button
class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox"
title="Dodaj widget"
>
<i class="material-icons-outlined">add_circle_outline</i>
</button>
</div>
<div class="ml-0 pl-0">
<a
title="Ustawienia kolumny"
class="btn-icon-sm"
@click.prevent="modalColumnsSettings = !modalColumnsSettings"
><i
style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
class="material-icons-outlined"
>create</i
></a
>
</div>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import MagicoModal from './MagicoModal.vue'
import SectionText from './plugin/SectionText.vue'
import SectionTextarea from './plugin/SectionTextarea.vue'
import SectionHtml from './plugin/SectionHtml.vue'
import SectionImage from './plugin/SectionImage.vue'
import draggable from "vuedraggable";
import MagicoModal from "./MagicoModal.vue";
import SectionText from "./plugin/SectionText.vue";
import SectionTextarea from "./plugin/SectionTextarea.vue";
import SectionHtml from "./plugin/SectionHtml.vue";
import SectionImage from "./plugin/SectionImage.vue";
import DropdownSectionSection from './DropdownSectionSection.vue'
import DropdownSectionSection from "./DropdownSectionSection.vue";
export default {
data: function () { return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false } },
props: { value: Object },
components: {
draggable,
'b-modal': MagicoModal,
'core_section_textarea': SectionTextarea,
'core_section_text': SectionText,
'core_section_html': SectionHtml,
'core_section_image': SectionImage,
DropdownSectionSection
data: function () {
return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
},
props: { value: Object },
components: {
draggable,
"b-modal": MagicoModal,
core_section_textarea: SectionTextarea,
core_section_text: SectionText,
core_section_html: SectionHtml,
core_section_image: SectionImage,
DropdownSectionSection,
},
methods: {
onChange: function () {
this.$emit("change");
},
methods: {
onChange: function () {
this.$emit('change');
},
rand: function () { return 'component' + Math.random() * 100 },
removeItem(item) {
this.value.items.indexOf(item);
this.value.items.splice(this.value.items.indexOf(item), 1);
rand: function () {
return "component" + Math.random() * 100;
},
removeItem(item) {
this.value.items.indexOf(item);
this.value.items.splice(this.value.items.indexOf(item), 1);
this.onChange();
},
clickAdd: function (item) {
console.log(item);
this.modalAddBox = false;
var a = { name: item, open: true }
this.value.items.push(a);
this.onChange();
this.opcja = '';
}
}
}
this.onChange();
},
clickAdd: function (item) {
console.log(item);
this.modalAddBox = false;
var a = { name: item, open: true };
this.value.items.push(a);
this.onChange();
},
},
};
</script>
<style>
.pagebuilder-column-hover {
display: none;
display: none;
}
.pagebuilder-column-hover-padding {
padding: 17px;
padding: 17px;
}
.pagebuilder-column:hover .pagebuilder-column-hover {
display: flex;
display: flex;
}
.pagebuilder-column:hover .pagebuilder-column-hover-padding {
padding: 0px;
padding: 0px;
}
</style>
</style>

2
src/components/PagebuilderTemplateLoad.vue
View File

@@ -22,7 +22,7 @@ export default {
},
methods: {
changeSelect() {
this.$emit('input', this.itemselected);
this.$emit('update:modelValue', this.itemselected);
},
getPost() {
if (this.$pagebuilder.axios) {

153
src/components/PagebuilderTemplateSave.vue
View File

@@ -1,66 +1,101 @@
<template>
<div>
<div class="form-group mb-3 ">
<label v-if="id < 1" class="col-4">Tworzysz nowy szablon</label>
<label v-if="id > 0" class="col-4">Nadpiszesz istniejacy szablon</label>
<div class="col-8"><b v-if="id > 0" class="">{{ name2 }}</b></div>
</div>
<div class="form form-group mb-3">
<label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
<select v-model="itemselected" @change="changeSelect" class="form-control">
<option :value="{ 'new': 1 }">Stwórz nowy szablon</option>
<option :key="ii" v-for="item, ii in items" :value="item">Nadpisz: {{ item.name }}</option>
</select>
</div>
<div v-show="itemselected.new == 1">
<div class="form form-group mb-3"><label class="w-100">Nazwa szablonu</label><input @change="change"
class="form-control" type="text" v-model="name"></div>
<div class="form form-group mb-3"><label class="w-100">Opis</label><input @change="change"
class="form-control" type="text" v-model="description"></div>
</div>
<div>
<div class="form-group mb-3">
<label
v-if="id < 1"
class="col-4"
>Tworzysz nowy szablon</label
>
<label
v-if="id > 0"
class="col-4"
>Nadpiszesz istniejacy szablon</label
>
<div class="col-8">
<b
v-if="id > 0"
class=""
>{{ name2 }}</b
>
</div>
</div>
<div class="form form-group mb-3">
<label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
<select
v-model="itemselected"
@change="changeSelect"
class="form-control"
>
<option :value="{ new: 1 }">Stwórz nowy szablon</option>
<option
:key="ii"
v-for="(item, ii) in items"
:value="item"
>
Nadpisz: {{ item.name }}
</option>
</select>
</div>
<div v-show="itemselected.new == 1">
<div class="form form-group mb-3">
<label class="w-100">Nazwa szablonu</label
><input
@change="change"
class="form-control"
type="text"
v-model="name"
/>
</div>
<div class="form form-group mb-3">
<label class="w-100">Opis</label
><input
@change="change"
class="form-control"
type="text"
v-model="description"
/>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
this.getPost();
created() {
this.getPost();
},
data: function () {
return {
items: [],
itemselected: { new: 1 },
name: "",
description: "",
id: 0,
};
},
methods: {
change() {
this.$emit("update:modelValue", {
id: this.id,
name: this.name,
description: this.description,
});
},
data: function () {
return {
items: [],
itemselected: {new:1},
name: '',
description: '',
id: 0,
}
changeSelect() {
this.id = this.itemselected.id;
this.name = this.itemselected.name;
this.name2 = this.itemselected.naem;
this.description = this.itemselected.description;
this.change();
},
methods: {
change() {
this.$emit('input', {
id: this.id,
name: this.name,
description: this.description,
});
},
changeSelect() {
this.id = this.itemselected.id;
this.name = this.itemselected.name;
this.name2 = this.itemselected.naem;
this.description = this.itemselected.description;
this.change();
},
getPost() {
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
this.items = response.data.data;
});
} else {
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
}
}
}
}
</script>
getPost() {
if (this.$pagebuilder.axios) {
this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
this.items = response.data.data;
});
} else {
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
}
},
},
};
</script>

129
src/components/grid.js
View File

@@ -1,14 +1,117 @@
export default {
'col_1': { label: '1 kolumna ', name: 'col_1', class: '', columns: [{ name: 'col-md-12', items: [] }] },
'col_2': { label: '2 kolumny po 6 ', name: 'col_2', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', class: '', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', class: '', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
'col_3': { label: '3 kolumny po 4 ', name: 'col_3', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
'col_4': { label: '4 kolumny po 3 ', name: 'col_4', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
'col_6': { label: '6 kolumn po 2 ', name: 'col_6', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
}
col_1: {
label: "1 kolumna ",
name: "col_1",
class: "",
columns: [{ name: "col-md-12", items: [] }],
},
col_2: {
label: "2 kolumny po 6 ",
name: "col_2",
class: "",
columns: [
{ name: "col-md-6", items: [] },
{ name: "col-md-6", items: [] },
],
},
col_4_8: {
label: "2 kolumny 2 i 8 ",
name: "col_4_8",
class: "",
columns: [
{ name: "col-md-4", items: [] },
{ name: "col-md-8", items: [] },
],
},
col_8_4: {
label: "2 kolkumny 8 i 2 ",
name: "col_8_4",
class: "",
columns: [
{ name: "col-md-8", items: [] },
{ name: "col-md-4", items: [] },
],
},
col_2_10: {
label: "2 kolumny 2 i 10 ",
name: "col_2_10",
class: "",
columns: [
{ name: "col-md-2", items: [] },
{ name: "col-md-10", items: [] },
],
},
col_10_2: {
label: "2 kolkumny 10 i 2 ",
name: "col_10_2",
class: "",
columns: [
{ name: "col-md-10", items: [] },
{ name: "col-md-2", items: [] },
],
},
col_3: {
label: "3 kolumny po 4 ",
name: "col_3",
class: "",
columns: [
{ name: "col-md-4", items: [] },
{ name: "col-md-4", items: [] },
{ name: "col-md-4", items: [] },
],
},
col_3_6_3: {
label: "3 kolumny: 3 ,6, 3 ",
name: "col_3_6_3",
class: "",
columns: [
{ name: "col-md-3", items: [] },
{ name: "col-md-6", items: [] },
{ name: "col-md-3", items: [] },
],
},
col_6_3_3: {
label: "3 kolumny: 6,3,3 ",
name: "col_6_3_3",
class: "",
columns: [
{ name: "col-md-6", items: [] },
{ name: "col-md-3", items: [] },
{ name: "col-md-3", items: [] },
],
},
col_3_3_6: {
label: "3 kolumny: 3,3,6 ",
name: "col_3_3_6",
class: "",
columns: [
{ name: "col-md-3", items: [] },
{ name: "col-md-3", items: [] },
{ name: "col-md-6", items: [] },
],
},
col_4: {
label: "4 kolumny po 3 ",
name: "col_4",
class: "",
columns: [
{ name: "col-md-3", items: [] },
{ name: "col-md-3", items: [] },
{ name: "col-md-3", items: [] },
{ name: "col-md-3", items: [] },
],
},
col_6: {
label: "6 kolumn po 2 ",
name: "col_6",
class: "",
columns: [
{ name: "col-md-2", items: [] },
{ name: "col-md-2", items: [] },
{ name: "col-md-2", items: [] },
{ name: "col-md-2", items: [] },
{ name: "col-md-2", items: [] },
{ name: "col-md-2", items: [] },
],
},
};

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

@@ -41,7 +41,7 @@ export default {
this.text = (this.value && this.value.text) ? this.value.text : this.text;
if (this.value.open) this.modalBox = true;
console.log('mounted html');
this.$emit('input',this.value);
this.$emit('update:modelValue',this.value);
},
data: function () {
return {
@@ -67,7 +67,7 @@ export default {
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
})

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

@@ -161,7 +161,7 @@ export default {
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
height: this.height,
@@ -176,7 +176,7 @@ export default {
},
setText: function (item) {
this.text = 'files/images/' + item;
this.$emit('input', {
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
height: this.height,

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

@@ -97,7 +97,7 @@ export default {
this.align = (this.value && this.value.align) ? this.value.align : this.align;
if (this.value.open) this.modalBox = true;
console.log('mounted text');
this.$emit('input', this.value);
this.$emit('update:modelValue', this.value);
},
@@ -107,7 +107,7 @@ export default {
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
h_type: this.h_type,

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

@@ -8,11 +8,11 @@
<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
class="material-icons-outlined">create</i></a>
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
<b-modal no-enforce-focus class_other="modal-xl" v-model.value="modalBox" :title="langs.label"
v-on:hide="onCloseModal">
<div class="mb-4">
<div class="form-group">
<editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
<editor api-key="no-api-key" rows="12" class="form-control" v-model.value="text" :init="vtinymce" />
</div>
</div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
@@ -44,7 +44,7 @@ export default {
this.text = (this.value && this.value.text) ? this.value.text : this.text;
if (this.value.open) this.modalBox = true;
console.log('mounted textarea');
this.$emit('input', this.value);
this.$emit('update:modelValue', this.value);
},
data: function () {
@@ -95,7 +95,7 @@ export default {
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
this.$emit('update:modelValue', {
name: this.name,
text: this.text,
})

15
src/main.js
View File

@@ -1,9 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
Vue.config.productionTip = false
Vue.use(MagicoPagebuilder);
new Vue({
render: h => h(App),
}).$mount('#app')
import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js';
const app = createApp(App);
app.use(MagicoPagebuilder);
app.mount('#app');

6172
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff