bump version to 0.0.33 and add aosDelay input for animation delay in AosSelect component

.gitignore

@@ -1,26 +1,21 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.0",
+  "version": "0.0.33",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,13 +10,15 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.3.4",
     "@popperjs/core": "^2.11.7",
     "@tinymce/tinymce-vue": "^4",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "5.2",
+    "bootstrap-icons": "^1.10.5",
     "core-js": "^3.6.5",
-    "magico-section": "../magico-section",
+    "magico-section": "https://serwer.magico.pl/gitrepos/public/magico-section.git",
     "tinymce": "^6.0.3",
+    "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,24 +1,34 @@
 <template>
   <div id="app" class="container">
-    <img alt="Vue logo" style="width:100px" src="./assets/logo.png">
+    <img alt="Vue logo" style="width: 100px" src="./assets/logo.png" />
     <h2>Pagebuilder Magico</h2>
     <MagicoPagebuilder v-model="data" />
 
-    <div class="bg-dark text-light mt-4 p-2">{{data}}</div>
+    <div class="bg-dark text-light mt-4 p-2">{{ data }}</div>
   </div>
 </template>
 
 <script>
-
+import { useSections } from './components/registerSections'
+import axios from 'axios'
 export default {
   name: 'App',
-  components: {
-    
-  },
-  data: function(){
+  components: {},
+  data: function () {
     return {
-      data:'[{"label":"1 kolumna  ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
+      data: '[{"label":"1 kolumna  ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
     }
+  },
+  mounted() {
+    const { register: sectionRegister } = useSections()
+    let vm = this
+    this.$pagebuilder.axios = axios.create({
+      headers: { Authorization: 'Bearer 40660b963460d453d903be5d5091e0c94a3254ce' }
+    })
+
+    this.$pagebuilder.axios.get('https://cms.magico.pro/api/v1/section').then((response) => {
+      sectionRegister(vm.$pagebuilder, response.data.data)
+    })
   }
 }
 </script>
@@ -31,4 +41,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
+</style>

src/assets/main.css

@@ -1,5 +1,5 @@
 @import './base.css';
-
+@import 'bootstrap-icons/font/bootstrap-icons.css';
 #app {
   min-width: 1980px;
   margin: 0 auto;

src/components/AIModal.vue

@@ -0,0 +1,111 @@
+<template>
+  <MagicoModal v-model="modal" title="Generuj AI">
+    <div class="p-1">
+      <h5>O czym chcesz napisać?</h5>
+      <textarea
+        class="form-control mb-3"
+        rows="5"
+        v-model="text"
+        placeholder="Napisz krótki opis, aby AI mogło wygenerować treść."
+      ></textarea>
+      <div class="form-group">
+        <label>Ilość znaków</label>
+        <select v-model="count" class="form-select">
+          <option value="500">500</option>
+          <option value="1000">1000</option>
+          <option value="2000">2000</option>
+        </select>
+      </div>
+      <div class="text-center mt-3">
+        <button :disabled="loader" @click="generate" class="btn btn-primary">
+          <span class="spinner-border spinner-border-sm me-2" v-if="loader"></span>
+          Generuj
+        </button>
+      </div>
+    </div>
+  </MagicoModal>
+</template>
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+const modal = ref(true)
+import axios from 'axios';
+import MagicoModal from './MagicoModal.vue'
+// import axios from '@/api/sync-axios'
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  },
+  modelValue: {
+    type: Object,
+    default: true
+  },
+  lang: {
+    type: String
+  },
+  callback: {
+    type: Function,
+    default: () => {}
+  }
+})
+const text = ref('')
+const offer = ref({})
+const loader = ref(false)
+onMounted(() => {
+  offer.value = props.modelValue
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    offer.value = newValue
+  },
+  { immediate: true }
+)
+const count = ref(500)
+const emit = defineEmits(['offerGenerated', 'update:modelValue'])
+function generate() {
+  const prompt = `Twoim zadaniem jest stworzenie opisu.
+Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count.value} znaków.
+Odpowiedź wygeneruj w języku określanym przez kod kraju: pl.
+Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
+{
+  "content": ""
+}`
+  const query = `${text.value}`
+  loader.value = true
+  axios
+    .post(
+      'https://ai.magico.pro/api/v1/message',
+      { prompt, query },
+      {
+        headers: {
+          Authorization: 'Bearer ' + localStorage.getItem('access_token')
+        }
+      }
+    )
+    .then((response) => {
+      loader.value = false
+      modal.value = false // Close the modal after generation
+      // Handle the response, e.g., display the generated content
+      const jsonText = response.data.data.choices[0].message.content
+      const jsonData = JSON.parse(jsonText)
+      console.log('Generated Offer Data:', jsonData)
+      emit('update:modelValue', offer.value)
+      props.callback(jsonData)
+      // Assuming you want to do something with the generated data
+      // modal.value = false; // Close the modal after generation
+    })
+    .catch((error) => {
+      console.error('Błąd podczas generowania oferty:', error)
+      alert('Wystąpił błąd podczas generowania oferty.')
+    })
+}
+
+function setFeatureValue(featureName, value) {
+  const feature = offer.value.features.find((f) => f.feature_name === featureName)
+  if (feature) {
+    feature.feature_value = value
+  }
+}
+</script>

src/components/AosSelect.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="form form-group mb-3">
+    <label class="form-label">Wybierz animację</label>
+    <select v-model="selectedAnimation" @change="changeSelect" class="form-select">
+      <option value="">Brak animacji</option>
+      <option v-for="item in animations" :key="item.value" :value="item.value">
+        {{ item.name }}
+      </option>
+    </select>
+      <div class="mt-2">
+        <label class="form-label">Opóźnienie animacji (ms)</label>
+        <input type="number" v-model="aosDelay" @input="changeSelect" class="form-control" min="0" step="50" placeholder="np. 200" />
+      </div>
+    <!-- <small class="form-text text-muted" v-if="selectedAnimation">
+      Wybrana animacja: {{ getCompiledAttribute() }}
+    </small> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:value', 'aos-changed']);
+
+const selectedAnimation = ref('');
+const aosDelay = ref('');
+const animations = [
+  { value: 'fade', name: 'Zanikanie' },
+  { value: 'fade-up', name: 'Zanikanie w górę' },
+  { value: 'fade-down', name: 'Zanikanie w dół' },
+  { value: 'fade-left', name: 'Zanikanie w lewo' },
+  { value: 'fade-right', name: 'Zanikanie w prawo' },
+  { value: 'fade-up-right', name: 'Zanikanie w górę i prawo' },
+  { value: 'fade-up-left', name: 'Zanikanie w górę i lewo' },
+  { value: 'fade-down-right', name: 'Zanikanie w dół i prawo' },
+  { value: 'fade-down-left', name: 'Zanikanie w dół i lewo' },
+  { value: 'flip-up', name: 'Obrót w górę' },
+  { value: 'flip-down', name: 'Obrót w dół' },
+  { value: 'flip-left', name: 'Obrót w lewo' },
+  { value: 'flip-right', name: 'Obrót w prawo' },
+  { value: 'slide-up', name: 'Przesunięcie w górę' },
+  { value: 'slide-down', name: 'Przesunięcie w dół' },
+  { value: 'slide-left', name: 'Przesunięcie w lewo' },
+  { value: 'slide-right', name: 'Przesunięcie w prawo' },
+  { value: 'zoom-in', name: 'Powiększenie' },
+  { value: 'zoom-in-up', name: 'Powiększenie w górę' },
+  { value: 'zoom-in-down', name: 'Powiększenie w dół' },
+  { value: 'zoom-in-left', name: 'Powiększenie w lewo' },
+  { value: 'zoom-in-right', name: 'Powiększenie w prawo' },
+  { value: 'zoom-out', name: 'Pomniejszenie' },
+  { value: 'zoom-out-up', name: 'Pomniejszenie w górę' },
+  { value: 'zoom-out-down', name: 'Pomniejszenie w dół' },
+  { value: 'zoom-out-left', name: 'Pomniejszenie w lewo' },
+  { value: 'zoom-out-right', name: 'Pomniejszenie w prawo' }
+];
+
+function decompileAosAttribute(val) {
+  if (val) {
+    const aosMatch = val.match(/data-aos="([^"]+)"/);
+    const delayMatch = val.match(/data-aos-delay="(\d+)"/);
+    if (aosMatch) {
+      selectedAnimation.value = aosMatch[1];
+    } else {
+      selectedAnimation.value = val;
+    }
+    if (delayMatch) {
+      aosDelay.value = delayMatch[1];
+    } else {
+      aosDelay.value = '';
+    }
+  } else {
+    selectedAnimation.value = '';
+    aosDelay.value = '';
+  }
+}
+
+function getCompiledAttribute() {
+  let attr = '';
+  if (selectedAnimation.value) {
+    attr += `data-aos="${selectedAnimation.value}"`;
+    if (aosDelay.value) {
+      attr += ` data-aos-delay="${aosDelay.value}"`;
+    }
+  }
+  return attr;
+}
+
+function changeSelect() {
+  const compiledAttribute = getCompiledAttribute();
+  emit('update:modelValue', compiledAttribute);
+  emit('aos-changed', compiledAttribute);
+}
+
+onMounted(() => {
+  decompileAosAttribute(props.modelValue);
+});
+
+watch(() => props.modelValue, (newVal) => {
+  decompileAosAttribute(newVal);
+});
+</script>

