uikit 3.11.2-dev.c08a5b5f0 → 3.11.2-dev.d8c101f07

package/src/js/mixin/slider-nav.js

@@ -1,49 +1,45 @@
-import {$, $$, data, html, toggleClass, toNumber} from 'uikit-util';
+import { $, $$, data, html, toggleClass, toNumber } from 'uikit-util';
 
 export default {
-
     data: {
-        selNav: false
+        selNav: false,
     },
 
     computed: {
-
-        nav({selNav}, $el) {
+        nav({ selNav }, $el) {
             return $(selNav, $el);
         },
 
-        selNavItem({attrItem}) {
+        selNavItem({ attrItem }) {
             return `[${attrItem}],[data-${attrItem}]`;
         },
 
         navItems(_, $el) {
             return $$(this.selNavItem, $el);
-        }
-
+        },
     },
 
     update: {
-
         write() {
-
             if (this.nav && this.length !== this.nav.children.length) {
-                html(this.nav, this.slides.map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`).join(''));
+                html(
+                    this.nav,
+                    this.slides
+                        .map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`)
+                        .join('')
+                );
             }
 
-            this.navItems.concat(this.nav).forEach(el => el && (el.hidden = !this.maxIndex));
+            this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
 
             this.updateNav();
-
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -53,34 +49,29 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.show(data(e.current, this.attrItem));
-            }
-
+            },
         },
 
         {
-
             name: 'itemshow',
-            handler: 'updateNav'
-
-        }
-
+            handler: 'updateNav',
+        },
     ],
 
     methods: {
-
         updateNav() {
-
             const i = this.getValidIndex();
-            this.navItems.forEach(el => {
-
+            for (const el of this.navItems) {
                 const cmd = data(el, this.attrItem);
 
                 toggleClass(el, this.clsActive, toNumber(cmd) === i);
-                toggleClass(el, 'uk-invisible', this.finite && (cmd === 'previous' && i === 0 || cmd === 'next' && i >= this.maxIndex));
-            });
-
-        }
-
-    }
-
+                toggleClass(
+                    el,
+                    'uk-invisible',
+                    this.finite &&
+                        ((cmd === 'previous' && i === 0) || (cmd === 'next' && i >= this.maxIndex))
+                );
+            }
+        },
+    },
 };

package/src/js/mixin/slider-reactive.js

