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

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

package/src/images/components/nav-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

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

@@ -1,5 +1,27 @@
 <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-animate svg > [class*='line-'] {
+            transition: 0.2s ease-in-out;
+            transition-property: transform, opacity,;
+            transform-origin: center;
+            opacity: 1;
+        }
+
+        .uk-navbar-toggle svg > .line-3 { opacity: 0; }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { opacity: 1; }
+
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { transform: rotate(-45deg); }
+
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1,
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-4 { opacity: 0; }
+        .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-1 { transform: translateY(6px) scaleX(0); }
+        .uk-navbar-toggle-animate[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;
         }
 
@@ -153,7 +153,7 @@ function getProps(opts, name) {
 
     for (const key in options) {
         const prop = camelize(key);
-        if (props[prop] !== undefined) {
+        if (!isUndefined(props[prop])) {
             data[prop] = coerce(props[prop], options[key]);
         }
     }

package/src/js/components/filter.js

@@ -103,7 +103,7 @@ export default {
                 });
         },
 
-        setState(state, animate = true) {
+        async setState(state, animate = true) {
             state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
@@ -112,7 +112,7 @@ export default {
                 toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
             );
 
-            Promise.all(
+            await Promise.all(
                 $$(this.target, this.$el).map((target) => {
                     const filterFn = () => {
                         applyState(state, target, getChildren(target));
@@ -120,7 +120,9 @@ export default {
                     };
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
-            ).then(() => trigger(this.$el, 'afterFilter', [this]));
+            );
+
+            trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {

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

@@ -1,6 +1,7 @@
 import Container from '../mixin/container';
 import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
+import Style from '../mixin/style';
 import Togglable from '../mixin/togglable';
 import {
     addClass,
@@ -27,7 +28,6 @@ import {
     query,
     removeClass,
     scrollParents,
-    toggleClass,
     within,
 } from 'uikit-util';
 import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
@@ -35,7 +35,7 @@ import { preventBackgroundScroll, preventOverscroll } from '../mixin/modal';
 export let active;
 
 export default {
-    mixins: [Container, Lazyload, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Style, Togglable],
 
     args: 'pos',
 
@@ -43,10 +43,13 @@ export default {
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
-        display: String,
+        autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean,
@@ -55,17 +58,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,
+        autoUpdate: true,
         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,18 +97,19 @@ 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);
         }
     },
 
     disconnected() {
         if (this.isActive()) {
+            this.hide(false);
             active = null;
         }
     },
@@ -224,7 +243,8 @@ export default {
 
                 this.tracker.init();
 
-                for (const handler of [
+                const update = () => this.$emit();
+                const handlers = [
                     on(
                         document,
                         pointerDown,
@@ -238,7 +258,7 @@ export default {
                                         !defaultPrevented &&
                                         type === pointerUp &&
                                         target === newTarget &&
-                                        !(this.target && within(target, this.target))
+                                        !(this.targetEl && within(target, this.targetEl))
                                     ) {
                                         this.hide(false);
                                     }
@@ -253,29 +273,28 @@ export default {
                         }
                     }),
 
+                    on(window, 'resize', update),
+
+                    (() => {
+                        const observer = observeResize(
+                            scrollParents(this.$el).concat(this.targetEl),
+                            update
+                        );
+                        return () => observer.disconnect();
+                    })(),
+
+                    ...(this.autoUpdate
+                        ? [on([document, scrollParents(this.$el)], 'scroll', update)]
+                        : []),
+
                     ...(this.bgScroll
                         ? []
                         : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+                ];
 
-                    ...(this.display === 'static' && this.align !== 'stretch'
-                        ? []
-                        : (() => {
-                              const handler = () => this.$emit();
-                              return [
-                                  on(window, 'resize', handler),
-                                  on(document, 'scroll', handler, true),
-                                  (() => {
-                                      const observer = observeResize(
-                                          scrollParents(this.$el),
-                                          handler
-                                      );
-                                      return () => observer.disconnect();
-                                  })(),
-                              ];
-                          })()),
-                ]) {
-                    once(this.$el, 'hide', handler, { self: true });
-                }
+                once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+                    self: true,
+                });
             },
         },
 
@@ -316,12 +335,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 +403,69 @@ 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');
+            attr(this.$el, 'style', this._style);
+
+            // 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 (this.axis !== axis && includes([axis, true], this.stretch)) {
+                    css(this.$el, {
+                        [prop]: 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,8 @@ export default {
                     0
                 );
             } else {
-                const isScrollingElement = document.scrollingElement === scrollElement;
+                const isScrollingElement =
+                    scrollingElement === scrollElement || body === scrollElement;
 
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                 minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;

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