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

bump version to 0.0.32 and update margin classes in PagebuilderSection
Merge remote-tracking branch 'refs/remotes/origin/master'
2025-11-28 13:30:31 +01:00 · 2025-11-28 10:01:49 +01:00 · 2025-11-28 09:55:19 +01:00 · 2025-11-28 09:55:12 +01:00 · 2025-11-27 09:22:42 +01:00 · 2025-11-17 10:04:15 +01:00
27 changed files with 2090 additions and 1486 deletions
--- a/.gitignore
+++ b/.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
--- a/package.json
+++ b/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": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <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" />

@@ -9,16 +9,26 @@
 </template>

 <script>
-
+import { useSections } from './components/registerSections'
+import axios from 'axios'
 export default {
  name: 'App',
-  components: {
-    
-  },
+  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":""}]}]}]'
    }
+  },
+  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>
--- a/src/assets/main.css
+++ b/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;
--- a/src/components/AIModal.vue
+++ b/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>
--- a/src/components/AosSelect.vue
+++ b/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>
--- a/src/components/DropdownSectionSection.vue
+++ b/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>
--- a/src/components/MagicoModal.vue
+++ b/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>
--- a/src/components/MagicoPagebuilder.vue
+++ b/src/components/MagicoPagebuilder.vue
@@ -14,26 +14,55 @@
          <span class="material-icons-outlined">fullscreen</span>
        </button>
        <div>
+          <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 };
+                    pageType = { name: null }
                  "
-            title="Wczytaj szablon do schowka"
-            class="btn btn-outline-primary btn-icon-sm"
+                  class="dropdown-item"
+                  href="#"
+                  >{{ t('pagebuilder.import_template') }}</a
                >
-            <span class="material-icons-outlined">find_replace</span>
-          </button>
-          <button
+              </li>
+              <li>
+                <a
                  @click.prevent="
                    modalSave = !modalSave;
-              pageType = { name: null };
+                    pageType = { name: null }
                  "
-            title="Zapisz szablon do schowka"
-            class="btn btn-outline-success btn-icon-sm"
+                  class="dropdown-item"
+                  href="#"
+                  >{{ t('pagebuilder.save_template') }}</a
                >
-            <span class="material-icons-outlined">save</span>
-          </button>
+              </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 -->
--- a/src/components/MagicoPagebuilderPlugin.js
+++ b/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;
+        this.items[name] = item
        if (component) {
-          app.component(name, component);
+          app.component(name, component)
+        }
+      }
+    }
+  }
 }
