uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.4274bc35b

package/src/js/mixin/togglable.js

@@ -1,13 +1,31 @@
-import {$$, addClass, Animation, assign, css, fastdom, hasClass, height, includes, isBoolean, isFunction, isVisible, noop, Promise, removeClass, toFloat, toggleClass, toNodes, Transition, trigger} from 'uikit-util';
+import {
+    $$,
+    addClass,
+    Animation,
+    css,
+    fastdom,
+    hasClass,
+    height,
+    includes,
+    isBoolean,
+    isFunction,
+    isVisible,
+    noop,
+    removeClass,
+    toFloat,
+    toggleClass,
+    toNodes,
+    Transition,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     props: {
         cls: Boolean,
         animation: 'list',
         duration: Number,
         origin: String,
-        transition: String
+        transition: String,
     },
 
     data: {
@@ -25,7 +43,7 @@ export default {
             paddingTop: '',
             paddingBottom: '',
             marginTop: '',
-            marginBottom: ''
+            marginBottom: '',
         },
 
         hideProps: {
@@ -34,63 +52,61 @@ export default {
             paddingTop: 0,
             paddingBottom: 0,
             marginTop: 0,
-            marginBottom: 0
-        }
-
+            marginBottom: 0,
+        },
     },
 
     computed: {
-
-        hasAnimation({animation}) {
+        hasAnimation({ animation }) {
             return !!animation[0];
         },
 
-        hasTransition({animation}) {
+        hasTransition({ animation }) {
             return this.hasAnimation && animation[0] === true;
-        }
-
+        },
     },
 
     methods: {
-
         toggleElement(targets, toggle, animate) {
-            return new Promise(resolve =>
-                Promise.all(toNodes(targets).map(el => {
-
-                    const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
-
-                    if (!trigger(el, `before${show ? 'show' : 'hide'}`, [this])) {
-                        return Promise.reject();
-                    }
-
-                    const promise = (
-                        isFunction(animate)
-                            ? animate
-                            : animate === false || !this.hasAnimation
-                            ? this._toggle
-                            : this.hasTransition
+            return new Promise((resolve) =>
+                Promise.all(
+                    toNodes(targets).map((el) => {
+                        const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
+
+                        if (!trigger(el, `before${show ? 'show' : 'hide'}`, [this])) {
+                            return Promise.reject();
+                        }
+
+                        const promise = (
+                            isFunction(animate)
+                                ? animate
+                                : animate === false || !this.hasAnimation
+                                ? this._toggle
+                                : this.hasTransition
                                 ? toggleHeight(this)
                                 : toggleAnimation(this)
-                    )(el, show);
-
-                    const cls = show ? this.clsEnter : this.clsLeave;
+                        )(el, show);
 
-                    addClass(el, cls);
+                        const cls = show ? this.clsEnter : this.clsLeave;
 
-                    trigger(el, show ? 'show' : 'hide', [this]);
+                        addClass(el, cls);
 
-                    const done = () => {
-                        removeClass(el, cls);
-                        trigger(el, show ? 'shown' : 'hidden', [this]);
-                        this.$update(el);
-                    };
+                        trigger(el, show ? 'show' : 'hide', [this]);
 
-                    return promise ? promise.then(done, () => {
-                        removeClass(el, cls);
-                        return Promise.reject();
-                    }) : done();
+                        const done = () => {
+                            removeClass(el, cls);
+                            trigger(el, show ? 'shown' : 'hidden', [this]);
+                            this.$update(el);
+                        };
 
-                })).then(resolve, noop)
+                        return promise
+                            ? promise.then(done, () => {
+                                  removeClass(el, cls);
+                                  return Promise.reject();
+                              })
+                            : done();
+                    })
+                ).then(resolve, noop)
             );
         },
 
@@ -99,14 +115,13 @@ export default {
             return hasClass(el, this.clsEnter)
                 ? true
                 : hasClass(el, this.clsLeave)
-                    ? false
-                    : this.cls
-                        ? hasClass(el, this.cls.split(' ')[0])
-                        : isVisible(el);
+                ? false
+                : this.cls
+                ? hasClass(el, this.cls.split(' ')[0])
+                : isVisible(el);
         },
 
         _toggle(el, toggled) {
-
             if (!el) {
                 return;
             }
@@ -122,23 +137,23 @@ export default {
                 changed && (el.hidden = !toggled);
             }
 
-            $$('[autofocus]', el).some(el => isVisible(el) ? el.focus() || true : el.blur());
+            $$('[autofocus]', el).some((el) => (isVisible(el) ? el.focus() || true : el.blur()));
 
             if (changed) {
                 trigger(el, 'toggled', [toggled, this]);
                 this.$update(el);
             }
-        }
-
-    }
-
+        },
+    },
 };
 
