uikit 3.9.3-dev.770c92c8a → 3.9.5-dev.13c625552

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.9.3-dev.770c92c8a",
+  "version": "3.9.5-dev.13c625552",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -20,7 +20,7 @@
     "prefix": "node build/prefix",
     "scope": "node build/scope",
     "release": "node build/release",
-    "watch-less": "watch-run -i -p 'src/less/**/*.less' yarn compile-less",
+    "watch": "watch-run -i -p 'src/less/**/*.less' yarn compile-less",
     "eslint": "eslint src/js",
     "eslint-fix": "eslint --fix src/js"
   },
@@ -41,6 +41,7 @@
     "camelcase": "^6.2.1",
     "clean-css": "^5.2.2",
     "dateformat": "^5.0.2",
+    "esbuild": "^0.13.14",
     "eslint": "^8.2.0",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
@@ -48,11 +49,13 @@
     "less": "^4.1.2",
     "minimist": "^1.2.5",
     "number-precision": "^1.5.1",
+    "p-limit": "^4.0.0",
     "postcss": "^8.3.11",
+    "prettier": "^2.4.1",
     "rollup": "^2.60.0",
+    "rollup-plugin-esbuild": "^4.7.1",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-modify": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^3.5.0",
     "semver": "^7.3.2",
     "svgo": "^2.8.0",

package/src/js/core/img.js

