uikit 3.21.4 → 3.21.5-dev.7822c0af7

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.21.4",
+  "version": "3.21.5-dev.7822c0af7",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/lightbox-panel.js

@@ -45,7 +45,7 @@ export default {
         velocity: 2,
         Animations,
         template: `<div class="uk-lightbox uk-overflow-hidden">
-                        <ul class="uk-lightbox-items"></ul>
+                        <div class="uk-lightbox-items"></div>
                         <div class="uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque">
                             <button class="uk-lightbox-toolbar-icon uk-close-large" type="button" uk-close></button>
                          </div>
@@ -58,7 +58,7 @@ export default {
     created() {
         const $el = $(this.template);
         const list = $(this.selList, $el);
-        this.items.forEach(() => append(list, '<li>'));
+        this.items.forEach(() => append(list, '<div>'));
 
         const close = $('[uk-close]', $el);
         const closeLabel = this.t('close');
@@ -69,10 +69,6 @@ export default {
         this.$mount(append(this.container, $el));
     },
 
-    computed: {
-        caption: ({ selCaption }, $el) => $(selCaption, $el),
-    },
-
     events: [
         {
             name: `${pointerMove} ${pointerDown} keydown`,
@@ -177,7 +173,7 @@ export default {
             name: 'itemshow',
 
             handler() {
-                html(this.caption, this.getItem().caption || '');
+                html($(this.selCaption, this.$el), this.getItem().caption || '');
 
                 for (let j = -this.preload; j <= this.preload; j++) {
                     this.loadItem(this.index + j);

package/src/js/core/scrollspy-nav.js

@@ -1,5 +1,6 @@
 import {
     $$,
+    dimensions,
     getCoveringElement,
     getTargetedElement,
     hasClass,
@@ -69,7 +70,9 @@ export default {
                     active = length - 1;
                 } else {
                     const offsetBy =
-                        this.offset + offset(getCoveringElement()).height + viewport.height * 0.1;
+                        this.offset +
+                        dimensions(getCoveringElement()).height +
+                        viewport.height * 0.1;
 
                     for (let i = 0; i < targets.length; i++) {
                         if (offset(targets[i]).top - viewport.top - offsetBy > 0) {

package/src/js/core/sticky.js

@@ -6,6 +6,7 @@ import {
     before,
     clamp,
     css,
+    dimensions,
     height as getHeight,
     offset as getOffset,
     hasClass,
@@ -159,7 +160,7 @@ export default {
                 }
 
                 if (!this.active) {
-                    ({ height, width } = getOffset(this.$el));
+                    ({ height, width } = dimensions(this.$el));
                     margin = css(this.$el, 'margin');
                 }
 
@@ -187,7 +188,7 @@ export default {
 
                 const overflow = this.overflowFlip ? 0 : Math.max(0, height + offset - viewport);
                 const topOffset = getOffset(referenceElement).top;
-                const elHeight = getOffset(this.$el).height;
+                const elHeight = dimensions(this.$el).height;
 
                 const start =
                     (this.start === false

package/src/js/mixin/internal/animate-slide.js

@@ -2,10 +2,10 @@ import {
     attr,
     children,
     css,
+    dimensions,
     includes,
     index,
     isVisible,
-    offset,
     parent,
     position,
     Transition,
@@ -134,7 +134,7 @@ function resetProps(el, props) {
 }
 
 function getPositionWithMargin(el) {
-    const { height, width } = offset(el);
+    const { height, width } = dimensions(el);
 
     return {
         height,

package/src/js/util/scroll.js

@@ -3,41 +3,46 @@ import { css, getEventPos, matches, on, once, scrollParents, width } from 'uikit
 let prevented;
 export function preventBackgroundScroll(el) {
     // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
-    const off = on(el, 'touchstart', (e) => {
-        if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
-            return;
-        }
-
-        let prev = getEventPos(e).y;
-
-        const offMove = on(
-            el,
-            'touchmove',
-            (e) => {
-                const pos = getEventPos(e).y;
-                if (pos === prev) {
-                    return;
-                }
-                prev = pos;
-
-                if (
-                    !scrollParents(e.target).some((scrollParent) => {
-                        if (!el.contains(scrollParent)) {
-                            return false;
-                        }
-
-                        let { scrollHeight, clientHeight } = scrollParent;
-                        return clientHeight < scrollHeight;
-                    })
-                ) {
-                    e.preventDefault();
-                }
-            },
-            { passive: false },
-        );
-
-        once(el, 'scroll touchend touchcanel', offMove, { capture: true });
-    });
+    const off = on(
+        el,
+        'touchstart',
+        (e) => {
+            if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
+                return;
+            }
+
+            let prev = getEventPos(e).y;
+
+            const offMove = on(
+                el,
+                'touchmove',
+                (e) => {
+                    const pos = getEventPos(e).y;
+                    if (pos === prev) {
+                        return;
+                    }
+                    prev = pos;
+
+                    if (
+                        !scrollParents(e.target).some((scrollParent) => {
+                            if (!el.contains(scrollParent)) {
+                                return false;
+                            }
+
+                            let { scrollHeight, clientHeight } = scrollParent;
+                            return clientHeight < scrollHeight;
+                        })
+                    ) {
+                        e.preventDefault();
+                    }
+                },
+                { passive: false },
+            );
+
+            once(el, 'scroll touchend touchcanel', offMove, { capture: true });
+        },
+        { passive: true },
+    );
 
     if (prevented) {
         return off;

package/src/js/util/viewport.js

@@ -84,9 +84,8 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
                     diff =
                         offset(targetEl).top +
                         (isScrollingElement ? 0 : element.scrollTop) -
-                        targetTop;
-                    const coverEl = getCoveringElement(targetEl);
-                    diff -= coverEl ? offset(coverEl).height : 0;
+                        targetTop -
+                        dimensions(getCoveringElement(targetEl)).height;
                 }
 
                 element.scrollTop = scroll + (top + diff) * percent;
@@ -200,6 +199,7 @@ export function offsetViewport(scrollElement) {
 export function getCoveringElement(target) {
     const { left, width, top } = dimensions(target);
     for (const position of top ? [0, top] : [0]) {
+        let coverEl;
         for (const el of toWindow(target).document.elementsFromPoint(left + width / 2, position)) {
             if (
                 !el.contains(target) &&
@@ -213,11 +213,15 @@ export function getCoveringElement(target) {
                                 (parent) => !parent.contains(el) && !hasPosition(parent, 'static'),
                             ),
                     ) < zIndex(el)) ||
-                    (hasPosition(el, 'sticky') && parent(el).contains(target)))
+                    (hasPosition(el, 'sticky') && parent(el).contains(target))) &&
+                (!coverEl || dimensions(coverEl).height < dimensions(el).height)
             ) {
-                return el;
+                coverEl = el;
             }
         }
+        if (coverEl) {
+            return coverEl;
+        }
     }
 }