-      },
-    };
-  },
-};
--- a/src/components/PagebuilderContent.vue
+++ b/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>
-      <div>
-        <button
-          @click="modalColumnsSettings = false"
-          class="btn btn-outline-secondary"
-        >
+        <AosSelect v-model="value.attribute" @aos-changed="onChange" />
+      </div>
+      <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 {
--- a/src/components/PagebuilderSection.vue
+++ b/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 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>
+
          <div>
-            <div class="form-group mb-2">
+   
+            <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"
-              />
+              <input type="text" class="form-control" v-model="value.class" />
            </div>
-            <div class="form-group mb-2">
-              <label>Margines górny</label>
-              <div class="input-group mb-3">
-                <input
-                  type="number"
-                  class="form-control"
-                  v-model="value.margin_top"
-                />
+            <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 {
@@ -168,6 +164,7 @@ export default {
  margin-bottom: 0px;
  margin-right: 4px;
 }
+
 .material-icons-outlined {
  font-size: 20px;
 }
--- a/src/components/PagebuilderTemplateLoad.vue
+++ b/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: [],
--- a/src/components/PagebuilderTemplateSave.vue
+++ b/src/components/PagebuilderTemplateSave.vue
@@ -72,6 +72,7 @@ export default {
      id: 0,
    };
  },
+  emits: ['update:modelValue','change'],
  methods: {
    change() {
      this.$emit("update:modelValue", {
--- a/src/components/grid.js
+++ b/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: '' }
+    ]
+  }
+}
--- a/src/components/plugin/SectionImage.vue
+++ b/src/components/plugin/SectionImage.vue
@@ -1,17 +1,17 @@
-
 <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>
+      <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>
+      <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>
@@ -20,7 +20,14 @@
            <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>
+              <button
+                @click="chooseImage"
+                class="btn btn-outline-secondary"
+                type="button"
+                id="button-addon2"
+              >
+                Wybierz
+              </button>
            </div>
          </div>

@@ -39,7 +46,8 @@
          <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 v-for="(item, ii) in scales" :key="ii" :value="item.key">
+                {{ item.modelValue }}
              </option>
            </select>
          </div>
@@ -51,29 +59,41 @@
          <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>
-
+            <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>

-                    <img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
+            <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>
-            <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;" />
+      <img :src="text" style="width: 100px" />
    </div>
  </div>
 </template>
@@ -82,26 +102,26 @@ import MagicoModal from './../MagicoModal.vue'

 export default {
  props: {
-        modelValue: Object,
+    modelValue: Object
  },
  data: function () {
    return {
      langs: {
-                saveclose: "Zapisz",
-                label: "Obrazek",
-                close: "Zamknij",
+        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ł",
+        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: [],
@@ -114,42 +134,50 @@ export default {
      height: 600,
      ratio: 'crop',
      figcaption: '',
+      img_lightbox: true,
      ratios: ['crop', 'auto', 'width', 'height'],
-            scales: [{
-                "key": "nie",
-                "value": "Nie"
-            }, {
-                "key": "tak",
-                "value": "Tak"
-            }],
-            scale: "Nie"
+      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;
-
-        if (this.modelValue.open) this.modalBox = true;
+    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,
+    'b-modal': MagicoModal
  },
  methods: {
    removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
+      this.$emit('itemRemoved', this.modelValue)
    },
    chooseImage: function () {
      if (this.$filechooser) {
-                let vm = this;
+        let vm = this
        this.$filechooser.open({
          chooseCallback: function (ev) {
            vm.text = ev.publicUrl
@@ -160,7 +188,7 @@ export default {
      }
    },
    onCloseModal: function () {
-            this.modalBox = false;
+      this.modalBox = false
      this.$emit('update:modelValue', {
        name: this.name,
        text: this.text,
@@ -172,10 +200,11 @@ export default {
        href: this.href,
        title: this.title,
        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
      })
    },
    setText: function (item) {
-            this.text = 'files/images/' + item;
+      this.text = 'files/images/' + item
      this.$emit('update:modelValue', {
        name: this.name,
        text: this.text,
@@ -187,14 +216,13 @@ export default {
        href: this.href,
        title: this.title,
        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
      })
    },
    modalOpen: function () {
-            this.modalBox = !this.modalBox;
+      this.modalBox = !this.modalBox
      //this.getItems();
-        },
-
-    },
-
-};
+    }
+  }
+}
 </script>
--- a/src/components/plugin/SectionText.vue
+++ b/src/components/plugin/SectionText.vue
@@ -1,28 +1,29 @@
 <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>
+      <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>
+      <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 : ' ' }}
+      <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="langs.label" @close="onCloseModal">
-
+    <b-modal v-model="modalBox" :title="t('pagebuilder.widget_text')" @close="onCloseModal">
      <div class="form-group">
-                <label class="w-100 col-form-label">{{ langs.content }}</label>
+        <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">{{ langs.type }}</label>
+        <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>
@@ -31,94 +32,118 @@
          <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>
+        <label class="w-100 col-form-label">{{ t('pagebuilder.align') }}</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'">
+          <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 v-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
-                        :class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
+          <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 v-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
-                        :class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
+          <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 v-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
-                        :class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
+          <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>
+      <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,
+    '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"
+        label: 'Tekst',
+        close: 'Zaknij',
+        content: 'Treść',
+        type: 'Typ',
+        typeplaintext: 'Tekst',
+        typeheader: 'Nagłowek',
+        saveclose: 'Zapisz'
      },
      modalBox: false,
      text: '',
      name: '',
      h_type: '',
-            align: 'left',
+      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);
-
+    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);
+      this.$emit('itemRemoved', this.modelValue)
    },
    onCloseModal: function () {
-            this.modalBox = false;
+      this.modalBox = false
      this.$emit('update:modelValue', {
        name: this.name,
        text: this.text,
        h_type: this.h_type,
-                align: this.align,
+        align: this.align
      })
    }
  },
  destroy() {
-        this.modalBox = false;
+    this.modalBox = false
  }
-
 }
 </script>
--- a/src/components/plugin/SectionTextarea.vue
+++ b/src/components/plugin/SectionTextarea.vue
@@ -1,26 +1,43 @@
 <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>
