uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.5fbbc45fb

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.14.4-dev.5e7e87ba7",
+    "version": "3.14.4-dev.5fbbc45fb",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,27 +34,27 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.17.10",
-        "@babel/preset-env": "^7.17.10",
+        "@babel/core": "^7.18.6",
+        "@babel/preset-env": "^7.18.6",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^4.0.0",
         "archiver": "^5.3.1",
-        "camelcase": "^6.3.0",
+        "camelcase": "^7.0.0",
         "clean-css": "^5.3.0",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.38",
-        "eslint": "^8.15.0",
+        "esbuild": "^0.14.48",
+        "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
-        "glob": "^8.0.1",
-        "inquirer": "^8.2.4",
-        "less": "^4.1.2",
+        "glob": "^8.0.3",
+        "inquirer": "^9.0.0",
+        "less": "^4.1.3",
         "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.6.2",
-        "rollup": "^2.72.1",
+        "prettier": "^2.7.1",
+        "rollup": "^2.76.0",
         "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/images/components/navbar-toggle-icon.svg

@@ -1,22 +1,25 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <style>
+    <style>
 
-    .uk-navbar-toggle svg > [class*='line-'] {
-        transition: 0.2s ease-in-out;
-        transition-property: transform, opacity,;
-        transform-origin: center;
-        opacity: 1;
-    }
+        .uk-navbar-toggle-animate svg > [class*='line-'] {
+            transition: 0.2s ease-in-out;
+            transition-property: transform, opacity,;
+            transform-origin: center;
+            opacity: 1;
+        }
 
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-3 { transform: rotate(-45deg); }
+        .uk-navbar-toggle svg > .line-3 { opacity: 0; }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { opacity: 1; }
 
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-1,
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-4 { opacity: 0; }
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-1 { transform: translateY(6px) scaleX(0); }
-    .uk-navbar-toggle[aria-expanded="true"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { transform: rotate(-45deg); }
 
-  </style>
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1,
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-4 { opacity: 0; }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1 { transform: translateY(6px) scaleX(0); }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }
+
+    </style>
     <rect class="line-1" y="3" width="20" height="2" />
     <rect class="line-2" y="9" width="20" height="2" />
     <rect class="line-3" y="9" width="20" height="2" />

package/src/js/api/hooks.js

@@ -96,7 +96,11 @@ export default function (UIkit) {
             }
 
             if (write && result !== false) {
-                fastdom.write(() => write.call(this, this._data, types));
+                fastdom.write(() => {
+                    if (this._connected) {
+                        write.call(this, this._data, types);
+                    }
+                });
             }
         }
     }

package/src/js/api/state.js

