uikit 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e

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.8-dev.fd15ccb29",
+    "version": "3.13.10-dev.4de12886e",
     "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/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';
@@ -242,7 +244,7 @@ export default {
                             this.hide(false);
                         }
                     }),
-                    on(window, 'resize', () => this.$emit('resize')),
+                    on(window, 'resize', () => this.$emit()),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -283,8 +285,6 @@ export default {
                 this.position();
             }
         },
-
-        events: ['resize'],
     },
 
     methods: {
@@ -355,26 +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 prop = this.axis === 'y' ? 'width' : 'height';
+            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, `max-${prop}`, '');
+            css(this.$el, 'maxWidth', '');
+            const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
 
             if (this.pos[1] === 'justify') {
+                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 > boundaryOffset.width) {
+            } else if (this.$el.offsetWidth > maxWidth) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            css(this.$el, `max-${prop}`, boundaryOffset[prop]);
+            css(this.$el, 'maxWidth', maxWidth);
 
-            this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
+            this.positionAt(
+                this.$el,
+                boundary && this.boundaryAlign ? boundary : this.target,
+                boundary
+            );
         },
     },
 };

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

@@ -15,7 +15,6 @@ export default {
     data: {
         target: '> *',
         row: true,
-        forceHeight: true,
     },
 
     computed: {
@@ -31,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
     },
 
     update: {

package/src/js/core/margin.js

@@ -15,7 +15,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.$el.children;
+        return [this.$el, 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,
@@ -61,8 +59,6 @@ export default {
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false,
     },
 
@@ -136,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,
         },
     },
 

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

@@ -13,8 +13,8 @@ import {
     fastdom,
     height as getHeight,
     offset as getOffset,
-    getScrollingElement,
     intersectRect,
+    isNumeric,
     isString,
     isVisible,
     noop,
@@ -37,8 +37,10 @@ export default {
 
     props: {
         position: String,
-        top: null,
+        top: Boolean,
         bottom: Boolean,
+        start: Boolean,
+        end: Boolean,
         offset: String,
         animation: String,
         clsActive: String,
@@ -52,8 +54,10 @@ export default {
 
     data: {
         position: 'top',
-        top: 0,
+        top: false,
         bottom: false,
+        start: false,
+        end: false,
         offset: 0,
         animation: '',
         clsActive: 'uk-active',
@@ -76,6 +80,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>');
@@ -169,13 +176,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 +232,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 +389,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/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

@@ -21,6 +21,7 @@ export default {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
+        viewportPadding: 10,
     },
 
     connected() {
@@ -59,6 +60,7 @@ export default {
                 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 ||

package/src/js/util/position.js

@@ -1,6 +1,6 @@
 import { offset } from './dimensions';
-import { clamp, includes } from './lang';
-import { getViewport, scrollParents } from './viewport';
+import { clamp, includes, ucfirst } from './lang';
+import { offsetViewport, scrollParents } from './viewport';
 
 const dirs = [
     ['width', 'x', 'left', 'right'],
@@ -53,7 +53,8 @@ function attachTo(element, target, options) {
 function attachToWithFlip(element, target, options) {
     const position = attachTo(element, target, options);
     const targetDim = offset(target);
-    const viewports = scrollParents(element).map(getViewport);
+    const viewports = scrollParents(element, /auto|scroll/);
+    const [scrollElement] = viewports;
 
     let {
         flip,
@@ -61,10 +62,12 @@ function attachToWithFlip(element, target, options) {
         offset: elOffset,
         boundary,
         viewport,
+        viewportPadding,
     } = options;
 
     viewports.push(viewport);
 
+    const offsetPosition = { ...position };
     for (const i in dirs) {
         const [prop, dir, start, end] = dirs[i];
 
@@ -75,10 +78,17 @@ function attachToWithFlip(element, target, options) {
         const willFlip =
             !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-        viewport = getIntersectionArea(
-            ...viewports,
-            willFlip || position[prop] > offset(boundary)[prop] ? null : boundary
-        );
+        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+
+        if (viewportPadding) {
+            viewport[start] += viewportPadding;
+            viewport[end] -= viewportPadding;
+        }
+
+        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+            viewport = getIntersectionArea(viewport, offset(boundary));
+        }
+
         const isInStartBoundary = position[start] >= viewport[start];
         const isInEndBoundary = position[end] <= viewport[end];
 
@@ -110,6 +120,41 @@ function attachToWithFlip(element, target, options) {
                     : 0) -
                 elOffset[i] * 2;
 
+            if (
+                !isInScrollArea(
+                    {
+                        ...position,
+                        [start]: position[start] + offsetBy,
+                        [end]: position[end] + offsetBy,
+                    },
+                    scrollElement,
+                    i
+                )
+            ) {
+                if (isInScrollArea(position, scrollElement, i)) {
+                    continue;
+                }
+
+                if (options.recursion) {
+                    return false;
+                }
+
+                const newPos = attachToWithFlip(element, target, {
+                    ...options,
+                    attach: {
+                        element: elAttach.map(flipDir).reverse(),
+                        target: targetAttach.map(flipDir).reverse(),
+                    },
+                    offset: elOffset.reverse(),
+                    flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+                    recursion: true,
+                });
+
+                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                    return newPos;
+                }
+            }
+
             // Move
         } else {
             offsetBy =
@@ -120,36 +165,47 @@ function attachToWithFlip(element, target, options) {
                 ) - position[start];
         }
 
-        position[start] = position[dir] = position[start] + offsetBy;
-        position[end] += offsetBy;
+        offsetPosition[start] = position[dir] = position[start] + offsetBy;
+        offsetPosition[end] += offsetBy;
     }
 
-    return position;
+    return offsetPosition;
 }
 
 function moveBy(start, end, dim) {
     return start === 'center' ? dim / 2 : start === end ? dim : 0;
 }
 
-function getIntersectionArea(...elements) {
-    let intersection;
-    for (const el of elements.filter(Boolean)) {
-        const rect = offset(el);
-        if (!intersection) {
-            intersection = rect;
-            continue;
-        }
-        for (const prop of ['left', 'top']) {
-            intersection[prop] = Math.max(rect[prop], intersection[prop]);
-        }
-        for (const prop of ['right', 'bottom']) {
-            intersection[prop] = Math.min(rect[prop], intersection[prop]);
+function getIntersectionArea(...rects) {
+    let area = {};
+    for (const rect of rects) {
+        for (const [, , start, end] of dirs) {
+            area[start] = Math.max(area[start] || 0, rect[start]);
+            area[end] = Math.min(...[area[end], rect[end]].filter(Boolean));
         }
     }
-    return intersection;
+    return area;
+}
+
+function isInScrollArea(position, scrollElement, dir) {
+    const viewport = offsetViewport(scrollElement);
+    const [prop, , start, end] = dirs[dir];
+    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
+    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`];
+
+    return position[start] >= viewport[start] && position[end] <= viewport[end];
 }
 
 function intersectLine(dimA, dimB, dir) {
     const [, , start, end] = dirs[dir];
     return dimA[end] > dimB[start] && dimB[end] > dimA[start];
 }
+
+function flipDir(prop) {
+    for (const i in dirs) {
+        const index = dirs[i].indexOf(prop);
+        if (~index) {
+            return dirs[1 - i][(index % 2) + 2];
+        }
+    }
+}