uikit 3.15.3-dev.e9711b588 → 3.15.4-dev.c21737f52

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.15.3-dev.e9711b588",
+    "version": "3.15.4-dev.c21737f52",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/boot.js

@@ -1,5 +1,5 @@
 import { getComponentName } from './component';
-import { apply, fastdom, hasAttr, inBrowser } from 'uikit-util';
+import { apply, hasAttr, inBrowser } from 'uikit-util';
 
 export default function (UIkit) {
     const { connect, disconnect } = UIkit;
@@ -8,7 +8,7 @@ export default function (UIkit) {
         return;
     }
 
-    fastdom.read(function () {
+    requestAnimationFrame(function () {
         if (document.body) {
             apply(document.body, connect);
         }

package/src/js/api/component.js

@@ -1,4 +1,4 @@
-import { $$, camelize, fastdom, hyphenate, isPlainObject, memoize, startsWith } from 'uikit-util';
+import { $$, camelize, hyphenate, isPlainObject, memoize, startsWith } from 'uikit-util';
 
 export default function (UIkit) {
     const DATA = UIkit.data;
@@ -49,7 +49,7 @@ export default function (UIkit) {
         opt.install?.(UIkit, opt, name);
 
         if (UIkit._initialized && !opt.functional) {
-            fastdom.read(() => UIkit[name](`[uk-${id}],[data-uk-${id}]`));
+            requestAnimationFrame(() => UIkit[name](`[uk-${id}],[data-uk-${id}]`));
         }
 
         return (components[name] = isPlainObject(options) ? opt : options);

package/src/js/api/state.js

@@ -267,7 +267,7 @@ function normalizeData({ data = {} }, { args = [], props = {} }) {
 function initChildListObserver(component) {
     const { el } = component.$options;
 
-    const observer = new MutationObserver(() => component.$emit());
+    const observer = new MutationObserver(() => component._callWatches());
     observer.observe(el, {
         childList: true,
         subtree: true,

package/src/js/components/filter.js

@@ -5,7 +5,6 @@ import {
     css,
     data,
     each,
-    fastdom,
     children as getChildren,
     hasClass,
     includes,
@@ -43,7 +42,7 @@ export default {
             },
 
             watch() {
-                this.updateState();
+                this.$emit();
 
                 if (this.selActive !== false) {
                     const actives = $$(this.selActive, this.$el);
@@ -61,7 +60,7 @@ export default {
 
             watch(list, old) {
                 if (old && !isEqualList(list, old)) {
-                    this.updateState();
+                    this.$emit();
                 }
             },
 
@@ -69,6 +68,12 @@ export default {
         },
     },
 
+    update: {
+        write() {
+            this.setState(this.getState(), false);
+        },
+    },
+
     events: [
         {
             name: 'click',
@@ -108,26 +113,19 @@ export default {
 
             trigger(this.$el, 'beforeFilter', [this, state]);
 
-            this.toggles.forEach((el) =>
-                toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
-            );
+            for (const el of this.toggles) {
+                toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state));
+            }
 
             await Promise.all(
                 $$(this.target, this.$el).map((target) => {
-                    const filterFn = () => {
-                        applyState(state, target, getChildren(target));
-                        this.$update(this.$el);
-                    };
+                    const filterFn = () => applyState(state, target, getChildren(target));
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
             );
 
             trigger(this.$el, 'afterFilter', [this]);
         },
-
-        updateState() {
-            fastdom.write(() => this.setState(this.getState(), false));
-        },
     },
 };
 

package/src/js/core/accordion.js

@@ -5,7 +5,6 @@ import {
     $,
     $$,
     attr,
-    fastdom,
     filter,
     getIndex,
     hasClass,
@@ -144,7 +143,7 @@ export default {
 
                     if (show) {
                         const toggle = $(this.$props.toggle, el);
-                        fastdom.read(() => {
+                        requestAnimationFrame(() => {
                             if (!isInView(toggle)) {
                                 scrollIntoView(toggle, { offset: this.offset });
                             }

package/src/js/core/grid.js

@@ -1,6 +1,6 @@
 import Margin from './margin';
 import Class from '../mixin/class';
-import Scroll from '../mixin/scroll';
+import { registerScrollListener, unregisterScrollListener } from '../mixin/scroll';
 import {
     addClass,
     children,
@@ -15,7 +15,7 @@ import {
 export default {
     extends: Margin,
 
-    mixins: [Class, Scroll],
+    mixins: [Class],
 
     name: 'grid',
 
@@ -33,6 +33,11 @@ export default {
 
     connected() {
         this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
+        this.parallax && registerScrollListener(this._uid, () => this.$emit('scroll'));
+    },
+
+    disconnected() {
+        unregisterScrollListener(this._uid);
     },
 
     update: [

package/src/js/core/scrollspy.js

@@ -151,8 +151,6 @@ export default {
             trigger(el, inview ? 'inview' : 'outview');
 
             state.inview = inview;
-
-            this.$update(el);
         },
     },
 };

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

@@ -23,10 +23,10 @@ export default function fade(action, target, duration, stagger = 0) {
 
     const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
 
-    const leaveFn = wrapIndexFn(() => {
+    const leaveFn = wrapIndexFn(async () => {
         addClass(target, clsLeave);
 
-        return Promise.all(
+        await Promise.all(
             getTransitionNodes(target).map(
                 (child, i) =>
                     new Promise((resolve) =>
@@ -39,10 +39,12 @@ export default function fade(action, target, duration, stagger = 0) {
                         )
                     )
             )
-        ).then(() => removeClass(target, clsLeave));
+        );
+
+        removeClass(target, clsLeave);
     });
 
-    const enterFn = wrapIndexFn(() => {
+    const enterFn = wrapIndexFn(async () => {
         const oldHeight = height(target);
 
         addClass(target, clsEnter);
@@ -51,53 +53,42 @@ export default function fade(action, target, duration, stagger = 0) {
         css(children(target), { opacity: 0 });
 
         // Ensure UIkit updates have propagated
-        return new Promise((resolve) =>
-            requestAnimationFrame(() => {
-                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(
-                    (child, i) =>
-                        new Promise((resolve) =>
-                            setTimeout(
-                                () =>
-                                    Transition.start(child, propsIn, duration / 2, 'ease').then(
-                                        resolve
-                                    ),
-                                i * stagger
-                            )
-                        )
-                );
-
-                if (oldHeight !== newHeight) {
-                    transitions.push(
-                        Transition.start(
-                            target,
-                            { height: newHeight },
-                            duration / 2 + transitionNodes.length * stagger,
-                            'ease'
-                        )
-                    );
-                }
-
-                Promise.all(transitions).then(() => {
-                    removeClass(target, clsEnter);
-                    if (index === transitionIndex(target)) {
-                        css(target, { height: '', alignContent: '' });
-                        css(nodes, { opacity: '' });
-                        delete target.dataset.transition;
-                    }
-                    resolve();
-                });
-            })
-        );
+        await awaitFrame();
+
+        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'
+                )
+            );
+        }
+
+        await Promise.all(transitions).then(() => {
+            removeClass(target, clsEnter);
+            if (index === transitionIndex(target)) {
+                css(target, { height: '', alignContent: '' });
+                css(nodes, { opacity: '' });
+                delete target.dataset.transition;
+            }
+        });
     });
 
     return hasClass(target, clsLeave)
@@ -138,3 +129,11 @@ function getTransitionNodes(target) {
         []
     );
 }
+
+function awaitFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+function awaitTimeout(timeout) {
+    return new Promise((resolve) => setTimeout(resolve, timeout));
+}

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

@@ -12,63 +12,54 @@ import {
     Transition,
 } from 'uikit-util';
 
-export default function (action, target, duration) {
-    return new Promise((resolve) =>
-        requestAnimationFrame(() => {
-            let nodes = children(target);
-
-            // Get current state
-            const currentProps = nodes.map((el) => getProps(el, true));
-            const targetProps = css(target, ['height', 'padding']);
-
-            // Cancel previous animations
-            Transition.cancel(target);
-            nodes.forEach(Transition.cancel);
-            reset(target);
-
-            // Adding, sorting, removing nodes
-            action();
-
-            // Find new nodes
-            nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
-
-            // Wait for update to propagate
-            Promise.resolve().then(() => {
-                // Force update
-                fastdom.flush();
-
-                // Get new state
-                const targetPropsTo = css(target, ['height', 'padding']);
-                const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
-
-                // Reset to previous state
-                nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-                css(target, { display: 'block', ...targetProps });
-
-                // Start transitions on next frame
-                requestAnimationFrame(() => {
-                    const transitions = nodes
-                        .map(
-                            (el, i) =>
-                                parent(el) === target &&
-                                Transition.start(el, propsTo[i], duration, 'ease')
-                        )
-                        .concat(Transition.start(target, targetPropsTo, duration, 'ease'));
-
-                    Promise.all(transitions)
-                        .then(() => {
-                            nodes.forEach(
-                                (el, i) =>
-                                    parent(el) === target &&
-                                    css(el, 'display', propsTo[i].opacity === 0 ? 'none' : '')
-                            );
-                            reset(target);
-                        }, noop)
-                        .then(resolve);
-                });
-            });
-        })
-    );
+export default async function (action, target, duration) {
+    await awaitFrame();
+
+    let nodes = children(target);
+
+    // Get current state
+    const currentProps = nodes.map((el) => getProps(el, true));
+    const targetProps = css(target, ['height', 'padding']);
+
+    // Cancel previous animations
+    Transition.cancel(target);
+    nodes.forEach(Transition.cancel);
+    reset(target);
+
+    // Adding, sorting, removing nodes
+    action();
+
+    // Find new nodes
+    nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
+
+    // Wait for update to propagate
+    await Promise.resolve();
+
+    // Force update
+    fastdom.flush();
+
+    // Get new state
+    const targetPropsTo = css(target, ['height', 'padding']);
+    const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
+
+    // Reset to previous state
+    nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
+    css(target, { display: 'block', ...targetProps });
+
+    // Start transitions on next frame
+    await awaitFrame();
+
+    const transitions = nodes
+        .map((el, i) => parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease'))
+        .concat(Transition.start(target, targetPropsTo, duration, 'ease'));
+
+    await Promise.all(transitions).then(() => {
+        nodes.forEach(
+            (el, i) =>
+                parent(el) === target && css(el, 'display', propsTo[i].opacity === 0 ? 'none' : '')
+        );
+        reset(target);
+    }, noop);
 }
 
 function getProps(el, opacity) {
@@ -146,3 +137,7 @@ function getPositionWithMargin(el) {
 
     return { top, left, height, width, marginLeft, marginTop, transform: '' };
 }
+
+function awaitFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+}

package/src/js/mixin/parallax.js

@@ -353,7 +353,7 @@ function getValue(stops, percent) {
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^-?\d+(\S*)/;
+const unitRe = /^-?\d+(\S+)/;
 function getUnit(stops, defaultUnit) {
     for (const stop of stops) {
         const match = stop.match?.(unitRe);

package/src/js/mixin/scroll.js

@@ -12,7 +12,7 @@ export default {
 
 const scrollListeners = new Map();
 let unbindScrollListener;
-function registerScrollListener(id, listener) {
+export function registerScrollListener(id, listener) {
     unbindScrollListener =
         unbindScrollListener ||
         on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
@@ -23,7 +23,7 @@ function registerScrollListener(id, listener) {
     scrollListeners.set(id, listener);
 }
 
-function unregisterScrollListener(id) {
+export function unregisterScrollListener(id) {
     scrollListeners.delete(id);
     if (unbindScrollListener && !scrollListeners.size) {
         unbindScrollListener();

package/src/js/mixin/slider.js

@@ -6,7 +6,6 @@ import {
     $,
     $$,
     clamp,
-    fastdom,
     getIndex,
     hasClass,
     isNumber,
@@ -137,7 +136,7 @@ export default {
                 trigger(next, 'itemshown', [this]);
 
                 return new Promise((resolve) => {
-                    fastdom.write(() => {
+                    requestAnimationFrame(() => {
                         stack.shift();
                         if (stack.length) {
                             this.show(stack.shift(), true);

package/src/js/mixin/togglable.js

@@ -82,7 +82,6 @@ export default {
                         const done = () => {
                             removeClass(el, cls);
                             trigger(el, show ? 'shown' : 'hidden', [this]);
-                            this.$update(el);
                         };
 
                         return promise
@@ -127,7 +126,6 @@ export default {
 
             if (changed) {
                 trigger(el, 'toggled', [toggled, this]);
-                this.$update(el);
             }
         },
     },

package/src/js/util/observer.js

@@ -1,6 +1,5 @@
 import { on } from './event';
 import { toNodes } from './lang';
-import { fastdom } from './fastdom';
 import { inBrowser } from './env';
 
 export function observeIntersection(targets, cb, options, intersecting = true) {
@@ -53,7 +52,7 @@ function initResizeListener() {
             return;
         }
         pendingResize = true;
-        fastdom.read(() => (pendingResize = false));
+        requestAnimationFrame(() => (pendingResize = false));
         for (const listener of listeners) {
             listener();
         }

package/src/less/components/nav.less

@@ -454,7 +454,7 @@ ul.uk-nav-sub {
  * Naming is in plural to prevent conflicts with divider sub object.
  */
 
-.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
+.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
     margin-top: @nav-dividers-margin-top;
     padding-top: @nav-dividers-margin-top;
     border-top: @nav-dividers-border-width solid @nav-dividers-border;

package/src/less/components/navbar.less

@@ -77,6 +77,7 @@
 @navbar-dropdown-large-shift-margin:            0;
 @navbar-dropdown-large-padding:                 40px;
 
+@navbar-dropdown-dropbar-margin:                0;
 @navbar-dropdown-dropbar-shift-margin:          0;
 @navbar-dropdown-dropbar-padding-top:           @navbar-dropdown-padding;
 @navbar-dropdown-dropbar-padding-bottom:        @navbar-dropdown-dropbar-padding-top;
@@ -462,7 +463,7 @@
     background: transparent;
     /* 3 */
     padding: @navbar-dropdown-dropbar-padding-top 0 @navbar-dropdown-dropbar-padding-bottom 0;
-    --uk-position-offset: 0;
+    --uk-position-offset: @navbar-dropdown-dropbar-margin;
     --uk-position-shift-offset: @navbar-dropdown-dropbar-shift-margin;
     --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
     .hook-navbar-dropdown-dropbar();

package/src/scss/components/nav.scss

@@ -454,7 +454,7 @@ ul.uk-nav-sub {
  * Naming is in plural to prevent conflicts with divider sub object.
  */
 
-.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
+.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
     margin-top: $nav-dividers-margin-top;
     padding-top: $nav-dividers-margin-top;
     border-top: $nav-dividers-border-width solid $nav-dividers-border;

package/src/scss/components/navbar.scss

@@ -77,6 +77,7 @@ $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-ho
 $navbar-dropdown-large-shift-margin:             0 !default;
 $navbar-dropdown-large-padding:                  40px !default;
 
+$navbar-dropdown-dropbar-margin:                 0 !default;
 $navbar-dropdown-dropbar-shift-margin:           0 !default;
 $navbar-dropdown-dropbar-padding-top:            $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom:         $navbar-dropdown-dropbar-padding-top !default;
@@ -462,7 +463,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     background: transparent;
     /* 3 */
     padding: $navbar-dropdown-dropbar-padding-top 0 $navbar-dropdown-dropbar-padding-bottom 0;
-    --uk-position-offset: 0;
+    --uk-position-offset: #{$navbar-dropdown-dropbar-margin};
     --uk-position-shift-offset: #{$navbar-dropdown-dropbar-shift-margin};
     --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}

package/src/scss/variables-theme.scss

@@ -809,6 +809,7 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;
 $navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-dropbar-margin: 0 !default;
 $navbar-dropdown-dropbar-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;

package/src/scss/variables.scss

@@ -807,6 +807,7 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;
 $navbar-dropdown-large-padding: 40px !default;
+$navbar-dropdown-dropbar-margin: 0 !default;
 $navbar-dropdown-dropbar-shift-margin: 0 !default;
 $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
 $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global TESTS */
-import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
+import { addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -59,7 +59,7 @@ document.writeln(
 on(window, 'load', () =>
     setTimeout(
         () =>
-            fastdom.write(() => {
+            requestAnimationFrame(() => {
                 const $body = document.body;
                 const $container = prepend(
                     $body,