uikit 3.14.4-dev.6a00f7fe6 → 3.14.4-dev.7db3661de

package/src/js/mixin/modal.js

@@ -2,6 +2,7 @@ import {
     $,
     addClass,
     append,
+    apply,
     attr,
     css,
     endsWith,
@@ -15,6 +16,7 @@ import {
     pointerDown,
     pointerUp,
     removeClass,
+    scrollParents,
     toFloat,
     width,
     within,
@@ -121,17 +123,26 @@ export default {
             self: true,
 
             handler() {
-                const docEl = document.documentElement;
+                once(
+                    this.$el,
+                    'hide',
+                    on(document, 'focusin', (e) => {
+                        if (last(active) === this && !within(e.target, this.$el)) {
+                            this.$el.focus();
+                        }
+                    })
+                );
 
-                if (width(window) > docEl.clientWidth && this.overlay) {
-                    css(document.body, 'overflowY', 'scroll');
+                if (this.overlay) {
+                    once(this.$el, 'hide', preventOverscroll(this.$el));
+                    once(this.$el, 'hide', preventBackgroundScroll());
                 }
 
                 if (this.stack) {
                     css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
                 }
 
-                addClass(docEl, this.clsPage);
+                addClass(document.documentElement, this.clsPage);
 
                 if (this.bgClose) {
                     once(
@@ -273,3 +284,78 @@ function animate({ transitionElement, _toggle }) {
 function toMs(time) {
     return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
 }
+
+export function preventOverscroll(el) {
+    if (CSS.supports('overscroll-behavior', 'contain')) {
+        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        css(elements, 'overscrollBehavior', 'contain');
+        return () => css(elements, 'overscrollBehavior', '');
+    }
+
+    let startClientY;
+
+    const events = [
+        on(
+            el,
+            'touchstart',
+            ({ targetTouches }) => {
+                if (targetTouches.length === 1) {
+                    startClientY = targetTouches[0].clientY;
+                }
+            },
+            { passive: true }
+        ),
+
+        on(
+            el,
+            'touchmove',
+            (e) => {
+                if (e.targetTouches.length !== 1) {
+                    return;
+                }
+
+                let [scrollParent] = scrollParents(e.target, /auto|scroll/);
+                if (!within(scrollParent, el)) {
+                    scrollParent = el;
+                }
+
+                const clientY = e.targetTouches[0].clientY - startClientY;
+                const { scrollTop, scrollHeight, clientHeight } = scrollParent;
+
+                if (
+                    clientHeight >= scrollHeight ||
+                    (scrollTop === 0 && clientY > 0) ||
+                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
+                ) {
+                    e.cancelable && e.preventDefault();
+                }
+            },
+            { passive: false }
+        ),
+    ];
+
+    return () => events.forEach((fn) => fn());
+}
+
+export function preventBackgroundScroll() {
+    const { body, documentElement } = document;
+    css(body, {
+        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
+        touchAction: 'none',
+    });
+    css(documentElement, 'overflowY', 'hidden');
+    return () => {
+        css(documentElement, 'overflowY', '');
+        css(body, { overflowY: '', touchAction: '' });
+    };
+}
+
+function filterChildren(el, fn) {
+    const children = [];
+    apply(el, (node) => {
+        if (fn(node)) {
+            children.push(node);
+        }
+    });
+    return children;
+}

package/src/js/mixin/position.js

@@ -2,11 +2,12 @@ import {
     css,
     dimensions,
     flipPosition,
-    getCssVar,
     includes,
     isRtl,
     positionAt,
+    scrollParents,
     toPx,
+    trigger,
 } from 'uikit-util';
 
 export default {
@@ -44,23 +45,38 @@ 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: this.getViewportOffset(element),
-            });
+            const args = [
+                element,
+                target,
+                {
+                    attach,
+                    offset,
+                    boundary,
+                    flip: this.flip,
+                    viewportOffset: this.getViewportOffset(element),
+                },
+            ];
+
+            trigger(element, 'beforeposition', args);
+
+            positionAt(...args);
+
+            // Restore scroll position
+            scrollElement.scrollTop = scrollTop;
+            scrollElement.scrollLeft = scrollLeft;
         },
 
         getPositionOffset(element) {
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
                     this.axis === 'x' ? 'width' : 'height',
                     element
                 ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
@@ -71,14 +87,14 @@ export default {
             return includes(['center', 'justify', 'stretch'], this.align)
                 ? 0
                 : toPx(
-                      getCssVar('position-shift-offset', element),
+                      css(element, '--uk-position-shift-offset'),
                       this.axis === 'y' ? 'width' : 'height',
                       element
                   ) * (includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-            return toPx(getCssVar('position-viewport-offset', element));
+            return toPx(css(element, '--uk-position-viewport-offset'));
         },
     },
 };

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

@@ -10,7 +10,6 @@ import {
     isFunction,
     isVisible,
     noop,
-    offset,
     removeClass,
     scrollParents,
     startsWith,
@@ -232,7 +231,7 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
 
         Transition.cancel(el);
 
-        const [scrollElement] = scrollParents(el);
+        const [scrollElement] = scrollParents(el.offsetParent);
         css(scrollElement, 'overflowX', 'hidden');
 
         if (!isToggled(el)) {
@@ -243,17 +242,11 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
         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%)`
-                : '',
+            clipPath: 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,
         });
 
@@ -262,7 +255,7 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
                 ? Transition.start(
                       el,
                       {
-                          clipPath: useClipPath ? `polygon(0 0,100% 0,100% 100%,0 100%)` : '',
+                          clipPath: `polygon(0 0,100% 0,100% 100%,0 100%)`,
                           marginLeft: 0,
                       },
                       duration * (1 - percent / 100),
@@ -271,11 +264,9 @@ function slideHorizontal({ isToggled, duration, velocity, transition, _toggle },
                 : Transition.start(
                       el,
                       {
-                          clipPath: useClipPath
-                              ? right
-                                  ? `polygon(0 0,0 0,0 100%,0 100%)`
-                                  : `polygon(100% 0,100% 0,100% 100%,100% 100%)`
-                              : '',
+                          clipPath: 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),

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

@@ -159,6 +159,7 @@ function attachToWithFlip(element, target, options) {
                         return newPos;
                     }
                 }
+                continue;
             }
 
             // Move

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }

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) {
@@ -151,18 +126,31 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
 }
 
 export function offsetViewport(scrollElement) {
-    let viewportElement = getViewport(scrollElement);
+    const window = toWindow(scrollElement);
+    const {
+        document: { documentElement },
+    } = window;
+    let viewportElement =
+        scrollElement === scrollingElement(scrollElement) ? 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 +161,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/dropdown.less

@@ -25,6 +25,8 @@
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
 
+@dropdown-large-padding:                        40px;
+
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
 @dropdown-nav-subtitle-font-size:               @global-small-font-size;
@@ -68,6 +70,18 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: @dropdown-large-padding; }
+
 
 /* Stretch modifier
  ========================================================================== */

package/src/less/components/leader.less

@@ -49,7 +49,7 @@
  * Pass fill character to JS
  */
 
-:root { --uk-leader-fill-content: '@{leader-fill-content}'; }
+:root { --uk-leader-fill-content: @leader-fill-content; }
 
 
 // Hooks