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", "name": "magico-pagebuilder",
"version": "0.0.32", "version": "0.0.33",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

View File

@@ -7,6 +7,10 @@
{{ item.name }} {{ item.name }}
</option> </option>
</select> </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"> <!-- <small class="form-text text-muted" v-if="selectedAnimation">
Wybrana animacja: {{ getCompiledAttribute() }} Wybrana animacja: {{ getCompiledAttribute() }}
</small> --> </small> -->
@@ -26,6 +30,7 @@ const props = defineProps({
const emit = defineEmits(['update:value', 'aos-changed']); const emit = defineEmits(['update:value', 'aos-changed']);
const selectedAnimation = ref(''); const selectedAnimation = ref('');
const aosDelay = ref('');
const animations = [ const animations = [
{ value: 'fade', name: 'Zanikanie' }, { value: 'fade', name: 'Zanikanie' },
{ value: 'fade-up', name: 'Zanikanie w górę' }, { value: 'fade-up', name: 'Zanikanie w górę' },
@@ -58,19 +63,33 @@ const animations = [
function decompileAosAttribute(val) { function decompileAosAttribute(val) {
if (val) { if (val) {
const match = val.match(/data-aos="([^"]+)"/); const aosMatch = val.match(/data-aos="([^"]+)"/);
if (match) { const delayMatch = val.match(/data-aos-delay="(\d+)"/);
selectedAnimation.value = match[1]; if (aosMatch) {
selectedAnimation.value = aosMatch[1];
} else { } else {
selectedAnimation.value = val; selectedAnimation.value = val;
} }
if (delayMatch) {
aosDelay.value = delayMatch[1];
} else {
aosDelay.value = '';
}
} else { } else {
selectedAnimation.value = ''; selectedAnimation.value = '';
aosDelay.value = '';
} }
} }
function getCompiledAttribute() { 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() { function changeSelect() {