+      <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="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">
+      <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" />
+              <editor
+                api-key="no-api-key"
+                rows="12"
+                class="form-control"
+                v-model="text"
+                :init="{ ...vtinymce, language: locale }"
+              />
            </div>
          </div>
-                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
-                        langs.saveclose
-                }}</button></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>
+      <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>
@@ -30,78 +47,109 @@ 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,

-        'editor': Editor // <- To jest TINYMCE
+    editor: Editor // <- To jest TINYMCE
  },
  props: {
    modelValue: Object
  },
+  setup() {
+    const { t, locale } = useI18n()
+    return { t, locale }
+  },
  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);
-
+    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"
+        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);
+                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();
+          if (
+            e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
+          ) {
+            e.stopImmediatePropagation()
          }
-                });
+        })
+      }
+      console.log('focus')
    }
-            console.log('focus');
-        },
  },
  computed: {
    ctext: function () {
-            return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
+      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);
+      this.$emit('itemRemoved', this.modelValue)
    },
    onCloseModal: function () {
-            this.modalBox = false;
+      setTimeout(
+        function () {
+          this.modalBox = false
+          this.delayModal = false
          this.$emit('update:modelValue', {
            name: this.name,
-                text: this.text,
+            text: this.text
          })
+        }.bind(this),
+        200
+      )
+    }
  }
-    },
-
 }
 </script>
--- a/src/components/plugin/SectionVideo.vue
+++ b/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>
--- a/src/components/registerSections.js
+++ b/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) {
+  function register(vm, sections) {
+    console.log('sections', sections, vm)
+    sections.forEach((item) => {
      vm.registerPlugin(
-      "SectionX1",
+        'Sections' + item.site_section_id,
        {
-        label: "Sekcja 1",
+          label: item.title,
          svg_off: ``,
+          section_id: item.section_id,
+          image: item.image
        },
        PagebuilderSectionPlugin
-    );
+      )
+    })
  }
-  return { register };
+  return { register }
 }
