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

This commit is contained in:
2025-11-28 13:30:31 +01:00
parent eeb3c92778
commit 2d0d56a452
2 changed files with 24 additions and 5 deletions

View File

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

View File

@@ -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() {