src/components/DropdownSectionSection.vue

@@ -17,6 +17,12 @@
                 v-if="item.svg"
                 v-html="item.svg"
               ></div>
+
+              <img
+                style="width: 100%"
+                v-else-if="item.image"
+                :src="item.image"
+              >
               <img
                 v-else
                 style="width: 100%"
@@ -69,7 +75,6 @@ export default {
         }
     },
     mounted() {
-
     }
 }
 </script>

src/components/MagicoModal.vue

@@ -1,30 +1,10 @@
 <template>
-  <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 :id="id" class="modal" data-bs-focus="false" tabindex="-1">
+    <div class="modal-dialog" :class="class_other" >
+      <div class="modal-content" v-if="modelValue">
+        <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 />
@@ -35,50 +15,54 @@
 </template>
 
 <script>
-import { Modal } from "bootstrap";
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { Modal } from 'bootstrap'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 export default {
-  props: ["modelValue", "title", "class_other"],
+  props: ['modelValue', 'title', 'class_other'],
+  emits: ['change', 'update:modelValue', 'hide'],
   setup(props, { emit }) {
-    const id = "modal" + Math.round(Math.random() * 100000);
-    const modal = ref(null);
+    const id = 'modalpgb' + Math.round(Math.random() * 100000)
+    const modal = ref(null)
 
     const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-        modal.value.show();
+        modal.value.show()
       } else {
-        modal.value.hide();
+        modal.value.hide()
         if (emitEvent) {
-          emit("hide");
+          emit('hide')
         }
       }
-      emit("update:modelValue", value);
-    };
+      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);
-    });
+      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();
-    });
+      modal.value.hide()
+      setTimeout(function () {
+        document.getElementById(id).remove()
+      }, 500)
+    })
 
     watch(
       () => props.modelValue,
       () => {
-        triggerModal(props.modelValue);
+        triggerModal(props.modelValue)
       }
-    );
+    )
 
-    return { id, modal };
-  },
-};
+    return { id, modal }
+  }
+}
 </script>
 
 <style>

src/components/MagicoPagebuilder.vue

@@ -14,26 +14,55 @@
           <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>
+          <div class="dropdown">
+            <button
+              class="btn btn-outline-secondary dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              {{ t('pagebuilder.template') }}
+            </button>
+            <ul class="dropdown-menu">
+              <li>
+                <a
+                  @click.prevent="
+                    modalLoad = !modalLoad;
+                    pageType = { name: null }
+                  "
+                  class="dropdown-item"
+                  href="#"
+                  >{{ t('pagebuilder.import_template') }}</a
+                >
+              </li>
+              <li>
+                <a
+                  @click.prevent="
+                    modalSave = !modalSave;
+                    pageType = { name: null }
+                  "
+                  class="dropdown-item"
+                  href="#"
+                  >{{ t('pagebuilder.save_template') }}</a
+                >
+              </li>
+              <li v-if="descriptionAllegro">
+                <a @click.prevent="pasteAllegro" class="dropdown-item" href="#"
+                  >Wklej opis <i>Allegro</i></a
+                >
+              </li>
+              <li>
+                <a @click.prevent="copyClipboard" class="dropdown-item" href="#">{{
+                  t('pagebuilder.copy_template')
+                }}</a>
+              </li>
+              <li v-if="pasteAvailable">
+                <a @click.prevent="pasteClipboard" class="dropdown-item" href="#">{{
+                  t('pagebuilder.paste_template')
+                }}</a>
+              </li>
+            </ul>
+          </div>
         </div>
 
         <!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
@@ -47,12 +76,15 @@
         item-key="d"
         @end="
           drag = false;
-          onChange();
+          onChange()
         "
       >
-        <template #item="{ element }">
+        <template #item="{ element, index }">
           <PagebuilderSection
             :value="element"
+            :key="'g' + index"
+            :id="'g' + index"
+            :keyIndex="'g' + index"
             v-on:deleteSection="deleteSection"
             v-on:copy="copySection"
             @change="onChange"
@@ -62,15 +94,11 @@
       </draggable>
 
       <b-modal
-        class_other="modal-xl"
-        v-model.value="modalSave"
+        v-model="modalSave"
         title="Zapisz szablon do schowka"
         v-on:onClose="modalSave = false"
       >
-        <PagebuilderTemplateSave
-          v-model.value="pageType"
-          :szablon="value"
-        >
+        <PagebuilderTemplateSave v-model.value="pageType" :szablon="modelValue">
         </PagebuilderTemplateSave>
         <div>
           <button
@@ -79,37 +107,29 @@
             class="btn btn-success mr-1"
             :disabled="!pageType.name"
           >
-            Zapisz do schowka
+            {{ t('pagebuilder.copy_template') }}
           </button>
         </div>
       </b-modal>
 
       <b-modal
-        class_other="modal-xl"
-        v-model.value="modalLoad"
+        v-model="modalLoad"
         title="Wczytaj szablon ze schowka"
         v-on:onClose="modalLoad = false"
       >
         <div>
           <PagebuilderTemplateLoad
-            v-model.value="pageType"
-            @input="modalLoadClick"
+            v-model="pageType"
+            v-if="modalLoad"
+            @update:modelValue="modalLoadClick"
           ></PagebuilderTemplateLoad>
         </div>
       </b-modal>
 
-      <b-modal
-        class_other="modal-xl"
-        v-model.value="modalCopy"
-        v-on:onClose="modalCopy = false"
-      >
-        <PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
+      <b-modal v-model="modalCopy" v-on:onClose="modalCopy = false">
+        <PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
         <div>
-          <button
-            class="btn btn-primary mr-1"
-            :disabled="!pageType.id"
-            @click.prevent="changeBody"
-          >
+          <button class="btn btn-primary mr-1" :disabled="!pageType.id" @click.prevent="changeBody">
             Skopiuj układ i treść
           </button>
         </div>
@@ -117,8 +137,8 @@
 
       <b-modal
         class_other="modal-xl"
-        v-model.value="modalAddSection"
-        title=" Dodaj sekcję"
+        v-model="modalAddSection"
+        :title="t('pagebuilder.add_section')"
         v-on:onClose="modalAddSection = false"
         hide-footer
       >
@@ -132,10 +152,10 @@
           class="btn btn-block btn-primary mt-4"
           @click.prevent="
             modalAddSection = !modalAddSection;
-            optionx = false;
+            optionx = false
           "
         >
-          Dodaj sekcję
+          {{ t('pagebuilder.add_section') }}
         </button>
       </div>
     </div>
@@ -143,136 +163,220 @@
 </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'
+import { useI18n } from 'vue-i18n'
 
 export default {
-  name: "MagicoPagebuilder",
-  emits: ["update:modelValue"],
+  name: 'MagicoPagebuilder',
+  emits: ['update:modelValue', 'change'],
   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: [],
+      pasteAvailable: false,
       modalAddSection: false,
       modalCopy: false,
       pageType: { id: false },
       modalSave: false,
       modalLoad: false,
-    };
-  },
-  props: ["name", "modelValue", "showcopy", "lang"],
-  mounted: function () {
-    //var trimmed = $("#body_pagebuilder").val().replace((/  |\r\n|\n|\r/gm),"");
-    var trimmed = this.modelValue; //.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" }] }],
-        },
-      ];
+      descriptionAllegro: false,
+      ownUpdate: false
     }
   },
+  props: ['name', 'modelValue', 'showcopy', 'lang'],
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  mounted: function () {
+    if (localStorage.getItem('description_clipboard')) {
+      this.descriptionAllegro = true
+    }
+    if (localStorage.getItem('pagebuilder_clipboard')) {
+      this.pasteAvailable = true
+    }
+    //var trimmed = $("#body_pagebuilder").val().replace((/  |\r\n|\n|\r/gm),"");
+    var trimmed = this.modelValue //.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' }] }]
+        }
+      ]
+    }
+  },
+  computed: {},
   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)
     },
