uikit 3.13.10 → 3.13.11-dev.1296bb84c

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.10",
+    "version": "3.13.11-dev.1296bb84c",
     "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,
+    observeResize,
     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',
@@ -242,7 +247,23 @@ export default {
                             this.hide(false);
                         }
                     }),
-                    on(window, 'resize', () => this.$emit()),
+
+                    ...(this.display === 'static'
+                        ? []
+                        : (() => {
+                              const handler = () => this.$emit();
+                              return [
+                                  on(window, 'resize', handler),
+                                  on(document, 'scroll', handler, true),
+                                  (() => {
+                                      const observer = observeResize(
+                                          scrollParents(this.$el),
+                                          handler
+                                      );
+                                      return () => observer.disconnect();
+                                  })(),
+                              ];
+                          })()),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -353,25 +374,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,
@@ -378,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 (
@@ -390,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/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;
+}

package/src/js/mixin/parallax.js

@@ -4,7 +4,6 @@ import {
     createEvent,
     css,
     Dimensions,
-    each,
     findIndex,
     isNumber,
     isString,
@@ -65,7 +64,9 @@ export default {
 
     methods: {
         reset() {
-            each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
+            for (const prop in this.getCss(0)) {
+                css(this.$el, prop, '');
+            }
         },
 
         getCss(percent) {
@@ -79,12 +80,16 @@ export default {
 };
 
 function transformFn(prop, el, stops) {
-    const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
     let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
         transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
+    } else if (prop === 'scale') {
+        unit = '';
+        transformFn = (stop) =>
+            getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
     }
 
     if (stops.length === 1) {