-export function toggleHeight({isToggled, duration, initProps, hideProps, transition, _toggle}) {
+export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
     return (el, show) => {
-
         const inProgress = Transition.inProgress(el);
-        const inner = el.hasChildNodes ? toFloat(css(el.firstElementChild, 'marginTop')) + toFloat(css(el.lastElementChild, 'marginBottom')) : 0;
+        const inner = el.hasChildNodes
+            ? toFloat(css(el.firstElementChild, 'marginTop')) +
+              toFloat(css(el.lastElementChild, 'marginBottom'))
+            : 0;
         const currentHeight = isVisible(el) ? height(el) + (inProgress ? 0 : inner) : 0;
 
         Transition.cancel(el);
@@ -155,26 +170,37 @@ export function toggleHeight({isToggled, duration, initProps, hideProps, transit
         const endHeight = height(el) + (inProgress ? 0 : inner);
         height(el, currentHeight);
 
-        return (show
-            ? Transition.start(el, assign({}, initProps, {overflow: 'hidden', height: endHeight}), Math.round(duration * (1 - currentHeight / endHeight)), transition)
-            : Transition.start(el, hideProps, Math.round(duration * (currentHeight / endHeight)), transition).then(() => _toggle(el, false))
+        return (
+            show
+                ? Transition.start(
+                      el,
+                      { ...initProps, overflow: 'hidden', height: endHeight },
+                      Math.round(duration * (1 - currentHeight / endHeight)),
+                      transition
+                  )
+                : Transition.start(
+                      el,
+                      hideProps,
+                      Math.round(duration * (currentHeight / endHeight)),
+                      transition
+                  ).then(() => _toggle(el, false))
         ).then(() => css(el, initProps));
-
     };
 }
 
 function toggleAnimation(cmp) {
     return (el, show) => {
-
         Animation.cancel(el);
 
-        const {animation, duration, _toggle} = cmp;
+        const { animation, duration, _toggle } = cmp;
 
         if (show) {
             _toggle(el, true);
             return Animation.in(el, animation[0], duration, cmp.origin);
         }
 
-        return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() => _toggle(el, false));
+        return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
+            _toggle(el, false)
+        );
     };
 }

package/src/js/uikit-core.js

@@ -2,12 +2,10 @@ import UIkit from './api/index';
 import Core from './core/core';
 import boot from './api/boot';
 import * as components from './core/index';
-import {each} from 'uikit-util';
+import { each } from 'uikit-util';
 
 // register components
-each(components, (component, name) =>
-    UIkit.component(name, component)
-);
+each(components, (component, name) => UIkit.component(name, component));
 
 // core functionality
 UIkit.use(Core);

package/src/js/uikit.js

@@ -1,9 +1,7 @@
 import UIkit from './uikit-core';
 import * as components from './components/index';
-import {each} from 'uikit-util';
+import { each } from 'uikit-util';
 
-each(components, (component, name) =>
-    UIkit.component(name, component)
-);
+each(components, (component, name) => UIkit.component(name, component));
 
 export default UIkit;

package/src/js/util/ajax.js

@@ -1,18 +1,16 @@
-import {on} from './event';
-import {Promise} from './promise';
-import {assign, isString, noop} from './lang';
+import { on } from './event';
+import { assign, noop } from './lang';
 
 export function ajax(url, options) {
-
-    const env = assign({
+    const env = {
         data: null,
         method: 'GET',
         headers: {},
         xhr: new XMLHttpRequest(),
         beforeSend: noop,
-        responseType: ''
-    }, options);
-
+        responseType: '',
+        ...options,
+    };
     return Promise.resolve()
         .then(() => env.beforeSend(env))
         .then(() => send(url, env));
@@ -20,15 +18,15 @@ export function ajax(url, options) {
 
 function send(url, env) {
     return new Promise((resolve, reject) => {
-        let {xhr} = env;
+        const { xhr } = env;
 
         for (const prop in env) {
             if (prop in xhr) {
                 try {
-
                     xhr[prop] = env[prop];
-
-                } catch (e) {}
+                } catch (e) {
+                    // noop
+                }
             }
         }
 
@@ -39,51 +37,34 @@ function send(url, env) {
         }
 
         on(xhr, 'load', () => {
-
-            if (xhr.status === 0 || xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-
-                // IE 11 does not support responseType 'json'
-                if (env.responseType === 'json' && isString(xhr.response)) {
-                    xhr = assign(copyXhr(xhr), {response: JSON.parse(xhr.response)});
-                }
-
+            if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                 resolve(xhr);
-
             } else {
-                reject(assign(Error(xhr.statusText), {
-                    xhr,
-                    status: xhr.status
-                }));
+                reject(
+                    assign(Error(xhr.statusText), {
+                        xhr,
+                        status: xhr.status,
+                    })
+                );
             }
-
         });
 
-        on(xhr, 'error', () => reject(assign(Error('Network Error'), {xhr})));
-        on(xhr, 'timeout', () => reject(assign(Error('Network Timeout'), {xhr})));
+        on(xhr, 'error', () => reject(assign(Error('Network Error'), { xhr })));
+        on(xhr, 'timeout', () => reject(assign(Error('Network Timeout'), { xhr })));
 
         xhr.send(env.data);
     });
 }
 
 export function getImage(src, srcset, sizes) {
-
     return new Promise((resolve, reject) => {
         const img = new Image();
 
-        img.onerror = e => reject(e);
+        img.onerror = (e) => reject(e);
         img.onload = () => resolve(img);
 
         sizes && (img.sizes = sizes);
         srcset && (img.srcset = srcset);
         img.src = src;
     });
-
-}
-
-function copyXhr(source) {
-    const target = {};
-    for (const key in source) {
-        target[key] = source[key];
-    }
-    return target;
 }

package/src/js/util/animation.js

@@ -1,49 +1,52 @@
-import {attr} from './attr';
-import {Promise} from './promise';
-import {once, trigger} from './event';
-import {css, propName} from './style';
-import {assign, startsWith, toNodes} from './lang';
-import {addClass, hasClass, removeClass, removeClasses} from './class';
+import { attr } from './attr';
+import { once, trigger } from './event';
+import { css, propName } from './style';
+import { startsWith, toNodes } from './lang';
+import { addClass, hasClass, removeClass, removeClasses } from './class';
 
 export function transition(element, props, duration = 400, timing = 'linear') {
-
-    return Promise.all(toNodes(element).map(element =>
-        new Promise((resolve, reject) => {
-
-            for (const name in props) {
-                const value = css(element, name);
-                if (value === '') {
-                    css(element, name, value);
-                }
-            }
-
-            const timer = setTimeout(() => trigger(element, 'transitionend'), duration);
-
-            once(element, 'transitionend transitioncanceled', ({type}) => {
-                clearTimeout(timer);
-                removeClass(element, 'uk-transition');
-                css(element, {
-                    transitionProperty: '',
-                    transitionDuration: '',
-                    transitionTimingFunction: ''
-                });
-                type === 'transitioncanceled' ? reject() : resolve(element);
-            }, {self: true});
-
-            addClass(element, 'uk-transition');
-            css(element, assign({
-                transitionProperty: Object.keys(props).map(propName).join(','),
-                transitionDuration: `${duration}ms`,
-                transitionTimingFunction: timing
-            }, props));
-
-        })
-    ));
-
+    return Promise.all(
+        toNodes(element).map(
+            (element) =>
+                new Promise((resolve, reject) => {
+                    for (const name in props) {
+                        const value = css(element, name);
+                        if (value === '') {
+                            css(element, name, value);
+                        }
+                    }
+
+                    const timer = setTimeout(() => trigger(element, 'transitionend'), duration);
+
+                    once(
+                        element,
+                        'transitionend transitioncanceled',
+                        ({ type }) => {
+                            clearTimeout(timer);
+                            removeClass(element, 'uk-transition');
+                            css(element, {
+                                transitionProperty: '',
+                                transitionDuration: '',
+                                transitionTimingFunction: '',
+                            });
+                            type === 'transitioncanceled' ? reject() : resolve(element);
+                        },
+                        { self: true }
+                    );
+
+                    addClass(element, 'uk-transition');
+                    css(element, {
+                        transitionProperty: Object.keys(props).map(propName).join(','),
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: timing,
+                        ...props,
+                    });
+                })
+        )
+    );
 }
 
 export const Transition = {
-
     start: transition,
 
     stop(element) {
@@ -57,47 +60,47 @@ export const Transition = {
 
     inProgress(element) {
         return hasClass(element, 'uk-transition');
-    }
-
+    },
 };
 
 const animationPrefix = 'uk-animation-';
 
 export function animate(element, animation, duration = 200, origin, out) {
-
-    return Promise.all(toNodes(element).map(element =>
-        new Promise((resolve, reject) => {
-
-            trigger(element, 'animationcanceled');
-            const timer = setTimeout(() => trigger(element, 'animationend'), duration);
-
-            once(element, 'animationend animationcanceled', ({type}) => {
-
-                clearTimeout(timer);
-
-                type === 'animationcanceled' ? reject() : resolve(element);
-
-                css(element, 'animationDuration', '');
-                removeClasses(element, `${animationPrefix}\\S*`);
-
-            }, {self: true});
-
-            css(element, 'animationDuration', `${duration}ms`);
-            addClass(element, animation, animationPrefix + (out ? 'leave' : 'enter'));
-
-            if (startsWith(animation, animationPrefix)) {
-                origin && addClass(element, `uk-transform-origin-${origin}`);
-                out && addClass(element, `${animationPrefix}reverse`);
-            }
-
-        })
-    ));
-
+    return Promise.all(
+        toNodes(element).map(
+            (element) =>
+                new Promise((resolve, reject) => {
+                    trigger(element, 'animationcanceled');
+                    const timer = setTimeout(() => trigger(element, 'animationend'), duration);
+
+                    once(
+                        element,
+                        'animationend animationcanceled',
+                        ({ type }) => {
+                            clearTimeout(timer);
+
+                            type === 'animationcanceled' ? reject() : resolve(element);
+
+                            css(element, 'animationDuration', '');
+                            removeClasses(element, `${animationPrefix}\\S*`);
+                        },
+                        { self: true }
+                    );
+
+                    css(element, 'animationDuration', `${duration}ms`);
+                    addClass(element, animation, animationPrefix + (out ? 'leave' : 'enter'));
+
+                    if (startsWith(animation, animationPrefix)) {
+                        origin && addClass(element, `uk-transform-origin-${origin}`);
+                        out && addClass(element, `${animationPrefix}reverse`);
+                    }
+                })
+        )
+    );
 }
 
 const inProgress = new RegExp(`${animationPrefix}(enter|leave)`);
 export const Animation = {
-
     in: animate,
 
     out(element, animation, duration, origin) {
@@ -110,6 +113,5 @@ export const Animation = {
 
     cancel(element) {
         trigger(element, 'animationcanceled');
-    }
-
+    },
 };

package/src/js/util/attr.js

@@ -1,7 +1,6 @@
-import {isFunction, isObject, isUndefined, toNode, toNodes} from './lang';
+import { isFunction, isObject, isUndefined, toNode, toNodes } from './lang';
 
 export function attr(element, name, value) {
-
     if (isObject(name)) {
         for (const key in name) {
             attr(element, key, name[key]);
@@ -10,42 +9,39 @@ export function attr(element, name, value) {
     }
 
     if (isUndefined(value)) {
-        element = toNode(element);
-        return element && element.getAttribute(name);
+        return toNode(element)?.getAttribute(name);
     } else {
-        toNodes(element).forEach(element => {
-
+        for (const el of toNodes(element)) {
             if (isFunction(value)) {
-                value = value.call(element, attr(element, name));
+                value = value.call(el, attr(el, name));
             }
 
             if (value === null) {
-                removeAttr(element, name);
+                removeAttr(el, name);
             } else {
-                element.setAttribute(name, value);
+                el.setAttribute(name, value);
             }
-        });
+        }
     }
-
 }
 
 export function hasAttr(element, name) {
-    return toNodes(element).some(element => element.hasAttribute(name));
+    return toNodes(element).some((element) => element.hasAttribute(name));
 }
 
 export function removeAttr(element, name) {
-    element = toNodes(element);
-    name.split(' ').forEach(name =>
-        element.forEach(element =>
-            element.hasAttribute(name) && element.removeAttribute(name)
-        )
-    );
+    const elements = toNodes(element);
+    for (const attribute of name.split(' ')) {
+        for (const element of elements) {
+            element.removeAttribute(attribute);
+        }
+    }
 }
 
 export function data(element, attribute) {
-    for (let i = 0, attrs = [attribute, `data-${attribute}`]; i < attrs.length; i++) {
-        if (hasAttr(element, attrs[i])) {
-            return attr(element, attrs[i]);
+    for (const name of [attribute, `data-${attribute}`]) {
+        if (hasAttr(element, name)) {
+            return attr(element, name);
         }
     }
 }