@@ -153,7 +153,7 @@ function getProps(opts, name) {
 
     for (const key in options) {
         const prop = camelize(key);
-        if (props[prop] !== undefined) {
+        if (!isUndefined(props[prop])) {
             data[prop] = coerce(props[prop], options[key]);
         }
     }

package/src/js/components/notification.js

@@ -56,7 +56,9 @@ export default {
         this.$mount(
             append(
                 container,
-                `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
+                `<div class="${this.clsMsg}${
+                    this.status ? ` ${this.clsMsg}-${this.status}` : ''
+                }" role="alert">
                 <a href class="${this.clsClose}" data-uk-close></a>
                 <div>${this.message}</div>
             </div>`

package/src/js/core/drop.js

@@ -1,6 +1,7 @@
 import Container from '../mixin/container';
 import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
+import Style from '../mixin/style';
 import Togglable from '../mixin/togglable';
 import {
     addClass,
@@ -34,7 +35,7 @@ import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
 export let active;
 
 export default {
-    mixins: [Container, Lazyload, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Style, Togglable],
 
     args: 'pos',
 
@@ -48,7 +49,7 @@ export default {
         stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
-        display: String,
+        autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean,
@@ -64,7 +65,7 @@ export default {
         stretch: false,
         delayShow: 0,
         delayHide: 800,
-        display: null,
+        autoUpdate: true,
         clsDrop: false,
         animateOut: false,
         bgScroll: true,
@@ -108,6 +109,7 @@ export default {
 
     disconnected() {
         if (this.isActive()) {
+            this.hide(false);
             active = null;
         }
     },
@@ -241,7 +243,8 @@ export default {
 
                 this.tracker.init();
 
-                for (const handler of [
+                const update = () => this.$emit();
+                const handlers = [
                     on(
                         document,
                         pointerDown,
@@ -270,29 +273,28 @@ export default {
                         }
                     }),
 
+                    on(window, 'resize', update),
+
+                    (() => {
+                        const observer = observeResize(
+                            scrollParents(this.$el).concat(this.targetEl),
+                            update
+                        );
+                        return () => observer.disconnect();
+                    })(),
+
+                    ...(this.autoUpdate
+                        ? [on([document, scrollParents(this.$el)], 'scroll', update)]
+                        : []),
+
                     ...(this.bgScroll
                         ? []
                         : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+                ];
 
-                    ...(this.display === 'static'
-                        ? []
-                        : (() => {
-                              const handler = () => this.$emit();
-                              return [
-                                  on(window, 'resize', handler),
-                                  on([document, scrollParents(this.$el)], 'scroll', handler),
-                                  (() => {
-                                      const observer = observeResize(
-                                          scrollParents(this.$el),
-                                          handler
-                                      );
-                                      return () => observer.disconnect();
-                                  })(),
-                              ];
-                          })()),
-                ]) {
-                    once(this.$el, 'hide', handler, { self: true });
-                }
+                once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+                    self: true,
+                });
             },
         },
 
@@ -401,13 +403,13 @@ export default {
 
         position() {
             removeClass(this.$el, `${this.clsDrop}-stack`);
-            css(this.$el, { maxWidth: '', top: '', left: '' });
+            attr(this.$el, 'style', this._style);
 
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;
 
             const boundary = query(this.boundary, this.$el);
-            const boundaryOffset = offsetViewport(boundary || window);
+            const boundaryOffset = offset(boundary || window);
             const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
             const viewportOffset = this.getViewportOffset(this.$el);
 
@@ -417,15 +419,12 @@ export default {
             ];
 
             for (const [i, [axis, prop]] of dirs) {
-                if (includes([axis, true], this.stretch)) {
+                if (this.axis !== axis && includes([axis, true], this.stretch)) {
                     css(this.$el, {
-                        [prop]:
-                            this.axis === axis
-                                ? '' // Reset prop in main axis before positioning to not cause the drop to flip prematurely
-                                : Math.min(
-                                      boundaryOffset[prop],
-                                      viewports[i][prop] - 2 * viewportOffset
-                                  ),
+                        [prop]: Math.min(
+                            boundaryOffset[prop],
+                            viewports[i][prop] - 2 * viewportOffset
+                        ),
                         [`overflow-${axis}`]: 'auto',
                     });
                 }

package/src/js/core/navbar.js

@@ -38,6 +38,8 @@ export default {
         offset: Number,
         boundary: Boolean,
         target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -386,7 +388,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.targetEl, this.$el) && active;
+            return includes(this.dropdowns, active?.$el) && active;
         },
 
         transitionTo(newHeight, el) {

package/src/js/core/offcanvas.js

@@ -119,9 +119,12 @@ export default {
                     addClass(parent(this.panel), this.clsMode);
                 }
 
-                addClass(document.body, this.clsContainer, this.clsFlip);
-                css(document.body, 'touch-action', 'pan-y pinch-zoom');
+                const { body, scrollingElement } = document;
+
+                addClass(body, this.clsContainer, this.clsFlip);
+                css(body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
+                css(this.panel, 'maxWidth', scrollingElement.clientWidth);
                 addClass(this.$el, this.clsOverlay);
                 addClass(
                     this.panel,
@@ -129,8 +132,8 @@ export default {
                     this.mode === 'reveal' ? '' : this.clsMode
                 );
 
-                height(document.body); // force reflow
-                addClass(document.body, this.clsContainerAnimation);
+                height(body); // force reflow
+                addClass(body, this.clsContainerAnimation);
 
                 this.clsContainerAnimation && suppressUserScale();
             },
@@ -162,6 +165,7 @@ export default {
                 removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
                 removeClass(this.$el, this.clsOverlay);
                 css(this.$el, 'display', '');
+                css(this.panel, 'maxWidth', '');
                 removeClass(document.body, this.clsContainer, this.clsFlip);
             },
         },

package/src/js/core/toggle.js

@@ -181,7 +181,7 @@ export default {
         },
 
         {
-            name: 'toggled',
+            name: 'hide show',
 
             self: true,
 
@@ -189,10 +189,8 @@ export default {
                 return this.target;
             },
 
-            handler(e, toggled) {
-                if (e.target === this.target[0]) {
-                    this.updateAria(toggled);
-                }
+            handler({ type }) {
+                this.updateAria(type === 'show');
             },
         },
 

package/src/js/mixin/modal.js

@@ -9,6 +9,7 @@ import {
     includes,
     isFocusable,
     last,
+    noop,
     on,
     once,
     parent,
@@ -134,8 +135,8 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hide', preventOverscroll(this.$el));
-                    once(this.$el, 'hide', preventBackgroundScroll());
+                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
                 }
 
                 if (this.stack) {
@@ -217,10 +218,6 @@ export default {
                     active.splice(active.indexOf(this), 1);
                 }
 
-                if (!active.length) {
-                    css(document.body, 'overflowY', '');
-                }
-
                 css(this.$el, 'zIndex', '');
 
                 if (!active.some((modal) => modal.clsPage === this.clsPage)) {
@@ -337,16 +334,22 @@ export function preventOverscroll(el) {
     return () => events.forEach((fn) => fn());
 }
 
+let prevented;
 export function preventBackgroundScroll() {
-    const { body, documentElement } = document;
-    css(body, {
-        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+    if (prevented) {
+        return noop;
+    }
+    prevented = true;
+
+    const { scrollingElement } = document;
+    css(scrollingElement, {
+        overflowY: 'hidden',
         touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth,
     });
-    css(documentElement, 'overflowY', 'hidden');
     return () => {
-        css(documentElement, 'overflowY', '');
-        css(body, { overflowY: '', touchAction: '' });
+        prevented = false;
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
     };
 }
 

package/src/js/mixin/position.js

@@ -35,6 +35,7 @@ export default {
     methods: {
         positionAt(element, target, boundary) {
             let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+            const placement = [this.flip && 'flip', this.shift && 'shift'];
 
             const attach = {
                 element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
@@ -43,9 +44,10 @@ export default {
 
             if (this.axis === 'y') {
                 for (const prop in attach) {
-                    attach[prop] = attach[prop].reverse();
+                    attach[prop].reverse();
                 }
-                offset = offset.reverse();
+                offset.reverse();
+                placement.reverse();
             }
 
             const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -59,8 +61,7 @@ export default {
                 attach,
                 offset,
                 boundary,
-                flip: this.flip,
-                shift: this.shift,
+                placement,
                 viewportOffset: this.getViewportOffset(element),
             });
 

package/src/js/mixin/style.js

@@ -0,0 +1,11 @@
+import { attr } from 'uikit-util';
+
+export default {
+    beforeConnect() {
+        this._style = attr(this.$el, 'style');
+    },
+
+    disconnected() {
+        attr(this.$el, 'style', this._style);
+    },
+};

package/src/js/mixin/togglable.js

@@ -168,9 +168,16 @@ export function toggleTransition(cmp) {
         }
 
         const prevProps = Object.fromEntries(
-            ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
-                (key) => [key, el.style[key]]
-            )
+            [
+                'padding',
+                'border',
+                'width',
+                'height',
+                'overflowY',
+                'overflowX',
+                marginProp,
+                marginStartProp,
+            ].map((key) => [key, el.style[key]])
         );
 
         const dim = dimensions(el);
@@ -188,6 +195,7 @@ export function toggleTransition(cmp) {
             height: dim.height,
             width: dim.width,
             ...css(el, [
+                'overflow',
                 'padding',
                 'borderTop',
                 'borderRight',

package/src/js/util/animation.js

@@ -4,7 +4,7 @@ import { css, propName } from './style';
 import { startsWith, toNodes } from './lang';
 import { addClass, hasClass, removeClass, removeClasses } from './class';
 
-export function transition(element, props, duration = 400, timing = 'linear') {
+function transition(element, props, duration = 400, timing = 'linear') {
     duration = Math.round(duration);
     return Promise.all(
         toNodes(element).map(
@@ -67,7 +67,7 @@ export const Transition = {
 
 const animationPrefix = 'uk-animation-';
 
-export function animate(element, animation, duration = 200, origin, out) {
+function animate(element, animation, duration = 200, origin, out) {
     return Promise.all(
         toNodes(element).map(
             (element) =>
@@ -101,7 +101,8 @@ export function animate(element, animation, duration = 200, origin, out) {
     );
 }
 
-const inProgress = new RegExp(`${animationPrefix}(enter|leave)`);
+const inProgressRe = new RegExp(`${animationPrefix}(enter|leave)`);
+
 export const Animation = {
     in: animate,
 
@@ -110,7 +111,7 @@ export const Animation = {
     },
 
     inProgress(element) {
-        return inProgress.test(attr(element, 'class'));
+        return inProgressRe.test(attr(element, 'class'));
     },
 
     cancel(element) {

package/src/js/util/class.js

@@ -10,7 +10,9 @@ export function removeClass(element, ...args) {
 }
 
 export function removeClasses(element, cls) {
-    attr(element, 'class', (value) => (value || '').replace(new RegExp(`\\b${cls}\\b`, 'g'), ''));
+    attr(element, 'class', (value) =>
+        (value || '').replace(new RegExp(`\\b${cls}\\b\\s?`, 'g'), '')
+    );
 }
 
 export function replaceClass(element, ...args) {