uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.29f2881ed

package/src/js/core/icon.js

@@ -15,7 +15,19 @@ import slidenavPrevious from '../../images/components/slidenav-previous.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
 import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
-import {$, addClass, apply, css, each, hasClass, hyphenate, isRtl, isString, parents, Promise, swap} from 'uikit-util';
+import {
+    $,
+    addClass,
+    apply,
+    css,
+    each,
+    hasClass,
+    hyphenate,
+    isRtl,
+    isString,
+    parents,
+    swap,
+} from 'uikit-util';
 
 const icons = {
     spinner,
@@ -33,11 +45,10 @@ const icons = {
     'slidenav-next': slidenavNext,
     'slidenav-next-large': slidenavNextLarge,
     'slidenav-previous': slidenavPrevious,
-    'slidenav-previous-large': slidenavPreviousLarge
+    'slidenav-previous-large': slidenavPreviousLarge,
 };
 
 const Icon = {
-
     install,
 
     extends: SVG,
@@ -47,7 +58,7 @@ const Icon = {
     props: ['icon'],
 
     data: {
-        include: ['focusable']
+        include: ['focusable'],
     },
 
     isIcon: true,
@@ -57,42 +68,35 @@ const Icon = {
     },
 
     methods: {
-
-        getSvg() {
-
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
-        }
-
-    }
-
+            return icon;
+        },
+    },
 };
 
 export default Icon;
 
 export const IconComponent = {
-
     args: false,
 
     extends: Icon,
 
-    data: vm => ({
-        icon: hyphenate(vm.constructor.options.name)
+    data: (vm) => ({
+        icon: hyphenate(vm.constructor.options.name),
     }),
 
     beforeConnect() {
         addClass(this.$el, this.$name);
-    }
-
+    },
 };
 
 export const Slidenav = {
-
     extends: IconComponent,
 
     beforeConnect() {
@@ -100,72 +104,64 @@ export const Slidenav = {
     },
 
     computed: {
-
-        icon({icon}, $el) {
-            return hasClass($el, 'uk-slidenav-large')
-                ? `${icon}-large`
-                : icon;
-        }
-
-    }
-
+        icon({ icon }, $el) {
+            return hasClass($el, 'uk-slidenav-large') ? `${icon}-large` : icon;
+        },
+    },
 };
 
 export const Search = {
-
     extends: IconComponent,
 
     computed: {
-
-        icon({icon}, $el) {
+        icon({ icon }, $el) {
             return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length
                 ? 'search-large'
                 : parents($el, '.uk-search-navbar').length
-                    ? 'search-navbar'
-                    : icon;
-        }
-
-    }
-
+                ? 'search-navbar'
+                : icon;
+        },
+    },
 };
 
 export const Close = {
-
     extends: IconComponent,
 
     computed: {
-
         icon() {
             return `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
-        }
-
-    }
-
+        },
+    },
 };
 
 export const Spinner = {
-
     extends: IconComponent,
 
-    connected() {
-        this.svg.then(svg => svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio));
-    }
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
 
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
+    },
 };
 
 const parsed = {};
 function install(UIkit) {
     UIkit.icon.add = (name, svg) => {
-
-        const added = isString(name) ? ({[name]: svg}) : name;
+        const added = isString(name) ? { [name]: svg } : name;
         each(added, (svg, name) => {
             icons[name] = svg;
             delete parsed[name];
         });
 
         if (UIkit._initialized) {
-            apply(document.body, el =>
-                each(UIkit.getComponents(el), cmp => {
+            apply(document.body, (el) =>
+                each(UIkit.getComponents(el), (cmp) => {
                     cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
                 })
             );
@@ -174,7 +170,6 @@ function install(UIkit) {
 }
 
 function getIcon(icon) {
-
     if (!icons[icon]) {
         return null;
     }

package/src/js/core/img.js

@@ -1,48 +1,66 @@
-import {append, attr, children, createEvent, css, data, escape, fragment, hasAttr, includes, isArray, isEmpty, parent, parseOptions, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {
+    append,
+    attr,
+    children,
+    createEvent,
+    css,
+    data,
+    escape,
+    fragment,
+    hasAttr,
+    includes,
+    isArray,
+    isEmpty,
+    isTag,
+    parent,
+    parseOptions,
+    queryAll,
+    removeAttr,
+    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 {
-
     args: 'dataSrc',
 
     props: {
         dataSrc: String,
-        dataSources: String,
+        sources: String,
         offsetTop: String,
         offsetLeft: String,
-        target: String
+        target: String,
+        loading: String,
     },
 
     data: {
         dataSrc: '',
-        dataSources: [],
+        sources: false,
         offsetTop: '50vh',
         offsetLeft: '50vw',
-        target: false
+        target: false,
+        loading: 'lazy',
     },
 
     computed: {
-
         target: {
-
-            get({target}) {
+            get({ target }) {
                 return [this.$el, ...queryAll(target, this.$el)];
             },
 
             watch() {
                 this.observe();
-            }
-
-        }
-
+            },
+        },
     },
 
     connected() {
-
-        if (!window.IntersectionObserver || !nativeIsIntersecting) {
-            setSrcAttrs(this.$el, this.dataSrc);
+        if (this.loading !== 'lazy' || !window.IntersectionObserver || !nativeIsIntersecting) {
+            this.load();
             return;
         }
 
@@ -57,99 +75,91 @@ export default {
 
         ensureSrcAttribute(this.$el);
 
-        const rootMargin = `${toPx(this.offsetTop, 'height')}px ${toPx(this.offsetLeft, 'width')}px`;
-        this.observer = new IntersectionObserver(this.load, {rootMargin});
+        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() {
-        this.observer && this.observer.disconnect();
+        if (this._data.image) {
+            this._data.image.onload = '';
+        }
+
+        this.observer?.disconnect();
     },
 
     update: {
-
         write(store) {
             if (!this.observer || isImg(this.$el)) {
                 return false;
             }
+
             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) === store.bgSize) {
                     store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
                     css(this.$el, 'backgroundSize', `${store.bgSize}px`);
                 }
-
             }
-
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     methods: {
-
-        load(entries) {
-
-            if (!entries.some(entry => entry.isIntersecting)) {
-                return;
-            }
-
+        load() {
             if (this._data.image) {
                 return this._data.image;
             }
 
             const image = isImg(this.$el)
                 ? this.$el
-                : getImageFromElement(
-                    this.$el,
-                    this.dataSrc,
-                    this.dataSources
-                );
-
-            this._data.image = image;
-            image.loading = 'eager';
-            setSrcAttrs(this.$el, image.currentSrc);
+                : getImageFromElement(this.$el, this.dataSrc, this.sources);
 
-            this.observer.disconnect();
+            removeAttr(image, 'loading');
+            setSrcAttrs(this.$el, image.currentSrc);
+            return (this._data.image = image);
         },
 
         observe() {
             if (this._connected && !this._data.image) {
-                this.target.forEach(el => this.observer.observe(el));
+                for (const el of this.target) {
+                    this.observer.observe(el);
+                }
             }
-        }
-
-    }
-
+        },
+    },
 };
 
 function setSrcAttrs(el, src) {
-
     if (isImg(el)) {
-
         const parentNode = parent(el);
         const elements = isPicture(parentNode) ? children(parentNode) : [el];
-        elements.forEach(el => setSourceProps(el, el));
-
+        elements.forEach((el) => setSourceProps(el, el));
     } else if (src) {
-
         const change = !includes(el.style.backgroundImage, src);
         if (change) {
             css(el, 'backgroundImage', `url(${escape(src)})`);
             trigger(el, createEvent('load', false));
         }
-
     }
-
 }
 
 const srcProps = ['data-src', 'data-srcset', 'sizes'];
 function setSourceProps(sourceEl, targetEl) {
-    srcProps.forEach(prop => {
+    srcProps.forEach((prop) => {
         const value = data(sourceEl, prop);
         if (value) {
             attr(targetEl, prop.replace(/^(data-)+/, ''), value);
@@ -158,31 +168,27 @@ function setSourceProps(sourceEl, targetEl) {
 }
 
 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);
+    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 => {
+        for (const attrs of sources) {
             const source = fragment('<source>');
             attr(source, attrs);
             append(picture, source);
-        });
+        }
         append(picture, img);
     }
 }
@@ -206,7 +212,7 @@ function parseSources(sources) {
         sources = [sources];
     }
 
-    return sources.filter(source => !isEmpty(source));
+    return sources.filter((source) => !isEmpty(source));
 }
 
 const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
@@ -230,11 +236,11 @@ const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
     return startsWith(size, 'calc')
         ? size
-            .slice(5, -1)
-            .replace(sizeRe, size => toPx(size))
-            .replace(/ /g, '')
-            .match(additionRe)
-            .reduce((a, b) => a + +b, 0)
+              .slice(5, -1)
+              .replace(sizeRe, (size) => toPx(size))
+              .replace(/ /g, '')
+              .match(additionRe)
+              .reduce((a, b) => a + +b, 0)
         : size;
 }
 
@@ -243,7 +249,7 @@ function getSourceSize(srcset, sizes) {
     const srcSize = toPx(sizesToPixel(sizes));
     const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
 
-    return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
+    return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
 function ensureSrcAttribute(el) {
@@ -253,13 +259,9 @@ function ensureSrcAttribute(el) {
 }
 
 function isPicture(el) {
-    return isA(el, 'PICTURE');
+    return isTag(el, 'picture');
 }
 
 function isImg(el) {
-    return isA(el, 'IMG');
-}
-
-function isA(el, tagName) {
-    return el && el.tagName === tagName;
+    return isTag(el, 'img');
 }

package/src/js/core/index.js

@@ -1,41 +1,41 @@
-export {default as Accordion} from './accordion';
-export {default as Alert} from './alert';
-export {default as Cover} from './cover';
-export {default as Drop, default as Dropdown} from './drop';
-export {default as FormCustom} from './form-custom';
-export {default as Gif} from './gif';
-export {default as Grid} from './grid';
-export {default as HeightMatch} from './height-match';
-export {default as HeightViewport} from './height-viewport';
-export {default as Icon} from './icon';
-export {default as Img} from './img';
-export {default as Leader} from './leader';
-export {default as Margin} from './margin';
-export {default as Modal} from './modal';
-export {default as Nav} from './nav';
-export {default as Navbar} from './navbar';
-export {default as Offcanvas} from './offcanvas';
-export {default as OverflowAuto} from './overflow-auto';
-export {default as Responsive} from './responsive';
-export {default as Scroll} from './scroll';
-export {default as Scrollspy} from './scrollspy';
-export {default as ScrollspyNav} from './scrollspy-nav';
-export {default as Sticky} from './sticky';
-export {default as Svg} from './svg';
-export {default as Switcher} from './switcher';
-export {default as Tab} from './tab';
-export {default as Toggle} from './toggle';
-export {default as Video} from './video';
+export { default as Accordion } from './accordion';
+export { default as Alert } from './alert';
+export { default as Cover } from './cover';
+export { default as Drop, default as Dropdown } from './drop';
+export { default as FormCustom } from './form-custom';
+export { default as Gif } from './gif';
+export { default as Grid } from './grid';
+export { default as HeightMatch } from './height-match';
+export { default as HeightViewport } from './height-viewport';
+export { default as Icon } from './icon';
+export { default as Img } from './img';
+export { default as Leader } from './leader';
+export { default as Margin } from './margin';
+export { default as Modal } from './modal';
+export { default as Nav } from './nav';
+export { default as Navbar } from './navbar';
+export { default as Offcanvas } from './offcanvas';
+export { default as OverflowAuto } from './overflow-auto';
+export { default as Responsive } from './responsive';
+export { default as Scroll } from './scroll';
+export { default as Scrollspy } from './scrollspy';
+export { default as ScrollspyNav } from './scrollspy-nav';
+export { default as Sticky } from './sticky';
+export { default as Svg } from './svg';
+export { default as Switcher } from './switcher';
+export { default as Tab } from './tab';
+export { default as Toggle } from './toggle';
+export { default as Video } from './video';
 
 // Icon components
-export {Close} from './icon';
-export {Spinner} from './icon';
-export {Slidenav as SlidenavNext} from './icon';
-export {Slidenav as SlidenavPrevious} from './icon';
-export {Search as SearchIcon} from './icon';
-export {IconComponent as Marker} from './icon';
-export {IconComponent as NavbarToggleIcon} from './icon';
-export {IconComponent as OverlayIcon} from './icon';
-export {IconComponent as PaginationNext} from './icon';
-export {IconComponent as PaginationPrevious} from './icon';
-export {IconComponent as Totop} from './icon';
+export { Close } from './icon';
+export { Spinner } from './icon';
+export { Slidenav as SlidenavNext } from './icon';
+export { Slidenav as SlidenavPrevious } from './icon';
+export { Search as SearchIcon } from './icon';
+export { IconComponent as Marker } from './icon';
+export { IconComponent as NavbarToggleIcon } from './icon';
+export { IconComponent as OverlayIcon } from './icon';
+export { IconComponent as PaginationNext } from './icon';
+export { IconComponent as PaginationPrevious } from './icon';
+export { IconComponent as Totop } from './icon';

package/src/js/core/leader.js

@@ -1,28 +1,25 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import {attr, getCssVar, toggleClass, unwrap, wrapInner} from 'uikit-util';
+import { attr, getCssVar, toggleClass, unwrap, wrapInner } from 'uikit-util';
 
 export default {
-
     mixins: [Class, Media],
 
     props: {
-        fill: String
+        fill: String,
     },
 
     data: {
         fill: '',
         clsWrapper: 'uk-leader-fill',
         clsHide: 'uk-leader-hide',
-        attrFill: 'data-fill'
+        attrFill: 'data-fill',
     },
 
     computed: {
-
-        fill({fill}) {
+        fill({ fill }) {
             return fill || getCssVar('leader-fill-content');
-        }
-
+        },
     },
 
     connected() {
@@ -34,9 +31,7 @@ export default {
     },
 
     update: {
-
-        read({changed, width}) {
-
+        read({ changed, width }) {
             const prev = width;
 
             width = Math.floor(this.$el.offsetWidth / 2);
@@ -45,23 +40,19 @@ export default {
                 width,
                 fill: this.fill,
                 changed: changed || prev !== width,
-                hide: !this.matchMedia
+                hide: !this.matchMedia,
             };
         },
 
         write(data) {
-
             toggleClass(this.wrapper, this.clsHide, data.hide);
 
             if (data.changed) {
                 data.changed = false;
                 attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };