uikit 3.11.2-dev.f2970ffaa → 3.11.2-dev.f3ade19c4

package/src/js/components/upload.js

@@ -1,7 +1,6 @@
-import {addClass, ajax, matches, noop, on, removeClass, trigger} from 'uikit-util';
+import { addClass, ajax, matches, noop, on, removeClass, trigger } from 'uikit-util';
 
 export default {
-
     props: {
         allow: String,
         clsDragover: String,
@@ -16,7 +15,7 @@ export default {
         name: String,
         params: Object,
         type: String,
-        url: String
+        url: String,
     },
 
     data: {
@@ -44,13 +43,11 @@ export default {
         load: noop,
         loadEnd: noop,
         loadStart: noop,
-        progress: noop
+        progress: noop,
     },
 
     events: {
-
         change(e) {
-
             if (!matches(e.target, 'input[type="file"]')) {
                 return;
             }
@@ -69,7 +66,7 @@ export default {
 
             const transfer = e.dataTransfer;
 
-            if (!transfer || !transfer.files) {
+            if (!transfer?.files) {
                 return;
             }
 
@@ -90,108 +87,100 @@ export default {
         dragleave(e) {
             stop(e);
             removeClass(this.$el, this.clsDragover);
-        }
-
+        },
     },
 
     methods: {
-
-        upload(files) {
-
+        async upload(files) {
             if (!files.length) {
                 return;
             }
 
             trigger(this.$el, 'upload', [files]);
 
-            for (let i = 0; i < files.length; i++) {
-
-                if (this.maxSize && this.maxSize * 1000 < files[i].size) {
+            for (const file of files) {
+                if (this.maxSize && this.maxSize * 1000 < file.size) {
                     this.fail(this.msgInvalidSize.replace('%s', this.maxSize));
                     return;
                 }
 
-                if (this.allow && !match(this.allow, files[i].name)) {
+                if (this.allow && !match(this.allow, file.name)) {
                     this.fail(this.msgInvalidName.replace('%s', this.allow));
                     return;
                 }
 
-                if (this.mime && !match(this.mime, files[i].type)) {
+                if (this.mime && !match(this.mime, file.type)) {
                     this.fail(this.msgInvalidMime.replace('%s', this.mime));
                     return;
                 }
-
             }
 
             if (!this.multiple) {
-                files = [files[0]];
+                files = files.slice(0, 1);
             }
 
             this.beforeAll(this, files);
 
             const chunks = chunk(files, this.concurrent);
-            const upload = files => {
-
+            const upload = async (files) => {
                 const data = new FormData();
 
-                files.forEach(file => data.append(this.name, file));
+                files.forEach((file) => data.append(this.name, file));
 
                 for (const key in this.params) {
                     data.append(key, this.params[key]);
                 }
 
-                ajax(this.url, {
-                    data,
-                    method: this.method,
-                    responseType: this.type,
-                    beforeSend: env => {
-
-                        const {xhr} = env;
-                        xhr.upload && on(xhr.upload, 'progress', this.progress);
-                        ['loadStart', 'load', 'loadEnd', 'abort'].forEach(type =>
-                            on(xhr, type.toLowerCase(), this[type])
-                        );
-
-                        return this.beforeSend(env);
-
+                try {
+                    const xhr = await ajax(this.url, {
+                        data,
+                        method: this.method,
+                        responseType: this.type,
+                        beforeSend: (env) => {
+                            const { xhr } = env;
+                            xhr.upload && on(xhr.upload, 'progress', this.progress);
+                            for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
+                                on(xhr, type.toLowerCase(), this[type]);
+                            }
+
+                            return this.beforeSend(env);
+                        },
+                    });
+
+                    this.complete(xhr);
+
+                    if (chunks.length) {
+                        await upload(chunks.shift());
+                    } else {
+                        this.completeAll(xhr);
                     }
-                }).then(
-                    xhr => {
-
-                        this.complete(xhr);
-
-                        if (chunks.length) {
-                            upload(chunks.shift());
-                        } else {
-                            this.completeAll(xhr);
-                        }
-
-                    },
-                    e => this.error(e)
-                );
-
+                } catch (e) {
+                    this.error(e);
+                }
             };
 
-            upload(chunks.shift());
-
-        }
-
-    }
-
+            await upload(chunks.shift());
+        },
+    },
 };
 
 function match(pattern, path) {
-    return path.match(new RegExp(`^${pattern.replace(/\//g, '\\/').replace(/\*\*/g, '(\\/[^\\/]+)*').replace(/\*/g, '[^\\/]+').replace(/((?!\\))\?/g, '$1.')}$`, 'i'));
+    return path.match(
+        new RegExp(
+            `^${pattern
+                .replace(/\//g, '\\/')
+                .replace(/\*\*/g, '(\\/[^\\/]+)*')
+                .replace(/\*/g, '[^\\/]+')
+                .replace(/((?!\\))\?/g, '$1.')}$`,
+            'i'
+        )
+    );
 }
 
 function chunk(files, size) {
     const chunks = [];
     for (let i = 0; i < files.length; i += size) {
-        const chunk = [];
-        for (let j = 0; j < size; j++) {
-            chunk.push(files[i + j]);
-        }
-        chunks.push(chunk);
+        chunks.push(files.slice(i, i + size));
     }
     return chunks;
 }

package/src/js/core/accordion.js

@@ -1,10 +1,24 @@
 import Class from '../mixin/class';
-import {default as Togglable, toggleHeight} from '../mixin/togglable';
-import {$, $$, attr, filter, getIndex, hasClass, includes, index, isInView, scrollIntoView, toggleClass, unwrap, wrapAll} from 'uikit-util';
+import Lazyload from '../mixin/lazyload';
+import { default as Togglable, toggleHeight } from '../mixin/togglable';
+import {
+    $,
+    $$,
+    attr,
+    filter,
+    getIndex,
+    hasClass,
+    includes,
+    index,
+    isInView,
+    scrollIntoView,
+    toggleClass,
+    unwrap,
+    wrapAll,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [Class, Togglable],
+    mixins: [Class, Lazyload, Togglable],
 
     props: {
         targets: String,
@@ -14,7 +28,7 @@ export default {
         toggle: String,
         content: String,
         transition: String,
-        offset: Number
+        offset: Number,
     },
 
     data: {
@@ -27,48 +41,45 @@ export default {
         toggle: '> .uk-accordion-title',
         content: '> .uk-accordion-content',
         transition: 'ease',
-        offset: 0
+        offset: 0,
     },
 
     computed: {
-
         items: {
-
-            get({targets}, $el) {
+            get({ targets }, $el) {
                 return $$(targets, $el);
             },
 
             watch(items, prev) {
-
-                items.forEach(el => hide($(this.content, el), !hasClass(el, this.clsOpen)));
+                items.forEach((el) => hide($(this.content, el), !hasClass(el, this.clsOpen)));
 
                 if (prev || hasClass(items, this.clsOpen)) {
                     return;
                 }
 
-                const active = this.active !== false && items[Number(this.active)]
-                    || !this.collapsible && items[0];
+                const active =
+                    (this.active !== false && items[Number(this.active)]) ||
+                    (!this.collapsible && items[0]);
 
                 if (active) {
                     this.toggle(active, false);
                 }
-
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
-        toggles({toggle}) {
-            return this.items.map(item => $(toggle, item));
-        }
+        toggles({ toggle }) {
+            return this.items.map((item) => $(toggle, item));
+        },
+    },
 
+    connected() {
+        this.lazyload();
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -78,16 +89,12 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.toggle(index(this.toggles, e.current));
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         toggle(item, animate) {
-
             let items = [this.items[getIndex(item, this.items)]];
             const activeItems = filter(this.items, `.${this.clsOpen}`);
 
@@ -95,44 +102,47 @@ export default {
                 items = items.concat(activeItems);
             }
 
-            if (!this.collapsible && activeItems.length < 2 && !filter(items, `:not(.${this.clsOpen})`).length) {
+            if (
+                !this.collapsible &&
+                activeItems.length < 2 &&
+                !filter(items, `:not(.${this.clsOpen})`).length
+            ) {
                 return;
             }
 
-            items.forEach(el => this.toggleElement(el, !hasClass(el, this.clsOpen), (el, show) => {
+            for (const el of items) {
+                this.toggleElement(el, !hasClass(el, this.clsOpen), async (el, show) => {
+                    toggleClass(el, this.clsOpen, show);
+                    attr($(this.$props.toggle, el), 'aria-expanded', show);
 
-                toggleClass(el, this.clsOpen, show);
-                attr($(this.$props.toggle, el), 'aria-expanded', show);
+                    const content = $(`${el._wrapper ? '> * ' : ''}${this.content}`, el);
 
-                const content = $(`${el._wrapper ? '> * ' : ''}${this.content}`, el);
-
-                if (animate === false || !this.hasTransition) {
-                    hide(content, !show);
-                    return;
-                }
+                    if (animate === false || !this.hasTransition) {
+                        hide(content, !show);
+                        return;
+                    }
 
-                if (!el._wrapper) {
-                    el._wrapper = wrapAll(content, `<div${show ? ' hidden' : ''}>`);
-                }
+                    if (!el._wrapper) {
+                        el._wrapper = wrapAll(content, `<div${show ? ' hidden' : ''}>`);
+                    }
 
-                hide(content, false);
-                return toggleHeight(this)(el._wrapper, show).then(() => {
+                    hide(content, false);
+                    await toggleHeight(this)(el._wrapper, show);
                     hide(content, !show);
+
                     delete el._wrapper;
                     unwrap(content);
 
                     if (show) {
                         const toggle = $(this.$props.toggle, el);
                         if (!isInView(toggle)) {
-                            scrollIntoView(toggle, {offset: this.offset});
+                            scrollIntoView(toggle, { offset: this.offset });
                         }
                     }
                 });
-            }));
-        }
-
-    }
-
+            }
+        },
+    },
 };
 
 function hide(el, hide) {

package/src/js/core/alert.js

@@ -1,28 +1,24 @@
 import Class from '../mixin/class';
 import Togglable from '../mixin/togglable';
-import {assign} from 'uikit-util';
 
 export default {
-
     mixins: [Class, Togglable],
 
     args: 'animation',
 
     props: {
-        close: String
+        close: String,
     },
 
     data: {
         animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: assign({opacity: 0}, Togglable.data.hideProps)
+        hideProps: { opacity: 0, ...Togglable.data.hideProps },
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -32,18 +28,14 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.close();
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
-        close() {
-            this.toggleElement(this.$el).then(() => this.$destroy(true));
-        }
-
-    }
-
+        async close() {
+            await this.toggleElement(this.$el);
+            this.$destroy(true);
+        },
+    },
 };

package/src/js/core/core.js

@@ -1,7 +1,6 @@
-import {css, fastdom, getEventPos, inBrowser, isTouch, on, once, parent, pointerCancel, pointerDown, pointerUp, toMs, trigger} from 'uikit-util';
+import { css, fastdom, inBrowser, observeResize, on, toMs } from 'uikit-util';
 
 export default function (UIkit) {
-
     if (!inBrowser) {
         return;
     }
@@ -13,80 +12,29 @@ export default function (UIkit) {
             return;
         }
         pendingResize = true;
-        fastdom.read(() => pendingResize = false);
+        fastdom.read(() => (pendingResize = false));
         UIkit.update(null, 'resize');
     };
 
     on(window, 'load resize', handleResize);
-    on(document, 'loadedmetadata load', handleResize, true);
-
-    if ('ResizeObserver' in window) {
-        (new ResizeObserver(handleResize)).observe(document.documentElement);
-    }
-
-    // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-    let pending;
-    on(window, 'scroll', e => {
-
-        if (pending) {
-            return;
-        }
-        pending = true;
-        fastdom.read(() => pending = false);
-
-        UIkit.update(null, e.type);
 
-    }, {passive: true, capture: true});
+    observeResize(document.documentElement, handleResize);
 
     let started = 0;
-    on(document, 'animationstart', ({target}) => {
-        if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
-
-            started++;
-            css(document.documentElement, 'overflowX', 'hidden');
-            setTimeout(() => {
-                if (!--started) {
-                    css(document.documentElement, 'overflowX', '');
-                }
-            }, toMs(css(target, 'animationDuration')) + 100);
-        }
-    }, true);
-
-    on(document, pointerDown, e => {
-
-        if (!isTouch(e)) {
-            return;
-        }
-
-        // Handle Swipe Gesture
-        const pos = getEventPos(e);
-        const target = 'tagName' in e.target ? e.target : parent(e.target);
-        once(document, `${pointerUp} ${pointerCancel} scroll`, e => {
-
-            const {x, y} = getEventPos(e);
-
-            // swipe
-            if (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100 || y && Math.abs(pos.y - y) > 100) {
-
+    on(
+        document,
+        'animationstart',
+        ({ target }) => {
+            if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
+                started++;
+                css(document.documentElement, 'overflowX', 'hidden');
                 setTimeout(() => {
-                    trigger(target, 'swipe');
-                    trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
-                });
-
+                    if (!--started) {
+                        css(document.documentElement, 'overflowX', '');
+                    }
+                }, toMs(css(target, 'animationDuration')) + 100);
             }
-
-        });
-
-    }, {passive: true});
-
-}
-
-function swipeDirection(x1, y1, x2, y2) {
-    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
-        ? x1 - x2 > 0
-            ? 'Left'
-            : 'Right'
-        : y1 - y2 > 0
-            ? 'Up'
-            : 'Down';
+        },
+        true
+    );
 }

package/src/js/core/cover.js

@@ -1,33 +1,35 @@
 import Video from './video';
-import {css, Dimensions, parent} from 'uikit-util';
+import { css, Dimensions, observeResize, parent } from 'uikit-util';
 
 export default {
-
     mixins: [Video],
 
     props: {
         width: Number,
-        height: Number
+        height: Number,
     },
 
     data: {
-        automute: true
+        automute: true,
     },
 
-    update: {
+    connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+    },
 
+    update: {
         read() {
-
             const el = this.$el;
-            const {offsetHeight: height, offsetWidth: width} = getPositionedParent(el) || parent(el);
+            const { offsetHeight: height, offsetWidth: width } =
+                getPositionedParent(el) || parent(el);
             const dim = Dimensions.cover(
                 {
                     width: this.width || el.naturalWidth || el.videoWidth || el.clientWidth,
-                    height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight
+                    height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight,
                 },
                 {
                     width: width + (width % 2 ? 1 : 0),
-                    height: height + (height % 2 ? 1 : 0)
+                    height: height + (height % 2 ? 1 : 0),
                 }
             );
 
@@ -38,14 +40,12 @@ export default {
             return dim;
         },
 
-        write({height, width}) {
-            css(this.$el, {height, width});
+        write({ height, width }) {
+            css(this.$el, { height, width });
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };
 
 function getPositionedParent(el) {