uikit 3.13.9 → 3.13.11-dev.98491b3f4

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.98491b3f4",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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

@@ -14,6 +14,7 @@ import {
     matches,
     MouseTracker,
     offset,
+    offsetViewport,
     on,
     once,
     parent,
@@ -24,6 +25,7 @@ import {
     pointerUp,
     query,
     removeClass,
+    scrollParents,
     toggleClass,
     within,
 } from 'uikit-util';
@@ -243,12 +245,6 @@ export default {
                         }
                     }),
                     on(window, 'resize', () => this.$emit()),
-                    on(
-                        document,
-                        'scroll',
-                        ({ target }) => target.contains(this.$el) && this.$emit(),
-                        true
-                    ),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -359,25 +355,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/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
-                        ) {
+                        if (offset(targets[i]).top - viewport.top - this.offset > 0) {
                             break;
                         }
                         active = +i;

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,
@@ -37,8 +36,10 @@ export default {
 
     props: {
         position: String,
-        top: null,
+        top: Boolean,
         bottom: Boolean,
+        start: Boolean,
+        end: Boolean,
         offset: String,
         animation: String,
         clsActive: String,
@@ -52,8 +53,10 @@ export default {
 
     data: {
         position: 'top',
-        top: 0,
+        top: false,
         bottom: false,
+        start: false,
+        end: false,
         offset: 0,
         animation: '',
         clsActive: 'uk-active',
@@ -76,6 +79,9 @@ export default {
     },
 
     connected() {
+        this.start = this.start || this.top;
+        this.end = this.end || this.bottom;
+
         this.placeholder =
             $('+ .uk-sticky-placeholder', this.$el) ||
             $('<div class="uk-sticky-placeholder"></div>');
@@ -110,7 +116,7 @@ export default {
                     return;
                 }
 
-                fastdom.read(() => {
+                setTimeout(() => {
                     const targetOffset = getOffset($(location.hash));
                     const elOffset = getOffset(this.$el);
 
@@ -150,7 +156,7 @@ 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;
@@ -169,13 +175,17 @@ export default {
                 const overflow = 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 +231,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 +388,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 (

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;
+}

package/src/js/mixin/parallax.js

@@ -79,12 +79,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) {

package/src/js/mixin/position.js

@@ -3,6 +3,7 @@ import {
     flipPosition,
     getCssVar,
     offset as getOffset,
+    includes,
     isNumeric,
     isRtl,
     positionAt,
@@ -20,49 +21,48 @@ export default {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
+        viewportPadding: 10,
     },
 
     connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.dir = this.pos[0];
-        this.align = this.pos[1];
+        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
     },
 
     methods: {
         positionAt(element, target, boundary) {
-            const axis = this.getAxis();
-            const dir = this.pos[0];
-            const align = this.pos[1];
+            const [dir, align] = this.pos;
 
             let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
-                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
             offset = toPx(offset) + toPx(getCssVar('position-offset', element));
+            offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
 
-            const { x, y } = positionAt(
-                element,
-                target,
-                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
-                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
-                axis === 'x'
-                    ? `${dir === 'left' ? -offset : offset}`
-                    : ` ${dir === 'top' ? -offset : offset}`,
-                null,
-                this.flip,
-                boundary
-            ).target;
+            const attach = {
+                element: [flipPosition(dir), align],
+                target: [dir, align],
+            };
 
-            this.dir = axis === 'x' ? x : y;
-            this.align = axis === 'x' ? y : x;
-        },
+            if (this.axis === 'y') {
+                for (const prop in attach) {
+                    attach[prop] = attach[prop].reverse();
+                }
+                offset = offset.reverse();
+            }
 
-        getAxis() {
-            return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                viewportPadding: this.viewportPadding,
+                flip: this.flip,
+            });
         },
     },
 };

package/src/js/uikit-core.js

@@ -1,5 +1,4 @@
 import UIkit from './api/index';
-import Core from './core/core';
 import boot from './api/boot';
 import * as components from './core/index';
 import { each } from 'uikit-util';
@@ -7,9 +6,6 @@ import { each } from 'uikit-util';
 // register components
 each(components, (component, name) => UIkit.component(name, component));
 
-// core functionality
-UIkit.use(Core);
-
 boot(UIkit);
 
 export default UIkit;

package/src/js/util/lang.js

@@ -133,10 +133,6 @@ export function toWindow(element) {
     return document?.defaultView || window;
 }
 
-export function toMs(time) {
-    return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
-}
-
 export function isEqual(value, other) {
     return (
         value === other ||