+    modelValue: function () {
+      if (this.ownUpdate) {
+        this.ownUpdate = false
+        return
+      }
+      try {
+        this.comps = JSON.parse(this.modelValue)
+      } catch (e) {
+        console.warn(e)
+        this.comps = [
+          {
+            label: '1 kolumna  ',
+            name: 'col_1',
+            columns: [{ name: 'col-md-12', items: [{ name: 'core_section_textarea' }] }]
+          }
+        ]
+      }
+    }
   },
   methods: {
     onChange: function () {
-      this.$emit("update:modelValue", JSON.stringify(this.comps));
-      this.$emit("change");
+      this.ownUpdate = true
+      this.$emit('update:modelValue', JSON.stringify(this.comps))
+      this.$emit('change')
     },
     copySection: function (item) {
-      this.comps.push(JSON.parse(JSON.stringify(item)));
-      this.onChange();
+      this.comps.push(JSON.parse(JSON.stringify(item)))
+      this.onChange()
     },
     deleteSection: function (item) {
-      this.comps.splice(this.comps.indexOf(item), 1);
-      this.onChange();
+      this.comps.splice(this.comps.indexOf(item), 1)
+      this.onChange()
+    },
+    pasteClipboard: function () {
+      const item = localStorage.getItem('pagebuilder_clipboard')
+      if (!item) return
+      try {
+        this.comps = JSON.parse(item)
+      } catch (e) {
+        alert('Bład wklejenia')
+      }
+    },
+    copyClipboard: function () {
+      localStorage.setItem('pagebuilder_clipboard', JSON.stringify(this.comps))
     },
     addSection: function (it) {
-      this.modalAddSection = false;
-      this.comps.push(JSON.parse(JSON.stringify(it)));
-      this.onChange();
+      this.modalAddSection = false
+      this.comps.push(JSON.parse(JSON.stringify(it)))
+      this.onChange()
     },
     modalSaveSave: function () {
-      console.log(this.pageType);
+      console.log(this.pageType)
       var data = {
         id: this.pageType.id,
         name: this.pageType.name,
         source: this.modelValue,
-        description: this.pageType.description,
-      };
+        description: this.pageType.description
+      }
       if (this.$pagebuilder.axios) {
-        this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
-          this.pageType = {};
-          this.modalSave = false;
-        });
+        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 () {
-      this.pageType.body = this.pageType.source;
-      this.changeBody();
+      this.pageType.body = this.pageType.source
+      this.changeBody()
+    },
+    pasteAllegro: function () {
+      let sections = localStorage.getItem('description_clipboard')
+      try {
+        sections = JSON.parse(sections)
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          sections = [{ name: 'Tekst', cols: [{ type: 'text', value: sections, size: 12 }] }]
+        }
+      }
+
+      const pagebuilder = sections.map((item) => {
+        const columns = []
+
+        if (item.cols && Array.isArray(item.cols)) {
+          item.cols.forEach((col) => {
+            const column = {
+              type: 'container',
+              name: 'col-md-' + col.size,
+              items: [
+                {
+                  name: col.type === 'img' ? 'core_section_image' : 'core_section_textarea',
+                  text: col.value
+                }
+              ]
+            }
+            if (col.type === 'img' && col.figcaption) {
+              column.items[0]['figcaption'] = col.figcaption
+            }
+            columns.push(column)
+          })
+        }
+
+        return { columns, label: '', name: '', type: 'container' }
+      })
+
+      this.comps = pagebuilder
+      this.onChange()
     },
     changeBody() {
-      var t = this;
-      var value = this.pageType.body;
-      var trimmed = value;
+      var t = this
+      var value = this.pageType.body
+      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);
+          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" }] }],
-          },
-        ];
+            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;
-    },
-  },
-};
+      this.modalCopy = false
+      this.modalSave = false
+      this.modalLoad = false
+    }
+  }
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/MagicoPagebuilderPlugin.js

@@ -1,36 +1,40 @@
-import MagicoPagebuilder from "./MagicoPagebuilder.vue";
+import MagicoPagebuilder from './MagicoPagebuilder.vue'
 
 export default {
   install: (app) => {
-    app.component("MagicoPagebuilder", MagicoPagebuilder);
+    app.component('MagicoPagebuilder', MagicoPagebuilder)
 
-    console.log(app);
+    console.log(app)
     app.config.globalProperties.$pagebuilder = {
       items: {
         core_section_text: {
-          label: "Pole nagłowek",
-          svg_off: "",
+          label: 'Pole nagłowek',
+          svg_off: ''
         },
         core_section_textarea: {
-          label: "Pole tekstowe",
-          svg_off: "",
+          label: 'Pole tekstowe',
+          svg_off: ''
         },
         core_section_html: {
-          label: "Pole HTML",
-          svg_off: "",
+          label: 'Pole HTML',
+          svg_off: ''
         },
         core_section_image: {
-          label: "Obrazek",
-          svg_off: "",
+          label: 'Obrazek',
+          svg_off: ''
         },
+        core_section_video: {
+          label: 'Wideo',
+          svg_off: ''
+        }
       },
       axios: null,
       registerPlugin(name, item, component) {
-        this.items[name] = item;
-        if(component){
-          app.component(name, component);
+        this.items[name] = item
+        if (component) {
+          app.component(name, component)
         }
-      },
-    };
-  },
-};
+      }
+    }
+  }
+}

src/components/PagebuilderContent.vue

@@ -1,17 +1,14 @@
 <template>
-  <div
-    style="min-height: 100px"
-    class="pagebuilder-column"
-    :class="value.name"
-  >
+  <div style="min-height: 100px" class="pagebuilder-column" :class="value.name">
+    <h6 v-if="value.user_label">{{ value.user_label }}</h6>
     <b-modal
-      v-model.value="modalAddBox"
+      v-model="modalAddBox"
       class_other="modal-xl"
       v-on:onClose="modalAddBox = false"
       title="Dodaj widżet"
     >
       <div>
-        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
+        <DropdownSectionSection v-if="modalAddBox" @choose="clickAdd"> </DropdownSectionSection>
       </div>
     </b-modal>
 
@@ -22,21 +19,18 @@
       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 class="from-group mb-3">
+          <label class="form-label">Nazwa kolumny</label>
+          <input @input="onChange" v-model="value.user_label" type="text" class="form-control" />
         </div>
+        <div class="from-group mb-3">
+          <label class="form-label">Klasa kolumny</label>
+          <input @input="onChange" v-model="value.class" type="text" class="form-control" />
+        </div>
+        <AosSelect v-model="value.attribute" @aos-changed="onChange" />
       </div>
-      <div>
-        <button
-          @click="modalColumnsSettings = false"
-          class="btn btn-outline-secondary"
-        >
+      <div class="mt-4">
+        <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
           Zapisz i zamknij
         </button>
       </div>
@@ -44,10 +38,11 @@
     <draggable
       :options="{ handle: '.box-move' }"
       v-model="value.items"
+      itemKey="name"
       @start="drag = true"
       @end="
         drag = false;
-        onChange();
+        onChange()
       "
       group="people"
     >
@@ -55,7 +50,8 @@
         <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
           <component
             @itemRemoved="removeItem"
-            :key="index"
+            :key="keyIndex+contentId + element.name+index"
+            :id="keyIndex+contentId + element.name+index"
             v-bind:is="element.name"
             v-bind:value="element"
             v-model="value.items[index]"
@@ -95,53 +91,70 @@
   </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 SectionVideo from './plugin/SectionVideo.vue'
 
