uikit 3.11.2-dev.bbaa4362f → 3.11.2-dev.c08a5b5f0

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.bbaa4362f",
+  "version": "3.11.2-dev.c08a5b5f0",
   "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) {
 
@@ -211,11 +211,11 @@ export default function (UIkit) {
             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, capture, self}
             )
@@ -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/components/slideshow.js

@@ -2,7 +2,7 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
-import {boxModelAdjust, css} from 'uikit-util';
+import {$$, boxModelAdjust, css, isVisible} from 'uikit-util';
 
 export default {
 
@@ -24,6 +24,29 @@ export default {
         Animations
     },
 
+    connected() {
+        if (window.IntersectionObserver) {
+            this.observer = new IntersectionObserver(entries => {
+                if (entries.some(entry => entry.isIntersecting)) {
+                    this.preloadSlides();
+                }
+            });
+            this.observer.observe(this.$el);
+        }
+    },
+
+    disconnected() {
+        this.observer && this.observer.disconnect();
+    },
+
+    methods: {
+
+        preloadSlides() {
+            [1, -1].forEach(i => removeLazyLoad(this.slides[this.getIndex(this.index + i)]));
+        }
+
+    },
+
     update: {
 
         read() {
@@ -44,6 +67,10 @@ export default {
                 height = Math.min(this.maxHeight, height);
             }
 
+            if (isVisible(this.$el)) {
+                this.preloadSlides();
+            }
+
             return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
         },
 
@@ -56,3 +83,7 @@ export default {
     }
 
 };
+
+function removeLazyLoad(el) {
+    el && $$('img[loading="lazy"]', el).forEach(el => el.loading = '');
+}

package/src/js/core/drop.js

@@ -308,7 +308,7 @@ export default {
             if (active) {
 
                 if (delay && active.isDelaying) {
-                    this.showTimer = setTimeout(this.show, 10);
+                    this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
 

package/src/js/core/img.js

@@ -1,4 +1,7 @@
-import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {append, attr, children, createEvent, css, data, escape, fragment, hasAttr, includes, isArray, isEmpty, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+
+const nativeLazyLoad = 'loading' in HTMLImageElement.prototype;
+const nativeIsIntersecting = 'isIntersecting' in IntersectionObserverEntry.prototype; // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
 
 export default {
 
@@ -6,48 +9,24 @@ export default {
 
     props: {
         dataSrc: String,
-        dataSrcset: Boolean,
-        sizes: String,
-        width: Number,
-        height: Number,
+        sources: String,
         offsetTop: String,
         offsetLeft: String,
-        target: String
+        target: String,
+        loading: String
     },
 
     data: {
         dataSrc: '',
-        dataSrcset: false,
-        sizes: false,
-        width: false,
-        height: false,
+        sources: [],
         offsetTop: '50vh',
         offsetLeft: '50vw',
-        target: false
+        target: false,
+        loading: 'lazy'
     },
 
     computed: {
 
-        cacheKey({dataSrc}) {
-            return `${this.$name}.${dataSrc}`;
-        },
-
-        width({width, dataWidth}) {
-            return width || dataWidth;
-        },
-
-        height({height, dataHeight}) {
-            return height || dataHeight;
-        },
-
-        sizes({sizes, dataSizes}) {
-            return sizes || dataSizes;
-        },
-
-        isImg(_, $el) {
-            return isImg($el);
-        },
-
         target: {
 
             get({target}) {
@@ -58,71 +37,60 @@ export default {
                 this.observe();
             }
 
-        },
-
-        offsetTop({offsetTop}) {
-            return toPx(offsetTop, 'height');
-        },
-
-        offsetLeft({offsetLeft}) {
-            return toPx(offsetLeft, 'width');
         }
 
     },
 
     connected() {
 
-        if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
+        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+            this.load();
             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));
-        }
+        if (nativeLazyLoad && isImg(this.$el)) {
+            this.$el.loading = 'lazy';
+            setSrcAttrs(this.$el);
 
-        this.observer = new IntersectionObserver(this.load, {
-            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`
-        });
+            if (this.target.length === 1) {
+                return;
+            }
+        }
 
-        requestAnimationFrame(this.observe);
+        ensureSrcAttribute(this.$el);
 
+        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
+        this.observer = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                this.load();
+                this.observer.disconnect();
+            }
+        }, {rootMargin});
+        this.observe();
     },
 
     disconnected() {
+
+        if (this._data.image) {
+            this._data.image.onload = '';
+        }
+
         this.observer && this.observer.disconnect();
     },
 
     update: {
 
-        read({image}) {
-
-            if (!this.observer) {
+        write(store) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
-
-            if (!image && document.readyState === 'complete') {
-                this.load(this.observer.takeRecords());
-            }
-
-            if (this.isImg) {
-                return false;
-            }
-
-            image && image.then(img => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
-
-        },
-
-        write(data) {
-
-            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`);
                 }
 
             }
@@ -135,22 +103,22 @@ export default {
 
     methods: {
 
-        load(entries) {
-
-            // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
-            if (!entries.some(entry => isUndefined(entry.isIntersecting) || entry.isIntersecting)) {
-                return;
+        load() {
+            if (this._data.image) {
+                return this._data.image;
             }
 
-            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
-
-                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
-                storage[this.cacheKey] = currentSrc(img);
-                return img;
-
-            }, e => trigger(this.$el, new e.constructor(e.type, e)));
-
-            this.observer.disconnect();
+            const image = isImg(this.$el)
+                ? this.$el
+                : getImageFromElement(
+                    this.$el,
+                    this.dataSrc,
+                    this.sources
+                );
+
+            image.loading = '';
+            setSrcAttrs(this.$el, image.currentSrc);
+            return this.image = image;
         },
 
         observe() {
@@ -163,13 +131,14 @@ export default {
 
 };
 
-function setSrcAttrs(el, src, srcset, sizes) {
+function setSrcAttrs(el, src) {
 
     if (isImg(el)) {
-        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
-        set('sizes', sizes);
-        set('srcset', srcset);
-        set('src', src);
+
+        const parentNode = parent(el);
+        const elements = isPicture(parentNode) ? children(parentNode) : [el];
+        elements.forEach(el => setSourceProps(el, el));
+
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -182,13 +151,66 @@ function setSrcAttrs(el, src, srcset, sizes) {
 
 }
 
-function getPlaceholderImage(width, height, sizes) {
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSourceProps(sourceEl, targetEl) {
+    srcProps.forEach(prop => {
+        const value = data(sourceEl, prop);
+        if (value) {
+            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+        }
+    });
+}
+
+function getImageFromElement(el, src, sources) {
+
+    if (!src) {
+        return false;
+    }
+
+    const img = new Image();
+
+    wrapInPicture(img, sources);
+    setSourceProps(el, img);
+    img.onload = () => setSrcAttrs(el, img.currentSrc);
+    attr(img, 'src', src);
+    return img;
+}
+
+function wrapInPicture(img, sources) {
+
+    sources = parseSources(sources);
+
+    if (sources.length) {
+        const picture = fragment('<picture>');
+        sources.forEach(attrs => {
+            const 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 (sizes) {
-        ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
+    if (!isArray(sources)) {
+        sources = [sources];
     }
 
-    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
+    return sources.filter(source => !isEmpty(source));
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -228,22 +250,20 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isImg(el) {
-    return el.tagName === 'IMG';
+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 currentSrc(el) {
-    return el.currentSrc || el.src;
+function isPicture(el) {
+    return isA(el, 'PICTURE');
 }
 
-const key = '__test__';
-let storage;
+function isImg(el) {
+    return isA(el, 'IMG');
+}
 
-// 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;
 }

package/src/js/core/navbar.js

@@ -137,7 +137,7 @@ export default {
 
             handler({current}) {
                 const 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);
                 }
             }

package/src/js/util/options.js

@@ -134,9 +134,8 @@ export function parseOptions(options, args = []) {
 
     try {
 
-        return !options
-            ? {}
-            : startsWith(options, '{')
+        return options
+            ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
                     ? ({[args[0]]: options})
@@ -146,7 +145,8 @@ export function parseOptions(options, args = []) {
                             options[key.trim()] = value.trim();
                         }
                         return options;
-                    }, {});
+                    }, {})
+            : {};
 
     } catch (e) {
         return {};

package/src/less/components/flex.less

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/less/components/navbar.less

@@ -109,13 +109,6 @@
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) when (@navbar-color-mode = light) {}
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-dark all) when (@navbar-color-mode = dark) {}
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/less/components/utility.less

@@ -251,6 +251,28 @@
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-fit-none { object-fit: none; }
+.uk-object-fit-cover { object-fit: cover; }
+.uk-object-fit-contain { object-fit: contain; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/components/flex.scss

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/scss/components/form.scss

@@ -780,7 +780,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 
 $inverse-form-background:                       $inverse-global-muted-background !default;
 $inverse-form-color:                            $inverse-global-color !default;
-$inverse-form-focus-background:                 fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background:                 fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color:                      $inverse-global-color !default;
 $inverse-form-placeholder-color:                $inverse-global-muted-color !default;
 
@@ -790,12 +790,12 @@ $inverse-form-datalist-icon-color:              $inverse-global-color !default;
 
 $inverse-form-radio-background:                 $inverse-global-muted-background !default;
 
-$inverse-form-radio-focus-background:           fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background:           fade-in($inverse-form-radio-background, 0.05) !default;
 
 $inverse-form-radio-checked-background:         $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color:         $inverse-global-inverse-color !default;
 
-$inverse-form-radio-checked-focus-background:   fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background:   fade-in($inverse-global-primary-background, 0.1) !default;
 
 $inverse-form-icon-color:                       $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color:                 $inverse-global-color !default;

package/src/scss/components/icon.scss

@@ -201,9 +201,9 @@ $inverse-icon-link-hover-color:                 $inverse-global-color !default;
 $inverse-icon-link-active-color:                $inverse-global-color !default;
 $inverse-icon-button-background:                $inverse-global-muted-background !default;
 $inverse-icon-button-color:                     $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background:          fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background:          fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color:               $inverse-global-color !default;
-$inverse-icon-button-active-background:         fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background:         fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color:              $inverse-global-color !default;
 
 

package/src/scss/components/navbar.scss

@@ -109,13 +109,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 @if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} }
 @if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/scss/components/search.scss

@@ -317,7 +317,7 @@ $inverse-search-placeholder-color:              $inverse-global-muted-color !def
 $inverse-search-icon-color:                     $inverse-global-muted-color !default;
 
 $inverse-search-default-background:             $inverse-global-muted-background !default;
-$inverse-search-default-focus-background:       fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background:       fade-in($inverse-search-default-background, 0.05) !default;
 
 $inverse-search-navbar-background:              transparent !default;