bump version to 0.0.33 and add aosDelay input for animation delay in AosSelect component
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "magico-pagebuilder",
|
||||
"version": "0.0.32",
|
||||
"version": "0.0.33",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user