-import DropdownSectionSection from "./DropdownSectionSection.vue";
+import SectionHtml from './plugin/SectionHtml.vue'
+import SectionImage from './plugin/SectionImage.vue'
+
+import DropdownSectionSection from './DropdownSectionSection.vue'
+import AosSelect from './AosSelect.vue'
 
 export default {
   data: function () {
-    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
+    
+    return {
+      opcja: '',
+      modalAddBox: false,
+      drag: false,
+
+      modalColumnsSettings: false,
+      contentId: 'cnt' + Math.round(Math.random() * 1000)
+    }
   },
-  props: { value: Object },
-  emits: ["update:modelValue"],
+  props: { value: Object, keyIndex: String },
+  emits: ['update:modelValue','change'],
   components: {
     draggable,
-    "b-modal": MagicoModal,
+    'b-modal': MagicoModal,
     core_section_textarea: SectionTextarea,
     core_section_text: SectionText,
     core_section_html: SectionHtml,
     core_section_image: SectionImage,
-
+    core_section_video: SectionVideo,
     DropdownSectionSection,
+    AosSelect
   },
   methods: {
     onChange: function () {
-      this.$emit("change");
+      this.$emit('change')
     },
     rand: function () {
-      return "component" + Math.random() * 100;
+      return 'c' +  Math.round(Math.random() * 1000)
     },
     removeItem(item) {
-      this.value.items.indexOf(item);
-      this.value.items.splice(this.value.items.indexOf(item), 1);
+      this.value.items.indexOf(item)
+      this.value.items.splice(this.value.items.indexOf(item), 1)
 
-      this.onChange();
+      this.onChange()
     },
     clickAdd: function (item) {
-      console.log(item);
-      this.modalAddBox = false;
-      var a = { name: item, open: true };
-      this.value.items.push(a);
-      this.onChange();
-    },
-  },
-};
+      console.log(item)
+      const sectionobj = this.$pagebuilder.items[item]
+      console.log('addedd', sectionobj)
+      this.modalAddBox = false
+      var a = { name: item, open: true }
+      if (sectionobj.section_id) {
+        a.section_id = sectionobj.section_id
+      }
+      this.value.items.push(a)
+      this.onChange()
+    }
+  }
+}
 </script>
 <style>
 .pagebuilder-column-hover {

src/components/PagebuilderSection.vue

@@ -1,105 +1,87 @@
 <template>
   <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
     <div class="col-sm-12">
+      <h5 class="mt-4" v-if="value.title">{{ value.title }}</h5>
       <div class="row p-0 mt-3 me-2">
-        <PagebuilderContent
-          class="col-sm-12"
-          v-for="(column, index) in value.columns"
-          :value="column"
-          :key="index"
-          @change="onChange"
-        ></PagebuilderContent>
+        <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
+          :key="keyIndex + 's' + index" :id="keyIndex + 's' + index" :keyIndex="keyIndex + 's' + 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"
-        ><i class="material-icons-outlined">sort</i></a
-      >
-      <a
-        href="#"
-        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 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 href="#" 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="t('pagebuilder.section_settings')" @onClose="ustawieniaSave()">
         <div>
-          <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"
-              />
+          <div class="form-group mb-3">
+            <label class="w-100 col-form-label"> {{ t('pagebuilder.section_type') }} </label>
+            <div class="row">
+              <div class="col-6">
+                <button class="btn w-100" @click="setType('container')"
+                  :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'">
+                  {{ t('pagebuilder.container') }}
+                </button>
+              </div>
+              <div class="col-6">
+                <button class="btn w-100" @click="setType('full')"
+                  :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'">
+                  {{ t('pagebuilder.full_width') }}
+                </button>
+              </div>
             </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"
-                />
+          </div>
+
+          <div>
+   
+            <div class="form-group mb-3">
+              <label class="w-100 col-form-label">Tytuł sekcji</label>
+              <input type="text" class="form-control" v-model="value.title">
+            </div>
+            <div class="form-group mb-3 ml-4">
+              <input type="checkbox" id="dropdown" class="form-check-input me-1" v-model="value.dropdown">
+              <label for="dropdown" class="form-check-label">Sekcja rozwijana</label>
+            </div>
+            <div v-if="value.dropdown" class="form-group mb-3 ml-4">
+              <input type="checkbox" id="dropdown_default_open" class="form-check-input me-1"
+                v-model="value.dropdown_default_open">
+              <label for="dropdown_default_open" class="form-check-label">Domyślnie rozwinięta</label>
+            </div>
+
+            <div class="form-group mb-3">
+              <label class="w-100 col-form-label"> Klasa sekcji </label>
+              <input type="text" class="form-control" v-model="value.class" />
+            </div>
+            <AosSelect v-model="value.attribute" />
+            <div class="form-group mb-3">
+              <label class="form-label">Margines górny</label>
+              <div class="input-group">
+                <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>
           </div>
-          <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"
-              />
+          <div class="form-group mb-3">
+            <label class="form-label">Margines dolny</label>
+            <div class="input-group">
+              <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 class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
+            {{ t('pagebuilder.save') }}
           </button>
         </div>
       </b-modal>
@@ -107,45 +89,59 @@
   </div>
 </template>
 <script>
-import grid from "./grid.js";
-import MagicoModal from "./MagicoModal.vue";
-import PagebuilderContent from "./PagebuilderContent.vue";
+import { useI18n } from 'vue-i18n'
+import grid from './grid.js'
+import MagicoModal from './MagicoModal.vue'
+import PagebuilderContent from './PagebuilderContent.vue'
+import AosSelect from './AosSelect.vue'
 export default {
-  props: { value: Object },
-  emits: ["update:modelValue", "copy", "deleteSection"],
+  props: { value: Object, keyIndex: String },
+  emits: ['update:modelValue', 'copy', 'deleteSection', 'change'],
   components: {
-    "b-modal": MagicoModal,
+    'b-modal': MagicoModal,
     PagebuilderContent,
+    AosSelect
   },
   data: function () {
-    return { items: grid, value2: "", show_settings: false };
+    return { items: grid, value2: '', show_settings: false, type: '' }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
   },
   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 {
@@ -155,7 +151,7 @@ export default {
 .pb_section {
   background-color: #fff;
 
-  > div {
+  >div {
     overflow: hidden;
   }
 }
@@ -168,6 +164,7 @@ export default {
   margin-bottom: 0px;
   margin-right: 4px;
 }
+
 .material-icons-outlined {
   font-size: 20px;
 }

src/components/PagebuilderTemplateLoad.vue

@@ -1,19 +1,20 @@
 <template>
     <div class="form form-group">
         <div class="ms-3">
-            <div class="mb-3" v-for="item, ii in items" :key="ii" :value="item">{{ item.name }} <button
-                    class="btn btn-outline-primary" @click="itemselected = item; changeSelect()">Wczytaj</button>
+            <div class="mb-3 w-100" v-for="item, ii in items" :key="ii" :value="item"> <button
+                    class="btn btn-outline-secondary w-100" @click="itemselected = item; changeSelect()">Wczytaj {{ item.name }}</button>
             </div>
-
         </div>
         <div v-show="items.length == 0"><i>Brak zapisanych szablonów</i></div>
     </div>
 </template>
 <script>
 export default {
-    created() {
+    mounted() {
         this.getPost();
     },
+    emits: ['update:modelValue','change'],
+
     data: function () {
         return {
             items: [],

src/components/PagebuilderTemplateSave.vue

@@ -72,6 +72,7 @@ export default {
       id: 0,
     };
   },
+  emits: ['update:modelValue','change'],
   methods: {
     change() {
       this.$emit("update:modelValue", {

src/components/grid.js

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

src/components/plugin/SectionImage.vue

@@ -1,200 +1,228 @@
-
 <template>
-    <div class="row m-0 p-0 align-items-center">
-
-        <div class="col-sm-12 col-md-6 p-0">
-            <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
-        </div>
-
-        <div class="col-sm-12 col-md-6 p-0 text-end">
-            <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"><i
-                    class="material-icons-outlined">create</i></a>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
-                    class="material-icons-outlined">delete</i></a>
-        </div>
-        <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
-            <div>
-                <div class="p-0 m-0">
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.label }}</label>
-                        <div class="input-group mb-3">
-                            <input class="form-control" type="text" v-model="text" />
-                            <button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
-                        </div>
-                    </div>
-
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.title }}</label>
-                        <input class="form-control" type="text" v-model="title" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.alt }}</label>
-                        <input class="form-control" type="text" v-model="alt" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">Legenda obrazka</label>
-                        <input class="form-control" type="text" v-model="figcaption" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.scaling }}</label>
-                        <select v-model="scale" class="form-select">
-                            <option v-for="item, ii  in scales" :key="ii" :value="item.key">{{ item.modelValue }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="w-100 col-form-label">{{ langs.href }}</label>
-                        <input class="form-control" type="text" v-model="href" />
-                    </div>
-
-                    <fieldset class="mt-3" v-show="scale == 'tak'">
-                        <legend>{{ langs.proportions }}</legend>
-                        Brak możliwości skalowania obrazków z zewnętrznego serwera.
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.width
-                        }}</label><input class="form-control" v-model="width"></div>
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.height
-                        }}</label><input class="form-control" v-model="height"></div>
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
-                        }}</label><select class="form-select" v-model="ratio">
-                                <option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
-                            </select></div>
-
-                    </fieldset>
-
-                    <img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
-                </div>
-
-            </div>
-            <div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
-                    @click.prevent="onCloseModal">{{
-                            langs.saveclose
-                    }}</button></div>
-        </b-modal>
-
-        <div v-if="text">
-            <img :src="text" style="width:100px;" />
-        </div>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
     </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"
