uikit 3.14.4-dev.838f092aa → 3.14.4-dev.a02c81d72

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.4-dev.838f092aa",
+    "version": "3.14.4-dev.a02c81d72",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/backgrounds/nav-parent-close.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="10 1 4 7 10 13" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
 </svg>

package/src/images/backgrounds/nav-parent-open.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="13 10 7 4 1 10" />
 </svg>

package/src/images/backgrounds/navbar-parent-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/images/backgrounds/navbar-parent-open.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="11 8.5 6 3.5 1 8.5" />
+</svg>

package/src/js/components/filter.js

@@ -103,7 +103,7 @@ export default {
                 });
         },
 
-        setState(state, animate = true) {
+        async setState(state, animate = true) {
             state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
@@ -112,7 +112,7 @@ export default {
                 toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
             );
 
-            Promise.all(
+            await Promise.all(
                 $$(this.target, this.$el).map((target) => {
                     const filterFn = () => {
                         applyState(state, target, getChildren(target));
@@ -120,7 +120,9 @@ export default {
                     };
                     return animate ? this.animate(filterFn, target) : filterFn();
                 })
-            ).then(() => trigger(this.$el, 'afterFilter', [this]));
+            );
+
+            trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {

package/src/js/components/sortable.js

@@ -26,7 +26,6 @@ import {
     remove,
     removeClass,
     scrollParents,
-    scrollTop,
     toggleClass,
     Transition,
     trigger,
@@ -313,7 +312,7 @@ function trackScroll(pos) {
     let last = Date.now();
     trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -334,7 +333,7 @@ function trackScroll(pos) {
                 }
 
                 if (scroll > 0 && scroll < scrollHeight - height) {
-                    scrollTop(scrollEl, scroll);
+                    scrollEl.scrollTop = scroll;
                     return true;
                 }
             });

package/src/js/core/height-viewport.js

@@ -56,14 +56,20 @@ export default {
                     0
                 );
             } else {
+                const { body, scrollingElement } = document;
+                const isScrollingElement =
+                    scrollingElement === scrollElement || body === scrollElement;
+
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = `calc(${
-                    document.scrollingElement === scrollElement ? '100vh' : `${viewportHeight}px`
-                }`;
+                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
                 if (this.offsetTop) {
-                    const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-                    minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    if (isScrollingElement) {
+                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                    }
                 }
 
                 if (this.offsetBottom === true) {

package/src/js/core/navbar.js

@@ -124,7 +124,6 @@ export default {
                         ...this.$props,
                         boundary: this.boundary,
                         pos: this.pos,
-                        offset: this.dropbar || this.offset,
                     }
                 );
             },
@@ -285,8 +284,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -294,7 +293,7 @@ export default {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
 
-                addClass($el, `${this.clsDrop}-dropbar`);
+                addClass(target, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -309,22 +308,47 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
-                this._observer = observeResize($el, () =>
+                this._observer = observeResize(target, () =>
                     this.transitionTo(
-                        offset($el).bottom -
+                        offset(target).bottom -
                             offset(this.dropbar).top +
-                            toFloat(css($el, 'marginBottom')),
-                        $el
+                            toFloat(css(target, 'marginBottom')),
+                        target
                     )
                 );
             },
         },
 
+        {
+            name: 'beforeposition',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            filter() {
+                return this.dropbar;
+            },
+
+            handler(e, element, target, options) {
+                if (!this.isDropbarDrop(element)) {
+                    return;
+                }
+
+                const dropbarOffset = offset(this.dropbar);
+
+                css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
+
+                options.offset[1] = dropbarOffset.top - offset(target).bottom;
+                options.viewportOffset += dropbarOffset.left;
+            },
+        },
+
         {
             name: 'beforehide',
 
@@ -336,12 +360,12 @@ export default {
                 return this.dropbar;
             },
 
-            handler(e, { $el }) {
+            handler(e) {
                 const active = this.getActive();
 
                 if (
                     matches(this.dropbar, ':hover') &&
-                    active?.$el === $el &&
+                    active?.$el === e.target &&
                     !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
@@ -360,8 +384,8 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, align }) {
-                if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+            handler({ target }) {
+                if (!this.isDropbarDrop(target)) {
                     return;
                 }
 
@@ -369,7 +393,7 @@ export default {
 
                 const active = this.getActive();
 
-                if (!active || active?.$el === $el) {
+                if (!active || active?.$el === target) {
                     this.transitionTo(0);
                 }
             },
@@ -409,6 +433,11 @@ export default {
         getDropdown(el) {
             return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
         },
+
+        isDropbarDrop(el) {
+            const drop = this.getDropdown(el);
+            return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
+        },
     },
 };
 

package/src/js/core/sticky.js

@@ -23,7 +23,6 @@ import {
     remove,
     removeClass,
     replaceClass,
-    scrollTop,
     toFloat,
     toggleClass,
     toPx,
@@ -125,7 +124,9 @@ export default {
             },
 
             handler() {
-                if (!location.hash || scrollTop(window) === 0) {
+                const { scrollingElement } = document;
+
+                if (!location.hash || scrollingElement.scrollTop === 0) {
                     return;
                 }
 
@@ -134,13 +135,11 @@ export default {
                     const elOffset = getOffset(this.$el);
 
                     if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-                        scrollTop(
-                            window,
+                        scrollingElement.scrollTop =
                             targetOffset.top -
-                                elOffset.height -
-                                toPx(this.targetOffset, 'height', this.placeholder) -
-                                toPx(this.offset, 'height', this.placeholder)
-                        );
+                            elOffset.height -
+                            toPx(this.targetOffset, 'height', this.placeholder) -
+                            toPx(this.offset, 'height', this.placeholder);
                     }
                 });
             },
@@ -238,7 +237,7 @@ export default {
                 start,
                 end,
             }) {
-                const scroll = scrollTop(window);
+                const scroll = document.scrollingElement.scrollTop;
                 const dir = prevScroll <= scroll ? 'down' : 'up';
 
                 return {

package/src/js/mixin/modal.js

@@ -127,7 +127,7 @@ export default {
                     this.$el,
                     'hide',
                     on(document, 'focusin', (e) => {
-                        if (!within(e.target, this.panel)) {
+                        if (last(active) === this && !within(e.target, this.$el)) {
                             this.$el.focus();
                         }
                     })

package/src/js/mixin/position.js

@@ -6,7 +6,9 @@ import {
     includes,
     isRtl,
     positionAt,
+    scrollParents,
     toPx,
+    trigger,
 } from 'uikit-util';
 
 export default {
@@ -44,17 +46,32 @@ 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) {

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/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/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) {

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;
@@ -69,6 +71,12 @@
 .uk-dropdown.uk-open { display: block; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: @dropdown-large-padding; }
+
+
 /* Stretch modifier
  ========================================================================== */
 

package/src/less/components/nav.less

@@ -46,6 +46,8 @@
 @nav-divider-margin-vertical:                   5px;
 @nav-divider-margin-horizontal:                 0;
 
+@nav-default-font-size:                         @global-font-size;
+@nav-default-line-height:                       @global-line-height;
 @nav-default-item-color:                        @global-muted-color;
 @nav-default-item-hover-color:                  @global-color;
 @nav-default-item-active-color:                 @global-emphasis-color;
@@ -53,12 +55,14 @@
 @nav-default-header-color:                      @global-emphasis-color;
 @nav-default-divider-border-width:              @global-border-width;
 @nav-default-divider-border:                    @global-border;
+@nav-default-sublist-font-size:                 @nav-default-font-size;
+@nav-default-sublist-line-height:               @nav-default-line-height;
 @nav-default-sublist-item-color:                @global-muted-color;
 @nav-default-sublist-item-hover-color:          @global-color;
 @nav-default-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-primary-item-font-size:                    @global-large-font-size;
-@nav-primary-item-line-height:                  @global-line-height;
+@nav-primary-font-size:                         @global-large-font-size;
+@nav-primary-line-height:                       @global-line-height;
 @nav-primary-item-color:                        @global-muted-color;
 @nav-primary-item-hover-color:                  @global-color;
 @nav-primary-item-active-color:                 @global-emphasis-color;
@@ -66,6 +70,8 @@
 @nav-primary-header-color:                      @global-emphasis-color;
 @nav-primary-divider-border-width:              @global-border-width;
 @nav-primary-divider-border:                    @global-border;
+@nav-primary-sublist-font-size:                 @global-medium-font-size;
+@nav-primary-sublist-line-height:               @global-line-height;
 @nav-primary-sublist-item-color:                @global-muted-color;
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: @nav-default-font-size;
+    line-height: @nav-default-line-height;
     .hook-nav-default();
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: @nav-default-sublist-font-size;
+    line-height: @nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: @nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: @nav-primary-font-size;
+    line-height: @nav-primary-line-height;
     .hook-nav-primary();
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: @nav-primary-item-font-size;
-    line-height: @nav-primary-item-line-height;
     color: @nav-primary-item-color;
     .hook-nav-primary-item();
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: @nav-primary-sublist-font-size;
+    line-height: @nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: @nav-primary-sublist-item-hover-color; }