uikit 3.14.2 → 3.14.3-dev.5325d42a0

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.2",
+    "version": "3.14.3-dev.5325d42a0",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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 { slide, default as Togglable } from '../mixin/togglable';
 import {
     $,
     $$,
@@ -34,7 +34,7 @@ export default {
     data: {
         targets: '> *',
         active: false,
-        animation: [true],
+        animation: ['slide'],
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
@@ -144,7 +144,7 @@ export default {
                     }
 
                     hide(content, false);
-                    await toggleHeight(this)(el._wrapper, show);
+                    await slide(this)(el._wrapper, show);
                     hide(content, !show);
 
                     delete el._wrapper;

package/src/js/core/alert.js

@@ -11,7 +11,7 @@ export default {
     },
 
     data: {
-        animation: [true],
+        animation: ['slide'],
         selClose: '.uk-alert-close',
         duration: 150,
         hideProps: { opacity: 0, ...Togglable.data.hideProps },

package/src/js/core/drop.js

@@ -8,7 +8,6 @@ import {
     apply,
     attr,
     css,
-    getCssVar,
     hasClass,
     includes,
     isTouch,
@@ -16,6 +15,7 @@ import {
     MouseTracker,
     observeResize,
     offset,
+    offsetViewport,
     on,
     once,
     parent,
@@ -28,7 +28,6 @@ import {
     removeClass,
     scrollParents,
     toggleClass,
-    toPx,
     within,
 } from 'uikit-util';
 
@@ -48,6 +47,7 @@ export default {
         delayHide: Number,
         display: String,
         clsDrop: String,
+        animateOut: Boolean,
     },
 
     data: {
@@ -62,6 +62,7 @@ export default {
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
         container: false,
+        animateOut: false,
     },
 
     created() {
@@ -249,7 +250,7 @@ export default {
                         }
                     }),
 
-                    ...(this.display === 'static'
+                    ...(this.display === 'static' && this.align !== 'stretch'
                         ? []
                         : (() => {
                               const handler = () => this.$emit();
@@ -310,7 +311,7 @@ export default {
     methods: {
         show(target = this.target, delay = true) {
             if (this.isToggled() && target && this.target && target !== this.target) {
-                this.hide(false);
+                this.hide(false, false);
             }
 
             this.target = target;
@@ -330,7 +331,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 +345,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();
 
@@ -377,40 +378,59 @@ 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');
 
             const boundary = query(this.boundary, this.$el);
-            const scrollParentOffset = offset(
-                scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]
+            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 viewportOffset = this.getViewportOffset(this.$el);
 
             css(this.$el, 'maxWidth', '');
-            const maxWidth =
-                scrollParentOffset.width -
-                2 * toPx(getCssVar('position-viewport-offset', this.$el));
+            const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
 
-            if (this.pos[1] === 'justify') {
+            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 * toPx(getCssVar('position-viewport-offset', this.$el))
+                        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) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
             css(this.$el, 'maxWidth', maxWidth);
 
-            this.positionAt(
-                this.$el,
-                boundary && this.boundaryAlign ? boundary : this.target,
-                boundary
-            );
+            this.positionAt(this.$el, 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,25 @@ export default {
             let minHeight = '';
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+            const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
+            const { height: viewportHeight } = offsetViewport(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 {
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = 'calc(100vh';
+                minHeight = `calc(${
+                    document.scrollingElement === scrollElement ? '100vh' : `${viewportHeight}px`
+                }`;
 
                 if (this.offsetTop) {
-                    const { top } = offset(this.$el);
-                    minHeight += top > 0 && top < height(window) / 2 ? ` - ${top}px` : '';
+                    const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                    minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
                 }
 
                 if (this.offsetBottom === true) {

package/src/js/core/navbar.js

@@ -285,8 +285,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler(_, { $el, align }) {
+                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
                     return;
                 }
 
@@ -309,8 +309,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler(_, { $el, align }) {
+                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
                     return;
                 }
 
@@ -360,8 +360,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el }) {
-                if (!hasClass($el, this.clsDrop)) {
+            handler(_, { $el, align }) {
+                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
                     return;
                 }
 
@@ -387,7 +387,7 @@ export default {
 
             el = oldHeight < newHeight && el;
 
-            css(el, 'clip', `rect(0,${el.offsetWidth}px,${oldHeight}px,0)`);
+            css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
 
             height(dropbar, oldHeight);
 
@@ -396,12 +396,14 @@ export default {
                 Transition.start(dropbar, { height: newHeight }, this.duration),
                 Transition.start(
                     el,
-                    { clip: `rect(0,${el.offsetWidth}px,${newHeight}px,0)` },
+                    {
+                        clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`,
+                    },
                     this.duration
                 ),
             ])
                 .catch(noop)
-                .then(() => css(el, { clip: '' }));
+                .then(() => css(el, { clipPath: '' }));
         },
 
         getDropdown(el) {

package/src/js/mixin/position.js

@@ -1,4 +1,13 @@
-import { flipPosition, getCssVar, includes, isRtl, positionAt, toPx } from 'uikit-util';
+import {
+    css,
+    dimensions,
+    flipPosition,
+    getCssVar,
+    includes,
+    isRtl,
+    positionAt,
+    toPx,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -15,23 +24,17 @@ export default {
 
     connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
+        [this.dir, this.align] = this.pos;
+        this.axis = includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
     },
 
     methods: {
         positionAt(element, target, boundary) {
-            const [dir, align] = this.pos;
-
-            let offset = toPx(
-                this.offset === false ? getCssVar('position-offset', element) : this.offset,
-                this.axis === 'x' ? 'width' : 'height',
-                element
-            );
-            offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
+            let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
 
             const attach = {
-                element: [flipPosition(dir), align],
-                target: [dir, align],
+                element: [flipPosition(this.dir), this.align],
+                target: [this.dir, this.align],
             };
 
             if (this.axis === 'y') {
@@ -41,13 +44,41 @@ export default {
                 offset = offset.reverse();
             }
 
+            // Ensure none positioned element does not generate scrollbars
+            const elDim = dimensions(element);
+            css(element, { top: -elDim.height, left: -elDim.width });
+
             positionAt(element, target, {
                 attach,
                 offset,
                 boundary,
                 flip: this.flip,
-                viewportOffset: toPx(getCssVar('position-viewport-offset', element)),
+                viewportOffset: this.getViewportOffset(element),
             });
         },
+
+        getPositionOffset(element) {
+            return (
+                toPx(
+                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.axis === 'x' ? 'width' : 'height',
+                    element
+                ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
+            );
+        },
+
+        getShiftOffset(element) {
+            return includes(['center', 'justify', 'stretch'], this.align)
+                ? 0
+                : toPx(
+                      getCssVar('position-shift-offset', element),
+                      this.axis === 'y' ? 'width' : 'height',
+                      element
+                  ) * (includes(['left', 'top'], this.align) ? 1 : -1);
+        },
+
+        getViewportOffset(element) {
+            return toPx(getCssVar('position-viewport-offset', element));
+        },
     },
 };

package/src/js/mixin/togglable.js

@@ -5,13 +5,15 @@ import {
     css,
     fastdom,
     hasClass,
-    height,
     includes,
     isBoolean,
     isFunction,
     isVisible,
     noop,
+    offset,
     removeClass,
+    scrollParents,
+    startsWith,
     toFloat,
     toggleClass,
     toNodes,
@@ -41,7 +43,7 @@ export default {
 
         initProps: {
             overflow: '',
-            height: '',
+            maxHeight: '',
             paddingTop: '',
             paddingBottom: '',
             marginTop: '',
@@ -51,7 +53,7 @@ export default {
 
         hideProps: {
             overflow: 'hidden',
-            height: 0,
+            maxHeight: 0,
             paddingTop: 0,
             paddingBottom: 0,
             marginTop: 0,
@@ -66,7 +68,7 @@ export default {
         },
 
         hasTransition({ animation }) {
-            return this.hasAnimation && animation[0] === true;
+            return startsWith(animation[0], 'slide');
         },
     },
 
@@ -90,9 +92,9 @@ export default {
                             isFunction(animate)
                                 ? animate
                                 : animate === false || !this.hasAnimation
-                                ? this._toggle
+                                ? toggleInstant(this)
                                 : this.hasTransition
-                                ? toggleHeight(this)
+                                ? toggleTransition(this)
                                 : toggleAnimation(this)
                         )(el, show);
 
@@ -156,7 +158,25 @@ export default {
     },
 };
 
-export function toggleHeight({
+function toggleInstant({ _toggle }) {
+    return (el, show) => {
+        Animation.cancel(el);
+        Transition.cancel(el);
+        return _toggle(el, show);
+    };
+}
+
+function toggleTransition(cmp) {
+    switch (cmp.animation[0]) {
+        case 'slide-left':
+            return slideHorizontal(cmp);
+        case 'slide-right':
+            return slideHorizontal(cmp, true);
+    }
+    return slide(cmp);
+}
+
+export function slide({
     isToggled,
     duration,
     velocity,
@@ -167,11 +187,14 @@ export function toggleHeight({
 }) {
     return (el, show) => {
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes()
-            ? toFloat(css(el.firstElementChild, 'marginTop')) +
-              toFloat(css(el.lastElementChild, 'marginBottom'))
-            : 0;
-        const currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 0;
+        const inner =
+            !inProgress && el.hasChildNodes()
+                ? toFloat(css(el.firstElementChild, 'marginTop')) +
+                  toFloat(css(el.lastElementChild, 'marginBottom'))
+                : 0;
+        const currentHeight = isVisible(el) ? toFloat(css(el, 'height')) + inner : 0;
+
+        const props = inProgress ? css(el, Object.keys(initProps)) : show ? hideProps : initProps;
 
         Transition.cancel(el);
 
@@ -179,34 +202,97 @@ export function toggleHeight({
             _toggle(el, true);
         }
 
-        height(el, '');
+        css(el, 'maxHeight', '');
 
         // Update child components first
         fastdom.flush();
 
-        const endHeight = height(el) + (inProgress ? 0 : inner);
-        duration = velocity * el.offsetHeight + duration;
+        const endHeight = toFloat(css(el, 'height')) + inner;
+        duration = velocity * endHeight + duration;
 
-        height(el, currentHeight);
+        css(el, { ...props, maxHeight: currentHeight });
 
         return (
             show
                 ? Transition.start(
                       el,
-                      { ...initProps, overflow: 'hidden', height: endHeight },
-                      Math.round(duration * (1 - currentHeight / endHeight)),
+                      { ...initProps, overflow: 'hidden', maxHeight: endHeight },
+                      duration * (1 - currentHeight / endHeight),
                       transition
                   )
                 : Transition.start(
                       el,
                       hideProps,
-                      Math.round(duration * (currentHeight / endHeight)),
+                      duration * (currentHeight / endHeight),
                       transition
                   ).then(() => _toggle(el, false))
         ).then(() => css(el, initProps));
     };
 }
 
+function slideHorizontal({ isToggled, duration, velocity, transition, _toggle }, right) {
+    return (el, show) => {
+        const visible = isVisible(el);
+        const marginLeft = toFloat(css(el, 'marginLeft'));
+
+        Transition.cancel(el);
+
+        const [scrollElement] = scrollParents(el);
+        css(scrollElement, 'overflowX', 'hidden');
+
+        if (!isToggled(el)) {
+            _toggle(el, true);
+        }
+
+        const width = toFloat(css(el, 'width'));
+        duration = velocity * width + duration;
+
+        const percent = visible ? ((width + marginLeft * (right ? -1 : 1)) / width) * 100 : 0;
+        const offsetEl = offset(el);
+        const useClipPath = right
+            ? offsetEl.right < scrollElement.clientWidth
+            : Math.round(offsetEl.left) > 0;
+
+        css(el, {
+            clipPath: useClipPath
+                ? right
+                    ? `polygon(0 0,${percent}% 0,${percent}% 100%,0 100%)`
+                    : `polygon(${100 - percent}% 0,100% 0,100% 100%,${100 - percent}% 100%)`
+                : '',
+            marginLeft: (((100 - percent) * (right ? 1 : -1)) / 100) * width,
+        });
+
+        return (
+            show
+                ? Transition.start(
+                      el,
+                      {
+                          clipPath: useClipPath ? `polygon(0 0,100% 0,100% 100%,0 100%)` : '',
+                          marginLeft: 0,
+                      },
+                      duration * (1 - percent / 100),
+                      transition
+                  )
+                : Transition.start(
+                      el,
+                      {
+                          clipPath: useClipPath
+                              ? right
+                                  ? `polygon(0 0,0 0,0 100%,0 100%)`
+                                  : `polygon(100% 0,100% 0,100% 100%,100% 100%)`
+                              : '',
+                          marginLeft: (right ? 1 : -1) * width,
+                      },
+                      duration * (percent / 100),
+                      transition
+                  ).then(() => _toggle(el, false))
+        ).then(() => {
+            css(scrollElement, 'overflowX', '');
+            css(el, { clipPath: '', marginLeft: '' });
+        });
+    };
+}
+
 function toggleAnimation(cmp) {
     return (el, show) => {
         Animation.cancel(el);

package/src/js/util/animation.js

@@ -5,6 +5,7 @@ import { startsWith, toNodes } from './lang';
 import { addClass, hasClass, removeClass, removeClasses } from './class';
 
 export function transition(element, props, duration = 400, timing = 'linear') {
+    duration = Math.round(duration);
     return Promise.all(
         toNodes(element).map(
             (element) =>

package/src/js/util/dom.js

@@ -17,14 +17,15 @@ export function isTag(element, tagName) {
 }
 
 export function empty(element) {
-    return replaceChildren(element, '');
+    element = $(element);
+    element.innerHTML = '';
+    return element;
 }
 
 export function html(parent, html) {
-    return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
+    return isUndefined(html) ? $(parent).innerHTML : append(empty(parent), html);
 }
 
-export const replaceChildren = applyFn('replaceChildren');
 export const prepend = applyFn('prepend');
 export const append = applyFn('append');
 export const before = applyFn('before');

package/src/js/util/viewport.js

@@ -128,7 +128,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
     return clamp((scrollTop - start) / (end - start));
 }
 
-export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {
+export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, scrollable = false) {
     const scrollEl = scrollingElement(element);
 
     let ancestors = parents(element).reverse();