+        ><i class="material-icons-outlined">create</i></a
+      >
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
+      <div>
+        <div class="p-0 m-0">
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.label }}</label>
+            <div class="input-group mb-3">
+              <input class="form-control" type="text" v-model="text" />
+              <button
+                @click="chooseImage"
+                class="btn btn-outline-secondary"
+                type="button"
+                id="button-addon2"
+              >
+                Wybierz
+              </button>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.title }}</label>
+            <input class="form-control" type="text" v-model="title" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.alt }}</label>
+            <input class="form-control" type="text" v-model="alt" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">Legenda obrazka</label>
+            <input class="form-control" type="text" v-model="figcaption" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.scaling }}</label>
+            <select v-model="scale" class="form-select">
+              <option v-for="(item, ii) in scales" :key="ii" :value="item.key">
+                {{ item.modelValue }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.href }}</label>
+            <input class="form-control" type="text" v-model="href" />
+          </div>
+
+          <fieldset class="mt-3" v-show="scale == 'tak'">
+            <legend>{{ langs.proportions }}</legend>
+            Brak możliwości skalowania obrazków z zewnętrznego serwera.
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.width }}</label
+              ><input class="form-control" v-model="width" />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.height }}</label
+              ><input class="form-control" v-model="height" />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.ratio }}</label
+              ><select class="form-select" v-model="ratio">
+                <option v-for="(item, ri) in ratios" :key="ri">{{ item }}</option>
+              </select>
+            </div>
+          </fieldset>
+          <div class="form-group">
+            <label class="w-100 col-form-label">Używaj lightbox</label>
+
+            <select v-model="img_lightbox" class="form-select">
+              <option :value="false">NIE</option>
+              <option :value="true">TAK</option>
+            </select>
+          </div>
+          <img v-if="text" :src="text" style="max-width: 100%; max-height: 30vh; width: 100%;object-fit:contain;" class="my-2" />
+        </div>
+      </div>
+      <div class="text-center mt-4">
+        <button class="btn btn-outline-secondary mr-1" @click.prevent="onCloseModal">
+          {{ langs.saveclose }}
+        </button>
+      </div>
+    </b-modal>
+
+    <div v-if="text">
+      <img :src="text" style="width: 100px" />
+    </div>
+  </div>
 </template>
 <script>
 import MagicoModal from './../MagicoModal.vue'
 
 export default {
-    props: {
-        modelValue: Object,
-    },
-    data: function () {
-        return {
-            langs: {
-                saveclose: "Zapisz",
-                label: "Obrazek",
-                close: "Zamknij",
-                removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
-                fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
-                scaling: "Skalowanie",
-                scalingyes: "Tak",
-                scalingno: "Nie",
-                proportions: "Proporcje",
-                height: "Wysokość",
-                width: "Szerokość",
-                ratio: "Radio",
-                href: "Adres URL",
-                alt: "Tekst alternatywny",
-                title: "Tytuł",
-            },
-            modalBox: false,
-            items: [],
-            text: '',
-            name: '',
-            alt: '',
-            href: '',
-            title: '',
-            width: 1800,
-            height: 600,
-            ratio: 'crop',
-            figcaption: '',
-            ratios: ['crop', 'auto', 'width', 'height'],
-            scales: [{
-                "key": "nie",
-                "value": "Nie"
-            }, {
-                "key": "tak",
-                "value": "Tak"
-            }],
-            scale: "Nie"
+  props: {
+    modelValue: Object
+  },
+  data: function () {
+    return {
+      langs: {
+        saveclose: 'Zapisz',
+        label: 'Obrazek',
+        close: 'Zamknij',
+        removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
+        fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
+        scaling: 'Skalowanie',
+        scalingyes: 'Tak',
+        scalingno: 'Nie',
+        proportions: 'Proporcje',
+        height: 'Wysokość',
+        width: 'Szerokość',
+        ratio: 'Radio',
+        href: 'Adres URL',
+        alt: 'Tekst alternatywny',
+        title: 'Tytuł'
+      },
+      modalBox: false,
+      items: [],
+      text: '',
+      name: '',
+      alt: '',
+      href: '',
+      title: '',
+      width: 1800,
+      height: 600,
+      ratio: 'crop',
+      figcaption: '',
+      img_lightbox: true,
+      ratios: ['crop', 'auto', 'width', 'height'],
+      scales: [
+        {
+          key: 'nie',
+          value: 'Nie'
+        },
+        {
+          key: 'tak',
+          value: 'Tak'
         }
+      ],
+      scale: 'Nie'
+    }
+  },
+  mounted: function () {
+    console.log('mount image', this.modelValue)
+    this.alt = this.modelValue && this.modelValue.alt ? this.modelValue.alt : this.alt
+    this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
+    this.width = this.modelValue && this.modelValue.width ? this.modelValue.width : this.width
+    this.height = this.modelValue && this.modelValue.height ? this.modelValue.height : this.height
+    this.ratio = this.modelValue && this.modelValue.ratio ? this.modelValue.ratio : this.ratio
+    this.scale = this.modelValue && this.modelValue.scale ? this.modelValue.scale : this.scale
+    this.href = this.modelValue && this.modelValue.href ? this.modelValue.href : this.href
+    this.figcaption =
+      this.modelValue && this.modelValue.figcaption ? this.modelValue.figcaption : this.figcaption
+    this.img_lightbox =
+      this.modelValue && this.modelValue.img_lightbox
+        ? this.modelValue.img_lightbox
+        : this.img_lightbox
+    if (this.modelValue.open) this.modalBox = true
+  },
+  components: {
+    'b-modal': MagicoModal
+  },
+  methods: {
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
     },
-    mounted: function () {
-        console.log('mount image', this.modelValue);
-        this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
-        this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
-        this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
-        this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
-        this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
-        this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
-        this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
-
-        if (this.modelValue.open) this.modalBox = true;
+    chooseImage: function () {
+      if (this.$filechooser) {
+        let vm = this
+        this.$filechooser.open({
+          chooseCallback: function (ev) {
+            vm.text = ev.publicUrl
+          }
+        })
+      } else {
+        alert('No FileChooser implemented')
+      }
     },
-    components: {
-        'b-modal': MagicoModal,
+    onCloseModal: function () {
+      this.modalBox = false
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text,
+        height: this.height,
+        width: this.width,
+        ratio: this.ratio,
+        scale: this.scale,
+        alt: this.alt,
+        href: this.href,
+        title: this.title,
+        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
+      })
     },
-    methods: {
-        removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
-        },
-        chooseImage: function () {
-            if (this.$filechooser) {
-                let vm = this;
-                this.$filechooser.open({
-                    chooseCallback: function (ev) {
-                        vm.text = ev.publicUrl
-                    }
-                })
-            }else{
-                alert('No FileChooser implemented')
-            }
-        },
-        onCloseModal: function () {
-            this.modalBox = false;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
-                height: this.height,
-                width: this.width,
-                ratio: this.ratio,
-                scale: this.scale,
-                alt: this.alt,
-                href: this.href,
-                title: this.title,
-                figcaption: this.figcaption,
-            })
-        },
-        setText: function (item) {
-            this.text = 'files/images/' + item;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
-                height: this.height,
-                width: this.width,
-                ratio: this.ratio,
-                scale: this.scale,
-                alt: this.alt,
-                href: this.href,
-                title: this.title,
-                figcaption: this.figcaption,
-            })
-        },
-        modalOpen: function () {
-            this.modalBox = !this.modalBox;
-            //this.getItems();
-        },
-
+    setText: function (item) {
+      this.text = 'files/images/' + item
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text,
+        height: this.height,
+        width: this.width,
+        ratio: this.ratio,
+        scale: this.scale,
+        alt: this.alt,
+        href: this.href,
+        title: this.title,
+        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
+      })
     },
-
-};
-</script>
+    modalOpen: function () {
+      this.modalBox = !this.modalBox
+      //this.getItems();
+    }
+  }
+}
+</script>

src/components/plugin/SectionText.vue

@@ -1,124 +1,149 @@
 <template>
-    <div class="row m-0 p-0 align-items-center">
-        <div class="col-sm-12 col-md-6 p-0 mb-0">
-            <span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
-        </div>
-
-        <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>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
-                    class="material-icons-outlined">delete</i></a>
-        </div>
-        <div class="ms-2">
-            <strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
-            <strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
-        </div>
-        <b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
-
-            <div class="form-group">
-                <label class="w-100 col-form-label">{{ langs.content }}</label>
-                <input class="form-control" type="text" v-model="text" />
-            </div>
-            <div class="form-grou mb-2">
-                <label class="w-100 col-form-label">{{ langs.type }}</label>
-                <select class="form-select" v-model="h_type">
-                    <option value="">{{ langs.typeplaintext }}</option>
-                    <option value="h1">{{ langs.typeheader }} 1</option>
-                    <option value="h2">{{ langs.typeheader }} 2</option>
-                    <option value="h3">{{ langs.typeheader }} 3</option>
-                    <option value="h4">{{ langs.typeheader }} 4</option>
-                    <option value="h5">{{ langs.typeheader }} 5</option>
-                    <option value="h6">{{ langs.typeheader }} 6</option>
-
-                </select>
-            </div>
-            <div class="form-group">
-                <label class="w-100 col-form-label">Wyrównanie</label>
-                <div class="">
-                    <button v-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
-                        :class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'">
-                        <span class="material-icons-outlined">format_align_left</span>
-                    </button>
-                    <button v-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
-                        :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
-                        <span class="material-icons-outlined">format_align_center</span>
-                    </button>
-                    <button v-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
-                        :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
-                        <span class="material-icons-outlined">format_align_right</span>
-                    </button>
-                    <button v-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
-                        :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
-                        <span class="material-icons-outlined">format_align_justify</span>
-                    </button>
-                </div>
-            </div>
-
-            <div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
-                    langs.saveclose
-            }}</button></div>
-        </b-modal>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0 mb-0">
+      <span class="material-icons-outlined me-1 box-move" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_text') }}</span>
     </div>
