From 2d0d56a45278216fa4c40c1b6feb44333c15a446 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Fri, 28 Nov 2025 13:30:31 +0100
Subject: [PATCH] bump version to 0.0.33 and add aosDelay input for animation
 delay in AosSelect component

---
 package.json                 |  2 +-
 src/components/AosSelect.vue | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 2d06242..1c5ac78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/AosSelect.vue b/src/components/AosSelect.vue
index f165b7e..6b0e7a0 100644
--- a/src/components/AosSelect.vue
+++ b/src/components/AosSelect.vue
@@ -7,6 +7,10 @@
         {{ 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> -->
@@ -26,6 +30,7 @@ const props = defineProps({
 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ę' },
@@ -58,19 +63,33 @@ const animations = [
 
 function decompileAosAttribute(val) {
   if (val) {
-    const match = val.match(/data-aos="([^"]+)"/);
-    if (match) {
-      selectedAnimation.value = match[1];
+    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() {
-  return selectedAnimation.value ? `data-aos="${selectedAnimation.value}"` : '';
+  let attr = '';
+  if (selectedAnimation.value) {
+    attr += `data-aos="${selectedAnimation.value}"`;
+    if (aosDelay.value) {
+      attr += ` data-aos-delay="${aosDelay.value}"`;
+    }
+  }
+  return attr;
 }
 
 function changeSelect() {