uikit 3.14.4-dev.3a6c538ab → 3.14.4-dev.5e7e87ba7

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.3a6c538ab",
+    "version": "3.14.4-dev.5e7e87ba7",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/navbar-toggle-icon.svg

@@ -1,5 +1,24 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <rect y="9" width="20" height="2" />
-    <rect y="3" width="20" height="2" />
-    <rect y="15" width="20" height="2" />
+  <style>
+
+    .uk-navbar-toggle svg > [class*='line-'] {
+        transition: 0.2s ease-in-out;
+        transition-property: transform, opacity,;
+        transform-origin: center;
+        opacity: 1;
+    }
+
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-3 { transform: rotate(-45deg); }
+
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-1,
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-4 { opacity: 0; }
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-1 { transform: translateY(6px) scaleX(0); }
+    .uk-navbar-toggle[aria-expanded="true"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }
+
+  </style>
+    <rect class="line-1" y="3" width="20" height="2" />
+    <rect class="line-2" y="9" width="20" height="2" />
+    <rect class="line-3" y="9" width="20" height="2" />
+    <rect class="line-4" y="15" width="20" height="2" />
 </svg>

package/src/js/api/state.js

@@ -142,7 +142,7 @@ function getProps(opts, name) {
 
         value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
 
-        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+        if (prop === 'target' && startsWith(value, '_')) {
             continue;
         }
 

package/src/js/core/accordion.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Lazyload from '../mixin/lazyload';
-import { slide, default as Togglable } from '../mixin/togglable';
+import { default as Togglable, toggleTransition } from '../mixin/togglable';
 import {
     $,
     $$,
@@ -14,14 +14,14 @@ import {
     isInView,
     scrollIntoView,
     toggleClass,
-    unwrap,
-    wrapAll,
+    within,
 } from 'uikit-util';
 
 export default {
     mixins: [Class, Lazyload, Togglable],
 
     props: {
+        animation: Boolean,
         targets: String,
         active: null,
         collapsible: Boolean,
@@ -34,7 +34,7 @@ export default {
     data: {
         targets: '> *',
         active: false,
-        animation: ['slide'],
+        animation: true,
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -80,7 +80,7 @@ export default {
                     hide(
                         el,
                         !hasClass(
-                            this.items.find((item) => item.contains(el)),
+                            this.items.find((item) => within(el, item)),
                             this.clsOpen
                         )
                     );
@@ -132,23 +132,15 @@ export default {
                     toggleClass(el, this.clsOpen, show);
                     attr($(this.$props.toggle, el), 'aria-expanded', show);
 
-                    const content = $(`${el._wrapper ? '> * ' : ''}${this.content}`, el);
+                    const content = $(this.content, el);
 
-                    if (animate === false || !this.hasTransition) {
+                    if (animate === false || !this.animation) {
+                        content.hidden = !show;
                         hide(content, !show);
                         return;
                     }
 
-                    if (!el._wrapper) {
-                        el._wrapper = wrapAll(content, `<div${show ? ' hidden' : ''}>`);
-                    }
-
-                    hide(content, false);
-                    await slide(this)(el._wrapper, show);
-                    hide(content, !show);
-
-                    delete el._wrapper;
-                    unwrap(content);
+                    await toggleTransition(this)(content, show);
 
                     if (show) {
                         const toggle = $(this.$props.toggle, el);

package/src/js/core/alert.js

@@ -1,5 +1,6 @@
 import Class from '../mixin/class';
 import Togglable from '../mixin/togglable';
+import { css, toFloat, Transition } from 'uikit-util';
 
 export default {
     mixins: [Class, Togglable],
@@ -7,35 +8,55 @@ export default {
     args: 'animation',
 
     props: {
+        animation: Boolean,
         close: String,
     },
 
     data: {
-        animation: ['slide'],
+        animation: true,
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: { opacity: 0, ...Togglable.data.hideProps },
     },
 
-    events: [
-        {
-            name: 'click',
+    events: {
+        name: 'click',
 
-            delegate() {
-                return this.selClose;
-            },
+        delegate() {
+            return this.selClose;
+        },
 
-            handler(e) {
-                e.preventDefault();
-                this.close();
-            },
+        handler(e) {
+            e.preventDefault();
+            this.close();
         },
-    ],
+    },
 
     methods: {
         async close() {
-            await this.toggleElement(this.$el);
+            await this.toggleElement(this.$el, false, animate(this));
             this.$destroy(true);
         },
     },
 };
+
+function animate({ duration, transition, velocity }) {
+    return (el) => {
+        const height = toFloat(css(el, 'height'));
+        css(el, 'height', height);
+        return Transition.start(
+            el,
+            {
+                height: 0,
+                marginTop: 0,
+                marginBottom: 0,
+                paddingTop: 0,
+                paddingBottom: 0,
+                borderTop: 0,
+                borderBottom: 0,
+                opacity: 0,
+            },
+            velocity * height + duration,
+            transition
+        );
+    };
+}

package/src/js/core/drop.js

@@ -27,7 +27,6 @@ import {
     query,
     removeClass,
     scrollParents,
-    toggleClass,
     within,
 } from 'uikit-util';
 import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
@@ -43,7 +42,10 @@ export default {
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
         display: String,
@@ -55,17 +57,32 @@ export default {
     data: {
         mode: ['click', 'hover'],
         toggle: '- *',
-        boundary: true,
-        boundaryAlign: false,
+        boundary: false,
+        target: false,
+        targetX: false,
+        targetY: false,
+        stretch: false,
         delayShow: 0,
         delayHide: 800,
         display: null,
         clsDrop: false,
+        animateOut: false,
+        bgScroll: true,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
         container: false,
-        animateOut: false,
-        bgScroll: true,
+    },
+
+    computed: {
+        target({ target, targetX, targetY }, $el) {
+            targetX = targetX || target || this.targetEl;
+            targetY = targetY || target || this.targetEl;
+
+            return [
+                targetX === true ? window : query(targetX, $el),
+                targetY === true ? window : query(targetY, $el),
+            ];
+        },
     },
 
     created() {
@@ -79,13 +96,13 @@ export default {
     connected() {
         addClass(this.$el, this.clsDrop);
 
-        if (this.toggle && !this.target) {
-            this.target = this.$create('toggle', query(this.toggle, this.$el), {
+        if (this.toggle && !this.targetEl) {
+            this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
                 target: this.$el,
                 mode: this.mode,
             }).$el;
-            attr(this.target, 'aria-haspopup', true);
-            this.lazyload(this.target);
+            attr(this.targetEl, 'aria-haspopup', true);
+            this.lazyload(this.targetEl);
         }
     },
 
@@ -238,7 +255,7 @@ export default {
                                         !defaultPrevented &&
                                         type === pointerUp &&
                                         target === newTarget &&
-                                        !(this.target && within(target, this.target))
+                                        !(this.targetEl && within(target, this.targetEl))
                                     ) {
                                         this.hide(false);
                                     }
@@ -257,13 +274,13 @@ export default {
                         ? []
                         : [preventOverscroll(this.$el), preventBackgroundScroll()]),
 
-                    ...(this.display === 'static' && this.align !== 'stretch'
+                    ...(this.display === 'static'
                         ? []
                         : (() => {
                               const handler = () => this.$emit();
                               return [
                                   on(window, 'resize', handler),
-                                  on(document, 'scroll', handler, true),
+                                  on([document, scrollParents(this.$el)], 'scroll', handler),
                                   (() => {
                                       const observer = observeResize(
                                           scrollParents(this.$el),
@@ -316,12 +333,12 @@ export default {
     },
 
     methods: {
-        show(target = this.target, delay = true) {
-            if (this.isToggled() && target && this.target && target !== this.target) {
+        show(target = this.targetEl, delay = true) {
+            if (this.isToggled() && target && this.targetEl && target !== this.targetEl) {
                 this.hide(false, false);
             }
 
-            this.target = target;
+            this.targetEl = target;
 
             this.clearTimers();
 
@@ -384,60 +401,72 @@ export default {
 
         position() {
             removeClass(this.$el, `${this.clsDrop}-stack`);
-            toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
-            toggleClass(this.$el, `${this.clsDrop}-stretch`, this.align === 'stretch');
+            css(this.$el, { maxWidth: '', top: '', left: '' });
+
+            // Ensure none positioned element does not generate scrollbars
+            this.$el.hidden = true;
 
             const boundary = query(this.boundary, this.$el);
-            const target = boundary && this.boundaryAlign ? boundary : this.target;
-            const [scrollParent] = scrollParents(
-                boundary && this.boundaryAlign ? boundary : this.$el
-            );
-            const scrollParentOffset = offset(scrollParent);
-            const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
+            const boundaryOffset = offsetViewport(boundary || window);
+            const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
             const viewportOffset = this.getViewportOffset(this.$el);
 
-            css(this.$el, 'maxWidth', '');
-            const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
-
-            if (this.align === 'justify') {
-                const prop = this.axis === 'y' ? 'width' : 'height';
-                css(
-                    this.$el,
-                    prop,
-                    Math.min(
-                        (boundary ? boundaryOffset : offset(this.target))[prop],
-                        scrollParentOffset[prop] - 2 * viewportOffset
-                    )
-                );
-            } else if (this.align === 'stretch') {
-                this.flip = this.axis === 'y' ? 'x' : 'y';
-                this.display = 'static';
-
-                const viewport = offsetViewport(scrollParent);
-                const targetDim = offset(target);
-                const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
-
-                css(this.$el, {
-                    width:
-                        this.axis === 'y'
-                            ? viewport.width
-                            : (this.dir === 'left'
-                                  ? targetDim.left - viewport.left
-                                  : viewport.right - targetDim.right) - elOffset,
-                    height:
-                        this.axis === 'x'
-                            ? viewport.height
-                            : (this.dir === 'top'
-                                  ? targetDim.top - viewport.top
-                                  : viewport.bottom - targetDim.bottom) - elOffset,
-                });
-            } else if (this.$el.offsetWidth > maxWidth) {
+            const dirs = [
+                [0, ['x', 'width', 'left', 'right']],
+                [1, ['y', 'height', 'top', 'bottom']],
+            ];
+
+            for (const [i, [axis, prop]] of dirs) {
+                if (includes([axis, true], this.stretch)) {
+                    css(this.$el, {
+                        [prop]:
+                            this.axis === axis
+                                ? '' // Reset prop in main axis before positioning to not cause the drop to flip prematurely
+                                : Math.min(
+                                      boundaryOffset[prop],
+                                      viewports[i][prop] - 2 * viewportOffset
+                                  ),
+                        [`overflow-${axis}`]: 'auto',
+                    });
+                }
+            }
+
+            const maxWidth = viewports[0].width - 2 * viewportOffset;
+
+            if (this.$el.offsetWidth > maxWidth) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
             css(this.$el, 'maxWidth', maxWidth);
 
-            this.positionAt(this.$el, target, boundary);
+            this.$el.hidden = false;
+
+            this.positionAt(this.$el, this.target, boundary);
+
+            for (const [i, [axis, prop, start, end]] of dirs) {
+                if (this.axis === axis && includes([axis, true], this.stretch)) {
+                    const positionOffset = Math.abs(this.getPositionOffset(this.$el));
+                    const targetOffset = offset(this.target[i]);
+                    const elOffset = offset(this.$el);
+
+                    css(this.$el, {
+                        [prop]:
+                            (targetOffset[start] > elOffset[start]
+                                ? targetOffset[start] -
+                                  Math.max(
+                                      boundaryOffset[start],
+                                      viewports[i][start] + viewportOffset
+                                  )
+                                : Math.min(
+                                      boundaryOffset[end],
+                                      viewports[i][end] - viewportOffset
+                                  ) - targetOffset[end]) - positionOffset,
+                        [`overflow-${axis}`]: 'auto',
+                    });
+
+                    this.positionAt(this.$el, this.target, boundary);
+                }
+            }
         },
     },
 };

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

@@ -45,8 +45,11 @@ export default {
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+            const { body, scrollingElement } = document;
             const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-            const { height: viewportHeight } = offsetViewport(scrollElement);
+            const { height: viewportHeight } = offsetViewport(
+                scrollElement === body ? scrollingElement : scrollElement
+            );
 
             if (this.expand) {
                 minHeight = Math.max(
@@ -56,7 +59,6 @@ export default {
                     0
                 );
             } else {
-                const { body, scrollingElement } = document;
                 const isScrollingElement =
                     scrollingElement === scrollElement || body === scrollElement;
 

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);
                         }
@@ -168,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);
@@ -191,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)
@@ -242,7 +246,7 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active?.target?.focus();
+                    active?.targetEl?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
@@ -313,39 +317,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 +350,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 +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) {
@@ -435,15 +419,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));