uikit 3.11.2-dev.78e397546 → 3.11.2-dev.9433cd5fd

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.78e397546 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.9433cd5fd | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2093,9 +2093,8 @@
 
         try {
 
-            return !options
-                ? {}
-                : startsWith(options, '{')
+            return options
+                ? startsWith(options, '{')
                     ? JSON.parse(options)
                     : args.length && !includes(options, ':')
                         ? (( obj = {}, obj[args[0]] = options, obj ))
@@ -2107,7 +2106,8 @@
                                 options[key.trim()] = value.trim();
                             }
                             return options;
-                        }, {});
+                        }, {})
+                : {};
 
         } catch (e) {
             return {};
@@ -3156,11 +3156,11 @@
                 on(
                     el,
                     name,
-                    !delegate
-                        ? null
-                        : isString(delegate)
+                    delegate
+                        ? isString(delegate)
                             ? delegate
-                            : delegate.call(component),
+                            : delegate.call(component)
+                        : null,
                     isString(handler) ? component[handler] : handler.bind(component),
                     {passive: passive, capture: capture, self: self}
                 )
@@ -3481,7 +3481,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.11.2-dev.78e397546';
+    UIkit.version = '3.11.2-dev.9433cd5fd';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -4607,7 +4607,7 @@
                 if (active$1) {
 
                     if (delay && active$1.isDelaying) {
-                        this.showTimer = setTimeout(this.show, 10);
+                        this.showTimer = setTimeout(function () { return matches(target, ':hover') && this$1$1.show(); }, 10);
                         return;
                     }
 
@@ -5808,10 +5808,7 @@
 
         props: {
             dataSrc: String,
-            dataSrcset: Boolean,
-            sizes: String,
-            width: Number,
-            height: Number,
+            dataSources: String,
             offsetTop: String,
             offsetLeft: String,
             target: String
@@ -5819,10 +5816,7 @@
 
         data: {
             dataSrc: '',
-            dataSrcset: false,
-            sizes: false,
-            width: false,
-            height: false,
+            dataSources: [],
             offsetTop: '50vh',
             offsetLeft: '50vw',
             target: false
@@ -5830,37 +5824,6 @@
 
         computed: {
 
-            cacheKey: function(ref) {
-                var dataSrc = ref.dataSrc;
-
-                return ((this.$name) + "." + dataSrc);
-            },
-
-            width: function(ref) {
-                var width = ref.width;
-                var dataWidth = ref.dataWidth;
-
-                return width || dataWidth;
-            },
-
-            height: function(ref) {
-                var height = ref.height;
-                var dataHeight = ref.dataHeight;
-
-                return height || dataHeight;
-            },
-
-            sizes: function(ref) {
-                var sizes = ref.sizes;
-                var dataSizes = ref.dataSizes;
-
-                return sizes || dataSizes;
-            },
-
-            isImg: function(_, $el) {
-                return isImg($el);
-            },
-
             target: {
 
                 get: function(ref) {
@@ -5873,18 +5836,6 @@
                     this.observe();
                 }
 
-            },
-
-            offsetTop: function(ref) {
-                var offsetTop = ref.offsetTop;
-
-                return toPx(offsetTop, 'height');
-            },
-
-            offsetLeft: function(ref) {
-                var offsetLeft = ref.offsetLeft;
-
-                return toPx(offsetLeft, 'width');
             }
 
         },
@@ -5892,21 +5843,13 @@
         connected: function() {
 
             if (!window.IntersectionObserver) {
-                setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+                setSrcAttrs(this.$el, this.dataSrc);
                 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));
-            }
-
-            this.observer = new IntersectionObserver(this.load, {
-                rootMargin: ((this.offsetTop) + "px " + (this.offsetLeft) + "px")
-            });
-
-            requestAnimationFrame(this.observe);
+            var rootMargin = (toPx(this.offsetTop, 'height')) + "px " + (toPx(this.offsetLeft, 'width')) + "px";
+            this.observer = new IntersectionObserver(this.load, {rootMargin: rootMargin});
+            this.observe();
 
         },
 
@@ -5916,35 +5859,17 @@
 
         update: {
 
-            read: function(ref) {
-                var this$1$1 = this;
-                var image = ref.image;
-
-
-                if (!this.observer) {
-                    return false;
-                }
-
-                if (!image && document.readyState === 'complete') {
-                    this.load(this.observer.takeRecords());
-                }
-
-                if (this.isImg) {
+            write: function(store) {
+                if (!this.observer || isImg(this.$el)) {
                     return false;
                 }
-
-                image && image.then(function (img) { return img && img.currentSrc !== '' && setSrcAttrs(this$1$1.$el, currentSrc(img)); });
-
-            },
-
-            write: function(data) {
-
-                if (this.dataSrcset && window.devicePixelRatio !== 1) {
+                var srcset = data(this.$el, 'data-srcset');
+                if (srcset && window.devicePixelRatio !== 1) {
 
                     var 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"));
                     }
 
                 }
@@ -5958,21 +5883,26 @@
         methods: {
 
             load: function(entries) {
-                var this$1$1 = this;
-
 
                 // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
                 if (!entries.some(function (entry) { return isUndefined(entry.isIntersecting) || entry.isIntersecting; })) {
                     return;
                 }
 
-                this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(function (img) {
+                if (this._data.image) {
+                    return this._data.image;
+                }
 
-                    setSrcAttrs(this$1$1.$el, currentSrc(img), img.srcset, img.sizes);
-                    storage[this$1$1.cacheKey] = currentSrc(img);
-                    return img;
+                var image = isImg(this.$el)
+                    ? this.$el
+                    : getImageFromElement(
+                        this.$el,
+                        this.dataSrc,
+                        this.dataSources
+                    );
 
-                }, function (e) { return trigger(this$1$1.$el, new e.constructor(e.type, e)); });
+                this._data.image = image;
+                setSrcAttrs(this.$el, image.currentSrc);
 
                 this.observer.disconnect();
             },
@@ -5989,13 +5919,15 @@
 
     };
 
-    function setSrcAttrs(el, src, srcset, sizes) {
+    function setSrcAttrs(el, src) {
 
         if (isImg(el)) {
-            var set = function (prop, val) { return val && val !== el[prop] && (el[prop] = val); };
-            set('sizes', sizes);
-            set('srcset', srcset);
-            set('src', src);
+
+            var parentNode = parent(el);
+            var elements = isPicture(parentNode) ? children(parentNode) : [el];
+            elements.forEach(function (el) { return setSourceProps(el, el); });
+            src && attr(el, 'src', src);
+
         } else if (src) {
 
             var change = !includes(el.style.backgroundImage, src);
@@ -6008,15 +5940,66 @@
 
     }
 
-    function getPlaceholderImage(width, height, sizes) {
-        var assign;
+    var srcProps = ['data-src', 'data-srcset', 'sizes'];
+    function setSourceProps(sourceEl, targetEl) {
+        srcProps.forEach(function (prop) {
+            var value = data(sourceEl, prop);
+            if (value) {
+                attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+            }
+        });
+    }
 
+    function getImageFromElement(el, src, sources) {
 
-        if (sizes) {
-            ((assign = Dimensions.ratio({width: width, height: height}, 'width', toPx(sizesToPixel(sizes))), width = assign.width, height = assign.height));
+        if (!src) {
+            return false;
         }
 
-        return ("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>");
+        var img = new Image();
+
+        wrapInPicture(img, sources);
+        setSourceProps(el, img);
+        img.onload = function () { return setSrcAttrs(el, img.currentSrc); };
+        attr(img, 'src', src);
+        return img;
+    }
+
+    function wrapInPicture(img, sources) {
+
+        sources = parseSources(sources);
+
+        if (sources.length) {
+            var picture = fragment('<picture>');
+            sources.forEach(function (attrs) {
+                var source = fragment('<source>');
+                attr(source, attrs);
+                append(picture, source);
+            });
+            append(picture, img);
+        }
+    }
+
+    function parseSources(sources) {
+        if (!sources) {
+            return [];
+        }
+
+        if (startsWith(sources, '[')) {
+            try {
+                sources = JSON.parse(sources);
+            } catch (e) {
+                sources = [];
+            }
+        } else {
+            sources = parseOptions(sources);
+        }
+
+        if (!isArray(sources)) {
+            sources = [sources];
+        }
+
+        return sources.filter(function (source) { return !isEmpty(source); });
     }
 
     var sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -6056,24 +6039,16 @@
         return descriptors.filter(function (size) { return size >= srcSize; })[0] || descriptors.pop() || '';
     }
 
-    function isImg(el) {
-        return el.tagName === 'IMG';
+    function isPicture(el) {
+        return isA(el, 'PICTURE');
     }
 
-    function currentSrc(el) {
-        return el.currentSrc || el.src;
+    function isImg(el) {
+        return isA(el, 'IMG');
     }
 
-    var key = '__test__';
-    var storage;
-
-    // workaround for Safari's private browsing mode and accessing sessionStorage in Blink
-    try {
-        storage = window.sessionStorage || {};
-        storage[key] = 1;
-        delete storage[key];
-    } catch (e) {
-        storage = {};
+    function isA(el, tagName) {
+        return el && el.tagName === tagName;
     }
 
     var Media = {
@@ -6739,7 +6714,7 @@
                     var current = ref.current;
 
                     var active = this.getActive();
-                    if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                    if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.isDelaying) {
                         active.hide(false);
                     }
                 }
@@ -6914,7 +6889,11 @@
 
                     var active = this.getActive();
 
-                    if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
+                    if (matches(this.dropbar, ':hover')
+                        && active
+                        && active.$el === $el
+                        && !this.toggles.some(function (el) { return active.target !== el && matches(el, ':focus'); })
+                    ) {
                         e.preventDefault();
                     }
                 }
@@ -7855,6 +7834,7 @@
 
                 read: function(ref, types) {
                     var height$1 = ref.height;
+                    var margin = ref.margin;
 
 
                     this.inactive = !this.matchMedia || !isVisible(this.$el);
@@ -7863,13 +7843,19 @@
                         return false;
                     }
 
-                    if (this.isActive && types.has('resize')) {
+                    var hide = this.isActive && types.has('resize');
+                    if (hide) {
                         this.hide();
+                    }
+
+                    if (!this.isActive) {
                         height$1 = this.$el.offsetHeight;
-                        this.show();
+                        margin = css(this.$el, 'margin');
                     }
 
-                    height$1 = this.isActive ? height$1 : this.$el.offsetHeight;
+                    if (hide) {
+                        this.show();
+                    }
 
                     var overflow = Math.max(0, height$1 + this.offset - height(window));
 
@@ -7892,21 +7878,21 @@
                         topOffset: topOffset,
                         offsetParentTop: offsetParentTop,
                         height: height$1,
+                        margin: margin,
                         width: dimensions$1(isVisible(this.widthElement) ? this.widthElement : this.$el).width,
-                        top: offsetPosition(this.placeholder)[0],
-                        margins: css(this.$el, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])
+                        top: offsetPosition(this.placeholder)[0]
                     };
                 },
 
                 write: function(ref) {
                     var height = ref.height;
-                    var margins = ref.margins;
+                    var margin = ref.margin;
 
 
                     var ref$1 = this;
                     var placeholder = ref$1.placeholder;
 
-                    css(placeholder, assign({height: height}, margins));
+                    css(placeholder, {height: height, margin: margin});
 
                     if (!within(placeholder, document)) {
                         after(this.$el, placeholder);