uikit 3.14.3 → 3.14.4-dev.07daf8fb8

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.3",
+    "version": "3.14.4-dev.07daf8fb8",
     "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,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;
         }
 
@@ -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/components/sortable.js

@@ -26,7 +26,6 @@ import {
     remove,
     removeClass,
     scrollParents,
-    scrollTop,
     toggleClass,
     Transition,
     trigger,
@@ -313,7 +312,7 @@ function trackScroll(pos) {
     let last = Date.now();
     trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -334,7 +333,7 @@ function trackScroll(pos) {
                 }
 
                 if (scroll > 0 && scroll < scrollHeight - height) {
-                    scrollTop(scrollEl, scroll);
+                    scrollEl.scrollTop = scroll;
                     return true;
                 }
             });

package/src/js/core/accordion.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Lazyload from '../mixin/lazyload';
-import { default as Togglable, toggleHeight } 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: [true],
+        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 toggleHeight(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: [true],
+        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,
@@ -8,7 +9,6 @@ import {
     apply,
     attr,
     css,
-    getCssVar,
     hasClass,
     includes,
     isTouch,
@@ -16,6 +16,7 @@ import {
     MouseTracker,
     observeResize,
     offset,
+    offsetViewport,
     on,
     once,
     parent,
@@ -27,15 +28,14 @@ import {
     query,
     removeClass,
     scrollParents,
-    toggleClass,
-    toPx,
     within,
 } from 'uikit-util';
+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,27 +43,49 @@ export default {
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
-        boundaryAlign: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
         display: String,
         clsDrop: String,
+        animateOut: Boolean,
+        bgScroll: Boolean,
     },
 
     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,
     },
 
+    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() {
         this.tracker = new MouseTracker();
     },
@@ -75,13 +97,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);
         }
     },
 
@@ -234,7 +256,7 @@ export default {
                                         !defaultPrevented &&
                                         type === pointerUp &&
                                         target === newTarget &&
-                                        !(this.target && within(target, this.target))
+                                        !(this.targetEl && within(target, this.targetEl))
                                     ) {
                                         this.hide(false);
                                     }
@@ -249,13 +271,17 @@ export default {
                         }
                     }),
 
+                    ...(this.bgScroll
+                        ? []
+                        : [preventOverscroll(this.$el), preventBackgroundScroll()]),
+
                     ...(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),
@@ -308,12 +334,12 @@ export default {
     },
 
     methods: {
-        show(target = this.target, delay = true) {
-            if (this.isToggled() && target && this.target && target !== this.target) {
-                this.hide(false);
+        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();
 
@@ -330,7 +356,7 @@ export default {
                 let prev;
                 while (active && prev !== active && !within(this.$el, active.$el)) {
                     prev = active;
-                    active.hide(false);
+                    active.hide(false, false);
                 }
             }
 
@@ -344,8 +370,8 @@ export default {
             );
         },
 
-        hide(delay = true) {
-            const hide = () => this.toggleElement(this.$el, false, false);
+        hide(delay = true, animate = true) {
+            const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
 
             this.clearTimers();
 
@@ -376,41 +402,69 @@ export default {
 
         position() {
             removeClass(this.$el, `${this.clsDrop}-stack`);
-            toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
+            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 scrollParentOffset = offset(
-                scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]
-            );
-            const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
-
-            css(this.$el, 'maxWidth', '');
-            const maxWidth =
-                scrollParentOffset.width -
-                2 * toPx(getCssVar('position-viewport-offset', this.$el));
-
-            if (this.pos[1] === 'justify') {
-                const prop = this.axis === 'y' ? 'width' : 'height';
-                css(
-                    this.$el,
-                    prop,
-                    Math.min(
-                        (boundary ? boundaryOffset : offset(this.target))[prop],
-                        scrollParentOffset[prop] -
-                            2 * toPx(getCssVar('position-viewport-offset', this.$el))
-                    )
-                );
-            } else if (this.$el.offsetWidth > maxWidth) {
+            const boundaryOffset = offsetViewport(boundary || window);
+            const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
+            const viewportOffset = this.getViewportOffset(this.$el);
+
+            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,
-                boundary && this.boundaryAlign ? boundary : this.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

@@ -4,12 +4,13 @@ import {
     css,
     dimensions,
     endsWith,
-    height,
     isNumeric,
     isString,
     isVisible,
-    offset,
+    offsetPosition,
+    offsetViewport,
     query,
+    scrollParents,
     toFloat,
 } from 'uikit-util';
 
@@ -32,7 +33,7 @@ export default {
 
     resizeTargets() {
         // check for offsetTop change
-        return [this.$el, document.documentElement];
+        return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
     },
 
     update: {
@@ -44,21 +45,33 @@ 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 === body ? scrollingElement : scrollElement
+            );
+
             if (this.expand) {
                 minHeight = Math.max(
-                    height(window) -
-                        (dimensions(document.documentElement).height -
-                            dimensions(this.$el).height) -
+                    viewportHeight -
+                        (dimensions(scrollElement).height - dimensions(this.$el).height) -
                         box,
                     0
                 );
             } else {
+                const isScrollingElement =
+                    scrollingElement === scrollElement || body === scrollElement;
+
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = 'calc(100vh';
+                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
                 if (this.offsetTop) {
-                    const { top } = offset(this.$el);
-                    minHeight += top > 0 && top < height(window) / 2 ? ` - ${top}px` : '';
+                    if (isScrollingElement) {
+                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                    }
                 }
 
                 if (this.offsetBottom === true) {

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';