uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.a08b20474

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.11.2-dev.9433cd5fd",
+  "version": "3.11.2-dev.a08b20474",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/component.js

@@ -28,7 +28,7 @@ export default function (UIkit) {
 
             return component.options.functional
                 ? new component({data: isPlainObject(element) ? element : [...arguments]})
-                : !element ? init(element) : $$(element).map(init)[0];
+                : element ? $$(element).map(init)[0] : init();
 
             function init(element) {
 

package/src/js/api/state.js

@@ -1,4 +1,4 @@
-import {assign, camelize, data as getData, hasOwn, hyphenate, isArray, isEmpty, isFunction, isNumeric, isPlainObject, isString, isUndefined, mergeOptions, on, parseOptions, startsWith, toBoolean, toNumber} from 'uikit-util';
+import {assign, camelize, data as getData, hasOwn, hyphenate, isArray, isFunction, isNumeric, isPlainObject, isString, isUndefined, mergeOptions, on, parseOptions, startsWith, toBoolean, toNumber} from 'uikit-util';
 
 export default function (UIkit) {
 
@@ -250,27 +250,23 @@ export default function (UIkit) {
                 : [value];
     }
 
-    function normalizeData({data}, {args, props = {}}) {
-        data = isArray(data)
-            ? !isEmpty(args)
-                ? data.slice(0, args.length).reduce((data, value, index) => {
-                    if (isPlainObject(value)) {
-                        assign(data, value);
-                    } else {
-                        data[args[index]] = value;
-                    }
-                    return data;
-                }, {})
-                : undefined
-            : data;
-
-        if (data) {
-            for (const key in data) {
-                if (isUndefined(data[key])) {
-                    delete data[key];
+    function normalizeData({data = {}}, {args = [], props = {}}) {
+        if (isArray(data)) {
+            data = data.slice(0, args.length).reduce((data, value, index) => {
+                if (isPlainObject(value)) {
+                    assign(data, value);
                 } else {
-                    data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
+                    data[args[index]] = value;
                 }
+                return data;
+            }, {});
+        }
+
+        for (const key in data) {
+            if (isUndefined(data[key])) {
+                delete data[key];
+            } else if (props[key]) {
+                data[key] = coerce(props[key], data[key]);
             }
         }
 

package/src/js/core/img.js

@@ -1,4 +1,6 @@
-import {append, attr, children, createEvent, css, data, escape, fragment, includes, isArray, isEmpty, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {append, attr, children, createEvent, css, data, escape, fragment, hasAttr, includes, isArray, isEmpty, isUndefined, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+
+const nativeLazyLoad = 'loading' in HTMLImageElement.prototype;
 
 export default {
 
@@ -43,6 +45,17 @@ export default {
             return;
         }
 
+        if (nativeLazyLoad && isImg(this.$el)) {
+            this.$el.loading = 'lazy';
+            setSrcAttrs(this.$el);
+
+            if (this.target.length === 1) {
+                return;
+            }
+        }
+
+        ensureSrcAttribute(this.$el);
+
         const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
         this.observer = new IntersectionObserver(this.load, {rootMargin});
         this.observe();
@@ -98,6 +111,7 @@ export default {
                 );
 
             this._data.image = image;
+            image.loading = 'eager';
             setSrcAttrs(this.$el, image.currentSrc);
 
             this.observer.disconnect();
@@ -120,7 +134,6 @@ function setSrcAttrs(el, src) {
         const parentNode = parent(el);
         const elements = isPicture(parentNode) ? children(parentNode) : [el];
         elements.forEach(el => setSourceProps(el, el));
-        src && attr(el, 'src', src);
 
     } else if (src) {
 
@@ -233,6 +246,12 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
+function ensureSrcAttribute(el) {
+    if (isImg(el) && !hasAttr(el, 'src')) {
+        attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+    }
+}
+
 function isPicture(el) {
     return isA(el, 'PICTURE');
 }

package/tests/image.html

@@ -14,15 +14,21 @@
 
             <h1>Image</h1>
 
-            <div class="uk-child-width-1-2@m" uk-grid>
+            <div class="uk-child-width-1-2@m uk-background-secondary" uk-grid>
                 <div>
-                    <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
+                    <img src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="">
                 </div>
                 <div>
-                    <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
+                    <img src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="">
                 </div>
             </div>
 
+            <div class="uk-background-primary">
+                <picture>
+                    <source type="image/webp" sizes="(min-width: 780px) 780px" srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
+                    <img src="/site/cache/images/yootheme-pro-0d67d545.jpeg" width="780" height="488" alt="Introduction Video on using the YOOtheme Pro Page Builder for WordPress and Joomla">
+                </picture>
+            </div>
             <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-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
                 <h1>Background Image</h1>
             </div>