--- a/src/components/tinymce/ai.js
+++ b/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
+}
--- a/src/components/tinymce/config.js
+++ b/src/components/tinymce/config.js
@@ -1,10 +1,11 @@
+import { addAI } from './ai'
 export default {
  autoresize_max_height: window.innerHeight - window.innerHeight / 4,
  width: '100%',
-    selector: "textarea.wysiwyg",
-    language: "pl",
+  selector: 'textarea.wysiwyg',
+  language: 'pl',
  language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
-    forced_root_block: "p",
+  forced_root_block: 'p',
  entity_encoding: 'named',
  entities: '160,nbsp,38,amp,60,lt,62,gt',
  valid_elements: '*[*]',
@@ -19,6 +20,9 @@ export default {
  promotion: false,
  visualblocks_default_state: true,
  visualchars_default_state: false,
+  setup(editor) {
+    addAI(editor)
+  },
  formats: {
    mainparagraph: {
      inline: 'span',
@@ -42,51 +46,69 @@ export default {
      classes: 'default_button_span'
    }
  },
-    style_formats: [{
+  style_formats: [
+    {
      title: 'Headers',
-        items: [{
+      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: [{
+      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: [{
+      items: [
+        {
          title: 'section',
          block: 'section',
          wrapper: true,
@@ -97,22 +119,50 @@ export default {
          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",
+    }
+  ],
+  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',
+    '*': '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'],
+  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",
-    toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
+  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'
+    },
+    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' }
+  }
 }
--- a/src/locale/en.js
+++ b/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'
+}
--- a/src/locale/i18n.js
+++ b/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
--- a/src/locale/pl.js
+++ b/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'
+}
--- a/src/main.js
+++ b/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')
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
szymon	2d0d56a452	bump version to 0.0.33 and add aosDelay input for animation delay in AosSelect component	2025-11-28 13:30:31 +01:00
szymon	eeb3c92778	bump version to 0.0.32 and update margin classes in PagebuilderSection	2025-11-28 10:01:49 +01:00
szymon	da0a1b006d	Merge remote-tracking branch 'refs/remotes/origin/master'	2025-11-28 09:55:19 +01:00
szymon	c2c67c15a7	bump version to 0.0.31 and add AosSelect component for animation selection in Pagebuilder	2025-11-28 09:55:12 +01:00
Piotr Mierzwa	0386355405	Dodanie do menu wstaw twarda spacja	2025-11-27 09:22:42 +01:00
szymon	b54a2c41ce	bump version to 0.0.30 and update dropdown checkbox styling in PagebuilderSection	2025-11-17 10:04:15 +01:00
szymon	60add34529	refactor: update section title and add dropdown options in PagebuilderSection	2025-11-17 09:32:40 +01:00
szymon	96becf4747	bump version to 0.0.28 and enhance TinyMCE configuration with additional menu options	2025-11-13 10:56:03 +01:00
szymon	d0d74e8e99	ai plugin modal	2025-07-02 14:20:50 +02:00
szymon	12914907bd	core_section_video	2025-01-14 13:02:31 +01:00
szymon	74b50624fc	new v	2025-01-14 09:50:14 +01:00
szymon	43927991b6	pagebuilder section video	2025-01-14 09:48:07 +01:00
szymon	3fe033c073	simple langs for pagebuilder	2025-01-14 08:56:47 +01:00
szymon	a1615ed2cc	updat epackege json	2024-11-15 08:13:54 +01:00
szymon	f73e173294	fix modal open	2024-11-15 07:57:51 +01:00
szymon	09beabe34f	fix vif modal	2024-10-03 11:17:16 +02:00
szymon	9c52316499	new version	2024-10-03 10:44:47 +02:00
szymon	5ed33697ee	git fix modal	2024-10-03 10:43:31 +02:00
szymon	32e098322c	fix pagebuilder	2024-10-02 14:07:16 +02:00
szymon	a75ac0921d	fix	2024-07-22 14:50:25 +02:00
szymon	08d26e5621	udpate packahe.json	2024-07-22 14:43:51 +02:00
szymon	45628eb596	tinymce more items	2024-07-22 14:43:37 +02:00
szymon	d55fc67fb5	copy option	2024-07-02 10:18:27 +02:00
szymon	e19e5cdfa1	fix model value udpate	2024-07-02 09:00:16 +02:00
szymon	24eae8c4fe	fix	2024-07-02 08:56:47 +02:00
szymon	0951c2a4ea	fix	2024-07-02 08:53:18 +02:00
szymon	883dd6da91	watch for external udpate	2024-07-02 08:46:52 +02:00
szymon	4008ebbbcc	modal	2024-07-02 07:55:02 +02:00
szymon	2ffa793e84	fix modal	2024-07-02 07:53:42 +02:00
szymon	c1c6f46255	fix warnigns	2024-07-01 13:35:38 +02:00
szymon	dbb2f02049	fix	2024-07-01 13:17:14 +02:00
szymon	e80f2b3def	f fix	2024-07-01 12:44:42 +02:00
szymon	8d2d0c6d77	fix	2024-07-01 12:41:01 +02:00
szymon	c5fb9f5080	fix name	2024-07-01 12:40:16 +02:00
szymon	e750930057	fix fix	2024-07-01 12:38:36 +02:00
szymon	de80d14c64	update model value	2024-07-01 12:36:49 +02:00
szymon	6d9857ab59	fix	2024-07-01 12:33:24 +02:00
szymon	c7d4125d2c	co alelgro "type":"container"	2024-07-01 12:31:22 +02:00
szymon	63fa2b9134	new ver	2024-07-01 12:24:04 +02:00
szymon	9fe3b379a8	allegro copy descritpion	2024-07-01 12:23:03 +02:00
szymon	6f9e2f0eac	new verions	2024-06-17 09:06:58 +02:00
szymon	ab402a32f1	section image lightbox	2024-06-17 09:03:08 +02:00
szymon	008b54431d	fix boostarp version	2024-01-19 10:30:20 +01:00
szymon	e81fd95970	template dropdown	2024-01-19 09:23:27 +01:00
szymon	ab4fdbad85	fix ids	2024-01-11 13:31:10 +01:00
szymon	7d7df8ff99	add seciotn wybor	2024-01-11 12:35:13 +01:00
szymon	d1d1eaa55d	fix modal in textarea	2024-01-11 08:56:26 +01:00
szymon	cf875dc704	fix ids	2024-01-11 07:55:56 +01:00
szymon	5ba7df5b62	add index to cgroup	2024-01-11 07:53:04 +01:00
szymon	c5b4c18d2f	id for sections	2024-01-11 07:45:44 +01:00
szymon	8785aae615	id for section	2024-01-11 07:26:33 +01:00
szymon	f309bc3863	Merge remote-tracking branch 'refs/remotes/origin/master'	2024-01-11 07:25:49 +01:00
szymon	7e31c9d34e	add unique keys for content	2024-01-11 07:25:04 +01:00
Szymon Haczyk	92ce5c02c2	v-if loadmodal	2023-10-16 11:26:46 +02:00
Szymon Haczyk	ff9b0f4357	fix template load	2023-10-16 11:24:24 +02:00
Szymon Haczyk	baf9dfb0b2	fix btn	2023-10-13 09:06:16 +02:00
Szymon Haczyk	54719ea98c	section type choose	2023-10-13 08:10:00 +02:00
szymon	a0d55eb5a1	another another Xd	2023-09-26 09:09:05 +02:00
szymon	656808255a	another section_Id fix	2023-09-26 09:08:47 +02:00
szymon	eb9b2c06a6	regsite section fix to site_section_id	2023-09-26 08:39:04 +02:00
szymon	cd3a57c12f	name for seciton and col	2023-08-30 12:14:48 +02:00
szymon	0148c0f3a0	use sections plugin	2023-08-16 13:49:35 +02:00
Szymon Haczyk	8af2815bb6	MAKE IT WORK!	2023-08-11 18:54:43 +02:00
Szymon Haczyk	a7f04d90c4	Merge remote-tracking branch 'origin/vite'	2023-08-11 18:49:35 +02:00
Szymon Haczyk	5554c4a9fd	clear master	2023-08-11 18:49:18 +02:00
szymon	2801ee9691	play with this sphathegi code	2023-08-11 14:57:48 +02:00
szymon	ae877784ee	fix v-models	2023-08-02 13:36:01 +02:00
szymon	5277849312	fix model value	2023-08-02 12:14:29 +02:00
szymon	7d4cc6ee70	vue2 to vue3 migration	2023-08-02 12:03:37 +02:00
Szymon Haczyk	ec02fe865e	icons to iconf from png	2023-04-17 08:57:51 +02:00
szymon	23bcaebc0c	cdn in cdn.magico.pl	2023-04-06 11:36:03 +02:00
szymon	3b832a26bf	fix	2023-04-06 11:12:57 +02:00
szymon	134b73af29	pagebuilder fullscreen mode	2023-04-06 11:05:28 +02:00
szymon	d2f1a6a10d	fix slash	2023-02-24 14:53:28 +01:00
szymon	b7ead79e41	icons section form cdn.magico.pl	2023-02-24 14:42:04 +01:00
szymon	e975407fc6	styleselect to styles	2022-10-20 10:59:12 +02:00
szymon	4d974ac81c	plugin delete	2022-10-17 14:16:33 +02:00
szymon	2bcbb0f5a9	core_image	2022-07-18 11:51:43 +02:00
szymon	5eded33414	filemanager test	2022-07-18 09:42:02 +02:00
szymon	1055263eaa	filemamanger concept	2022-07-15 14:51:30 +02:00
szymon	436d2dc3b9	h6	2022-07-07 13:00:43 +02:00
szymon	0c25909b49	section_text button and section_textarea more menu	2022-07-06 14:20:19 +02:00
szymon	4d262ace68	mb fix	2022-07-04 10:19:36 +02:00
szymon	3ce6d6a9ec	load fix	2022-07-04 10:02:19 +02:00
szymon	95465a5b7d	load and save templates	2022-07-04 09:51:40 +02:00
dzieko	a2e74d2c85	josn	2022-06-28 10:56:26 +02:00
dzieko	56c6f27c77	dodanie komentarza zby zobaczyc czy sie upgejduje node	2022-06-28 10:41:55 +02:00
dzieko	b9ec183258	input emit, wymuszeni doswiezenia pola bo usuwa z globalnej zmiennej	2022-06-28 10:36:22 +02:00
szymon	9352dd3633	pagebuilder error	2022-06-24 12:49:39 +02:00
szymon	d0834b1511	load plugins	2022-06-24 12:35:52 +02:00
szymon	7cf101a5c9	backgoeound color	2022-06-24 12:20:17 +02:00
szymon	57930b1c50	add simple ui fetures to test it	2022-06-24 12:13:50 +02:00
szymon	5fd3d9c9ba	coretext	2022-06-23 14:52:26 +02:00
szymon	40052aeb9b	vue app	2022-06-23 13:59:22 +02:00
szymon	a769bd9b64	init	2022-06-23 12:40:13 +02:00