uikit 3.14.3 → 3.14.4-dev.07daf8fb8

package/src/js/core/leader.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
+import { attr, css, toggleClass, unwrap, wrapInner } from 'uikit-util';
 import Resize from '../mixin/resize';
 
 export default {
@@ -19,7 +19,7 @@ export default {
 
     computed: {
         fill({ fill }) {
-            return fill || getCssVar('leader-fill-content');
+            return fill || css(this.$el, '--uk-leader-fill-content');
         },
     },
 

package/src/js/core/navbar.js

@@ -19,6 +19,7 @@ import {
     offset,
     once,
     parent,
+    parents,
     query,
     remove,
     selFocusable,
@@ -36,7 +37,7 @@ export default {
         align: String,
         offset: Number,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -53,9 +54,12 @@ export default {
         offset: undefined,
         delayShow: undefined,
         delayHide: undefined,
-        boundaryAlign: undefined,
-        flip: 'x',
+        flip: false,
+        shift: true,
         boundary: true,
+        target: false,
+        targetX: false,
+        targetY: false,
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
@@ -90,7 +94,7 @@ export default {
             },
 
             watch(dropbar) {
-                addClass(dropbar, 'uk-navbar-dropbar');
+                addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
             },
 
             immediate: true,
@@ -106,7 +110,7 @@ export default {
 
                 if (this.dropContainer !== $el) {
                     for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
-                        const target = this.getDropdown(el)?.target;
+                        const target = this.getDropdown(el)?.targetEl;
                         if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                             dropdowns.push(el);
                         }
@@ -124,7 +128,6 @@ export default {
                         ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
-                        offset: this.dropbar || this.offset,
                     }
                 );
             },
@@ -169,8 +172,8 @@ export default {
                 if (
                     active &&
                     includes(active.mode, 'hover') &&
-                    active.target &&
-                    !within(active.target, current) &&
+                    active.targetEl &&
+                    !within(active.targetEl, current) &&
                     !active.isDelaying
                 ) {
                     active.hide(false);
@@ -192,7 +195,7 @@ export default {
                 if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
                     e.preventDefault();
 
-                    if (!active || active.target !== current) {
+                    if (!active || active.targetEl !== current) {
                         current.click();
                         once(this.dropContainer, 'show', ({ target }) =>
                             focusFirstFocusableElement(target)
@@ -243,7 +246,7 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active?.target?.focus();
+                    active?.targetEl?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
@@ -285,8 +288,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -294,7 +297,7 @@ export default {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
 
-                addClass($el, `${this.clsDrop}-dropbar`);
+                addClass(target, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -309,19 +312,24 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
-                this._observer = observeResize($el, () =>
+                this._observer = observeResize(target, () => {
+                    const targetOffsets = parents(target, `.${this.clsDrop}`)
+                        .concat(target)
+                        .map((el) => offset(el));
+                    const minTop = Math.min(...targetOffsets.map(({ top }) => top));
+                    const maxBottom = Math.max(...targetOffsets.map(({ bottom }) => bottom));
+                    const dropbarOffset = offset(this.dropbar);
+                    css(this.dropbar, 'top', this.dropbar.offsetTop - (dropbarOffset.top - minTop));
                     this.transitionTo(
-                        offset($el).bottom -
-                            offset(this.dropbar).top +
-                            toFloat(css($el, 'marginBottom')),
-                        $el
-                    )
-                );
+                        maxBottom - minTop + toFloat(css(target, 'marginBottom')),
+                        target
+                    );
+                });
             },
         },
 
@@ -336,13 +344,13 @@ export default {
                 return this.dropbar;
             },
 
-            handler(e, { $el }) {
+            handler(e) {
                 const active = this.getActive();
 
                 if (
                     matches(this.dropbar, ':hover') &&
-                    active?.$el === $el &&
-                    !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
+                    active?.$el === e.target &&
+                    !this.toggles.some((el) => active.targetEl !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
                 }
@@ -360,8 +368,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -369,7 +377,7 @@ export default {
 
                 const active = this.getActive();
 
-                if (!active || active?.$el === $el) {
+                if (!active || active?.$el === target) {
                     this.transitionTo(0);
                 }
             },
@@ -378,7 +386,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.target, this.$el) && active;
+            return active && within(active.targetEl, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -387,7 +395,7 @@ export default {
 
             el = oldHeight < newHeight && el;
 
-            css(el, 'clip', `rect(0,${el.offsetWidth}px,${oldHeight}px,0)`);
+            css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
 
             height(dropbar, oldHeight);
 
@@ -396,23 +404,29 @@ export default {
                 Transition.start(dropbar, { height: newHeight }, this.duration),
                 Transition.start(
                     el,
-                    { clip: `rect(0,${el.offsetWidth}px,${newHeight}px,0)` },
+                    {
+                        clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`,
+                    },
                     this.duration
                 ),
             ])
                 .catch(noop)
-                .then(() => css(el, { clip: '' }));
+                .then(() => css(el, { clipPath: '' }));
         },
 
         getDropdown(el) {
             return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
         },
+
+        isDropbarDrop(el) {
+            return this.getDropdown(el) && hasClass(el, this.clsDrop);
+        },
     },
 };
 
 function handleNavItemNavigation(e, toggles, active) {
     const { current, keyCode } = e;
-    const target = active?.target || current;
+    const target = active?.targetEl || current;
     const i = toggles.indexOf(target);
 
     // Left

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

@@ -1,4 +1,4 @@
-import { $, scrollIntoView, trigger } from 'uikit-util';
+import { $, off, on, scrollIntoView, trigger, within } from 'uikit-util';
 
 export default {
     props: {
@@ -9,6 +9,14 @@ export default {
         offset: 0,
     },
 
+    connected() {
+        registerClick(this);
+    },
+
+    disconnected() {
+        unregisterClick(this);
+    },
+
     methods: {
         async scrollTo(el) {
             el = (el && $(el)) || document.body;
@@ -19,18 +27,37 @@ export default {
             }
         },
     },
+};
 
-    events: {
-        click(e) {
-            if (e.defaultPrevented) {
-                return;
-            }
+const components = new Set();
+function registerClick(cmp) {
+    if (!components.size) {
+        on(document, 'click', clickHandler);
+    }
+
+    components.add(cmp);
+}
 
+function unregisterClick(cmp) {
+    components.delete(cmp);
+
+    if (!components.length) {
+        off(document, 'click', clickHandler);
+    }
+}
+
+function clickHandler(e) {
+    if (e.defaultPrevented) {
+        return;
+    }
+
+    for (const component of components) {
+        if (within(e.target, component.$el)) {
             e.preventDefault();
-            this.scrollTo(getTargetElement(this.$el));
-        },
-    },
-};
+            component.scrollTo(getTargetElement(component.$el));
+        }
+    }
+}
 
 export function getTargetElement(el) {
     return document.getElementById(decodeURIComponent(el.hash).substring(1));

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/core/switcher.js

@@ -48,7 +48,7 @@ export default {
 
             watch(connects) {
                 if (this.swiping) {
-                    css(connects, 'touch-action', 'pan-y pinch-zoom');
+                    css(connects, 'touchAction', 'pan-y pinch-zoom');
                 }
 
                 const index = this.index();

package/src/js/mixin/media.js

@@ -1,6 +1,6 @@
 import {
     createEvent,
-    getCssVar,
+    css,
     isNumeric,
     isString,
     on,
@@ -19,7 +19,7 @@ export default {
     },
 
     connected() {
-        const media = toMedia(this.media);
+        const media = toMedia(this.media, this.$el);
         this.matchMedia = true;
         if (media) {
             this.mediaObj = window.matchMedia(media);
@@ -40,11 +40,10 @@ export default {
     },
 };
 
-function toMedia(value) {
+function toMedia(value, element) {
     if (isString(value)) {
         if (startsWith(value, '@')) {
-            const name = `breakpoint-${value.substr(1)}`;
-            value = toFloat(getCssVar(name));
+            value = toFloat(css(element, `--uk-breakpoint-${value.substr(1)}`));
         } else if (isNaN(value)) {
             return value;
         }

package/src/js/mixin/modal.js

@@ -2,12 +2,14 @@ import {
     $,
     addClass,
     append,
+    apply,
     attr,
     css,
     endsWith,
     includes,
     isFocusable,
     last,
+    noop,
     on,
     once,
     parent,
@@ -15,6 +17,7 @@ import {
     pointerDown,
     pointerUp,
     removeClass,
+    scrollParents,
     toFloat,
     width,
     within,
@@ -121,17 +124,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, 'hidden', preventOverscroll(this.$el));
+                    once(this.$el, 'hidden', 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(
@@ -206,10 +218,6 @@ export default {
                     active.splice(active.indexOf(this), 1);
                 }
 
-                if (!active.length) {
-                    css(document.body, 'overflowY', '');
-                }
-
                 css(this.$el, 'zIndex', '');
 
                 if (!active.some((modal) => modal.clsPage === this.clsPage)) {
@@ -273,3 +281,84 @@ 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());
+}
+
+let prevented;
+export function preventBackgroundScroll() {
+    if (prevented) {
+        return noop;
+    }
+    prevented = true;
+    const { body, documentElement } = document;
+    css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none',
+    });
+    css(documentElement, 'overflowY', 'hidden');
+    return () => {
+        prevented = false;
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+    };
+}
+
+function filterChildren(el, fn) {
+    const children = [];
+    apply(el, (node) => {
+        if (fn(node)) {
+            children.push(node);
+        }
+    });
+    return children;
+}