+
+    <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
+      >
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <div class="ms-2">
+      <strong class="font-weight-bold">{{ t('pagebuilder.type') }}:</strong> {{ h_type }},
+      <strong class="font-weight-bold">{{ t('pagebuilder.content') }}:</strong> {{ text ? text : ' ' }}
+    </div>
+    <b-modal v-model="modalBox" :title="t('pagebuilder.widget_text')" @close="onCloseModal">
+      <div class="form-group">
+        <label class="w-100 col-form-label">{{ t('pagebuilder.content') }}</label>
+        <input class="form-control" type="text" v-model="text" />
+      </div>
+      <div class="form-grou mb-2">
+        <label class="w-100 col-form-label">{{ t('pagebuilder.type') }}</label>
+        <select class="form-select" v-model="h_type">
+          <option value="">{{ langs.typeplaintext }}</option>
+          <option value="h1">{{ langs.typeheader }} 1</option>
+          <option value="h2">{{ langs.typeheader }} 2</option>
+          <option value="h3">{{ langs.typeheader }} 3</option>
+          <option value="h4">{{ langs.typeheader }} 4</option>
+          <option value="h5">{{ langs.typeheader }} 5</option>
+          <option value="h6">{{ langs.typeheader }} 6</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="w-100 col-form-label">{{ t('pagebuilder.align') }}</label>
+        <div class="">
+          <button
+            vx-tooltip
+            title="Wyrównanie do lewej"
+            @click="align = 'left'"
+            class="btn btn-icon-sm"
+            :class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'"
+          >
+            <span class="material-icons-outlined">format_align_left</span>
+          </button>
+          <button
+            vx-tooltip
+            title="Wyrównanie do środka"
+            @click="align = 'center'"
+            class="btn btn-icon-sm"
+            :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'"
+          >
+            <span class="material-icons-outlined">format_align_center</span>
+          </button>
+          <button
+            vx-tooltip
+            title="Wyrównanie do prawej"
+            @click="align = 'right'"
+            class="btn btn-icon-sm"
+            :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'"
+          >
+            <span class="material-icons-outlined">format_align_right</span>
+          </button>
+          <button
+            vx-tooltip
+            title="Justowanie"
+            @click="align = 'justify'"
+            class="btn btn-icon-sm"
+            :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'"
+          >
+            <span class="material-icons-outlined">format_align_justify</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">
+          {{ langs.saveclose }}
+        </button>
+      </div>
+    </b-modal>
+  </div>
 </template>
 <script>
+import { useI18n } from 'vue-i18n'
 import MagicoModal from './../MagicoModal.vue'
 
 export default {
-    components: {
-        'b-modal': MagicoModal,
-    },
-    props: {
-        modelValue: Object
-    },
-    emits:['update:modelValue'],
-    data: function () {
-        return {
-            langs: {
-                label: "Tekst",
-                close: "Zaknij",
-                content: "Treść",
-                type: "Typ",
-                typeplaintext: "Tekst",
-                typeheader: "Nagłowek",
-                saveclose: "Zapisz"
-            },
-            modalBox: false,
-            text: '',
-            name: '',
-            h_type: '',
-            align: 'left',
-        }
-    },
-    mounted: function () {
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
-        this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
-        if (this.modelValue.open) this.modalBox = true;
-        console.log('mounted text');
-        this.$emit('update:modelValue', this.modelValue);
-
-    },
-
-    methods: {
-        removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
-        },
-        onCloseModal: function () {
-            this.modalBox = false;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
-                h_type: this.h_type,
-                align: this.align,
-            })
-        }
-    },
-    destroy() {
-        this.modalBox = false;
+  components: {
+    'b-modal': MagicoModal
+  },
+  props: {
+    modelValue: Object
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  emits: ['update:modelValue'],
+  data: function () {
+    return {
+      langs: {
+        label: 'Tekst',
+        close: 'Zaknij',
+        content: 'Treść',
+        type: 'Typ',
+        typeplaintext: 'Tekst',
+        typeheader: 'Nagłowek',
+        saveclose: 'Zapisz'
+      },
+      modalBox: false,
+      text: '',
+      name: '',
+      h_type: '',
+      align: 'left'
     }
+  },
+  mounted: function () {
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
+    this.h_type = this.modelValue && this.modelValue.h_type ? this.modelValue.h_type : this.h_type
+    this.align = this.modelValue && this.modelValue.align ? this.modelValue.align : this.align
+    if (this.modelValue.open) this.modalBox = true
+    console.log('mounted text')
+    this.$emit('update:modelValue', this.modelValue)
+  },
 
+  methods: {
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
+    },
+    onCloseModal: function () {
+      this.modalBox = false
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text,
+        h_type: this.h_type,
+        align: this.align
+      })
+    }
+  },
+  destroy() {
+    this.modalBox = false
+  }
 }
-</script>
+</script>

src/components/plugin/SectionTextarea.vue

@@ -1,107 +1,155 @@
 <template>
-    <div class="row m-0 p-0 align-items-center">
-        <div class="col-sm-12 col-md-6 p-0">
-            <span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
-        </div>
-
-        <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"
-                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" />
-                    </div>
-                </div>
-                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
-                        langs.saveclose
-                }}</button></div>
-            </b-modal>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
-                    class="material-icons-outlined">delete</i></a>
-        </div>
-        <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_textarea') }}</span>
     </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="openModal" 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="t('pagebuilder.widget_textarea')"
+        v-on:hide="onCloseModal"
+      >
+        <div style="min-height: 400px">
+          <div class="mb-4" v-if="delayModal">
+            <div class="form-group">
+              <editor
+                api-key="no-api-key"
+                rows="12"
+                class="form-control"
+                v-model="text"
+                :init="{ ...vtinymce, language: locale }"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="d-flex">
+          <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
+            {{ t('pagebuilder.save') }}
+          </button>
+        </div>
+      </b-modal>
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
+  </div>
 </template>
 <script>
 import MagicoModal from './../MagicoModal.vue'
 import tinymceConfig from '../tinymce/config.js'
 
 import Editor from '@tinymce/tinymce-vue'
+import { nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 export default {
-    emits:['update:modelValue'],
-    components: {
-        'b-modal': MagicoModal,
+  emits: ['update:modelValue'],
+  components: {
+    'b-modal': MagicoModal,
 
-        'editor': Editor // <- To jest TINYMCE
-    },
-    props: {
-        modelValue: Object
-    },
-    mounted: function () {
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        if (this.modelValue.open) this.modalBox = true;
-        console.log('mounted textarea');
-        this.$emit('update:modelValue', this.modelValue);
-
-    },
-    data: function () {
-        return {
-            langs: {
-                saveclose: "Zapisz",
-                label: "Pole tekstowe",
-                close: "Zamknij"
-            },
-            height: window.innerHeight - window.innerHeight / 4,
-            modalBox: false,
-            text: '',
-            name: 'core_section_textarea',
-            vtinymce: Object.assign(tinymceConfig, {
-                file_picker_callback: (callback) => {
-                    if (this.$filechooser) {
-                        this.$filechooser.open({
-                            chooseCallback: function (ev) {
-                                console.log('filePathChosed', ev)
-                                callback(ev.publicUrl);
-                            }
-                        })
-                    }
-                }
-            }),
-        }
-    },
-    watch: {
-        modalBox: function () {
-            if (this.modalBox) {
-                document.addEventListener('focusin', (e) => {
-                    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
-                        e.stopImmediatePropagation();
-                    }
-                });
-            }
-            console.log('focus');
-        },
-    },
-    computed: {
-        ctext: function () {
-            return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
-        }
-    },
-    methods: {
-        removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
-        },
-        onCloseModal: function () {
-            this.modalBox = false;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
+    editor: Editor // <- To jest TINYMCE
+  },
+  props: {
+    modelValue: Object
+  },
+  setup() {
+    const { t, locale } = useI18n()
+    return { t, locale }
+  },
+  mounted: function () {
+    let vm = this
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
+    if (this.modelValue.open) {
+      this.modalBox = true
+      setTimeout(function () {
+        vm.delayModal = true
+      }, 200)
+    }
+    console.log('mounted textarea')
+    this.$emit('update:modelValue', this.modelValue)
+  },
+  data: function () {
+    return {
+      langs: {
+        saveclose: 'Zapisz',
+        label: 'Pole tekstowe',
+        close: 'Zamknij'
+      },
+      height: window.innerHeight - window.innerHeight / 4,
+      modalBox: false,
+      delayModal: false,
+      editor: null,
+      text: '',
+      name: 'core_section_textarea',
+      vtinymce: Object.assign(tinymceConfig, {
+     
+        file_picker_callback: (callback) => {
+          if (this.$filechooser) {
+            this.$filechooser.open({
+              chooseCallback: function (ev) {
+                console.log('filePathChosed', ev)
+                callback(ev.publicUrl)
+              }
             })
+          }
         }
+      })
+    }
+  },
+  watch: {
+    modalBox: function () {
+      if (this.modalBox) {
+        document.addEventListener('focusin', (e) => {
+          if (
+            e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
+          ) {
+            e.stopImmediatePropagation()
+          }
+        })
+      }
+      console.log('focus')
+    }
+  },
+  computed: {
+    ctext: function () {
+      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
+    }
+  },
+  methods: {
+    openModal: function () {
+      let vm = this
+      this.modalBox = true
+      setTimeout(function () {
+        vm.delayModal = true
+      }, 200)
+      // nextTick(() => {
+      //   vm.delayModal = true
+      // })
     },
-
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
+    },
+    onCloseModal: function () {
+      setTimeout(
+        function () {
+          this.modalBox = false
+          this.delayModal = false
+          this.$emit('update:modelValue', {
+            name: this.name,
+            text: this.text
+          })
+        }.bind(this),
+        200
+      )
+    }
+  }
 }
