uikit 3.14.3 → 3.14.4-dev.008162cc3

package/src/js/mixin/position.js

@@ -1,4 +1,14 @@
-import { flipPosition, getCssVar, includes, isRtl, positionAt, toPx } from 'uikit-util';
+import {
+    css,
+    dimensions,
+    flipPosition,
+    getCssVar,
+    includes,
+    isRtl,
+    positionAt,
+    scrollParents,
+    toPx,
+} from 'uikit-util';
 
 export default {
     props: {
@@ -15,23 +25,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 +45,48 @@ export default {
                 offset = offset.reverse();
             }
 
+            const [scrollElement] = scrollParents(element, /auto|scroll/);
+            const { scrollTop, scrollLeft } = scrollElement;
+
+            // 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),
             });
+
+            // Restore scroll position
+            scrollElement.scrollTop = scrollTop;
+            scrollElement.scrollLeft = scrollLeft;
+        },
+
+        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/slider-drag.js

@@ -5,16 +5,18 @@ import {
     includes,
     isRtl,
     isTouch,
+    noop,
     off,
     on,
-    pointerCancel,
-    pointerDown,
-    pointerMove,
-    pointerUp,
     selInput,
     trigger,
 } from 'uikit-util';
 
+const pointerOptions = { passive: false, capture: true };
+const pointerDown = 'touchstart mousedown';
+const pointerMove = 'touchmove mousemove';
+const pointerUp = 'touchend touchcancel mouseup click input';
+
 export default {
     props: {
         draggable: Boolean,
@@ -69,6 +71,16 @@ export default {
                 e.preventDefault();
             },
         },
+
+        {
+            // iOS workaround for slider stopping if swiping fast
+            name: `${pointerMove} ${pointerUp}`,
+            el() {
+                return this.list;
+            },
+            handler: noop,
+            ...pointerOptions,
+        },
     ],
 
     methods: {
@@ -89,10 +101,10 @@ export default {
                 this.prevIndex = this.index;
             }
 
-            on(document, pointerMove, this.move, { passive: false });
+            on(document, pointerMove, this.move, pointerOptions);
 
             // 'input' event is triggered by video controls
-            on(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            on(document, pointerUp, this.end, pointerOptions);
 
             css(this.list, 'userSelect', 'none');
         },
@@ -172,8 +184,8 @@ export default {
         },
 
         end() {
-            off(document, pointerMove, this.move, { passive: false });
-            off(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            off(document, pointerMove, this.move, pointerOptions);
+            off(document, pointerUp, this.end, pointerOptions);
 
             if (this.dragging) {
                 this.dragging = null;

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,18 +83,13 @@ 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);
 
@@ -156,7 +153,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 +182,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 +197,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/dimensions.js

@@ -94,13 +94,13 @@ export function position(element) {
 }
 
 export function offsetPosition(element) {
-    const offset = [0, 0];
-
     element = toNode(element);
 
-    do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
+        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
@@ -108,7 +108,7 @@ export function offsetPosition(element) {
             offset[1] += win.scrollX;
             return offset;
         }
-    } while ((element = element.offsetParent));
+    }
 
     return offset;
 }

package/src/js/util/position.js

@@ -158,6 +158,8 @@ function attachToWithFlip(element, target, options) {
                     if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
                         return newPos;
                     }
+
+                    continue;
                 }
             }
 

package/src/js/util/viewport.js

@@ -1,18 +1,7 @@
 import { css } from './style';
 import { isVisible, parents } from './filter';
 import { offset, offsetPosition } from './dimensions';
-import {
-    clamp,
-    findIndex,
-    intersectRect,
-    isDocument,
-    isUndefined,
-    isWindow,
-    toFloat,
-    toNode,
-    toWindow,
-    ucfirst,
-} from './lang';
+import { clamp, findIndex, intersectRect, isWindow, toFloat, toWindow, ucfirst } from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     if (!isVisible(element)) {
@@ -35,20 +24,6 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     );
 }
 
-export function scrollTop(element, top) {
-    if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-    } else {
-        element = toNode(element);
-    }
-
-    if (isUndefined(top)) {
-        return element.scrollTop;
-    } else {
-        element.scrollTop = top;
-    }
-}
-
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     const parents = isVisible(element) ? scrollParents(element) : [];
     return parents.reduce(
@@ -90,7 +65,7 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
             (function step() {
                 const percent = ease(clamp((Date.now() - start) / duration));
 
-                scrollTop(element, scroll + top * percent);
+                element.scrollTop = scroll + top * percent;
 
                 // scroll more if we have not reached our destination
                 if (percent === 1) {
@@ -128,7 +103,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();
@@ -151,18 +126,33 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
 }
 
 export function offsetViewport(scrollElement) {
-    let viewportElement = getViewport(scrollElement);
+    const window = toWindow(scrollElement);
+    const {
+        document: { body, documentElement },
+    } = window;
+    let viewportElement =
+        scrollElement === scrollingElement(scrollElement) || scrollElement === body
+            ? window
+            : scrollElement;
+
+    const { visualViewport } = window;
+    if (isWindow(viewportElement) && visualViewport) {
+        let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
+        height = Math.round(height * scale);
+        width = Math.round(width * scale);
+        return { height, width, top, left, bottom: top + height, right: left + width };
+    }
 
     let rect = offset(viewportElement);
     for (let [prop, dir, start, end] of [
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],
     ]) {
-        if (!isWindow(viewportElement)) {
-            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
-        } else {
+        if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = viewportElement.document.documentElement;
+            viewportElement = documentElement;
+        } else {
+            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
         }
         rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];
@@ -173,7 +163,3 @@ export function offsetViewport(scrollElement) {
 function scrollingElement(element) {
     return toWindow(element).document.scrollingElement;
 }
-
-function getViewport(scrollElement) {
-    return scrollElement === scrollingElement(scrollElement) ? window : 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,7 +40,7 @@
     position: absolute;
     z-index: @drop-z-index;
     --uk-position-offset: @drop-margin;
-    --uk-position-viewport-offset: 10;
+    --uk-position-viewport-offset: @drop-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
@@ -52,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,7 +53,7 @@
     position: absolute;
     z-index: @dropdown-z-index;
     --uk-position-offset: @dropdown-margin;
-    --uk-position-viewport-offset: 10;
+    --uk-position-viewport-offset: @dropdown-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
@@ -71,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`
  ========================================================================== */
@@ -145,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
 // ========================================================================