uikit 3.11.2-dev.fb043abc2 → 3.12.0

package/src/js/core/svg.js

@@ -1,7 +1,23 @@
-import {$, $$, after, ajax, append, attr, includes, isVisible, isVoidElement, memoize, noop, Promise, remove, removeAttr, startsWith, toFloat} from 'uikit-util';
+import {
+    $,
+    $$,
+    after,
+    append,
+    attr,
+    includes,
+    isTag,
+    isVisible,
+    isVoidElement,
+    memoize,
+    noop,
+    once,
+    remove,
+    removeAttr,
+    startsWith,
+    toFloat,
+} from 'uikit-util';
 
 export default {
-
     args: 'src',
 
     props: {
@@ -15,14 +31,14 @@ export default {
         class: String,
         strokeAnimation: Boolean,
         focusable: Boolean, // IE 11
-        attributes: 'list'
+        attributes: 'list',
     },
 
     data: {
         ratio: 1,
         include: ['style', 'class', 'focusable'],
         class: '',
-        strokeAnimation: false
+        strokeAnimation: false,
     },
 
     beforeConnect() {
@@ -30,15 +46,12 @@ export default {
     },
 
     connected() {
-
         if (!this.icon && includes(this.src, '#')) {
             [this.src, this.icon] = this.src.split('#');
         }
 
-        this.svg = this.getSvg().then(el => {
-
+        this.svg = this.getSvg().then((el) => {
             if (this._connected) {
-
                 const svg = insertSVG(el, this.$el);
 
                 if (this.svgEl && svg !== this.svgEl) {
@@ -47,16 +60,13 @@ export default {
 
                 this.applyAttributes(svg, el);
                 this.$emit();
-                return this.svgEl = svg;
+                return (this.svgEl = svg);
             }
-
         }, noop);
-
     },
 
     disconnected() {
-
-        this.svg.then(svg => {
+        this.svg.then((svg) => {
             if (this._connected) {
                 return;
             }
@@ -67,15 +77,12 @@ export default {
 
             remove(svg);
             this.svgEl = null;
-
         });
 
         this.svg = null;
-
     },
 
     update: {
-
         read() {
             return !!(this.strokeAnimation && this.svgEl && isVisible(this.svgEl));
         },
@@ -84,22 +91,23 @@ export default {
             applyAnimation(this.svgEl);
         },
 
-        type: ['resize']
-
+        type: ['resize'],
     },
 
     methods: {
+        async getSvg() {
+            if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
+                return new Promise((resolve) =>
+                    once(this.$el, 'load', () => resolve(this.getSvg()))
+                );
+            }
 
-        getSvg() {
-            return loadSVG(this.src).then(svg =>
-                parseSVG(svg, this.icon) || Promise.reject('SVG not found.')
-            );
+            return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
         },
 
         applyAttributes(el, ref) {
-
             for (const prop in this.$options.props) {
-                if (includes(this.include, prop) && (prop in this)) {
+                if (includes(this.include, prop) && prop in this) {
                     attr(el, prop, this[prop]);
                 }
             }
@@ -114,65 +122,48 @@ export default {
             }
 
             const props = ['width', 'height'];
-            let dimensions = props.map(prop => this[prop]);
+            let dimensions = props.map((prop) => this[prop]);
 
-            if (!dimensions.some(val => val)) {
-                dimensions = props.map(prop => attr(ref, prop));
+            if (!dimensions.some((val) => val)) {
+                dimensions = props.map((prop) => attr(ref, prop));
             }
 
             const viewBox = attr(ref, 'viewBox');
-            if (viewBox && !dimensions.some(val => val)) {
+            if (viewBox && !dimensions.some((val) => val)) {
                 dimensions = viewBox.split(' ').slice(2);
             }
 
-            dimensions.forEach((val, i) =>
-                attr(el, props[i], toFloat(val) * this.ratio || null)
-            );
-
-        }
-
-    }
-
+            dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
+        },
+    },
 };
 
-const loadSVG = memoize(src =>
-    new Promise((resolve, reject) => {
-
-        if (!src) {
-            reject();
-            return;
-        }
-
+const loadSVG = memoize(async (src) => {
+    if (src) {
         if (startsWith(src, 'data:')) {
-            resolve(decodeURIComponent(src.split(',')[1]));
+            return decodeURIComponent(src.split(',')[1]);
         } else {
-
-            ajax(src).then(
-                xhr => resolve(xhr.response),
-                () => reject('SVG not found.')
-            );
-
+            return (await fetch(src)).text();
         }
-    })
-);
+    } else {
+        return Promise.reject();
+    }
+});
 
 function parseSVG(svg, icon) {
-
     if (icon && includes(svg, '<symbol')) {
         svg = parseSymbols(svg, icon) || svg;
     }
 
     svg = $(svg.substr(svg.indexOf('<svg')));
-    return svg && svg.hasChildNodes() && svg;
+    return svg?.hasChildNodes() && svg;
 }
 
 const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
 const symbols = {};
 
 function parseSymbols(svg, icon) {
-
     if (!symbols[svg]) {
-
         symbols[svg] = {};
 
         symbolRe.lastIndex = 0;
@@ -181,59 +172,53 @@ function parseSymbols(svg, icon) {
         while ((match = symbolRe.exec(svg))) {
             symbols[svg][match[3]] = `<svg xmlns="http://www.w3.org/2000/svg"${match[1]}svg>`;
         }
-
     }
 
     return symbols[svg][icon];
 }
 
 function applyAnimation(el) {
-
     const length = getMaxPathLength(el);
 
     if (length) {
         el.style.setProperty('--uk-animation-stroke', length);
     }
-
 }
 
 export function getMaxPathLength(el) {
-    return Math.ceil(Math.max(0, ...$$('[stroke]', el).map(stroke => {
-        try {
-            return stroke.getTotalLength();
-        } catch (e) {
-            return 0;
-        }
-    })));
+    return Math.ceil(
+        Math.max(
+            0,
+            ...$$('[stroke]', el).map((stroke) => {
+                try {
+                    return stroke.getTotalLength();
+                } catch (e) {
+                    return 0;
+                }
+            })
+        )
+    );
 }
 
 function insertSVG(el, root) {
-
-    if (isVoidElement(root) || root.tagName === 'CANVAS') {
-
+    if (isVoidElement(root) || isTag(root, 'canvas')) {
         root.hidden = true;
 
         const next = root.nextElementSibling;
-        return equals(el, next)
-            ? next
-            : after(root, el);
-
+        return equals(el, next) ? next : after(root, el);
     }
 
     const last = root.lastElementChild;
-    return equals(el, last)
-        ? last
-        : append(root, el);
+    return equals(el, last) ? last : append(root, el);
 }
 
 function equals(el, other) {
-    return isSVG(el) && isSVG(other) && innerHTML(el) === innerHTML(other);
-}
-
-function isSVG(el) {
-    return el && el.tagName === 'svg';
+    return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
 }
 
 function innerHTML(el) {
-    return (el.innerHTML || (new XMLSerializer()).serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).replace(/\s/g, '');
+    return (
+        el.innerHTML ||
+        new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')
+    ).replace(/\s/g, '');
 }

package/src/js/core/switcher.js

@@ -1,9 +1,25 @@
+import Lazyload from '../mixin/lazyload';
+import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
-import {$$, attr, children, css, data, endsWith, findIndex, getIndex, hasClass, matches, queryAll, toggleClass, toNodes, within} from 'uikit-util';
+import {
+    $$,
+    attr,
+    children,
+    css,
+    data,
+    endsWith,
+    findIndex,
+    getIndex,
+    hasClass,
+    matches,
+    queryAll,
+    toggleClass,
+    toNodes,
+    within,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [Togglable],
+    mixins: [Lazyload, Swipe, Togglable],
 
     args: 'connect',
 
@@ -12,7 +28,6 @@ export default {
         toggle: String,
         itemNav: String,
         active: Number,
-        swiping: Boolean
     },
 
     data: {
@@ -20,42 +35,35 @@ export default {
         toggle: '> * > :first-child',
         itemNav: false,
         active: 0,
-        swiping: true,
         cls: 'uk-active',
-        attrItem: 'uk-switcher-item'
+        attrItem: 'uk-switcher-item',
     },
 
     computed: {
-
         connects: {
-
-            get({connect}, $el) {
+            get({ connect }, $el) {
                 return queryAll(connect, $el);
             },
 
             watch(connects) {
-
                 if (this.swiping) {
                     css(connects, 'touch-action', 'pan-y pinch-zoom');
                 }
 
                 const index = this.index();
-                this.connects.forEach(el =>
-                    children(el).forEach((child, i) =>
-                        toggleClass(child, this.cls, i === index)
-                    )
+                this.connects.forEach((el) =>
+                    children(el).forEach((child, i) => toggleClass(child, this.cls, i === index))
                 );
-
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         toggles: {
-
-            get({toggle}, $el) {
-                return $$(toggle, $el).filter(el => !matches(el, '.uk-disabled *, .uk-disabled, [disabled]'));
+            get({ toggle }, $el) {
+                return $$(toggle, $el).filter(
+                    (el) => !matches(el, '.uk-disabled *, .uk-disabled, [disabled]')
+                );
             },
 
             watch(toggles) {
@@ -63,20 +71,26 @@ export default {
                 this.show(~active ? active : toggles[this.active] || toggles[0]);
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         children() {
-            return children(this.$el).filter(child => this.toggles.some(toggle => within(toggle, child)));
-        }
+            return children(this.$el).filter((child) =>
+                this.toggles.some((toggle) => within(toggle, child))
+            );
+        },
 
+        swipeTarget() {
+            return this.connects;
+        },
     },
 
-    events: [
+    connected() {
+        this.lazyload(this.$el, this.connects);
+    },
 
+    events: [
         {
-
             name: 'click',
 
             delegate() {
@@ -86,8 +100,7 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.show(e.current);
-            }
-
+            },
         },
 
         {
@@ -104,7 +117,7 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.show(data(e.current, this.attrItem));
-            }
+            },
         },
 
         {
@@ -118,21 +131,18 @@ export default {
                 return this.connects;
             },
 
-            handler({type}) {
+            handler({ type }) {
                 this.show(endsWith(type, 'Left') ? 'next' : 'previous');
-            }
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         index() {
-            return findIndex(this.children, el => hasClass(el, this.cls));
+            return findIndex(this.children, (el) => hasClass(el, this.cls));
         },
 
         show(item) {
-
             const prev = this.index();
             const next = getIndex(
                 this.children[getIndex(item, this.toggles, prev)],
@@ -148,15 +158,14 @@ export default {
                 attr(this.toggles[i], 'aria-expanded', next === i);
             });
 
-            this.connects.forEach(({children}) =>
-                this.toggleElement(toNodes(children).filter(child =>
-                    hasClass(child, this.cls)
-                ), false, prev >= 0).then(() =>
-                    this.toggleElement(children[next], true, prev >= 0)
-                )
-            );
-        }
-
-    }
-
+            this.connects.forEach(async ({ children }) => {
+                await this.toggleElement(
+                    toNodes(children).filter((child) => hasClass(child, this.cls)),
+                    false,
+                    prev >= 0
+                );
+                await this.toggleElement(children[next], true, prev >= 0);
+            });
+        },
+    },
 };

package/src/js/core/tab.js

@@ -1,33 +1,30 @@
 import Switcher from './switcher';
 import Class from '../mixin/class';
-import {hasClass} from 'uikit-util';
+import { hasClass } from 'uikit-util';
 
 export default {
-
     mixins: [Class],
 
     extends: Switcher,
 
     props: {
-        media: Boolean
+        media: Boolean,
     },
 
     data: {
         media: 960,
-        attrItem: 'uk-tab-item'
+        attrItem: 'uk-tab-item',
     },
 
     connected() {
-
         const cls = hasClass(this.$el, 'uk-tab-left')
             ? 'uk-tab-left'
             : hasClass(this.$el, 'uk-tab-right')
-                ? 'uk-tab-right'
-                : false;
+            ? 'uk-tab-right'
+            : false;
 
         if (cls) {
-            this.$create('toggle', this.$el, {cls, mode: 'media', media: this.media});
+            this.$create('toggle', this.$el, { cls, mode: 'media', media: this.media });
         }
-    }
-
+    },
 };