uikit 3.15.17 → 3.15.18-dev.014d8e608

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.15.17",
+    "version": "3.15.18-dev.014d8e608",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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

@@ -84,15 +84,13 @@ export default {
             self: true,
 
             delegate() {
-                return this.selSlides;
+                return `${this.selList} > *`;
             },
 
             handler(e) {
-                if (e.defaultPrevented) {
-                    return;
+                if (!e.defaultPrevented) {
+                    this.hide();
                 }
-
-                this.hide();
             },
         },
 

package/src/js/components/slider.js

@@ -11,8 +11,10 @@ import {
     data,
     dimensions,
     findIndex,
+    getIndex,
     includes,
     last,
+    sumBy,
     toFloat,
     toggleClass,
     toNumber,
@@ -42,11 +44,7 @@ export default {
         },
 
         finite({ finite }) {
-            return (
-                finite ||
-                Math.ceil(getWidth(this.list)) <
-                    Math.trunc(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
-            );
+            return finite || isFinite(this.list, this.center);
         },
 
         maxIndex() {
@@ -79,7 +77,7 @@ export default {
             let left = 0;
             const sets = [];
             const width = dimensions(this.list).width;
-            for (let i = 0; i < this.slides.length; i++) {
+            for (let i = 0; i < this.length; i++) {
                 const slideWidth = dimensions(this.slides[i]).width;
 
                 if (left + slideWidth > width) {
@@ -271,13 +269,70 @@ export default {
                     const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
                     currentLeft += dimensions(slide).width * i;
                     slides.add(slide);
-                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+                } while (this.length > j && currentLeft > left && currentLeft < right);
             }
             return Array.from(slides);
         },
     },
 };
 
+function isFinite(list, center) {
+    const { length } = list;
+
+    if (length < 2) {
+        return true;
+    }
+
+    const { width: listWidth } = dimensions(list);
+    if (!center) {
+        return Math.ceil(getWidth(list)) < Math.trunc(listWidth + getMaxElWidth(list));
+    }
+
+    const slides = children(list);
+    const listHalf = Math.trunc(listWidth / 2);
+    for (const index in slides) {
+        const slide = slides[index];
+        const slideWidth = dimensions(slide).width;
+        const slidesInView = new Set([slide]);
+
+        let diff = 0;
+        for (const i of [-1, 1]) {
+            let left = slideWidth / 2;
+
+            let j = 0;
+
+            while (left < listHalf) {
+                const nextSlide = slides[getIndex(+index + i + j++ * i, slides)];
+
+                if (slidesInView.has(nextSlide)) {
+                    return true;
+                }
+
+                left += dimensions(nextSlide).width;
+                slidesInView.add(nextSlide);
+            }
+            diff = Math.max(
+                diff,
+                slideWidth / 2 +
+                    dimensions(slides[getIndex(+index + i, slides)]).width / 2 -
+                    (left - listHalf)
+            );
+        }
+
+        if (
+            diff >
+            sumBy(
+                slides.filter((slide) => !slidesInView.has(slide)),
+                (slide) => dimensions(slide).width
+            )
+        ) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 function getMaxElWidth(list) {
     return Math.max(0, ...children(list).map((el) => dimensions(el).width));
 }

package/src/js/core/sticky.js

@@ -98,7 +98,7 @@ export default {
             this.hide();
             removeClass(this.selTarget, this.clsInactive);
         }
-        css(this.$el, { position: '', top: '' });
+        reset(this.$el);
 
         remove(this.placeholder);
         this.placeholder = null;
@@ -156,10 +156,10 @@ export default {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
-                    return false;
+                    return;
                 }
 
-                const hide = this.isFixed && types.has('resize');
+                const hide = this.isFixed && types.has('resize') && !sticky;
                 if (hide) {
                     css(this.selTarget, 'transition', '0s');
                     this.hide();
@@ -210,6 +210,7 @@ export default {
                           );
 
                 sticky =
+                    maxScrollHeight &&
                     !this.showOnUp &&
                     start + offset === topOffset &&
                     end ===
@@ -225,6 +226,7 @@ export default {
                     overflow,
                     topOffset,
                     height,
+                    elHeight,
                     width,
                     margin,
                     top: offsetPosition(referenceElement)[0],
@@ -233,10 +235,19 @@ export default {
             },
 
             write({ height, width, margin, offset, sticky }) {
+                if (this.inactive || sticky || !this.isFixed) {
+                    reset(this.$el);
+                }
+
+                if (this.inactive) {
+                    return;
+                }
+
                 if (sticky) {
                     height = width = margin = 0;
                     css(this.$el, { position: 'sticky', top: offset });
                 }
+
                 const { placeholder } = this;
 
                 css(placeholder, { height, width, margin });
@@ -349,7 +360,7 @@ export default {
                 }
             },
 
-            events: ['resize', 'scroll'],
+            events: ['resize', 'resizeViewport', 'scroll'],
         },
     ],
 
@@ -389,6 +400,7 @@ export default {
                 offset,
                 topOffset,
                 height,
+                elHeight,
                 offsetParentTop,
                 sticky,
             } = this._data;
@@ -402,10 +414,7 @@ export default {
                     position = 'absolute';
                 }
 
-                css(this.$el, {
-                    position,
-                    width,
-                });
+                css(this.$el, { position, width });
                 css(this.$el, 'marginTop', 0, 'important');
             }
 
@@ -416,7 +425,11 @@ export default {
             css(this.$el, 'top', offset);
 
             this.setActive(active);
-            toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
+            toggleClass(
+                this.$el,
+                this.clsBelow,
+                scroll > topOffset + (sticky ? Math.min(height, elHeight) : height)
+            );
             addClass(this.$el, this.clsFixed);
         },
 
@@ -460,3 +473,7 @@ function coerce(value) {
     }
     return value;
 }
+
+function reset(el) {
+    css(el, { position: '', top: '', marginTop: '', width: '' });
+}

package/src/js/mixin/slider-drag.js

@@ -50,7 +50,7 @@ export default {
             passive: true,
 
             delegate() {
-                return this.selSlides;
+                return `${this.selList} > *`;
             },
 
             handler(e) {

package/src/js/mixin/slider.js

@@ -4,7 +4,7 @@ import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
 import {
     $,
-    $$,
+    children,
     clamp,
     getIndex,
     hasClass,
@@ -23,7 +23,6 @@ export default {
         index: Number,
         finite: Boolean,
         velocity: Number,
-        selSlides: String,
     },
 
     data: () => ({
@@ -63,13 +62,9 @@ export default {
             return this.length - 1;
         },
 
-        selSlides({ selList, selSlides }) {
-            return `${selList} ${selSlides || '> *'}`;
-        },
-
         slides: {
             get() {
-                return $$(this.selSlides, this.$el);
+                return children(this.list);
             },
 
             watch() {

package/src/js/util/viewport.js

@@ -142,6 +142,10 @@ export function offsetViewport(scrollElement) {
     }
 
     let rect = offset(viewportElement);
+    if (css(viewportElement, 'display') === 'inline') {
+        return rect;
+    }
+
     for (let [prop, dir, start, end] of [
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],

package/tests/tooltip.html

@@ -77,7 +77,7 @@
                         <tr>
                             <td><code>pos</code></td>
                             <td>String</td>
-                            <td>'bottom-left'</td>
+                            <td>'top-center'</td>
                             <td>Tooltip position.</td>
                         </tr>
                         <tr>