uikit 3.14.4-dev.a02c81d72 → 3.14.4-dev.ae765cd84

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);
                         }
@@ -168,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);
@@ -191,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)
@@ -242,7 +248,7 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active?.target?.focus();
+                    active?.targetEl?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
@@ -313,39 +319,19 @@ export default {
                     return;
                 }
 
-                this._observer = observeResize(target, () =>
+                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(target).bottom -
-                            offset(this.dropbar).top +
-                            toFloat(css(target, 'marginBottom')),
+                        maxBottom - minTop + 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;
+                    );
+                });
             },
         },
 
@@ -366,7 +352,7 @@ export default {
                 if (
                     matches(this.dropbar, ':hover') &&
                     active?.$el === e.target &&
-                    !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
+                    !this.toggles.some((el) => active.targetEl !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
                 }
@@ -402,7 +388,7 @@ export default {
 
     methods: {
         getActive() {
-            return active && within(active.target, this.$el) && active;
+            return active && within(active.targetEl, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -435,15 +421,14 @@ export default {
         },
 
         isDropbarDrop(el) {
-            const drop = this.getDropdown(el);
-            return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+            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));
+                    once(this.$el, 'hidden', preventBackgroundScroll());
                 }
 
                 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,7 +334,12 @@ export function preventOverscroll(el) {
     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' : '',
@@ -345,6 +347,7 @@ export function preventBackgroundScroll() {
     });
     css(documentElement, 'overflowY', 'hidden');
     return () => {
+        prevented = false;
         css(documentElement, 'overflowY', '');
         css(body, { overflowY: '', touchAction: '' });
     };

package/src/js/mixin/position.js

@@ -2,13 +2,11 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
     scrollParents,
     toPx,
-    trigger,
 } from 'uikit-util';
 
 export default {
@@ -16,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() {
@@ -33,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/);
@@ -53,21 +57,13 @@ export default {
             const elDim = dimensions(element);
             css(element, { top: -elDim.height, left: -elDim.width });
 
-            const args = [
-                element,
-                target,
-                {
-                    attach,
-                    offset,
-                    boundary,
-                    flip: this.flip,
-                    viewportOffset: this.getViewportOffset(element),
-                },
-            ];
-
-            trigger(element, 'beforeposition', args);
-
-            positionAt(...args);
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                placement,
+                viewportOffset: this.getViewportOffset(element),
+            });
 
             // Restore scroll position
             scrollElement.scrollTop = scrollTop;
@@ -77,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);
+    },
+};