uikit 3.21.5-dev.7a232f5a3 → 3.21.5-dev.e2ff6bd90

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

package/src/js/components/slider.js

@@ -94,14 +94,14 @@ export default {
                         left < width / 2 &&
                         left +
                             slideWidth +
-                            dimensions(this.slides[getIndex(+i + 1, this.slides)]).width / 2 >
+                            dimensions(this.slides[getIndex(i + 1, this.slides)]).width / 2 >
                             width / 2
                     ) {
-                        sets.push(+i);
+                        sets.push(i);
                         left = width / 2 - slideWidth / 2;
                     }
                 } else if (left === 0) {
-                    sets.push(Math.min(+i, this.maxIndex));
+                    sets.push(Math.min(i, this.maxIndex));
                 }
 
                 left += slideWidth;

package/src/js/core/cover.js

@@ -51,10 +51,7 @@ export default {
 
             const { offsetHeight: coverHeight, offsetWidth: coverWidth } =
                 getPositionedParent($el) || parent($el);
-            const coverDim = cover(dim, {
-                width: coverWidth + (coverWidth % 2 ? 1 : 0),
-                height: coverHeight + (coverHeight % 2 ? 1 : 0),
-            });
+            const coverDim = cover(dim, { width: coverWidth, height: coverHeight });
 
             if (!coverDim.width || !coverDim.height) {
                 return false;

package/src/js/core/dropnav.js

@@ -9,6 +9,7 @@ import {
     hasClass,
     height,
     includes,
+    isInput,
     isRtl,
     matches,
     noop,
@@ -172,9 +173,9 @@ export default {
             delegate: ({ clsDrop }) => `.${clsDrop}`,
 
             handler(e) {
-                const { current, keyCode } = e;
+                const { current, keyCode, target } = e;
 
-                if (!includes(this.dropdowns, current)) {
+                if (isInput(target) || !includes(this.dropdowns, current)) {
                     return;
                 }
 

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

@@ -6,7 +6,7 @@ import {
     isNumeric,
     isString,
     isVisible,
-    offsetPosition,
+    offset,
     offsetViewport,
     query,
     scrollParent,
@@ -64,8 +64,7 @@ export default {
                     if (isScrollingElement) {
                         const offsetTopEl =
                             this.offsetTop === true ? this.$el : query(this.offsetTop, this.$el);
-                        const top =
-                            offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
+                        const { top } = offset(offsetTopEl);
                         minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
                     } else {
                         minHeight += ` - ${boxModelAdjust(scrollElement, 'height', css(scrollElement, 'boxSizing'))}px`;

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,
@@ -146,7 +147,7 @@ export default {
     update: [
         {
             read({ height, width, margin, sticky }, types) {
-                this.inactive = !this.matchMedia || !isVisible(this.$el);
+                this.inactive = !this.matchMedia || !isVisible(this.$el) || !this.$el.offsetHeight;
 
                 if (this.inactive) {
                     return;
@@ -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/mixin/slider-nav.js

@@ -1,11 +1,11 @@
 import {
     $,
     $$,
-    append,
     attr,
     children,
     data,
-    empty,
+    html,
+    isEqual,
     isNumeric,
     isTag,
     matches,
@@ -48,6 +48,7 @@ export default {
     watch: {
         nav(nav, prev) {
             attr(nav, 'role', 'tablist');
+            this.padNavitems();
 
             if (prev) {
                 this.$emit();
@@ -62,6 +63,8 @@ export default {
 
         navChildren(children) {
             attr(children, 'role', 'presentation');
+            this.padNavitems();
+            this.updateNav();
         },
 
         navItems(items) {
@@ -112,16 +115,8 @@ export default {
                     'aria-roledescription': this.nav ? null : 'slide',
                 }),
             );
-        },
 
-        length(length) {
-            const navLength = this.navChildren.length;
-            if (this.nav && length !== navLength) {
-                empty(this.nav);
-                for (let i = 0; i < length; i++) {
-                    append(this.nav, `<li ${this.attrItem}="${i}"><a href></a></li>`);
-                }
-            }
+            this.padNavitems();
         },
     },
 
@@ -235,5 +230,22 @@ export default {
                 }
             }
         },
+
+        padNavitems() {
+            if (!this.nav) {
+                return;
+            }
+
+            const children = [];
+            for (let i = 0; i < this.length; i++) {
+                const attr = `${this.attrItem}="${i}"`;
+                children[i] =
+                    this.navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
+                    $(`<li ${attr}><a href></a></li>`);
+            }
+            if (!isEqual(children, this.navChildren)) {
+                html(this.nav, children);
+            }
+        },
     },
 };

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;
+        }
     }
 }