uikit 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0

package/src/js/mixin/position.js

@@ -1,10 +1,9 @@
 import {
-    $,
+    css,
+    dimensions,
     flipPosition,
     getCssVar,
-    offset as getOffset,
     includes,
-    isNumeric,
     isRtl,
     positionAt,
     toPx,
@@ -21,32 +20,21 @@ export default {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
-        viewportPadding: 10,
     },
 
     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 } = this;
-            if (!isNumeric(offset)) {
-                const node = $(offset);
-                offset = node
-                    ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
-                      getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
-                    : 0;
-            }
-            offset = toPx(offset) + toPx(getCssVar('position-offset', 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') {
@@ -56,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,
-                viewportPadding: this.boundaryAlign ? 0 : this.viewportPadding,
                 flip: this.flip,
+                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');
         },
     },
 
@@ -81,13 +83,18 @@ export default {
                             return Promise.reject();
                         }
 
+                        if (!animate) {
+                            Animation.cancel(el);
+                            Transition.cancel(el);
+                        }
+
                         const promise = (
                             isFunction(animate)
                                 ? animate
                                 : animate === false || !this.hasAnimation
-                                ? this._toggle
+                                ? toggleInstant(this)
                                 : this.hasTransition
-                                ? toggleHeight(this)
+                                ? toggleTransition(this)
                                 : toggleAnimation(this)
                         )(el, show);
 
@@ -151,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,
@@ -162,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);
 
@@ -174,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/position.js

@@ -49,6 +49,10 @@ function attachTo(element, target, options) {
     return position;
 }
 
