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

package/src/js/components/tooltip.js

@@ -1,17 +1,31 @@
 import Container from '../mixin/container';
 import Togglable from '../mixin/togglable';
 import Position from '../mixin/position';
-import {append, attr, flipPosition, hasAttr, isFocusable, isTouch, matches, on, once, pointerDown, pointerEnter, pointerLeave, remove, within} from 'uikit-util';
+import {
+    append,
+    attr,
+    flipPosition,
+    hasAttr,
+    isFocusable,
+    isTouch,
+    matches,
+    on,
+    once,
+    pointerDown,
+    pointerEnter,
+    pointerLeave,
+    remove,
+    within,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Container, Togglable, Position],
 
     args: 'title',
 
     props: {
         delay: Number,
-        title: String
+        title: String,
     },
 
     data: {
@@ -21,7 +35,7 @@ export default {
         animation: ['uk-animation-scale-up'],
         duration: 100,
         cls: 'uk-active',
-        clsPos: 'uk-tooltip'
+        clsPos: 'uk-tooltip',
     },
 
     beforeConnect() {
@@ -37,25 +51,27 @@ export default {
     },
 
     methods: {
-
         show() {
-
             if (this.isToggled(this.tooltip || null) || !this.title) {
                 return;
             }
 
-            this._unbind = once(document, `show keydown ${pointerDown}`, this.hide, false, e =>
-                e.type === pointerDown && !within(e.target, this.$el)
-                || e.type === 'keydown' && e.keyCode === 27
-                || e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name
+            this._unbind = once(
+                document,
+                `show keydown ${pointerDown}`,
+                this.hide,
+                false,
+                (e) =>
+                    (e.type === pointerDown && !within(e.target, this.$el)) ||
+                    (e.type === 'keydown' && e.keyCode === 27) ||
+                    (e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name)
             );
 
             clearTimeout(this.showTimer);
             this.showTimer = setTimeout(this._show, this.delay);
         },
 
-        hide() {
-
+        async hide() {
             if (matches(this.$el, 'input:focus')) {
                 return;
             }
@@ -66,23 +82,21 @@ export default {
                 return;
             }
 
-            this.toggleElement(this.tooltip, false, false).then(() => {
-                remove(this.tooltip);
-                this.tooltip = null;
-                this._unbind();
-            });
+            await this.toggleElement(this.tooltip, false, false);
+            remove(this.tooltip);
+            this.tooltip = null;
+            this._unbind();
         },
 
         _show() {
-
-            this.tooltip = append(this.container,
+            this.tooltip = append(
+                this.container,
                 `<div class="${this.clsPos}">
                     <div class="${this.clsPos}-inner">${this.title}</div>
                  </div>`
             );
 
             on(this.tooltip, 'toggled', (e, toggled) => {
-
                 this.updateAria(toggled);
 
                 if (!toggled) {
@@ -91,23 +105,21 @@ export default {
 
                 this.positionAt(this.tooltip, this.$el);
 
-                this.origin = this.getAxis() === 'y'
-                    ? `${flipPosition(this.dir)}-${this.align}`
-                    : `${this.align}-${flipPosition(this.dir)}`;
+                this.origin =
+                    this.getAxis() === 'y'
+                        ? `${flipPosition(this.dir)}-${this.align}`
+                        : `${this.align}-${flipPosition(this.dir)}`;
             });
 
             this.toggleElement(this.tooltip, true);
-
         },
 
         updateAria(toggled) {
             attr(this.$el, 'aria-expanded', toggled);
-        }
-
+        },
     },
 
     events: {
-
         focus: 'show',
         blur: 'hide',
 
@@ -123,10 +135,8 @@ export default {
             if (isTouch(e)) {
                 this.show();
             }
-        }
-
-    }
-
+        },
+    },
 };
 
 function makeFocusable(el) {

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,9 +1,22 @@
 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 { 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],
 
     props: {
@@ -14,7 +27,7 @@ export default {
         toggle: String,
         content: String,
         transition: String,
-        offset: Number
+        offset: Number,
     },
 
     data: {
@@ -27,48 +40,41 @@ 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));
+        },
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -78,16 +84,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 +97,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);
+        },
+    },
 };