uikit 3.15.18-dev.9cbbb510d → 3.15.19-dev.699ab5a7f

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.18-dev.9cbbb510d",
+    "version": "3.15.19-dev.699ab5a7f",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -43,7 +43,7 @@
         "camelcase": "^7.0.0",
         "clean-css": "^5.3.1",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.15.12",
+        "esbuild": "^0.16.4",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^11.1.0",

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/accordion.js

@@ -6,6 +6,7 @@ import {
     $$,
     attr,
     css,
+    dimensions,
     filter,
     getIndex,
     hasClass,
@@ -169,10 +170,10 @@ async function transition(el, show, { content, duration, velocity, transition })
     await Transition.cancel(wrapper);
     hide(content, false);
 
-    const endHeight = sumBy(
-        ['height', 'paddingTop', 'paddingBottom', 'marginTop', 'marginBottom'],
-        (prop) => css(content, prop)
-    );
+    const endHeight =
+        sumBy(['marginTop', 'marginBottom'], (prop) => css(content, prop)) +
+        dimensions(content).height;
+
     const percent = currentHeight / endHeight;
     duration = (velocity * endHeight + duration) * (show ? 1 - percent : percent);
     css(wrapper, 'height', currentHeight);

package/src/js/core/sticky.js

@@ -235,17 +235,19 @@ export default {
             },
 
             write({ height, width, margin, offset, sticky }) {
-                if (this.inactive) {
+                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 });
-                } else if (!this.isFixed) {
-                    reset(this.$el);
                 }
+
                 const { placeholder } = this;
 
                 css(placeholder, { height, width, margin });
@@ -412,10 +414,7 @@ export default {
                     position = 'absolute';
                 }
 
-                css(this.$el, {
-                    position,
-                    width,
-                });
+                css(this.$el, { position, width });
                 css(this.$el, 'marginTop', 0, 'important');
             }
 

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/attr.js

@@ -30,12 +30,7 @@ export function hasAttr(element, name) {
 }
 
 export function removeAttr(element, name) {
-    const elements = toNodes(element);
-    for (const attribute of name.split(' ')) {
-        for (const element of elements) {
-            element.removeAttribute(attribute);
-        }
-    }
+    toNodes(element).forEach((element) => element.removeAttribute(name));
 }
 
 export function data(element, attribute) {

package/src/less/components/sticky.less

@@ -25,6 +25,8 @@
 
 /*
  * 1. Create position context so it's t the same like when fixed.
+ * 2. Create stacking context already when not sticky to have the same context
+*     for position set to `sticky` and `relative`
  * 2. More robust if padding and border are used and the sticky height is transitioned
  */
 
@@ -32,6 +34,8 @@
     /* 1 */
     position: relative;
     /* 2 */
+    z-index: @sticky-z-index;
+    /* 3 */
     box-sizing: border-box;
 }
 
@@ -40,7 +44,6 @@
  */
 
 .uk-sticky-fixed {
-    z-index: @sticky-z-index;
     margin: 0 !important;
     /* 1 */
     -webkit-backface-visibility: hidden;

package/src/scss/components/sticky.scss

@@ -25,6 +25,8 @@ $sticky-reverse-animation-duration:              0.2s !default;
 
 /*
  * 1. Create position context so it's t the same like when fixed.
+ * 2. Create stacking context already when not sticky to have the same context
+*     for position set to `sticky` and `relative`
  * 2. More robust if padding and border are used and the sticky height is transitioned
  */
 
@@ -32,6 +34,8 @@ $sticky-reverse-animation-duration:              0.2s !default;
     /* 1 */
     position: relative;
     /* 2 */
+    z-index: $sticky-z-index;
+    /* 3 */
     box-sizing: border-box;
 }
 
@@ -40,7 +44,6 @@ $sticky-reverse-animation-duration:              0.2s !default;
  */
 
 .uk-sticky-fixed {
-    z-index: $sticky-z-index;
     margin: 0 !important;
     /* 1 */
     -webkit-backface-visibility: hidden;