uikit 3.20.9 → 3.20.10-dev.8e8f67f8b

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.20.9",
+  "version": "3.20.10-dev.8e8f67f8b",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/countdown.js

@@ -79,9 +79,7 @@ export default {
                     continue;
                 }
 
-                let digits = String(Math.trunc(timespan[unit]));
-
-                digits = digits.length < 2 ? `0${digits}` : digits;
+                let digits = Math.trunc(timespan[unit]).toString().padStart(2, '0');
 
                 if (el.textContent !== digits) {
                     digits = digits.split('');

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

@@ -32,8 +32,14 @@ export default function (prev, next, dir, { center, easing, list }) {
             const timing = linear ? 'linear' : easing;
             duration -= Math.round(duration * clamp(percent, -1, 1));
 
+            // Force previous transition to be canceled in Safari
+            css(list, 'transitionProperty', 'none');
+
             this.translate(percent);
 
+            // Reset the forced transition property
+            css(list, 'transitionProperty', '');
+
             percent = prev ? percent : clamp(percent, 0, 1);
             triggerUpdate(this.getItemIn(), 'itemin', { percent, duration, timing, dir });
             prev &&

package/src/js/components/upload.js

@@ -195,7 +195,7 @@ function stop(e) {
     e.stopPropagation();
 }
 
-export function ajax(url, options) {
+export async function ajax(url, options) {
     const env = {
         data: null,
         method: 'GET',
@@ -205,9 +205,8 @@ export function ajax(url, options) {
         responseType: '',
         ...options,
     };
-    return Promise.resolve()
-        .then(() => env.beforeSend(env))
-        .then(() => send(url, env));
+    await env.beforeSend(env);
+    return send(url, env);
 }
 
 function send(url, env) {

package/src/js/core/inverse.js

@@ -2,6 +2,7 @@ import {
     $$,
     css,
     dimensions,
+    intersectRect,
     matches,
     observeResize,
     on,
@@ -83,22 +84,29 @@ export default {
             }
 
             for (const target of toNodes(this.target)) {
-                replaceClass(
-                    target,
-                    'uk-light uk-dark',
+                let color =
                     !this.selActive || matches(target, this.selActive)
                         ? findTargetColor(target)
-                        : '',
-                );
+                        : '';
+
+                if (color !== false) {
+                    replaceClass(target, 'uk-light uk-dark', color);
+                }
             }
         },
     },
 };
 
 function findTargetColor(target) {
-    const { left, top, height, width } = dimensions(target);
+    const dim = dimensions(target);
     const viewport = dimensions(window);
 
+    if (!intersectRect(dim, viewport)) {
+        return false;
+    }
+
+    const { left, top, height, width } = dim;
+
     let last;
     for (const percent of [0.25, 0.5, 0.75]) {
         const elements = target.ownerDocument.elementsFromPoint(

package/src/js/core/scrollspy.js

@@ -5,12 +5,13 @@ import {
     data as getData,
     once,
     removeClass,
-    removeClasses,
     toggleClass,
     trigger,
 } from 'uikit-util';
 import { intersection } from '../api/observables';
 
+const clsInView = 'uk-scrollspy-inview';
+
 export default {
     args: 'cls',
 
@@ -30,7 +31,6 @@ export default {
         margin: '-1px',
         repeat: false,
         delay: 0,
-        inViewClass: 'uk-scrollspy-inview',
     }),
 
     computed: {
@@ -41,7 +41,7 @@ export default {
         elements(elements) {
             if (this.hidden) {
                 // use `opacity:0` instead of `visibility:hidden` to make content focusable with keyboard
-                css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
+                css(filter(elements, `:not(.${clsInView})`), 'opacity', 0);
             }
         },
     },
@@ -52,7 +52,7 @@ export default {
 
     disconnected() {
         for (const [el, state] of this.elementData.entries()) {
-            removeClass(el, this.inViewClass, state?.cls || '');
+            removeClass(el, clsInView, state?.cls || '');
         }
         delete this.elementData;
     },
@@ -118,11 +118,12 @@ export default {
 
             css(el, 'opacity', !inview && this.hidden ? 0 : '');
 
-            toggleClass(el, this.inViewClass, inview);
+            toggleClass(el, clsInView, inview);
             toggleClass(el, state.cls);
 
-            if (/\buk-animation-/.test(state.cls)) {
-                const removeAnimationClasses = () => removeClasses(el, 'uk-animation-[\\w-]+');
+            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,

package/src/js/mixin/slider.js

@@ -176,7 +176,7 @@ export default {
             return this.getIndex(index, prevIndex);
         },
 
-        _show(prev, next, force) {
+        async _show(prev, next, force) {
             this._transitioner = this._getTransitioner(prev, next, this.dir, {
                 easing: force
                     ? next.offsetWidth < 600
@@ -188,7 +188,7 @@ export default {
 
             if (!force && !prev) {
                 this._translate(1);
-                return Promise.resolve();
+                return;
             }
 
             const { length } = this.stack;

package/src/js/mixin/togglable.js

@@ -137,11 +137,7 @@ function toggleInstant(el, show, { _toggle }) {
     return _toggle(el, show);
 }
 
-export async function toggleTransition(
-    el,
-    show,
-    { animation, duration, velocity, transition, _toggle },
-) {
+async function toggleTransition(el, show, { animation, duration, velocity, transition, _toggle }) {
     const [mode = 'reveal', startProp = 'top'] = animation[0]?.split('-') || [];
 
     const dirs = [

package/src/js/util/animation.js

@@ -1,7 +1,6 @@
-import { attr } from './attr';
-import { addClass, hasClass, removeClass, removeClasses } from './class';
+import { addClass, hasClass, removeClass } from './class';
 import { once, trigger } from './event';
-import { startsWith, toNodes } from './lang';
+import { toNodes } from './lang';
 import { css, propName } from './style';
 
 const clsTransition = 'uk-transition';
@@ -15,10 +14,8 @@ function transition(element, props, duration = 400, timing = 'linear') {
             (element) =>
                 new Promise((resolve, reject) => {
                     for (const name in props) {
-                        const value = css(element, name);
-                        if (value === '') {
-                            css(element, name, value);
-                        }
+                        // Force reflow: transition won't run for previously hidden element
+                        css(element, name);
                     }
 
                     const timer = setTimeout(() => trigger(element, transitionEnd), duration);
@@ -69,7 +66,7 @@ export const Transition = {
     },
 };
 
-const animationPrefix = 'uk-animation-';
+const clsAnimation = 'uk-animation';
 const animationEnd = 'animationend';
 const animationCanceled = 'animationcanceled';
 
@@ -78,7 +75,18 @@ function animate(element, animation, duration = 200, origin, out) {
         toNodes(element).map(
             (element) =>
                 new Promise((resolve, reject) => {
-                    trigger(element, animationCanceled);
+                    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(
@@ -90,25 +98,18 @@ function animate(element, animation, duration = 200, origin, out) {
                             type === animationCanceled ? reject() : resolve(element);
 
                             css(element, 'animationDuration', '');
-                            removeClasses(element, `${animationPrefix}\\S*`);
+                            removeClass(element, classes);
                         },
                         { self: true },
                     );
 
                     css(element, 'animationDuration', `${duration}ms`);
-                    addClass(element, animation, animationPrefix + (out ? 'leave' : 'enter'));
-
-                    if (startsWith(animation, animationPrefix)) {
-                        origin && addClass(element, `uk-transform-origin-${origin}`);
-                        out && addClass(element, `${animationPrefix}reverse`);
-                    }
+                    addClass(element, classes);
                 }),
         ),
     );
 }
 
-const inProgressRe = new RegExp(`${animationPrefix}(enter|leave)`);
-
 export const Animation = {
     in: animate,
 
@@ -117,7 +118,7 @@ export const Animation = {
     },
 
     inProgress(element) {
-        return inProgressRe.test(attr(element, 'class'));
+        return hasClass(element, clsAnimation);
     },
 
     cancel(element) {

package/src/js/util/class.js

@@ -1,4 +1,4 @@
-import { includes, isArray, isUndefined, toArray, toNodes } from './lang';
+import { includes, isArray, isUndefined, toNodes } from './lang';
 
 export function addClass(element, ...classes) {
     for (const node of toNodes(element)) {
@@ -18,13 +18,6 @@ export function removeClass(element, ...classes) {
     }
 }
 
-export function removeClasses(element, clsRegex) {
-    clsRegex = new RegExp(clsRegex);
-    for (const node of toNodes(element)) {
-        node.classList.remove(...toArray(node.classList).filter((cls) => cls.match(clsRegex)));
-    }
-}
-
 export function replaceClass(element, oldClass, newClass) {
     newClass = toClasses(newClass);
     oldClass = toClasses(oldClass).filter((cls) => !includes(newClass, cls));