-</script>
+</script>

src/components/plugin/SectionVideo.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2 my-1" style="cursor: move">open_with</span>
+      <span class="font-weight-bold text-primary">{{
+        t('pagebuilder.core_section_video')
+      }}</span>
+    </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="toggleModal" title="Edytuj" class="text-primary me-2 my-1">
+        <i class="material-icons-outlined">create</i>
+      </a>
+      <MagicoModal
+        v-model="modalBox"
+        v-on:close="onCloseModal"
+        size="xl"
+        :title="t('pagebuilder.core_section_video')"
+      >
+        <div>
+          <button
+            @click.prevent="changeView('youtube')"
+            :class="type == 'youtube' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            Youtube
+          </button>
+          <button
+            @click.prevent="changeView('vimeo')"
+            :class="type == 'vimeo' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            Vimeo
+          </button>
+          <button
+            @click.prevent="changeView('file')"
+            :class="type == 'file' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            {{ t('pagebuilder.core_section_video_file') }}
+          </button>
+          <div v-if="type === 'youtube'">
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_ytlink')
+              }}</label>
+              <input
+                @change="generateYouTubeEmbedCode"
+                type="text"
+                class="form-control"
+                v-model="link"
+              />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_ytcode')
+              }}</label>
+              <textarea class="form-control" v-model="text"></textarea>
+            </div>
+          </div>
+          <div v-if="type === 'vimeo'">
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_vimeocode')
+              }}</label>
+              <textarea class="form-control" v-model="text"></textarea>
+            </div>
+          </div>
+          <div v-if="type === 'file'">
+            <!-- <div>
+              <button
+                class="btn btn-outline-secondary me-1 my-1"
+                v-for="item in items"
+                :key="item"
+                @click.prevent="setText(item)"
+                @dblclick="deleteItem(item)"
+              >
+                {{ item }}
+              </button>
+
+            </div> -->
+            <div>
+              <div class="form-group">
+                <label class="w-100 col-form-label">{{
+                  t('pagebuilder.core_section_video_title')
+                }}</label>
+                <input class="form-control" type="text" v-model="text" />
+                
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-end mt-4">
+          <button class="btn btn-outline-secondary me-1 my-1" @click.prevent="onCloseModal">
+            {{ t('pagebuilder.save') }}
+          </button>
+        </div>
+      </MagicoModal>
+      <a href="#" title="Usuń" @click.prevent="removeItem" class="text-danger">
+        <i class="material-icons-outlined">delete</i>
+      </a>
+    </div>
+    <div>
+      <strong class="font-weight-bold">{{ t('pagebuilder.core_section_video_title') }}:</strong>
+      {{ text || ' ' }}<br />
+      <strong class="font-weight-bold">{{ t('pagebuilder.core_section_video_type') }}:</strong>
+      {{ type }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+import axios from 'axios'
+import MagicoModal from '../MagicoModal.vue'
+import { useI18n } from 'vue-i18n'
+export default {
+  name: 'CoreSectionVideo',
+  components: {
+    MagicoModal
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n()
+
+    const modalBox = ref(false)
+    const items = ref([])
+    const type = ref('file')
+    const text = ref('')
+    const link = ref('')
+    const name = ref('')
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        name.value = newValue?.name || ''
+        text.value = newValue?.text || ''
+        type.value = newValue?.type || 'file'
+        if (newValue?.open) modalBox.value = true
+      },
+      { immediate: true }
+    )
+
+    const toggleModal = () => {
+      modalBox.value = !modalBox.value
+      getItems()
+    }
+
+    const onCloseModal = () => {
+      modalBox.value = false
+      emit('update:modelValue', { name: name.value, text: text.value, type: type.value })
+    }
+
+    const changeView = (viewType) => {
+      type.value = viewType
+    }
+
+    const setText = (item) => {
+      type.value = 'file'
+    }
+
+    const deleteItem = (item) => {
+ 
+    }
+
+    const generateYouTubeEmbedCode = () => {
+      const urlParams = new URLSearchParams(new URL(link.value).search)
+      const videoId = urlParams.get('v')
+      text.value = videoId
+        ? `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
+        : t('Nieprawidłowy link do YouTube.')
+    }
+
+    const getItems = () => {
+     
+    }
+
+    const finishUpload = (e) => {
+     
+    }
+
+    const removeItem = () => {
+      emit('itemRemoved', props.value)
+    }
+
+    return {
+      t,
+      modalBox,
+      items,
+      type,
+      text,
+      link,
+      name,
+      toggleModal,
+      onCloseModal,
+      changeView,
+      setText,
+      deleteItem,
+      generateYouTubeEmbedCode,
+      getItems,
+      finishUpload,
+      removeItem
+    }
+  }
+}
+</script>

src/components/registerSections.js

@@ -1,16 +1,20 @@
-import PagebuilderSectionPlugin from "../../../magico-section/src/components/PagebuilderSectionPlugin.vue";
+import PagebuilderSectionPlugin from 'magico-section/src/components/PagebuilderSectionPlugin.vue'
 
 export function useSections() {
-  console.log('DUPA',PagebuilderSectionPlugin);
-  function register(vm) {
-    vm.registerPlugin(
-      "SectionX1",
-      {
-        label: "Sekcja 1",
-        svg_off: ``,
-      },
-      PagebuilderSectionPlugin
-    );
+  function register(vm, sections) {
+    console.log('sections', sections, vm)
+    sections.forEach((item) => {
+      vm.registerPlugin(
+        'Sections' + item.site_section_id,
+        {
+          label: item.title,
+          svg_off: ``,
+          section_id: item.section_id,
+          image: item.image
+        },
+        PagebuilderSectionPlugin
+      )
+    })
   }
-  return { register };
+  return { register }
 }

src/components/tinymce/ai.js

@@ -0,0 +1,54 @@
+export function addAI(editor) {
+  editor.ui.registry.addButton('ai_button', {
+    text: 'Wygeneruj treść AI',
+    onAction: async function () {
+      open({
+        callback: (data) => {
+          editor.setContent(data.content || '<p>Brak treści</p>')
+        }
+      })
+
+      //       const count = 1000
+      //       const lang = 'pl'
+      //       const prompt = `Twoim zadaniem jest stworzenie nowego wpisu na stronę www na podstawie dostarczonej treści strony.
+      // Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count} znaków.
+      // Metatagi wygeneruj na podstawie wygenerowanej przez ciebie treści.
+      // Odpowiedź wygeneruj w języku określanym przez kod kraju: "${lang}".
+      // Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
+      // {
+      // "title": "",
+      // "page_title": "",
+      // "meta_description": "",
+      // "meta_keywords": "",
+      // "og_title": "",
+      // "og_description": "",
+      // "content": ""
+      // }`
+
+      //       // Tu możesz wysłać zapytanie do swojego endpointa lub OpenAI
+      //       const response = await fetch('/api/generate', {
+      //         method: 'POST',
+      //         headers: { 'Content-Type': 'application/json' },
+      //         body: JSON.stringify({ prompt })
+      //       })
+
+      //       const data = await response.json()
+      //       editor.setContent(data.content || '<p>Brak treści</p>')
+    }
+  })
+}
+
+import { createApp, h } from 'vue'
+import AIModal from '../AIModal.vue'
+
+export function open(props = {}) {
+  const app = createApp({
+    render: () => h(AIModal, props)
+  })
+
+  const mountNode = document.createElement('div')
+  document.body.appendChild(mountNode)
+  app.mount(mountNode)
+
+  return app
+}

src/components/tinymce/config.js

