uikit 3.14.1-dev.eeb4cd6ae → 3.14.2-dev.35b3deec9

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,
@@ -24,6 +26,7 @@ export default {
         cls: Boolean,
         animation: 'list',
         duration: Number,
+        velocity: Number,
         origin: String,
         transition: String,
     },
@@ -32,6 +35,7 @@ export default {
         cls: false,
         animation: [false],
         duration: 200,
+        velocity: 0.2,
         origin: false,
         transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
@@ -39,7 +43,7 @@ export default {
 
         initProps: {
             overflow: '',
-            height: '',
+            maxHeight: '',
             paddingTop: '',
             paddingBottom: '',
             marginTop: '',
@@ -49,7 +53,7 @@ export default {
 
         hideProps: {
             overflow: 'hidden',
-            height: 0,
+            maxHeight: 0,
             paddingTop: 0,
             paddingBottom: 0,
             marginTop: 0,
@@ -64,7 +68,7 @@ export default {
         },
 
         hasTransition({ animation }) {
-            return this.hasAnimation && animation[0] === true;
+            return startsWith(animation[0], 'slide');
         },
     },
 
@@ -83,9 +87,9 @@ export default {
                             isFunction(animate)
                                 ? animate
                                 : animate === false || !this.hasAnimation
-                                ? this._toggle
+                                ? toggleInstant(this)
                                 : this.hasTransition
-                                ? toggleHeight(this)
+                                ? toggleTransition(this)
                                 : toggleAnimation(this)
                         )(el, show);
 
@@ -149,14 +153,43 @@ export default {
     },
 };
 
-export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
+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,
+    initProps,
+    hideProps,
+    transition,
+    _toggle,
+}) {
     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);
 
@@ -164,32 +197,97 @@ export function toggleHeight({ isToggled, duration, initProps, hideProps, transi
             _toggle(el, true);
         }
 
-        height(el, '');
+        css(el, 'maxHeight', '');
 
         // Update child components first
         fastdom.flush();
 
-        const endHeight = height(el) + (inProgress ? 0 : inner);
-        height(el, currentHeight);
+        const endHeight = toFloat(css(el, 'height')) + inner;
+        duration = velocity * endHeight + duration;
+
+        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/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();
@@ -153,32 +153,25 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
 export function offsetViewport(scrollElement) {
     let viewportElement = getViewport(scrollElement);
 
-    // iOS 12 returns <body> as scrollingElement
-    if (viewportElement === scrollingElement(viewportElement)) {
-        viewportElement = document.documentElement;
-    }
-
     let rect = offset(viewportElement);
     for (let [prop, dir, start, end] of [
         ['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] = (
-            isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement
-        )[`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();
 }