uikit 3.15.2-dev.c376993b7 → 3.15.3-dev.8c13c92d9

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-dev.c376993b7",
+    "version": "3.15.3-dev.8c13c92d9",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,8 +34,8 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.18.6",
-        "@babel/preset-env": "^7.18.6",
+        "@babel/core": "^7.18.10",
+        "@babel/preset-env": "^7.18.10",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^4.0.0",
@@ -43,18 +43,18 @@
         "camelcase": "^7.0.0",
         "clean-css": "^5.3.1",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.49",
-        "eslint": "^8.19.0",
+        "esbuild": "^0.14.53",
+        "eslint": "^8.21.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
         "glob": "^8.0.3",
-        "inquirer": "^9.0.0",
+        "inquirer": "^9.1.0",
         "less": "^4.1.3",
         "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
         "prettier": "^2.7.1",
-        "rollup": "^2.77.0",
+        "rollup": "^2.77.2",
         "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

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

@@ -43,6 +43,8 @@ export default {
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
+        boundaryX: Boolean,
+        boundaryY: Boolean,
         target: Boolean,
         targetX: Boolean,
         targetY: Boolean,
@@ -59,6 +61,8 @@ export default {
         mode: ['click', 'hover'],
         toggle: '- *',
         boundary: false,
+        boundaryX: false,
+        boundaryY: false,
         target: false,
         targetX: false,
         targetY: false,
@@ -75,6 +79,13 @@ export default {
     },
 
     computed: {
+        boundary({ boundary, boundaryX, boundaryY }, $el) {
+            return [
+                query(boundaryX || boundary, $el) || window,
+                query(boundaryY || boundary, $el) || window,
+            ];
+        },
+
         target({ target, targetX, targetY }, $el) {
             targetX = targetX || target || this.targetEl;
             targetY = targetY || target || this.targetEl;
@@ -412,8 +423,6 @@ export default {
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;
 
-            const boundary = query(this.boundary, this.$el);
-            const boundaryOffset = offset(boundary || window);
             const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
             const viewportOffset = this.getViewportOffset(this.$el);
 
@@ -426,7 +435,7 @@ export default {
                 if (this.axis !== axis && includes([axis, true], this.stretch)) {
                     css(this.$el, {
                         [prop]: Math.min(
-                            boundaryOffset[prop],
+                            offset(this.boundary[i])[prop],
                             viewports[i][prop] - 2 * viewportOffset
                         ),
                         [`overflow-${axis}`]: 'auto',
@@ -444,7 +453,7 @@ export default {
 
             this.$el.hidden = false;
 
-            this.positionAt(this.$el, this.target, boundary);
+            this.positionAt(this.$el, this.target, this.boundary);
 
             for (const [i, [axis, prop, start, end]] of dirs) {
                 if (this.axis === axis && includes([axis, true], this.stretch)) {
@@ -457,17 +466,17 @@ export default {
                             (targetOffset[start] > elOffset[start]
                                 ? targetOffset[start] -
                                   Math.max(
-                                      boundaryOffset[start],
+                                      offset(this.boundary[i])[start],
                                       viewports[i][start] + viewportOffset
                                   )
                                 : Math.min(
-                                      boundaryOffset[end],
+                                      offset(this.boundary[i])[end],
                                       viewports[i][end] - viewportOffset
                                   ) - targetOffset[end]) - positionOffset,
                         [`overflow-${axis}`]: 'auto',
                     });
 
-                    this.positionAt(this.$el, this.target, boundary);
+                    this.positionAt(this.$el, this.target, this.boundary);
                 }
             }
         },

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

@@ -6,7 +6,6 @@ import {
     $,
     $$,
     clamp,
-    fastdom,
     getIndex,
     hasClass,
     isNumber,
@@ -74,7 +73,7 @@ export default {
             },
 
             watch() {
-                this.$reset();
+                this.$emit('resize');
             },
         },
 
@@ -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/js/util/position.js

@@ -141,7 +141,10 @@ function getViewport(element, viewportOffset, boundary, i) {
     }
 
     if (boundary) {
-        viewport = getIntersectionArea(viewport, offset(boundary));
+        viewport = getIntersectionArea(
+            viewport,
+            offset(isArray(boundary) ? boundary[i] : boundary)
+        );
     }
 
     return viewport;

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();}