uikit 3.13.9 → 3.13.11-dev.2c16b47b1

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

package/src/js/components/slider.js

@@ -79,7 +79,7 @@ export default {
             let left = 0;
             const sets = [];
             const width = dimensions(this.list).width;
-            for (let i in this.slides) {
+            for (let i = 0; i < this.slides.length; i++) {
                 const slideWidth = dimensions(this.slides[i]).width;
 
                 if (left + slideWidth > width) {

package/src/js/components/sortable.js

@@ -10,14 +10,13 @@ import {
     css,
     findIndex,
     getEventPos,
-    getViewport,
     hasTouch,
     height,
     index,
     isEmpty,
     isInput,
     off,
-    offset,
+    offsetViewport,
     on,
     parent,
     pointerDown,
@@ -324,7 +323,7 @@ function trackScroll(pos) {
             .some((scrollEl) => {
                 let { scrollTop: scroll, scrollHeight } = scrollEl;
 
-                const { top, bottom, height } = offset(getViewport(scrollEl));
+                const { top, bottom, height } = offsetViewport(scrollEl);
 
                 if (top < y && top + 35 > y) {
                     scroll -= dist;

package/src/js/components/tooltip.js

@@ -6,9 +6,11 @@ import {
     attr,
     flipPosition,
     hasAttr,
+    includes,
     isFocusable,
     isTouch,
     matches,
+    offset,
     on,
     once,
     pointerDown,
@@ -104,10 +106,12 @@ export default {
 
                 this.positionAt(this.tooltip, this.$el);
 
+                const [dir, align] = getAlignment(this.tooltip, this.$el, this.pos);
+
                 this.origin =
-                    this.getAxis() === 'y'
-                        ? `${flipPosition(this.dir)}-${this.align}`
-                        : `${this.align}-${flipPosition(this.dir)}`;
+                    this.axis === 'y'
+                        ? `${flipPosition(dir)}-${align}`
+                        : `${align}-${flipPosition(dir)}`;
             });
 
             this.toggleElement(this.tooltip, true);
@@ -143,3 +147,34 @@ function makeFocusable(el) {
         attr(el, 'tabindex', '0');
     }
 }
+
+function getAlignment(el, target, [dir, align]) {
+    const elOffset = offset(el);
+    const targetOffset = offset(target);
+    const properties = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+
+    for (const props of properties) {
+        if (elOffset[props[0]] >= targetOffset[props[1]]) {
+            dir = props[1];
+            break;
+        }
+        if (elOffset[props[1]] <= targetOffset[props[0]]) {
+            dir = props[0];
+            break;
+        }
+    }
+
+    const props = includes(properties[0], dir) ? properties[1] : properties[0];
+    if (elOffset[props[0]] === targetOffset[props[0]]) {
+        align = props[0];
+    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
+        align = props[1];
+    } else {
+        align = 'center';
+    }
+
+    return [dir, align];
+}

package/src/js/core/cover.js

@@ -26,25 +26,38 @@ export default {
 
     update: {
         read() {
-            const el = this.$el;
-            const { offsetHeight: height, offsetWidth: width } =
-                getPositionedParent(el) || parent(el);
-            const dim = Dimensions.cover(
-                {
-                    width: this.width || el.naturalWidth || el.videoWidth || el.clientWidth,
-                    height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight,
-                },
-                {
-                    width: width + (width % 2 ? 1 : 0),
-                    height: height + (height % 2 ? 1 : 0),
-                }
-            );
+            const { ratio, cover } = Dimensions;
+            const { $el, width, height } = this;
+
+            let dim = { width, height };
 
             if (!dim.width || !dim.height) {
+                const intrinsic = {
+                    width: $el.naturalWidth || $el.videoWidth || $el.clientWidth,
+                    height: $el.naturalHeight || $el.videoHeight || $el.clientHeight,
+                };
+
+                if (dim.width) {
+                    dim = ratio(intrinsic, 'width', dim.width);
+                } else if (height) {
+                    dim = ratio(intrinsic, 'height', dim.height);
+                } else {
+                    dim = intrinsic;
+                }
+            }
+
+            const { offsetHeight: coverHeight, offsetWidth: coverWidth } =
+                getPositionedParent($el) || parent($el);
+            const coverDim = cover(dim, {
+                width: coverWidth + (coverWidth % 2 ? 1 : 0),
+                height: coverHeight + (coverHeight % 2 ? 1 : 0),
+            });
+
+            if (!coverDim.width || !coverDim.height) {
                 return false;
             }
 
-            return dim;
+            return coverDim;
         },
 
         write({ height, width }) {

package/src/js/core/drop.js

@@ -13,7 +13,9 @@ import {
     isTouch,
     matches,
     MouseTracker,
+    noop,
     offset,
+    offsetViewport,
     on,
     once,
     parent,
@@ -24,6 +26,7 @@ import {
     pointerUp,
     query,
     removeClass,
+    scrollParents,
     toggleClass,
     within,
 } from 'uikit-util';
@@ -42,6 +45,7 @@ export default {
         boundaryAlign: Boolean,
         delayShow: Number,
         delayHide: Number,
+        display: String,
         clsDrop: String,
     },
 
@@ -52,6 +56,7 @@ export default {
         boundaryAlign: false,
         delayShow: 0,
         delayHide: 800,
+        display: null,
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
@@ -243,12 +248,14 @@ export default {
                         }
                     }),
                     on(window, 'resize', () => this.$emit()),
-                    on(
-                        document,
-                        'scroll',
-                        ({ target }) => target.contains(this.$el) && this.$emit(),
-                        true
-                    ),
+                    this.display === 'static'
+                        ? noop
+                        : on(
+                              document,
+                              'scroll',
+                              ({ target }) => target.contains(this.$el) && this.$emit(),
+                              true
+                          ),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -359,25 +366,33 @@ export default {
         },
 
         position() {
-            const boundary = query(this.boundary, this.$el) || window;
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
-            const boundaryOffset = offset(boundary);
-            const targetOffset = offset(this.target);
-            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
+            const boundary = query(this.boundary, this.$el);
+            const [scrollParent] = scrollParents(this.$el);
+            const scrollParentOffset = offsetViewport(scrollParent);
+            const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
+
+            css(this.$el, 'maxWidth', '');
+            const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
 
             if (this.pos[1] === 'justify') {
-                const prop = this.getAxis() === 'y' ? 'width' : 'height';
+                const prop = this.axis === 'y' ? 'width' : 'height';
+                const targetOffset = offset(this.target);
+                const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
                 css(this.$el, prop, alignTo[prop]);
-            } else if (
-                this.$el.offsetWidth >
-                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
-            ) {
+            } else if (this.$el.offsetWidth > maxWidth) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
+            css(this.$el, 'maxWidth', maxWidth);
+
+            this.positionAt(
+                this.$el,
+                boundary && this.boundaryAlign ? boundary : this.target,
+                boundary
+            );
         },
     },
 };

package/src/js/core/height-match.js

@@ -30,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.elements];
+        return [this.$el, ...this.elements];
     },
 
     update: {

package/src/js/core/margin.js

@@ -1,5 +1,12 @@
 import Resize from '../mixin/resize';
-import { isRtl, isVisible, observeMutation, offsetPosition, toggleClass } from 'uikit-util';
+import {
+    isRtl,
+    isVisible,
+    observeMutation,
+    offsetPosition,
+    toArray,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -15,7 +22,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.$el.children];
+        return [this.$el, ...toArray(this.$el.children)];
     },
 
     connected() {

package/src/js/core/navbar.js

@@ -27,8 +27,6 @@ import {
     within,
 } from 'uikit-util';
 
-const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
-
 export default {
     mixins: [Class, Container],
 
@@ -48,7 +46,7 @@ export default {
     },
 
     data: {
-        dropdown: navItem,
+        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-navbar-dropdown',
         mode: undefined,
@@ -134,8 +132,22 @@ export default {
             immediate: true,
         },
 
-        toggles({ dropdown }, $el) {
-            return $$(dropdown, $el);
+        toggles: {
+            get({ dropdown }, $el) {
+                return $$(dropdown, $el);
+            },
+
+            watch() {
+                const justify = hasClass(this.$el, 'uk-navbar-justify');
+                for (const container of $$(
+                    '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
+                    this.$el
+                )) {
+                    css(container, 'flexGrow', justify ? $$(this.dropdown, container).length : '');
+                }
+            },
+
+            immediate: true,
         },
     },
 
@@ -297,7 +309,7 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, dir }) {
+            handler(_, { $el, pos: [dir] = [] }) {
                 if (!hasClass($el, this.clsDrop)) {
                     return;
                 }

package/src/js/core/scrollspy-nav.js

@@ -2,11 +2,10 @@ import Scroll from '../mixin/scroll';
 import {
     $$,
     closest,
-    getViewport,
-    getViewportClientHeight,
     hasClass,
     isVisible,
     offset,
+    offsetViewport,
     scrollParents,
     toggleClass,
     trigger,
@@ -65,19 +64,15 @@ export default {
 
                 const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
                 const { scrollTop, scrollHeight } = scrollElement;
-                const max = scrollHeight - getViewportClientHeight(scrollElement);
+                const viewport = offsetViewport(scrollElement);
+                const max = scrollHeight - viewport.height;
                 let active = false;
 
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
-                    for (const i in targets) {
-                        if (
-                            offset(targets[i]).top -
-                                offset(getViewport(scrollElement)).top -
-                                this.offset >
-                            0
-                        ) {
+                    for (let i = 0; i < targets.length; i++) {
+                        if (offset(targets[i]).top - viewport.top - this.offset > 0) {
                             break;
                         }
                         active = +i;
@@ -95,7 +90,7 @@ export default {
                 const changed = active !== false && !hasClass(this.elements[active], this.cls);
 
                 this.links.forEach((el) => el.blur());
-                for (const i in this.elements) {
+                for (let i = 0; i < this.elements.length; i++) {
                     toggleClass(this.elements[i], this.cls, +i === active);
                 }
 

package/src/js/core/sticky.js

@@ -10,11 +10,10 @@ import {
     clamp,
     css,
     dimensions,
-    fastdom,
     height as getHeight,
     offset as getOffset,
-    getScrollingElement,
     intersectRect,
+    isNumeric,
     isString,
     isVisible,
     noop,
@@ -38,8 +37,11 @@ export default {
     props: {
         position: String,
         top: null,
-        bottom: Boolean,
+        bottom: null,
+        start: null,
+        end: null,
         offset: String,
+        overflowFlip: Boolean,
         animation: String,
         clsActive: String,
         clsInactive: String,
@@ -52,9 +54,12 @@ export default {
 
     data: {
         position: 'top',
-        top: 0,
+        top: false,
         bottom: false,
+        start: false,
+        end: false,
         offset: 0,
+        overflowFlip: false,
         animation: '',
         clsActive: 'uk-active',
         clsInactive: '',
@@ -76,6 +81,9 @@ export default {
     },
 
     connected() {
+        this.start = coerce(this.start || this.top);
+        this.end = coerce(this.end || this.bottom);
+
         this.placeholder =
             $('+ .uk-sticky-placeholder', this.$el) ||
             $('<div class="uk-sticky-placeholder"></div>');
@@ -94,6 +102,17 @@ export default {
     },
 
     events: [
+        {
+            name: 'resize',
+
+            el() {
+                return window;
+            },
+
+            handler() {
+                this.$emit('resize');
+            },
+        },
         {
             name: 'load hashchange popstate',
 
@@ -110,7 +129,7 @@ export default {
                     return;
                 }
 
-                fastdom.read(() => {
+                setTimeout(() => {
                     const targetOffset = getOffset($(location.hash));
                     const elOffset = getOffset(this.$el);
 
@@ -119,8 +138,8 @@ export default {
                             window,
                             targetOffset.top -
                                 elOffset.height -
-                                toPx(this.targetOffset, 'height') -
-                                toPx(this.offset, 'height')
+                                toPx(this.targetOffset, 'height', this.placeholder) -
+                                toPx(this.offset, 'height', this.placeholder)
                         );
                     }
                 });
@@ -150,32 +169,38 @@ export default {
 
                 if (hide) {
                     this.show();
-                    fastdom.write(() => css(this.selTarget, 'transition', ''));
+                    requestAnimationFrame(() => css(this.selTarget, 'transition', ''));
                 }
 
                 const referenceElement = this.isFixed ? this.placeholder : this.$el;
                 const windowHeight = getHeight(window);
 
                 let position = this.position;
-                if (position === 'auto' && height > windowHeight) {
-                    position = 'bottom';
+                if (this.overflowFlip && height > windowHeight) {
+                    position = position === 'top' ? 'bottom' : 'top';
                 }
 
                 let offset = toPx(this.offset, 'height', referenceElement);
-                if (position === 'bottom') {
+                if (position === 'bottom' && (height < windowHeight || this.overflowFlip)) {
                     offset += windowHeight - height;
                 }
 
-                const overflow = Math.max(0, height + offset - windowHeight);
+                const overflow = this.overflowFlip
+                    ? 0
+                    : Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
 
-                const top = parseProp(this.top, this.$el, topOffset);
-                const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
-
-                const start = Math.max(top, topOffset) - offset;
-                const end = bottom
-                    ? bottom - getOffset(this.$el).height + overflow - offset
-                    : getScrollingElement(this.$el).scrollHeight - windowHeight;
+                const start =
+                    (this.start === false
+                        ? topOffset
+                        : parseProp(this.start, this.$el, topOffset)) - offset;
+                const end =
+                    this.end === false
+                        ? document.scrollingElement.scrollHeight - windowHeight
+                        : parseProp(this.end, this.$el, topOffset + height, true) -
+                          getOffset(this.$el).height +
+                          overflow -
+                          offset;
 
                 return {
                     start,
@@ -221,7 +246,9 @@ export default {
                     prevDir,
                     scroll,
                     prevScroll,
-                    offsetParentTop: getOffset(this.$el.offsetParent).top,
+                    offsetParentTop: getOffset(
+                        (this.isFixed ? this.placeholder : this.$el).offsetParent
+                    ).top,
                     overflowScroll: clamp(
                         overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
                         0,
@@ -376,8 +403,8 @@ function parseProp(value, el, propOffset, padding) {
         return 0;
     }
 
-    if (isString(value) && value.match(/^-?\d/)) {
-        return propOffset + toPx(value);
+    if (isNumeric(value) || (isString(value) && value.match(/^-?\d/))) {
+        return propOffset + toPx(value, 'height', el, true);
     } else {
         const refElement = value === true ? parent(el) : query(value, el);
         return (
@@ -388,3 +415,12 @@ function parseProp(value, el, propOffset, padding) {
         );
     }
 }
+
+function coerce(value) {
+    if (value === 'true') {
+        return true;
+    } else if (value === 'false') {
+        return false;
+    }
+    return value;
+}

package/src/js/core/toggle.js

@@ -156,15 +156,7 @@ export default {
         {
             name: 'click',
 
-            filter() {
-                return includes(this.mode, 'click');
-            },
-
             handler(e) {
-                if (this._preventClick) {
-                    return (this._preventClick = null);
-                }
-
                 let link;
                 if (
                     closest(e.target, 'a[href="#"], a[href=""]') ||
@@ -175,6 +167,14 @@ export default {
                     e.preventDefault();
                 }
 
+                if (this._preventClick) {
+                    return (this._preventClick = null);
+                }
+
+                if (!includes(this.mode, 'click')) {
+                    return;
+                }
+
                 this.toggle();
             },
         },

package/src/js/mixin/media.js

@@ -20,16 +20,19 @@ export default {
 
     connected() {
         const media = toMedia(this.media);
-        this.mediaObj = window.matchMedia(media);
-        const handler = () => {
-            this.matchMedia = this.mediaObj.matches;
-            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
-        };
-        this.offMediaObj = on(this.mediaObj, 'change', () => {
+        this.matchMedia = true;
+        if (media) {
+            this.mediaObj = window.matchMedia(media);
+            const handler = () => {
+                this.matchMedia = this.mediaObj.matches;
+                trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+            };
+            this.offMediaObj = on(this.mediaObj, 'change', () => {
+                handler();
+                this.$emit('resize');
+            });
             handler();
-            this.$emit('resize');
-        });
-        handler();
+        }
     },
 
     disconnected() {

package/src/js/mixin/modal.js

@@ -4,6 +4,7 @@ import {
     append,
     attr,
     css,
+    endsWith,
     includes,
     isFocusable,
     last,
@@ -15,7 +16,6 @@ import {
     pointerUp,
     removeClass,
     toFloat,
-    toMs,
     width,
     within,
 } from 'uikit-util';
@@ -245,7 +245,7 @@ function animate({ transitionElement, _toggle }) {
     return (el, show) =>
         new Promise((resolve, reject) =>
             once(el, 'show hide', () => {
-                el._reject && el._reject();
+                el._reject?.();
                 el._reject = reject;
 
                 _toggle(el, show);
@@ -269,3 +269,7 @@ function animate({ transitionElement, _toggle }) {
             })
         ).then(() => delete el._reject);
 }
+
+function toMs(time) {
+    return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
+}