@@ -1,13 +1,8 @@
-import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {attr, children, createEvent, css, data, Dimensions, escape, getImage, includes, isUndefined, once, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
-    args: 'dataSrc',
-
     props: {
-        dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
         width: Number,
         height: Number,
         offsetTop: String,
@@ -16,9 +11,6 @@ export default {
     },
 
     data: {
-        dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
         width: false,
         height: false,
         offsetTop: '50vh',
@@ -28,8 +20,8 @@ export default {
 
     computed: {
 
-        cacheKey({dataSrc}) {
-            return `${this.$name}.${dataSrc}`;
+        cacheKey() {
+            return `${this.$name}.${data(this.$el, 'data-src')}`;
         },
 
         width({width, dataWidth}) {
@@ -40,14 +32,6 @@ export default {
             return height || dataHeight;
         },
 
-        sizes({sizes, dataSizes}) {
-            return sizes || dataSizes;
-        },
-
-        isImg(_, $el) {
-            return isImg($el);
-        },
-
         target: {
 
             get({target}) {
@@ -73,14 +57,14 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+            setSrcAttrs(this.$el);
             return;
         }
 
         if (storage[this.cacheKey]) {
-            setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
-        } else if (this.isImg && this.width && this.height) {
-            setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
+            setSrcAttrs(this.$el, storage[this.cacheKey]);
+        } else if (isImg(this.$el) && this.width && this.height) {
+            attr(this.$el, 'src', getPlaceholderImage(this.$el));
         }
 
         this.observer = new IntersectionObserver(this.load, {
@@ -107,7 +91,7 @@ export default {
                 this.load(this.observer.takeRecords());
             }
 
-            if (this.isImg) {
+            if (isImg(this.$el)) {
                 return false;
             }
 
@@ -115,14 +99,15 @@ export default {
 
         },
 
-        write(data) {
+        write(store) {
 
-            if (this.dataSrcset && window.devicePixelRatio !== 1) {
+            const srcset = data(this.$el, 'data-srcset');
+            if (srcset && window.devicePixelRatio !== 1) {
 
                 const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
-                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
-                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
+                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
+                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
                 }
 
             }
@@ -142,9 +127,9 @@ export default {
                 return;
             }
 
-            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
+            this._data.image = getImageFromElement(this.$el).then(img => {
 
-                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
+                setSrcAttrs(this.$el, currentSrc(img));
                 storage[this.cacheKey] = currentSrc(img);
                 return img;
 
@@ -163,13 +148,19 @@ export default {
 
 };
 
-function setSrcAttrs(el, src, srcset, sizes) {
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSrcAttrs(el, src) {
 
+    const parentNode = parent(el);
     if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+        (isPicture(parentNode) ? children(parentNode) : [el]).forEach(el =>
+            srcProps.forEach(prop => {
+                const value = data(el, prop);
+                if (value) {
+                    attr(el, prop.replace(/^(data-)+/, ''), value);
+                }
+            })
+        );
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -182,7 +173,10 @@ function setSrcAttrs(el, src, srcset, sizes) {
 
 }
 
-function getPlaceholderImage(width, height, sizes) {
+function getPlaceholderImage(el) {
+    const sizes = data(el, 'sizes');
+    let width = data(el, 'width');
+    let height = data(el, 'height');
 
     if (sizes) {
         ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
@@ -207,6 +201,19 @@ function sizesToPixel(sizes) {
     return matches || '100vw';
 }
 
+function getImageFromElement(el) {
+    const parentNode = parent(el);
+    if (!isPicture(parentNode)) {
+        return getImage(...srcProps.map(prop => data(el, prop)));
+    }
+
+    return new Promise((resolve, reject) => {
+        const picture = parentNode.cloneNode(true);
+        once(picture, 'load error', e => e.type === 'error' ? reject(e) : resolve(e.target), true);
+        setSrcAttrs(el);
+    });
+}
+
 const sizeRe = /\d+(?:\w+|%)/g;
 const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
@@ -228,8 +235,16 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
+function isPicture(el) {
+    return isA(el, 'PICTURE');
+}
+
 function isImg(el) {
-    return el.tagName === 'IMG';
+    return isA(el, 'IMG');
+}
+
+function isA(el, tagName) {
+    return el && el.tagName === tagName;
 }
 
 function currentSrc(el) {

package/src/js/core/sticky.js

@@ -146,9 +146,10 @@ export default {
 
                 height = !this.isActive ? this.$el.offsetHeight : height;
 
-                this.topOffset = offset(this.isFixed ? this.placeholder : this.$el).top;
+                const referenceElement = this.isFixed ? this.placeholder : this.$el;
+                this.topOffset = offset(referenceElement).top;
                 this.bottomOffset = this.topOffset + height;
-                this.offsetParentTop = offset(this.$el.offsetParent).top;
+                this.offsetParentTop = offset(referenceElement.offsetParent).top;
 
                 const bottom = parseProp('bottom', this);
 

package/src/less/components/utility.less

@@ -380,6 +380,8 @@
     .hook-logo-hover();
 }
 
+.uk-logo > :where(img, svg, video) { display: block; }
+
 .uk-logo-inverse { display: none; }
 
 
@@ -491,7 +493,7 @@
     }
 
     .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
-    .uk-logo-inverse { display: inline; }
+    .uk-logo-inverse { display: block; }
 
 }
 

package/src/scss/components/utility.scss

@@ -380,6 +380,8 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
 }
 
+.uk-logo > :where(img, svg, video) { display: block; }
+
 .uk-logo-inverse { display: none; }
 
 

package/src/scss/mixins-theme.scss

@@ -1559,7 +1559,7 @@
     }
 
     .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
-    .uk-logo-inverse { display: inline; }
+    .uk-logo-inverse { display: block; }
 
 }
 @mixin hook-inverse(){

package/src/scss/mixins.scss

@@ -1313,7 +1313,7 @@
     }
 
     .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
-    .uk-logo-inverse { display: inline; }
+    .uk-logo-inverse { display: block; }
 
 }
 @mixin hook-inverse(){

package/tests/comment.html

@@ -19,7 +19,7 @@
                 <ul class="uk-comment-list">
                     <li>
                         <article class="uk-comment">
-                            <header class="uk-comment-header"">
+                            <header class="uk-comment-header">
                                 <div class="uk-grid-medium uk-flex-middle" uk-grid>
                                     <div class="uk-width-auto">
                                         <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">