+function moveBy(start, end, dim) {
+    return start === 'center' ? dim / 2 : start === end ? dim : 0;
+}
+
 function attachToWithFlip(element, target, options) {
     const position = attachTo(element, target, options);
     const targetDim = offset(target);
@@ -59,7 +63,7 @@ function attachToWithFlip(element, target, options) {
         offset: elOffset,
         boundary,
         viewport,
-        viewportPadding,
+        viewportOffset,
     } = options;
 
     let viewports = scrollParents(element);
@@ -80,9 +84,9 @@ function attachToWithFlip(element, target, options) {
 
         viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
 
-        if (viewportPadding) {
-            viewport[start] += viewportPadding;
-            viewport[end] -= viewportPadding;
+        if (viewportOffset) {
+            viewport[start] += viewportOffset;
+            viewport[end] -= viewportOffset;
         }
 
         if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
@@ -139,19 +143,21 @@ function attachToWithFlip(element, target, options) {
                     return false;
                 }
 
-                const newPos = attachToWithFlip(element, target, {
-                    ...options,
-                    attach: {
-                        element: elAttach.map(flipDir).reverse(),
-                        target: targetAttach.map(flipDir).reverse(),
-                    },
-                    offset: elOffset.reverse(),
-                    flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
-                    recursion: true,
-                });
-
-                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
-                    return newPos;
+                if (flip === true || includes(flip, dirs[1 - i][1])) {
+                    const newPos = attachToWithFlip(element, target, {
+                        ...options,
+                        attach: {
+                            element: elAttach.map(flipDir).reverse(),
+                            target: targetAttach.map(flipDir).reverse(),
+                        },
+                        offset: elOffset.reverse(),
+                        flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+                        recursion: true,
+                    });
+
+                    if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                        return newPos;
+                    }
                 }
             }
 
@@ -172,10 +178,6 @@ function attachToWithFlip(element, target, options) {
     return offsetPosition;
 }
 
-function moveBy(start, end, dim) {
-    return start === 'center' ? dim / 2 : start === end ? dim : 0;
-}
-
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {
@@ -188,7 +190,7 @@ function getIntersectionArea(...rects) {
 }
 
 function isInScrollArea(position, scrollElement, dir) {
-    const viewport = offsetViewport(scrollElement);
+    const viewport = offsetViewport(scrollElement, false);
     const [prop, , start, end] = dirs[dir];
     viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
     viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`];

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();
@@ -158,21 +158,20 @@ export function offsetViewport(scrollElement) {
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],
     ]) {
-        if (!isWindow(getViewport(viewportElement))) {
+        if (!isWindow(viewportElement)) {
             rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
+        } else {
+            // iOS 12 returns <body> as scrollingElement
+            viewportElement = viewportElement.document.documentElement;
         }
-        rect[prop] = rect[dir] =
-            viewportElement[(isWindow(viewportElement) ? 'inner' : 'client') + ucfirst(prop)];
+        rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];
     }
     return rect;
 }
 
 function scrollingElement(element) {
-    const {
-        document: { scrollingElement },
-    } = toWindow(element);
-    return scrollingElement;
+    return toWindow(element).document.scrollingElement;
 }
 
 function getViewport(scrollElement) {

package/src/less/components/drop.less

@@ -3,10 +3,7 @@
 //
 // Component:       `uk-drop`
 //
-// Modifiers:       `uk-drop-top-*`
-//                  `uk-drop-bottom-*`
-//                  `uk-drop-left-*`
-//                  `uk-drop-right-*`
+// Modifiers:       `uk-drop-stretch`
 //                  `uk-drop-stack`
 //                  `uk-drop-grid`
 //
@@ -22,6 +19,7 @@
 
 @drop-z-index:                              @global-z-index + 20;
 @drop-margin:                               @global-margin;
+@drop-viewport-margin:                      15px;
 @drop-width:                                300px;
 
 
@@ -42,6 +40,7 @@
     position: absolute;
     z-index: @drop-z-index;
     --uk-position-offset: @drop-margin;
+    --uk-position-viewport-offset: @drop-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
@@ -51,6 +50,22 @@
 .uk-drop.uk-open { display: block; }
 
 
+/* Stretch modifier
+ ========================================================================== */
+
+/*
+ * 1. Allow scrolling
+ */
+
+.uk-drop-stretch {
+    --uk-position-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -5,10 +5,7 @@
 //
 // Adopted:         `uk-dropdown-nav`
 //
-// Modifiers:       `uk-dropdown-top-*`
-//                  `uk-dropdown-bottom-*`
-//                  `uk-dropdown-left-*`
-//                  `uk-dropdown-right-*`
+// Modifiers:       `uk-dropdown-stretch`
 //                  `uk-dropdown-stack`
 //                  `uk-dropdown-grid`
 //
@@ -22,6 +19,7 @@
 
 @dropdown-z-index:                              @global-z-index + 20;
 @dropdown-margin:                               @global-small-margin;
+@dropdown-viewport-margin:                      15px;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
@@ -55,6 +53,7 @@
     position: absolute;
     z-index: @dropdown-z-index;
     --uk-position-offset: @dropdown-margin;
+    --uk-position-viewport-offset: @dropdown-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
@@ -70,6 +69,23 @@
 .uk-dropdown.uk-open { display: block; }
 
 
+/* Stretch modifier
+ ========================================================================== */
+
+/*
+ * 1. Allow scrolling
+ */
+
+.uk-dropdown-stretch {
+    --uk-position-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    .hook-dropdown-stretch();
+}
+
+
 /* Nav
  * Adopts `uk-nav`
  ========================================================================== */
@@ -144,6 +160,7 @@
 .hook-dropdown-misc();
 
 .hook-dropdown() {}
+.hook-dropdown-stretch() {}
 .hook-dropdown-nav() {}
 .hook-dropdown-nav-item() {}
 .hook-dropdown-nav-item-hover() {}

package/src/less/components/margin.less

@@ -193,20 +193,20 @@
 /* Remove
  ========================================================================== */
 
- .uk-margin-remove { margin: 0 !important; }
- .uk-margin-remove-top { margin-top: 0 !important; }
- .uk-margin-remove-bottom { margin-bottom: 0 !important; }
- .uk-margin-remove-left { margin-left: 0 !important; }
- .uk-margin-remove-right { margin-right: 0 !important; }
-
- .uk-margin-remove-vertical {
-     margin-top: 0 !important;
-     margin-bottom: 0 !important;
- }
+.uk-margin-remove { margin: 0 !important; }
+.uk-margin-remove-top { margin-top: 0 !important; }
+.uk-margin-remove-bottom { margin-bottom: 0 !important; }
+.uk-margin-remove-left { margin-left: 0 !important; }
+.uk-margin-remove-right { margin-right: 0 !important; }
+
+.uk-margin-remove-vertical {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
 
- .uk-margin-remove-adjacent + *,
- .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
- .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
+.uk-margin-remove-adjacent + *,
+.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
+.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
 
 /* Phone landscape and bigger */
 @media (min-width: @breakpoint-small) {
@@ -241,7 +241,6 @@
 }
 
 
-
 // Hooks
 // ========================================================================
 

package/src/less/components/modal.less

@@ -40,15 +40,21 @@
 
 @modal-container-width:                         1200px;
 
-@modal-body-padding-horizontal:                 @global-gutter;
-@modal-body-padding-vertical:                   @global-gutter;
+@modal-body-padding-horizontal:                 20px;
+@modal-body-padding-vertical:                   20px;
+@modal-body-padding-horizontal-s:               @global-gutter;
+@modal-body-padding-vertical-s:                 @global-gutter;
 
-@modal-header-padding-horizontal:               @global-gutter;
+@modal-header-padding-horizontal:               20px;
 @modal-header-padding-vertical:                 (@modal-header-padding-horizontal / 2);
+@modal-header-padding-horizontal-s:             @global-gutter;
+@modal-header-padding-vertical-s:               (@modal-header-padding-horizontal-s / 2);
 @modal-header-background:                       @global-muted-background;
 
-@modal-footer-padding-horizontal:               @global-gutter;
+@modal-footer-padding-horizontal:               20px;
 @modal-footer-padding-vertical:                 (@modal-footer-padding-horizontal / 2);
+@modal-footer-padding-horizontal-s:             @global-gutter;
+@modal-footer-padding-vertical-s:               (@modal-footer-padding-horizontal-s / 2);
 @modal-footer-background:                       @global-muted-background;
 
 @modal-title-font-size:                         @global-xlarge-font-size;
@@ -228,6 +234,15 @@
     .hook-modal-footer();
 }
 
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-modal-body { padding: @modal-body-padding-vertical-s @modal-body-padding-horizontal-s; }
+    .uk-modal-header { padding: @modal-header-padding-vertical-s @modal-header-padding-horizontal-s; }
+    .uk-modal-footer { padding: @modal-footer-padding-vertical-s @modal-footer-padding-horizontal-s; }
+
+}
+
 /*
  * Remove margin from the last-child
  */

package/src/less/components/nav.less

@@ -282,7 +282,7 @@ ul.uk-nav-sub {
  * Subtitle
  */
 
- .uk-nav-primary .uk-nav-subtitle {
+.uk-nav-primary .uk-nav-subtitle {
     font-size: @nav-primary-subtitle-font-size;
     .hook-nav-primary-subtitle();
 }