uikit 3.15.2 → 3.15.3-dev.45f4472ed

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.2",
+    "version": "3.15.3-dev.45f4472ed",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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/cover.js

@@ -21,7 +21,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, parent(this.$el)];
+        return [this.$el, getPositionedParent(this.$el) || parent(this.$el)];
     },
 
     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/slider-reactive.js

@@ -9,6 +9,8 @@ export default {
 
             if (!~this.prevIndex || this.index !== index) {
                 this.show(index);
+            } else {
+                this._translate(1, this.prevIndex, this.index);
             }
         },
 

package/src/js/mixin/slider.js

@@ -74,7 +74,7 @@ export default {
             },
 
             watch() {
-                this.$reset();
+                this.$emit('resize');
             },
         },
 

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/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;