@@ -1,118 +1,168 @@
+import { addAI } from './ai'
 export default {
-    autoresize_max_height: window.innerHeight - window.innerHeight / 4,
-    width: '100%',
-    selector: "textarea.wysiwyg",
-    language: "pl",
-    language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
-    forced_root_block: "p",
-    entity_encoding: 'named',
-    entities: '160,nbsp,38,amp,60,lt,62,gt',
-    valid_elements: '*[*]',
-    document_base_url: window.location,
-    relative_urls: false,
-    browser_spellcheck: true,
-    autoresize_bottom_margin: 10,
-    autoresize_min_height: 90,
-    image_caption: true,
-    image_description: true,
-    image_title: true,
-    promotion: false,
-    visualblocks_default_state: true,
-    visualchars_default_state: false,
-    formats: {
-        mainparagraph: {
-            inline: 'span',
-            styles: {
-                fontSize: '18px'
-            },
-            classes: 'main_paragraph'
-        },
-        firstlink: {
-            inline: 'span',
-            styles: {
-                fontSize: '16px'
-            },
-            classes: 'default_button_span black'
-        },
-        secondlink: {
-            inline: 'span',
-            styles: {
-                fontSize: '16px'
-            },
-            classes: 'default_button_span'
-        }
+  autoresize_max_height: window.innerHeight - window.innerHeight / 4,
+  width: '100%',
+  selector: 'textarea.wysiwyg',
+  language: 'pl',
+  language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
+  forced_root_block: 'p',
+  entity_encoding: 'named',
+  entities: '160,nbsp,38,amp,60,lt,62,gt',
+  valid_elements: '*[*]',
+  document_base_url: window.location,
+  relative_urls: false,
+  browser_spellcheck: true,
+  autoresize_bottom_margin: 10,
+  autoresize_min_height: 90,
+  image_caption: true,
+  image_description: true,
+  image_title: true,
+  promotion: false,
+  visualblocks_default_state: true,
+  visualchars_default_state: false,
+  setup(editor) {
+    addAI(editor)
+  },
+  formats: {
+    mainparagraph: {
+      inline: 'span',
+      styles: {
+        fontSize: '18px'
+      },
+      classes: 'main_paragraph'
     },
-    style_formats: [{
-        title: 'Headers',
-        items: [{
-            title: 'h1',
-            block: 'h1'
-        }, {
-            title: 'h2',
-            block: 'h2'
-        }, {
-            title: 'h3',
-            block: 'h3'
-        }, {
-            title: 'h4',
-            block: 'h4'
-        }, {
-            title: 'h5',
-            block: 'h5'
-        }, {
-            title: 'h6',
-            block: 'h6'
-        }]
-    }, {
-        title: 'Blocks',
-        items: [{
-            title: 'Główny akapit',
-            format: 'mainparagraph'
-        }, {
-            title: 'LinkURL - 1',
-            format: 'firstlink'
-        }, {
-            title: 'LinkURL - 2',
-            format: 'secondlink'
-        }, {
-            title: 'p',
-            block: 'p'
-        }, {
-            title: 'div',
-            block: 'div'
-        }, {
-            title: 'pre',
-            block: 'pre'
-        }]
-    }, {
-        title: 'Containers',
-        items: [{
-            title: 'section',
-            block: 'section',
-            wrapper: true,
-            merge_siblings: false
+    firstlink: {
+      inline: 'span',
+      styles: {
+        fontSize: '16px'
+      },
+      classes: 'default_button_span black'
+    },
+    secondlink: {
+      inline: 'span',
+      styles: {
+        fontSize: '16px'
+      },
+      classes: 'default_button_span'
+    }
+  },
+  style_formats: [
+    {
+      title: 'Headers',
+      items: [
+        {
+          title: 'h1',
+          block: 'h1'
+        },
+        {
+          title: 'h2',
+          block: 'h2'
+        },
+        {
+          title: 'h3',
+          block: 'h3'
+        },
+        {
+          title: 'h4',
+          block: 'h4'
+        },
+        {
+          title: 'h5',
+          block: 'h5'
+        },
+        {
+          title: 'h6',
+          block: 'h6'
+        }
+      ]
+    },
+    {
+      title: 'Blocks',
+      items: [
+        {
+          title: 'Główny akapit',
+          format: 'mainparagraph'
+        },
+        {
+          title: 'LinkURL - 1',
+          format: 'firstlink'
+        },
+        {
+          title: 'LinkURL - 2',
+          format: 'secondlink'
+        },
+        {
+          title: 'p',
+          block: 'p'
+        },
+        {
+          title: 'div',
+          block: 'div'
+        },
+        {
+          title: 'pre',
+          block: 'pre'
+        }
+      ]
+    },
+    {
+      title: 'Containers',
+      items: [
+        {
+          title: 'section',
+          block: 'section',
+          wrapper: true,
+          merge_siblings: false
         },
         //{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
         {
-            title: 'blockquote',
-            block: 'blockquote',
-            wrapper: true
-        },
-            //{ title: 'hgroup', block: 'hgroup', wrapper: true },
-            //{ title: 'aside', block: 'aside', wrapper: true },
-            //{ title: 'figure', block: 'figure', wrapper: true }
-        ]
-    }],
-    paste_word_valid_elements: "table,tr,td,th,b,strong,i,em,h1,h2, strong",
-    valid_styles: {
-        '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius',
+          title: 'blockquote',
+          block: 'blockquote',
+          wrapper: true
+        }
+        //{ title: 'hgroup', block: 'hgroup', wrapper: true },
+        //{ title: 'aside', block: 'aside', wrapper: true },
+        //{ title: 'figure', block: 'figure', wrapper: true }
+      ]
+    }
+  ],
+  paste_word_valid_elements: 'table,tr,td,th,b,link,strong,i,em,h1,h2, strong',
+  valid_styles: {
+    '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius'
+  },
+  plugins: ['autoresize', 'link', 'image', 'media', 'lists', 'nonbreaking'],
+  removed_menuitems: 'newdocument',
+  toolbarxx:
+    'undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor | ai_button',
+  toolbar1:
+    'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link image | media | forecolor backcolor ai_button',
+  toolbar2: '',
+  menubar: true,
+  menu: {
+  
+    edit: {
+      title: 'Edit',
+      items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
     },
-    plugins: ['autoresize'],
-    removed_menuitems: 'newdocument',
-    toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
-    toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
-    toolbar2: '',
-    menubar: true,
-    
-    
-}
+    view: {
+      title: 'View',
+      items:
+        ' visualaid visualchars visualblocks'
+    },
+    insert: {
+      title: 'Insert',
+      items:
+        'image link media | hr nonbreaking'
+    },
+    format: {
+      title: 'Format',
+      items:
+        'bold italic underline strikethrough superscript subscript codeformat | forecolor backcolor | language | removeformat'
+    },
+    table: {
+      title: 'Table',
+      items: 'inserttable | cell row column | advtablesort | tableprops deletetable'
+    },
+    help: { title: 'Help', items: 'help' }
+  }
+}

src/locale/en.js

@@ -0,0 +1,26 @@
+export default {
+  widget_textarea: 'Text area',
+  close: 'Close',
+  save: 'Save',
+  align: 'Alignment',
+  type: 'Type',
+  content: 'Content',
+  widget_text: 'Content',
+  add_section: 'Add section',
+  template: 'Templates',
+  import_template: 'Load template',
+  save_template: 'Save template',
+  copy_template: 'Save to clipboard',
+  paste_template: 'Paste from clipboard',
+  section_type: 'Section type',
+  container: 'Container',
+  full_width: '100% width',
+  section_settings: 'Section settings',
+  core_section_video: 'Video',
+  core_section_video_title: 'Video URL',
+  core_section_video_file: 'File',
+  core_section_video_ytlink: 'Youtube address of the video',
+  core_section_video_ytcode: 'Youtube IFRAME Code',
+  core_section_video_vimeocode: 'Vimeo IFRAME code',
+  core_section_video_type: 'Video type'
+}

src/locale/i18n.js

@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n'
+
+import pl from './pl'
+import en from './en'
+const messages = {
+  pl: { pagebuilder: pl },
+  en: { pagebuilder: en }
+}
+const i18n = createI18n({
+  locale: 'en', // Domyślny język
+  fallbackLocale: 'pl', // Język używany, gdy brakuje tłumaczenia w wybranym języku
+  messages,
+  legacy: false
+})
+
+export default i18n

src/locale/pl.js

@@ -0,0 +1,26 @@
+export default {
+  widget_textarea: 'Pole tekstowe',
+  close: 'Zamknij',
+  save: 'Zapisz',
+  align: 'Wyrównanie',
+  type: 'Typ',
+  content: 'Treść',
+  widget_text: 'Treść',
+  add_section: 'Dodaj sekcję',
+  template: 'Szablony',
+  import_template: 'Wczytaj szablon',
+  save_template: 'Zapisz szablon',
+  copy_template: 'Zapisz do schowka',
+  paste_template: 'Wklej ze schowka',
+  section_type: 'Typ sekcji',
+  container: 'Kontener',
+  full_width: '100% szerokości',
+  section_settings: 'Ustawienia sekcji',
+  core_section_video: 'Wideo',
+  core_section_video_title: 'Adres URL filmu',
+  core_section_video_file: 'Plik',
+  core_section_video_ytlink: 'Adres Youtube filmu',
+  core_section_video_ytcode: 'Kod IFRAME Youtube',
+  core_section_video_vimeocode: 'Kod IFRAME Vimeo',
+  core_section_video_type: 'Typ filmu'
+}

src/main.js

@@ -2,16 +2,9 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import axios from 'axios'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
+import i18n from './locale/i18n'
 
-
-import { useSections } from "./components/registerSections";
-const app = createApp(App).use(MagicoPagebuilder).mount("#app");
-
-
-
-
-const { register: sectionRegister } = useSections();
-sectionRegister(app.$pagebuilder);
+const app = createApp(App).use(i18n).use(MagicoPagebuilder).mount('#app')