uikit 3.25.24-dev.66bb413 → 3.25.24

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.25.24-dev.66bb413",
+    "version": "3.25.24",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/internal/slider-transitioner.js

@@ -73,25 +73,23 @@ export default function (prev, next, dir, { center, easing, list }) {
         },
 
         translate(percent) {
-            if (percent === this.percent()) {
-                return;
+            if (percent !== this.percent()) {
+                const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
+
+                css(
+                    list,
+                    'transform',
+                    translate(
+                        clamp(
+                            -to + (distance - distance * percent),
+                            -getWidth(list),
+                            dimensions(list).width,
+                        ) * (isRtl ? -1 : 1),
+                        'px',
+                    ),
+                );
             }
 
-            const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
-
-            css(
-                list,
-                'transform',
-                translate(
-                    clamp(
-                        -to + (distance - distance * percent),
-                        -getWidth(list),
-                        dimensions(list).width,
-                    ) * (isRtl ? -1 : 1),
-                    'px',
-                ),
-            );
-
             const actives = this.getActives();
             const itemIn = this.getItemIn();
             const itemOut = this.getItemIn(true);

package/src/js/core/scrollspy.js

@@ -1,13 +1,4 @@
-import {
-    $$,
-    css,
-    filter,
-    data as getData,
-    once,
-    removeClass,
-    toggleClass,
-    trigger,
-} from 'uikit-util';
+import { $$, css, filter, data as getData, removeClass, toggleClass, trigger } from 'uikit-util';
 import { intersection } from '../api/observables';
 import { awaitTimeout } from '../util/await';
 
@@ -121,16 +112,15 @@ export default {
             toggleClass(el, clsInView, inview);
             toggleClass(el, state.cls);
 
-            let match;
-            if ((match = state.cls.match(/\buk-animation-[\w-]+/g))) {
-                const removeAnimationClasses = () => removeClass(el, match);
-                if (inview) {
-                    state.off = once(el, 'animationcancel animationend', removeAnimationClasses, {
-                        self: true,
-                    });
-                } else {
-                    removeAnimationClasses();
-                }
+            const match = state.cls.match(/\buk-animation-[\w-]+/g);
+            if (match) {
+                const animations = (inview && el.getAnimations?.()) || [];
+
+                let active = true;
+                state.off = () => (active = false);
+
+                const cleanup = () => active && removeClass(el, match);
+                Promise.all(animations.map(({ finished }) => finished)).then(cleanup, cleanup);
             }
 
             trigger(el, inview ? 'inview' : 'outview');

package/src/js/mixin/internal/animate-fade.js

@@ -69,29 +69,31 @@ export default function fade(action, target, duration, stagger = 0) {
         css(target, 'alignContent', 'flex-start');
         height(target, oldHeight);
 
-        let transitions = [];
+        const transitions = [];
         let targetDuration = duration / 2;
         if (stagger) {
             const nodes = getTransitionNodes(target);
             css(children(target), propsOut);
 
-            transitions = nodes.reduce(async (promise, child, i, array) => {
-                await promise;
-
-                if (!isInView(child) || !isCurrentIndex()) {
-                    resetProps(child, propsIn);
-                    return;
-                }
-
-                await awaitTimeout(stagger);
-
-                const transition = Transition.start(child, propsIn, duration / 2, 'ease').then(
-                    () => isCurrentIndex() && resetProps(child, propsIn),
-                );
-                if (array.length - 1 === i) {
-                    await transition;
-                }
-            }, Promise.resolve());
+            transitions.push(
+                nodes.reduce(async (promise, child, i, array) => {
+                    await promise;
+
+                    if (!isInView(child) || !isCurrentIndex()) {
+                        resetProps(child, propsIn);
+                        return;
+                    }
+
+                    await awaitTimeout(stagger);
+
+                    const transition = Transition.start(child, propsIn, duration / 2, 'ease').then(
+                        () => isCurrentIndex() && resetProps(child, propsIn),
+                    );
+                    if (array.length - 1 === i) {
+                        await transition;
+                    }
+                }, Promise.resolve()),
+            );
 
             targetDuration += nodes.length * stagger;
         }

package/src/js/mixin/modal.js

@@ -4,7 +4,6 @@ import {
     append,
     css,
     dimensions,
-    endsWith,
     includes,
     isFocusable,
     isSameSiteAnchor,
@@ -239,25 +238,9 @@ function animate(el, show, { transitionElement, _toggle }) {
 
             _toggle(el, show);
 
-            const off = once(
-                transitionElement,
-                'transitionstart',
-                () => {
-                    once(transitionElement, 'transitionend transitioncancel', resolve, {
-                        self: true,
-                    });
-                    clearTimeout(timer);
-                },
-                { self: true },
-            );
-
-            const timer = setTimeout(
-                () => {
-                    off();
-                    resolve();
-                },
-                toMs(css(transitionElement, 'transitionDuration')),
-            );
+            Promise.all(
+                (transitionElement.getAnimations?.() ?? []).map(({ finished }) => finished),
+            ).then(resolve, reject);
         }),
     ).then(() => {
         if (pendingReject.get(el) === rejectAnimation) {
@@ -266,10 +249,6 @@ function animate(el, show, { transitionElement, _toggle }) {
     });
 }
 
-function toMs(time) {
-    return toFloat(time) * (endsWith(time, 'ms') ? 1 : 1000);
-}
-
 function preventBackgroundFocus(modal) {
     return on(document, 'focusin', (e) => {
         if (last(active) !== modal || modal.$el.contains(e.target)) {

package/src/js/mixin/togglable.js

@@ -242,7 +242,8 @@ async function toggleTransition(el, show, { animation, duration, velocity, trans
     }
 }
 
-function toggleAnimation(el, show, cmp) {
+async function toggleAnimation(el, show, cmp) {
+    // Do not destructure origin: Tooltip sets it in _toggle's synchronous toggled handler.
     const { animation, duration, _toggle } = cmp;
 
     if (show) {
@@ -250,7 +251,6 @@ function toggleAnimation(el, show, cmp) {
         return Animation.in(el, animation[0], duration, cmp.origin);
     }
 
-    return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
-        _toggle(el, false),
-    );
+    await Animation.out(el, animation[1] || animation[0], duration, cmp.origin);
+    _toggle(el, false);
 }

package/src/js/util/animation.js

@@ -62,47 +62,66 @@ export const Transition = {
 };
 
 const clsAnimation = 'uk-animation';
-const animationEnd = 'animationend';
-const animationCanceled = 'animationcanceled';
+const activeAnimations = new WeakMap();
 
 function animate(element, animation, duration = 200, origin, out) {
-    return Promise.all(
-        toNodes(element).map(
-            (element) =>
-                new Promise((resolve, reject) => {
-                    if (hasClass(element, clsAnimation)) {
-                        trigger(element, animationCanceled);
-                    }
-
-                    const classes = [
-                        animation,
-                        clsAnimation,
-                        `${clsAnimation}-${out ? 'leave' : 'enter'}`,
-                        origin && `uk-transform-origin-${origin}`,
-                        out && `${clsAnimation}-reverse`,
-                    ];
-
-                    const timer = setTimeout(() => trigger(element, animationEnd), duration);
-
-                    once(
-                        element,
-                        [animationEnd, animationCanceled],
-                        ({ type }) => {
-                            clearTimeout(timer);
-
-                            type === animationCanceled ? reject() : resolve(element);
+    const animateFn = async (element) => {
+        if (!Element.prototype.getAnimations) {
+            return element;
+        }
+
+        cancel(element);
+
+        const existingAnimations = element.getAnimations();
+
+        const classes = [
+            animation,
+            clsAnimation,
+            `${clsAnimation}-${out ? 'leave' : 'enter'}`,
+            origin && `uk-transform-origin-${origin}`,
+            out && `${clsAnimation}-reverse`,
+        ];
+
+        css(element, 'animationDuration', `${duration}ms`);
+        addClass(element, classes);
+
+        const animations = element
+            .getAnimations()
+            .filter((animation) => !existingAnimations.includes(animation));
+        const data = { animations, classes };
+
+        activeAnimations.set(element, data);
+
+        try {
+            await Promise.all(animations.map(({ finished }) => finished));
+            return element;
+        } finally {
+            cleanup(element, data);
+        }
+    };
+
+    return Promise.all(toNodes(element).map(animateFn));
+}
 
-                            css(element, 'animationDuration', '');
-                            removeClass(element, classes);
-                        },
-                        { self: true },
-                    );
+function cleanup(element, data) {
+    if (activeAnimations.get(element) === data) {
+        activeAnimations.delete(element);
+        css(element, 'animationDuration', '');
+        removeClass(element, data.classes);
+    }
+}
 
-                    css(element, 'animationDuration', `${duration}ms`);
-                    addClass(element, classes);
-                }),
-        ),
-    );
+function cancel(elements) {
+    for (const element of toNodes(elements)) {
+        const data = activeAnimations.get(element);
+
+        if (data) {
+            for (const animation of data.animations) {
+                animation.cancel();
+            }
+            cleanup(element, data);
+        }
+    }
 }
 
 export const Animation = {
@@ -113,10 +132,8 @@ export const Animation = {
     },
 
     inProgress(element) {
-        return hasClass(element, clsAnimation);
+        return activeAnimations.has(element);
     },
 
-    cancel(element) {
-        trigger(element, animationCanceled);
-    },
+    cancel,
 };