uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.a02c81d72

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.871ba3c05",
+    "version": "3.14.4-dev.a02c81d72",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/backgrounds/nav-parent-close.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="10 1 4 7 10 13" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
 </svg>

package/src/images/backgrounds/nav-parent-open.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="13 10 7 4 1 10" />
 </svg>

package/src/images/backgrounds/navbar-parent-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/images/backgrounds/navbar-parent-open.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="11 8.5 6 3.5 1 8.5" />
+</svg>

package/src/js/components/filter.js

@@ -103,7 +103,7 @@ export default {
                 });
         },
 
-        setState(state, animate = true) {
+        async setState(state, animate = true) {
             state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
@@ -112,7 +112,7 @@ export default {
                 toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
             );
 
-            Promise.all(
+            await Promise.all(
                 $$(this.target, this.$el).map((target) => {
                     const filterFn = () => {
                         applyState(state, target, getChildren(target));
@@ -120,7 +120,9 @@ export default {
                     };
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
-            ).then(() => trigger(this.$el, 'afterFilter', [this]));
+            );
+
+            trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {

package/src/js/components/sortable.js

@@ -26,7 +26,6 @@ import {
     remove,
     removeClass,
     scrollParents,
-    scrollTop,
     toggleClass,
     Transition,
     trigger,
@@ -313,7 +312,7 @@ function trackScroll(pos) {
     let last = Date.now();
     trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -334,7 +333,7 @@ function trackScroll(pos) {
                 }
 
                 if (scroll > 0 && scroll < scrollHeight - height) {
-                    scrollTop(scrollEl, scroll);
+                    scrollEl.scrollTop = scroll;
                     return true;
                 }
             });

package/src/js/core/drop.js

@@ -30,6 +30,7 @@ import {
     toggleClass,
     within,
 } from 'uikit-util';
+import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
 
 export let active;
 
@@ -48,6 +49,7 @@ export default {
         display: String,
         clsDrop: String,
         animateOut: Boolean,
+        bgScroll: Boolean,
     },
 
     data: {
@@ -63,6 +65,7 @@ export default {
         cls: 'uk-open',
         container: false,
         animateOut: false,
+        bgScroll: true,
     },
 
     created() {
@@ -250,6 +253,10 @@ export default {
                         }
                     }),
 
+                    ...(this.bgScroll
+                        ? []
+                        : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+
                     ...(this.display === 'static' && this.align !== 'stretch'
                         ? []
                         : (() => {

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

@@ -56,14 +56,20 @@ export default {
                     0
                 );
             } else {
+                const { body, scrollingElement } = document;
+                const isScrollingElement =
+                    scrollingElement === scrollElement || body === scrollElement;
+
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = `calc(${
-                    document.scrollingElement === scrollElement ? '100vh' : `${viewportHeight}px`
-                }`;
+                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
                 if (this.offsetTop) {
-                    const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-                    minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    if (isScrollingElement) {
+                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                    }
                 }
 
                 if (this.offsetBottom === true) {

package/src/js/core/navbar.js

@@ -124,7 +124,6 @@ export default {
                         ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
-                        offset: this.dropbar || this.offset,
                     }
                 );
             },
@@ -285,8 +284,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -294,7 +293,7 @@ export default {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
 
-                addClass($el, `${this.clsDrop}-dropbar`);
+                addClass(target, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -309,22 +308,47 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
-                this._observer = observeResize($el, () =>
+                this._observer = observeResize(target, () =>
                     this.transitionTo(
-                        offset($el).bottom -
+                        offset(target).bottom -
                             offset(this.dropbar).top +
-                            toFloat(css($el, 'marginBottom')),
-                        $el
+                            toFloat(css(target, 'marginBottom')),
+                        target
                     )
                 );
             },
         },
 
+        {
+            name: 'beforeposition',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            filter() {
+                return this.dropbar;
+            },
+
+            handler(e, element, target, options) {
+                if (!this.isDropbarDrop(element)) {
+                    return;
+                }
+
+                const dropbarOffset = offset(this.dropbar);
+
+                css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
+
+                options.offset[1] = dropbarOffset.top - offset(target).bottom;
+                options.viewportOffset += dropbarOffset.left;
+            },
+        },
+
         {
             name: 'beforehide',
 
@@ -336,12 +360,12 @@ export default {
                 return this.dropbar;
             },
 
-            handler(e, { $el }) {
+            handler(e) {
                 const active = this.getActive();
 
                 if (
                     matches(this.dropbar, ':hover') &&
-                    active?.$el === $el &&
+                    active?.$el === e.target &&
                     !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
@@ -360,8 +384,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -369,7 +393,7 @@ export default {
 
                 const active = this.getActive();
 
-                if (!active || active?.$el === $el) {
+                if (!active || active?.$el === target) {
                     this.transitionTo(0);
                 }
             },
@@ -409,6 +433,11 @@ export default {
         getDropdown(el) {
             return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
         },
+
+        isDropbarDrop(el) {
+            const drop = this.getDropdown(el);
+            return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+        },
     },
 };
 

package/src/js/core/offcanvas.js

@@ -93,22 +93,6 @@ export default {
             },
         },
 
-        {
-            name: 'touchstart',
-
-            passive: true,
-
-            el() {
-                return this.panel;
-            },
-
-            handler({ targetTouches }) {
-                if (targetTouches.length === 1) {
-                    this.clientY = targetTouches[0].clientY;
-                }
-            },
-        },
-
         {
             name: 'touchmove',
 
@@ -124,33 +108,6 @@ export default {
             },
         },
 
-        {
-            name: 'touchmove',
-
-            passive: false,
-
-            el() {
-                return this.panel;
-            },
-
-            handler(e) {
-                if (e.targetTouches.length !== 1) {
-                    return;
-                }
-
-                const clientY = e.targetTouches[0].clientY - this.clientY;
-                const { scrollTop, scrollHeight, clientHeight } = this.panel;
-
-                if (
-                    clientHeight >= scrollHeight ||
-                    (scrollTop === 0 && clientY > 0) ||
-                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
-                ) {
-                    e.cancelable && e.preventDefault();
-                }
-            },
-        },
-
         {
             name: 'show',
 
@@ -162,7 +119,6 @@ export default {
                     addClass(parent(this.panel), this.clsMode);
                 }
 
-                css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
                 addClass(document.body, this.clsContainer, this.clsFlip);
                 css(document.body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
@@ -170,7 +126,7 @@ export default {
                 addClass(
                     this.panel,
                     this.clsSidebarAnimation,
-                    this.mode !== 'reveal' ? this.clsMode : ''
+                    this.mode === 'reveal' ? '' : this.clsMode
                 );
 
                 height(document.body); // force reflow
@@ -207,8 +163,6 @@ export default {
                 removeClass(this.$el, this.clsOverlay);
                 css(this.$el, 'display', '');
                 removeClass(document.body, this.clsContainer, this.clsFlip);
-
-                css(document.documentElement, 'overflowY', '');
             },
         },
 

package/src/js/core/sticky.js

@@ -23,7 +23,6 @@ import {
     remove,
     removeClass,
     replaceClass,
-    scrollTop,
     toFloat,
     toggleClass,
     toPx,
@@ -125,7 +124,9 @@ export default {
             },
 
             handler() {
-                if (!location.hash || scrollTop(window) === 0) {
+                const { scrollingElement } = document;
+
+                if (!location.hash || scrollingElement.scrollTop === 0) {
                     return;
                 }
 
@@ -134,13 +135,11 @@ export default {
                     const elOffset = getOffset(this.$el);
 
                     if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-                        scrollTop(
-                            window,
+                        scrollingElement.scrollTop =
                             targetOffset.top -
-                                elOffset.height -
-                                toPx(this.targetOffset, 'height', this.placeholder) -
-                                toPx(this.offset, 'height', this.placeholder)
-                        );
+                            elOffset.height -
+                            toPx(this.targetOffset, 'height', this.placeholder) -
+                            toPx(this.offset, 'height', this.placeholder);
                     }
                 });
             },
@@ -238,7 +237,7 @@ export default {
                 start,
                 end,
             }) {
-                const scroll = scrollTop(window);
+                const scroll = document.scrollingElement.scrollTop;
                 const dir = prevScroll <= scroll ? 'down' : 'up';
 
                 return {

package/src/js/mixin/modal.js

@@ -2,6 +2,7 @@ import {
     $,
     addClass,
     append,
+    apply,
     attr,
     css,
     endsWith,
@@ -15,6 +16,7 @@ import {
     pointerDown,
     pointerUp,
     removeClass,
+    scrollParents,
     toFloat,
     width,
     within,
@@ -121,17 +123,26 @@ export default {
             self: true,
 
             handler() {
-                const docEl = document.documentElement;
+                once(
+                    this.$el,
+                    'hide',
+                    on(document, 'focusin', (e) => {
+                        if (last(active) === this && !within(e.target, this.$el)) {
+                            this.$el.focus();
+                        }
+                    })
+                );
 
-                if (width(window) > docEl.clientWidth && this.overlay) {
-                    css(document.body, 'overflowY', 'scroll');
+                if (this.overlay) {
+                    once(this.$el, 'hide', preventOverscroll(this.$el));
+                    once(this.$el, 'hide', preventBackgroundScroll());
                 }
 
                 if (this.stack) {
                     css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
                 }
 
-                addClass(docEl, this.clsPage);
+                addClass(document.documentElement, this.clsPage);
 
                 if (this.bgClose) {
                     once(
@@ -273,3 +284,78 @@ function animate({ transitionElement, _toggle }) {
 function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
+
+export function preventOverscroll(el) {
+    if (CSS.supports('overscroll-behavior', 'contain')) {
+        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        css(elements, 'overscrollBehavior', 'contain');
+        return () => css(elements, 'overscrollBehavior', '');
+    }
+
+    let startClientY;
+
+    const events = [
+        on(
+            el,
+            'touchstart',
+            ({ targetTouches }) => {
+                if (targetTouches.length === 1) {
+                    startClientY = targetTouches[0].clientY;
+                }
+            },
+            { passive: true }
+        ),
+
+        on(
+            el,
+            'touchmove',
+            (e) => {
+                if (e.targetTouches.length !== 1) {
+                    return;
+                }
+
+                let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+                if (!within(scrollParent, el)) {
+                    scrollParent = el;
+                }
+
+                const clientY = e.targetTouches[0].clientY - startClientY;
+                const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+
+                if (
+                    clientHeight >= scrollHeight ||
+                    (scrollTop === 0 && clientY > 0) ||
+                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
+                ) {
+                    e.cancelable && e.preventDefault();
+                }
+            },
+            { passive: false }
+        ),
+    ];
+
+    return () => events.forEach((fn) => fn());
+}
+
+export function preventBackgroundScroll() {
+    const { body, documentElement } = document;
+    css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none',
+    });
+    css(documentElement, 'overflowY', 'hidden');
+    return () => {
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+    };
+}
+
+function filterChildren(el, fn) {
+    const children = [];
+    apply(el, (node) => {
+        if (fn(node)) {
+            children.push(node);
+        }
+    });
+    return children;
+}

package/src/js/mixin/position.js

@@ -6,7 +6,9 @@ import {
     includes,
     isRtl,
     positionAt,
+    scrollParents,
     toPx,
+    trigger,
 } from 'uikit-util';
 
 export default {
@@ -44,17 +46,32 @@ export default {
                 offset = offset.reverse();
             }
 
+            const [scrollElement] = scrollParents(element, /auto|scroll/);
+            const { scrollTop, scrollLeft } = scrollElement;
+
             // Ensure none positioned element does not generate scrollbars
             const elDim = dimensions(element);
             css(element, { top: -elDim.height, left: -elDim.width });
 
-            positionAt(element, target, {
-                attach,
-                offset,
-                boundary,
-                flip: this.flip,
-                viewportOffset: this.getViewportOffset(element),
-            });
+            const args = [
+                element,
+                target,
+                {
+                    attach,
+                    offset,
+                    boundary,
+                    flip: this.flip,
+                    viewportOffset: this.getViewportOffset(element),
+                },
+            ];
+
+            trigger(element, 'beforeposition', args);
+
+            positionAt(...args);
+
+            // Restore scroll position
+            scrollElement.scrollTop = scrollTop;
+            scrollElement.scrollLeft = scrollLeft;
         },
 
         getPositionOffset(element) {

package/src/js/mixin/slider-drag.js

@@ -5,16 +5,18 @@ import {
     includes,
     isRtl,
     isTouch,
+    noop,
     off,
     on,
-    pointerCancel,
-    pointerDown,
-    pointerMove,
-    pointerUp,
     selInput,
     trigger,
 } from 'uikit-util';
 
+const pointerOptions = { passive: false, capture: true };
+const pointerDown = 'touchstart mousedown';
+const pointerMove = 'touchmove mousemove';
+const pointerUp = 'touchend touchcancel mouseup click input';
+
 export default {
     props: {
         draggable: Boolean,
@@ -69,6 +71,16 @@ export default {
                 e.preventDefault();
             },
         },
+
+        {
+            // iOS workaround for slider stopping if swiping fast
+            name: `${pointerMove} ${pointerUp}`,
+            el() {
+                return this.list;
+            },
+            handler: noop,
+            ...pointerOptions,
+        },
     ],
 
     methods: {
@@ -89,10 +101,10 @@ export default {
                 this.prevIndex = this.index;
             }
 
-            on(document, pointerMove, this.move, { passive: false });
+            on(document, pointerMove, this.move, pointerOptions);
 
             // 'input' event is triggered by video controls
-            on(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            on(document, pointerUp, this.end, pointerOptions);
 
             css(this.list, 'userSelect', 'none');
         },
@@ -172,8 +184,8 @@ export default {
         },
 
         end() {
-            off(document, pointerMove, this.move, { passive: false });
-            off(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            off(document, pointerMove, this.move, pointerOptions);
+            off(document, pointerUp, this.end, pointerOptions);
 
             if (this.dragging) {
                 this.dragging = null;

package/src/js/util/dimensions.js

@@ -94,13 +94,13 @@ export function position(element) {
 }
 
 export function offsetPosition(element) {
-    const offset = [0, 0];
-
     element = toNode(element);
 
-    do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
+        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
@@ -108,7 +108,7 @@ export function offsetPosition(element) {
             offset[1] += win.scrollX;
             return offset;
         }
-    } while ((element = element.offsetParent));
+    }
 
     return offset;
 }

package/src/js/util/position.js

@@ -159,6 +159,7 @@ function attachToWithFlip(element, target, options) {
                         return newPos;
                     }
                 }
+                continue;
             }
 
             // Move