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

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>