uikit 3.11.2-dev.a08b20474 → 3.11.2-dev.c2430c233

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

package/src/js/core/img.js

@@ -1,6 +1,4 @@
-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;
+import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -8,7 +6,10 @@ export default {
 
     props: {
         dataSrc: String,
-        dataSources: String,
+        dataSrcset: Boolean,
+        sizes: String,
+        width: Number,
+        height: Number,
         offsetTop: String,
         offsetLeft: String,
         target: String
@@ -16,7 +17,10 @@ export default {
 
     data: {
         dataSrc: '',
-        dataSources: [],
+        dataSrcset: false,
+        sizes: false,
+        width: false,
+        height: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
         target: false
@@ -24,6 +28,26 @@ export default {
 
     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}) {
@@ -34,6 +58,14 @@ export default {
                 this.observe();
             }
 
+        },
+
+        offsetTop({offsetTop}) {
+            return toPx(offsetTop, 'height');
+        },
+
+        offsetLeft({offsetLeft}) {
+            return toPx(offsetLeft, 'width');
         }
 
     },
@@ -41,24 +73,21 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el, this.dataSrc);
+            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
             return;
         }
 
-        if (nativeLazyLoad && isImg(this.$el)) {
-            this.$el.loading = 'lazy';
-            setSrcAttrs(this.$el);
-
-            if (this.target.length === 1) {
-                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));
         }
 
-        ensureSrcAttribute(this.$el);
+        this.observer = new IntersectionObserver(this.load, {
+            rootMargin: `${this.offsetTop}px ${this.offsetLeft}px`
+        });
 
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
-        this.observer = new IntersectionObserver(this.load, {rootMargin});
-        this.observe();
+        requestAnimationFrame(this.observe);
 
     },
 
@@ -68,17 +97,32 @@ export default {
 
     update: {
 
-        write(store) {
-            if (!this.observer || isImg(this.$el)) {
+        read({image}) {
+
+            if (!this.observer) {
+                return false;
+            }
+
+            if (!image && document.readyState === 'complete') {
+                this.load(this.observer.takeRecords());
+            }
+
+            if (this.isImg) {
                 return false;
             }
-            const srcset = data(this.$el, 'data-srcset');
-            if (srcset && window.devicePixelRatio !== 1) {
+
+            image && image.then(img => img && img.currentSrc !== '' && setSrcAttrs(this.$el, currentSrc(img)));
+
+        },
+
+        write(data) {
+
+            if (this.dataSrcset && window.devicePixelRatio !== 1) {
 
                 const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
-                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
-                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
+                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
+                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
                 }
 
             }
@@ -98,21 +142,13 @@ export default {
                 return;
             }
 
-            if (this._data.image) {
-                return this._data.image;
-            }
+            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
 
-            const image = isImg(this.$el)
-                ? this.$el
-                : getImageFromElement(
-                    this.$el,
-                    this.dataSrc,
-                    this.dataSources
-                );
+                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
+                storage[this.cacheKey] = currentSrc(img);
+                return img;
 
-            this._data.image = image;
-            image.loading = 'eager';
-            setSrcAttrs(this.$el, image.currentSrc);
+            }, e => trigger(this.$el, new e.constructor(e.type, e)));
 
             this.observer.disconnect();
         },
@@ -127,14 +163,13 @@ export default {
 
 };
 
-function setSrcAttrs(el, src) {
+function setSrcAttrs(el, src, srcset, sizes) {
 
     if (isImg(el)) {
-
-        const parentNode = parent(el);
-        const elements = isPicture(parentNode) ? children(parentNode) : [el];
-        elements.forEach(el => setSourceProps(el, el));
-
+        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
+        set('sizes', sizes);
+        set('srcset', srcset);
+        set('src', src);
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -147,66 +182,13 @@ function setSrcAttrs(el, src) {
 
 }
 
-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) {
+function getPlaceholderImage(width, height, sizes) {
 
-    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 (!isArray(sources)) {
-        sources = [sources];
+    if (sizes) {
+        ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
     }
 
-    return sources.filter(source => !isEmpty(source));
+    return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -246,20 +228,22 @@ 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 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');
-}
+const key = '__test__';
+let storage;
 
-function isA(el, tagName) {
-    return el && el.tagName === tagName;
+// 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 = {};
 }

package/src/js/util/options.js

@@ -134,8 +134,9 @@ export function parseOptions(options, args = []) {
 
     try {
 
-        return options
-            ? startsWith(options, '{')
+        return !options
+            ? {}
+            : startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
                     ? ({[args[0]]: options})
@@ -145,8 +146,7 @@ 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;
 

package/src/scss/components/utility.scss

@@ -251,6 +251,28 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 [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/variables-theme.scss

@@ -449,16 +449,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $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;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $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;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -543,9 +543,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;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -855,7 +855,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: transparent !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;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/src/scss/variables.scss

@@ -447,16 +447,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $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;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $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;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -541,9 +541,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;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -853,7 +853,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $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;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;