bump version to 0.0.31 and add AosSelect component for animation selection in Pagebuilder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/AosSelect.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="form form-group mb-2">
+    <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>
+    <!-- <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 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 match = val.match(/data-aos="([^"]+)"/);
+    if (match) {
+      selectedAnimation.value = match[1];
+    } else {
+      selectedAnimation.value = val;
+    }
+  } else {
+    selectedAnimation.value = '';
+  }
+}
+
+function getCompiledAttribute() {
+  return selectedAnimation.value ? `data-aos="${selectedAnimation.value}"` : '';
+}
+
+function changeSelect() {
+  const compiledAttribute = getCompiledAttribute();
+  emit('update:modelValue', compiledAttribute);
+  emit('aos-changed', compiledAttribute);
+}
+
+onMounted(() => {
+  decompileAosAttribute(props.modelValue);
+});
+
+watch(() => props.modelValue, (newVal) => {
+  decompileAosAttribute(newVal);
+});
+</script>

src/components/PagebuilderContent.vue

@@ -19,14 +19,15 @@
       v-on:onClose="modalColumnsSettings = false"
     >
       <div>
-        <div class="from-group">
-          <label>Nazwa kolumny</label>
+        <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">
-          <label>Klasa kolumny</label>
+        <div class="from-group mb-3">
+          <label class="form-label">Klasa kolumny</label>
           <input @input="onChange" v-model="value.class" type="text" class="form-control" />
         </div>
+        <AosSelect v-model="value.attribute" @aos-changed="onChange" />
       </div>
       <div class="mt-4">
         <button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">
@@ -100,6 +101,7 @@ 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 () {
@@ -123,7 +125,8 @@ export default {
     core_section_html: SectionHtml,
     core_section_image: SectionImage,
     core_section_video: SectionVideo,
-    DropdownSectionSection
+    DropdownSectionSection,
+    AosSelect
   },
   methods: {
     onChange: function () {

src/components/PagebuilderSection.vue

@@ -58,8 +58,9 @@
               <label class="w-100 col-form-label"> Klasa sekcji </label>
               <input type="text" class="form-control" v-model="value.class" />
             </div>
+            <AosSelect v-model="value.attribute" />
             <div class="form-group mb-2">
-              <label>Margines górny</label>
+              <label class="form-label">Margines górny</label>
               <div class="input-group mb-3">
                 <input type="number" class="form-control" v-model="value.margin_top" />
                 <div class="input-group-append">
@@ -69,7 +70,7 @@
             </div>
           </div>
           <div class="form-group mb-2">
-            <label>Margines dolny</label>
+            <label class="form-label">Margines dolny</label>
             <div class="input-group mb-3">
               <input type="number" class="form-control" v-model="value.margin_bottom" />
               <div class="input-group-append">
@@ -92,12 +93,14 @@ 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, keyIndex: String },
   emits: ['update:modelValue', 'copy', 'deleteSection', 'change'],
   components: {
     'b-modal': MagicoModal,
-    PagebuilderContent
+    PagebuilderContent,
+    AosSelect
   },
   data: function () {
     return { items: grid, value2: '', show_settings: false, type: '' }

src/components/grid.js

@@ -4,7 +4,7 @@ export default {
     name: 'col_1',
     type: 'container',
     class: '',
-    columns: [{ name: 'col-md-12', items: [] }]
+    columns: [{ name: 'col-md-12', items: [], class: '', attribute: '' }]
   },
   col_2: {
     label: '2 kolumny po 6 ',
@@ -12,8 +12,8 @@ export default {
     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: {
@@ -22,8 +22,8 @@ export default {
     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: {
@@ -32,8 +32,8 @@ export default {
     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: {
@@ -42,8 +42,8 @@ export default {
     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: {
@@ -52,8 +52,8 @@ export default {
     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: {
@@ -62,9 +62,9 @@ export default {
     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: {
@@ -73,9 +73,9 @@ export default {
     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: {
@@ -84,9 +84,9 @@ export default {
     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: {
@@ -95,9 +95,9 @@ export default {
     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: {
@@ -106,10 +106,10 @@ export default {
     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: {
@@ -118,12 +118,12 @@ export default {
     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: '' }
     ]
   }
 }