uikit 3.23.5 → 3.23.6-dev.4d3af55fc

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.23.5",
+  "version": "3.23.6-dev.4d3af55fc",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/modal.js

@@ -96,7 +96,7 @@ function install({ modal }) {
                 isString(message) ? message : html(message)
             }</div>
             <div class="uk-modal-footer uk-text-right">
-                <button class="uk-button uk-button-primary uk-modal-close" autofocus>${
+                <button class="uk-button uk-button-primary uk-modal-close" type="button" autofocus>${
                     i18n.ok
                 }</button>
             </div>`,

package/src/js/core/sticky.js

@@ -402,12 +402,7 @@ export default {
             if (sticky) {
                 css(this.$el, 'top', offset);
             } else {
-                css(this.$el, {
-                    position: '',
-                    top: '',
-                    width: '',
-                    marginTop: '',
-                });
+                reset(this.$el);
             }
             this.placeholder.hidden = true;
             this.isFixed = false;

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

@@ -20,25 +20,20 @@ export default function fade(action, target, duration, stagger = 0) {
     const propsIn = { opacity: 1 };
     const propsOut = { opacity: 0 };
 
-    const wrapIndexFn = (fn) => () => (index === transitionIndex(target) ? fn() : Promise.reject());
+    const isCurrentIndex = () => index === transitionIndex(target);
+    const wrapIndexFn = (fn) => () => (isCurrentIndex() ? fn() : Promise.reject());
 
     const leaveFn = wrapIndexFn(async () => {
         addClass(target, clsLeave);
 
-        await Promise.all(
-            getTransitionNodes(target).map(
-                (child, i) =>
-                    new Promise((resolve) =>
-                        setTimeout(
-                            () =>
-                                Transition.start(child, propsOut, duration / 2, 'ease').then(
-                                    resolve,
-                                ),
-                            i * stagger,
-                        ),
-                    ),
-            ),
-        );
+        await (stagger
+            ? Promise.all(
+                  getTransitionNodes(target).map(async (child, i) => {
+                      await awaitTimeout(i * stagger);
+                      return Transition.start(child, propsOut, duration / 2, 'ease');
+                  }),
+              )
+            : Transition.start(target, propsOut, duration / 2, 'ease'));
 
         removeClass(target, clsLeave);
     });
@@ -49,47 +44,48 @@ export default function fade(action, target, duration, stagger = 0) {
         addClass(target, clsEnter);
         action();
 
-        css(children(target), { opacity: 0 });
+        css(stagger ? children(target) : target, propsOut);
 
         // Ensure UIkit updates have propagated (e.g. Grid needs to reset margin classes)
         height(target, oldHeight);
         await awaitTimeout();
         height(target, '');
 
-        const nodes = children(target);
         const newHeight = height(target);
 
         // Ensure Grid cells do not stretch when height is applied
         css(target, 'alignContent', 'flex-start');
         height(target, oldHeight);
 
-        const transitionNodes = getTransitionNodes(target);
-        css(nodes, propsOut);
-
-        const transitions = transitionNodes.map(async (child, i) => {
-            await awaitTimeout(i * stagger);
-            await Transition.start(child, propsIn, duration / 2, 'ease');
-        });
-
-        if (oldHeight !== newHeight) {
-            transitions.push(
-                Transition.start(
-                    target,
-                    { height: newHeight },
-                    duration / 2 + transitionNodes.length * stagger,
-                    'ease',
-                ),
-            );
+        let transitions = [];
+        let targetDuration = duration / 2;
+        if (stagger) {
+            const nodes = getTransitionNodes(target);
+            css(children(target), propsOut);
+
+            transitions = nodes.map(async (child, i) => {
+                await awaitTimeout(i * stagger);
+                await Transition.start(child, propsIn, duration / 2, 'ease');
+                if (isCurrentIndex()) {
+                    css(child, { opacity: '' });
+                }
+            });
+
+            targetDuration += nodes.length * stagger;
+        }
+
+        if (!stagger || oldHeight !== newHeight) {
+            const targetProps = { height: newHeight, ...(stagger ? {} : propsIn) };
+            transitions.push(Transition.start(target, targetProps, targetDuration, 'ease'));
         }
 
-        await Promise.all(transitions).then(() => {
-            removeClass(target, clsEnter);
-            if (index === transitionIndex(target)) {
-                css(target, { height: '', alignContent: '' });
-                css(nodes, { opacity: '' });
-                delete target.dataset.transition;
-            }
-        });
+        await Promise.all(transitions);
+
+        removeClass(target, clsEnter);
+        if (isCurrentIndex()) {
+            css(target, { height: '', alignContent: '', opacity: '' });
+            delete target.dataset.transition;
+        }
     });
 
     return hasClass(target, clsLeave)

package/src/js/util/animation.js

@@ -13,17 +13,17 @@ function transition(element, props, duration = 400, timing = 'linear') {
         toNodes(element).map(
             (element) =>
                 new Promise((resolve, reject) => {
+                    for (const name in props) {
+                        // Force reflow: transition won't run for previously hidden element
+                        css(element, name);
+                    }
+
                     const timer = setTimeout(() => trigger(element, transitionEnd), duration);
 
                     once(
                         element,
                         [transitionEnd, transitionCanceled],
                         ({ type }) => {
-                            if (frame !== true) {
-                                css(element, props);
-                                cancelAnimationFrame(frame);
-                            }
-
                             clearTimeout(timer);
                             removeClass(element, clsTransition);
                             css(element, {
@@ -37,14 +37,11 @@ function transition(element, props, duration = 400, timing = 'linear') {
                     );
 
                     addClass(element, clsTransition);
-                    let frame = requestAnimationFrame(() => {
-                        frame = true;
-                        return css(element, {
-                            transitionProperty: Object.keys(props).map(propName).join(','),
-                            transitionDuration: `${duration}ms`,
-                            transitionTimingFunction: timing,
-                            ...props,
-                        });
+                    css(element, {
+                        transitionProperty: Object.keys(props).map(propName).join(','),
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: timing,
+                        ...props,
                     });
                 }),
         ),