uikit 3.14.4-dev.f2e3be255 → 3.14.4-dev.fef7412a0

package/src/js/core/icon.js

@@ -2,6 +2,9 @@ import SVG from './svg';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
 import marker from '../../images/components/marker.svg';
+import navParentIcon from '../../images/components/nav-parent-icon.svg';
+import navParentIconLarge from '../../images/components/nav-parent-icon-large.svg';
+import navbarParentIcon from '../../images/components/navbar-parent-icon.svg';
 import navbarToggleIcon from '../../images/components/navbar-toggle-icon.svg';
 import overlayIcon from '../../images/components/overlay-icon.svg';
 import paginationNext from '../../images/components/pagination-next.svg';
@@ -19,6 +22,7 @@ import {
     $,
     addClass,
     apply,
+    closest,
     css,
     each,
     hasClass,
@@ -35,6 +39,9 @@ const icons = {
     marker,
     'close-icon': closeIcon,
     'close-large': closeLarge,
+    'nav-parent-icon': navParentIcon,
+    'nav-parent-icon-large': navParentIconLarge,
+    'navbar-parent-icon': navbarParentIcon,
     'navbar-toggle-icon': navbarToggleIcon,
     'overlay-icon': overlayIcon,
     'pagination-next': paginationNext,
@@ -96,6 +103,15 @@ export const IconComponent = {
     },
 };
 
+export const NavParentIcon = {
+    extends: IconComponent,
+
+    beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? `${icon}-large` : icon;
+    },
+};
+
 export const Slidenav = {
     extends: IconComponent,
 

package/src/js/core/index.js

@@ -29,10 +29,12 @@ export { default as Video } from './video';
 // Icon components
 export { Close } from './icon';
 export { Spinner } from './icon';
+export { NavParentIcon } from './icon';
 export { Slidenav as SlidenavNext } from './icon';
 export { Slidenav as SlidenavPrevious } from './icon';
 export { Search as SearchIcon } from './icon';
 export { IconComponent as Marker } from './icon';
+export { IconComponent as NavbarParentIcon } from './icon';
 export { IconComponent as NavbarToggleIcon } from './icon';
 export { IconComponent as OverlayIcon } from './icon';
 export { IconComponent as PaginationNext } from './icon';

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,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 includes(this.dropdowns, active?.$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/offcanvas.js

@@ -119,9 +119,12 @@ export default {
                     addClass(parent(this.panel), this.clsMode);
                 }
 
-                addClass(document.body, this.clsContainer, this.clsFlip);
-                css(document.body, 'touch-action', 'pan-y pinch-zoom');
+                const { body, scrollingElement } = document;
+
+                addClass(body, this.clsContainer, this.clsFlip);
+                css(body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
+                css(this.panel, 'maxWidth', scrollingElement.clientWidth);
                 addClass(this.$el, this.clsOverlay);
                 addClass(
                     this.panel,
@@ -129,8 +132,8 @@ export default {
                     this.mode === 'reveal' ? '' : this.clsMode
                 );
 
-                height(document.body); // force reflow
-                addClass(document.body, this.clsContainerAnimation);
+                height(body); // force reflow
+                addClass(body, this.clsContainerAnimation);
 
                 this.clsContainerAnimation && suppressUserScale();
             },
@@ -162,6 +165,7 @@ export default {
                 removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
                 removeClass(this.$el, this.clsOverlay);
                 css(this.$el, 'display', '');
+                css(this.panel, 'maxWidth', '');
                 removeClass(document.body, this.clsContainer, this.clsFlip);
             },
         },

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,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);
+    },
+};