uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.e8873dd80

package/src/js/core/navbar.js

@@ -19,6 +19,7 @@ import {
     offset,
     once,
     parent,
+    parents,
     query,
     remove,
     selFocusable,
@@ -36,7 +37,9 @@ export default {
         align: String,
         offset: Number,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -53,9 +56,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 +96,7 @@ export default {
             },
 
             watch(dropbar) {
-                addClass(dropbar, 'uk-navbar-dropbar');
+                addClass(dropbar, 'uk-dropbar', 'uk-dropbar-top', 'uk-navbar-dropbar');
             },
 
             immediate: true,
@@ -106,7 +112,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 +130,6 @@ export default {
                         ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
-                        offset: this.dropbar || this.offset,
                     }
                 );
             },
@@ -169,8 +174,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 +197,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 +248,7 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active?.target?.focus();
+                    active?.targetEl?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
@@ -285,8 +290,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 +299,7 @@ export default {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
 
-                addClass($el, `${this.clsDrop}-dropbar`);
+                addClass(target, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -309,19 +314,24 @@ 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, () => {
+                    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 +346,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 +370,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 +379,7 @@ export default {
 
                 const active = this.getActive();
 
-                if (!active || active?.$el === $el) {
+                if (!active || active?.$el === target) {
                     this.transitionTo(0);
                 }
             },
@@ -378,7 +388,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.target, this.$el) && active;
+            return includes(this.dropdowns, active?.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -409,12 +419,16 @@ export default {
         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/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/toggle.js

@@ -181,7 +181,7 @@ export default {
         },
 
         {
-            name: 'toggled',
+            name: 'hide show',
 
             self: true,
 
@@ -189,10 +189,8 @@ export default {
                 return this.target;
             },
 
-            handler(e, toggled) {
-                if (e.target === this.target[0]) {
-                    this.updateAria(toggled);
-                }
+            handler({ type }) {
+                this.updateAria(type === 'show');
             },
         },
 

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

@@ -9,6 +9,7 @@ import {
     includes,
     isFocusable,
     last,
+    noop,
     on,
     once,
     parent,
@@ -134,8 +135,8 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hide', preventOverscroll(this.$el));
-                    once(this.$el, 'hide', preventBackgroundScroll());
+                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
                 }
 
                 if (this.stack) {
@@ -217,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)) {
@@ -337,16 +334,22 @@ export function preventOverscroll(el) {
     return () => events.forEach((fn) => fn());
 }
 
+let prevented;
 export function preventBackgroundScroll() {
-    const { body, documentElement } = document;
-    css(body, {
-        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+    if (prevented) {
+        return noop;
+    }
+    prevented = true;
+
+    const { scrollingElement } = document;
+    css(scrollingElement, {
+        overflowY: 'hidden',
         touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth,
     });
-    css(documentElement, 'overflowY', 'hidden');
     return () => {
-        css(documentElement, 'overflowY', '');
-        css(body, { overflowY: '', touchAction: '' });
+        prevented = false;
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
     };
 }
 

package/src/js/mixin/position.js

@@ -2,7 +2,6 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
@@ -15,12 +14,16 @@ export default {
         pos: String,
         offset: null,
         flip: Boolean,
+        shift: Boolean,
+        inset: Boolean,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
-        flip: true,
         offset: false,
+        flip: true,
+        shift: true,
+        inset: false,
     },
 
     connected() {
@@ -32,17 +35,19 @@ export default {
     methods: {
         positionAt(element, target, boundary) {
             let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+            const placement = [this.flip && 'flip', this.shift && 'shift'];
 
             const attach = {
-                element: [flipPosition(this.dir), this.align],
+                element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
                 target: [this.dir, this.align],
             };
 
             if (this.axis === 'y') {
                 for (const prop in attach) {
-                    attach[prop] = attach[prop].reverse();
+                    attach[prop].reverse();
                 }
-                offset = offset.reverse();
+                offset.reverse();
+                placement.reverse();
             }
 
             const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -56,7 +61,7 @@ export default {
                 attach,
                 offset,
                 boundary,
-                flip: this.flip,
+                placement,
                 viewportOffset: this.getViewportOffset(element),
             });
 
@@ -68,25 +73,27 @@ export default {
         getPositionOffset(element) {
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
                     element
-                ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
+                ) *
+                (includes(['left', 'top'], this.dir) ? -1 : 1) *
+                (this.inset ? -1 : 1)
             );
         },
 
         getShiftOffset(element) {
-            return includes(['center', 'justify', 'stretch'], this.align)
+            return this.align === 'center'
                 ? 0
                 : toPx(
-                      getCssVar('position-shift-offset', element),
+                      css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
                       element
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-            return toPx(getCssVar('position-viewport-offset', element));
+            return toPx(css(element, '--uk-position-viewport-offset'));
         },
     },
 };

package/src/js/mixin/style.js

@@ -0,0 +1,11 @@
+import { attr } from 'uikit-util';
+
+export default {
+    beforeConnect() {
+        this._style = attr(this.$el, 'style');
+    },
+
+    disconnected() {
+        attr(this.$el, 'style', this._style);
+    },
+};