uikit 3.15.15-dev.492ccd2ec → 3.15.15-dev.563bd9495

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.15-dev.492ccd2ec",
+    "version": "3.15.15-dev.563bd9495",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/img.js

@@ -19,7 +19,6 @@ import {
     queryAll,
     removeAttr,
     startsWith,
-    toPx,
     trigger,
 } from 'uikit-util';
 
@@ -31,8 +30,7 @@ export default {
     props: {
         dataSrc: String,
         sources: String,
-        offsetTop: String,
-        offsetLeft: String,
+        margin: String,
         target: String,
         loading: String,
     },
@@ -40,8 +38,7 @@ export default {
     data: {
         dataSrc: '',
         sources: false,
-        offsetTop: '50vh',
-        offsetLeft: '50vw',
+        margin: '50% 50%',
         target: false,
         loading: 'lazy',
     },
@@ -72,12 +69,7 @@ export default {
                     this.load();
                     observer.disconnect();
                 },
-                {
-                    rootMargin: `${toPx(this.offsetTop, 'height')}px ${toPx(
-                        this.offsetLeft,
-                        'width'
-                    )}px`,
-                }
+                { rootMargin: this.margin }
             )
         );
     },

package/src/js/core/scrollspy.js

@@ -10,7 +10,6 @@ import {
     removeClass,
     removeClasses,
     toggleClass,
-    toPx,
     trigger,
 } from 'uikit-util';
 
@@ -23,8 +22,7 @@ export default {
         cls: String,
         target: String,
         hidden: Boolean,
-        offsetTop: Number,
-        offsetLeft: Number,
+        margin: String,
         repeat: Boolean,
         delay: Number,
     },
@@ -33,8 +31,7 @@ export default {
         cls: '',
         target: false,
         hidden: true,
-        offsetTop: 0,
-        offsetLeft: 0,
+        margin: '-1px -1px',
         repeat: false,
         delay: 0,
         inViewClass: 'uk-scrollspy-inview',
@@ -85,11 +82,7 @@ export default {
 
                     this.$emit();
                 },
-                {
-                    rootMargin: `${toPx(this.offsetTop, 'height') - 1}px ${
-                        toPx(this.offsetLeft, 'width') - 1
-                    }px`,
-                },
+                { rootMargin: this.margin },
                 false
             )
         );

package/src/js/mixin/modal.js

@@ -304,7 +304,10 @@ function toMs(time) {
 
 export function preventOverscroll(el) {
     if (CSS.supports('overscroll-behavior', 'contain')) {
-        const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
+        const elements = [
+            el,
+            ...filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow'))),
+        ];
         css(elements, 'overscrollBehavior', 'contain');
         return () => css(elements, 'overscrollBehavior', '');
     }

package/tests/image.html

@@ -17,7 +17,7 @@
             <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
                 <h1>Background Image Loading Eager</h1>
             </div>
-            
+
             <h2>Loading Lazy Attribute</h2>
 
             <div class="uk-child-width-1-2@m" uk-grid>
@@ -265,7 +265,7 @@
                  sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
                 <h1>Background Picture with Srcset</h1>
             </div>
-                
+
             <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
                  sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
                             &quot;type&quot;: &quot;image\/avif&quot;
@@ -491,7 +491,7 @@
                          width="746" height="498" alt="" uk-img>
                 </div>
             </div>
-            
+
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
 
@@ -621,10 +621,10 @@
                             <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
                         </tr>
                         <tr>
-                            <td><code>offsetTop</code></td>
+                            <td><code>margin</code></td>
                             <td>String</td>
-                            <td>'50vh'</td>
-                            <td>The offset increases the viewport's bounding box vertically, before computing an intersection with the image.</td>
+                            <td>'50% 50%'</td>
+                            <td>The margin increases the viewport's bounding box, before computing an intersection with the image. (Must be px or % units)</td>
                         </tr>
                         <tr>
                             <td><code>offsetLeft</code></td>

package/tests/scrollspy.html

@@ -513,16 +513,10 @@
                             <td>Hides the element while out of view.</td>
                         </tr>
                         <tr>
-                            <td><code>offset-top</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Top offset before triggering in view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset-left</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Left offset before triggering in view.</td>
+                            <td><code>margin</code></td>
+                            <td>String</td>
+                            <td>'-1px -1px'</td>
+                            <td>The margin is added to the viewport's bounding box, before computing an intersection with the element. (Must be px or % units)</td>
                         </tr>
                         <tr>
                             <td><code>repeat</code></td>