@@ -1,9 +1,6 @@
 export default {
-
     update: {
-
         write() {
-
             if (this.stack.length || this.dragging) {
                 return;
             }
@@ -13,11 +10,8 @@ export default {
             if (!~this.prevIndex || this.index !== index) {
                 this.show(index);
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/mixin/slider.js

@@ -1,10 +1,20 @@
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
-import {$, $$, assign, clamp, fastdom, getIndex, hasClass, isNumber, isRtl, Promise, removeClass, trigger} from 'uikit-util';
+import {
+    $,
+    $$,
+    clamp,
+    fastdom,
+    getIndex,
+    hasClass,
+    isNumber,
+    isRtl,
+    removeClass,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [SliderAutoplay, SliderDrag, SliderNav],
 
     props: {
@@ -13,7 +23,7 @@ export default {
         index: Number,
         finite: Boolean,
         velocity: Number,
-        selSlides: String
+        selSlides: String,
     },
 
     data: () => ({
@@ -27,7 +37,7 @@ export default {
         clsActive: 'uk-active',
         clsActivated: false,
         Transitioner: false,
-        transitionOptions: {}
+        transitionOptions: {},
     }),
 
     connected() {
@@ -41,12 +51,11 @@ export default {
     },
 
     computed: {
-
-        duration({velocity}, $el) {
+        duration({ velocity }, $el) {
             return speedUp($el.offsetWidth / velocity);
         },
 
-        list({selList}, $el) {
+        list({ selList }, $el) {
             return $(selList, $el);
         },
 
@@ -54,45 +63,38 @@ export default {
             return this.length - 1;
         },
 
-        selSlides({selList, selSlides}) {
+        selSlides({ selList, selSlides }) {
             return `${selList} ${selSlides || '> *'}`;
         },
 
         slides: {
-
             get() {
                 return $$(this.selSlides, this.$el);
             },
 
             watch() {
                 this.$reset();
-            }
-
+            },
         },
 
         length() {
             return this.slides.length;
-        }
-
+        },
     },
 
     events: {
-
         itemshown() {
             this.$update(this.list);
-        }
-
+        },
     },
 
     methods: {
-
         show(index, force = false) {
-
             if (this.dragging || !this.length) {
                 return;
             }
 
-            const {stack} = this;
+            const { stack } = this;
             const queueIndex = force ? 0 : stack.length;
             const reset = () => {
                 stack.splice(queueIndex, 1);
@@ -105,7 +107,6 @@ export default {
             stack[force ? 'unshift' : 'push'](index);
 
             if (!force && stack.length > 1) {
-
                 if (stack.length === 2) {
                     this._transitioner.forward(Math.min(this.duration, 200));
                 }
@@ -127,8 +128,9 @@ export default {
             this.prevIndex = prevIndex;
             this.index = nextIndex;
 
-            if (prev && !trigger(prev, 'beforeitemhide', [this])
-                || !trigger(next, 'beforeitemshow', [this, prev])
+            if (
+                (prev && !trigger(prev, 'beforeitemhide', [this])) ||
+                !trigger(next, 'beforeitemshow', [this, prev])
             ) {
                 this.index = this.prevIndex;
                 reset();
@@ -136,11 +138,10 @@ export default {
             }
 
             const promise = this._show(prev, next, force).then(() => {
-
                 prev && trigger(prev, 'itemhidden', [this]);
                 trigger(next, 'itemshown', [this]);
 
-                return new Promise(resolve => {
+                return new Promise((resolve) => {
                     fastdom.write(() => {
                         stack.shift();
                         if (stack.length) {
@@ -151,14 +152,12 @@ export default {
                         resolve();
                     });
                 });
-
             });
 
             prev && trigger(prev, 'itemhide', [this]);
             trigger(next, 'itemshow', [this]);
 
             return promise;
-
         },
 
         getIndex(index = this.index, prev = this.index) {
@@ -170,28 +169,25 @@ export default {
         },
 
         _show(prev, next, force) {
-
-            this._transitioner = this._getTransitioner(
-                prev,
-                next,
-                this.dir,
-                assign({
-                    easing: force
-                        ? next.offsetWidth < 600
-                            ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
-                            : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
-                        : this.easing
-                }, this.transitionOptions)
-            );
+            this._transitioner = this._getTransitioner(prev, next, this.dir, {
+                easing: force
+                    ? next.offsetWidth < 600
+                        ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
+                        : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
+                    : this.easing,
+                ...this.transitionOptions,
+            });
 
             if (!force && !prev) {
                 this._translate(1);
                 return Promise.resolve();
             }
 
-            const {length} = this.stack;
-            return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent);
-
+            const { length } = this.stack;
+            return this._transitioner[length > 1 ? 'forward' : 'show'](
+                length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration,
+                this.percent
+            );
         },
 
         _getDistance(prev, next) {
@@ -204,29 +200,26 @@ export default {
             return transitioner;
         },
 
-        _getTransitioner(prev = this.prevIndex, next = this.index, dir = this.dir || 1, options = this.transitionOptions) {
+        _getTransitioner(
+            prev = this.prevIndex,
+            next = this.index,
+            dir = this.dir || 1,
+            options = this.transitionOptions
+        ) {
             return new this.Transitioner(
                 isNumber(prev) ? this.slides[prev] : prev,
                 isNumber(next) ? this.slides[next] : next,
                 dir * (isRtl ? -1 : 1),
                 options
             );
-        }
-
-    }
-
+        },
+    },
 };
 
 function getDirection(index, prevIndex) {
-    return index === 'next'
-        ? 1
-        : index === 'previous'
-            ? -1
-            : index < prevIndex
-                ? -1
-                : 1;
+    return index === 'next' ? 1 : index === 'previous' ? -1 : index < prevIndex ? -1 : 1;
 }
 
 export function speedUp(x) {
-    return .5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
+    return 0.5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
 }

package/src/js/mixin/slideshow.js

@@ -1,53 +1,47 @@
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
-import {addClass, assign, removeClass} from 'uikit-util';
+import { addClass, removeClass } from 'uikit-util';
 
 export default {
-
     mixins: [Slider],
 
     props: {
-        animation: String
+        animation: String,
     },
 
     data: {
         animation: 'slide',
         clsActivated: 'uk-transition-active',
         Animations,
-        Transitioner
+        Transitioner,
     },
 
     computed: {
-
-        animation({animation, Animations}) {
-            return assign(Animations[animation] || Animations.slide, {name: animation});
+        animation({ animation, Animations }) {
+            return { ...(Animations[animation] || Animations.slide), name: animation };
         },
 
         transitionOptions() {
-            return {animation: this.animation};
-        }
-
+            return { animation: this.animation };
+        },
     },
 
     events: {
-
-        'itemshow itemhide itemshown itemhidden'({target}) {
+        'itemshow itemhide itemshown itemhidden'({ target }) {
             this.$update(target);
         },
 
-        beforeitemshow({target}) {
+        beforeitemshow({ target }) {
             addClass(target, this.clsActive);
         },
 
-        itemshown({target}) {
+        itemshown({ target }) {
             addClass(target, this.clsActivated);
         },
 
-        itemhidden({target}) {
+        itemhidden({ target }) {
             removeClass(target, this.clsActive, this.clsActivated);
-        }
-
-    }
-
+        },
+    },
 };

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);