uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/src/js/components/notification.js

@@ -1,8 +1,21 @@
 import Container from '../mixin/container';
-import {$, append, apply, closest, css, parent, pointerEnter, pointerLeave, remove, startsWith, toFloat, Transition, trigger} from 'uikit-util';
+import {
+    $,
+    append,
+    apply,
+    closest,
+    css,
+    parent,
+    pointerEnter,
+    pointerLeave,
+    remove,
+    startsWith,
+    toFloat,
+    Transition,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Container],
 
     functional: true,
@@ -17,53 +30,53 @@ export default {
         pos: 'top-center',
         clsContainer: 'uk-notification',
         clsClose: 'uk-notification-close',
-        clsMsg: 'uk-notification-message'
+        clsMsg: 'uk-notification-message',
     },
 
     install,
 
     computed: {
-
-        marginProp({pos}) {
+        marginProp({ pos }) {
             return `margin${startsWith(pos, 'top') ? 'Top' : 'Bottom'}`;
         },
 
         startProps() {
-            return {opacity: 0, [this.marginProp]: -this.$el.offsetHeight};
-        }
-
+            return { opacity: 0, [this.marginProp]: -this.$el.offsetHeight };
+        },
     },
 
     created() {
-
-        const container = $(`.${this.clsContainer}-${this.pos}`, this.container)
-            || append(this.container, `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"></div>`);
-
-        this.$mount(append(container,
-            `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
+        const container =
+            $(`.${this.clsContainer}-${this.pos}`, this.container) ||
+            append(
+                this.container,
+                `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"></div>`
+            );
+
+        this.$mount(
+            append(
+                container,
+                `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
                 <a href class="${this.clsClose}" data-uk-close></a>
                 <div>${this.message}</div>
             </div>`
-        ));
-
+            )
+        );
     },
 
-    connected() {
-
+    async connected() {
         const margin = toFloat(css(this.$el, this.marginProp));
-        Transition.start(
-            css(this.$el, this.startProps),
-            {opacity: 1, [this.marginProp]: margin}
-        ).then(() => {
-            if (this.timeout) {
-                this.timer = setTimeout(this.close, this.timeout);
-            }
+        await Transition.start(css(this.$el, this.startProps), {
+            opacity: 1,
+            [this.marginProp]: margin,
         });
 
+        if (this.timeout) {
+            this.timer = setTimeout(this.close, this.timeout);
+        }
     },
 
     events: {
-
         click(e) {
             if (closest(e.target, 'a[href="#"],a[href=""]')) {
                 e.preventDefault();
@@ -81,45 +94,38 @@ export default {
             if (this.timeout) {
                 this.timer = setTimeout(this.close, this.timeout);
             }
-        }
-
+        },
     },
 
     methods: {
-
-        close(immediate) {
-
-            const removeFn = el => {
-
+        async close(immediate) {
+            const removeFn = (el) => {
                 const container = parent(el);
 
                 trigger(el, 'close', [this]);
                 remove(el);
 
-                if (container && !container.hasChildNodes()) {
+                if (!container?.hasChildNodes()) {
                     remove(container);
                 }
-
             };
 
             if (this.timer) {
                 clearTimeout(this.timer);
             }
 
-            if (immediate) {
-                removeFn(this.$el);
-            } else {
-                Transition.start(this.$el, this.startProps).then(removeFn);
+            if (!immediate) {
+                await Transition.start(this.$el, this.startProps);
             }
-        }
-
-    }
 
+            removeFn(this.$el);
+        },
+    },
 };
 
 function install(UIkit) {
     UIkit.notification.closeAll = function (group, immediate) {
-        apply(document.body, el => {
+        apply(document.body, (el) => {
             const notification = UIkit.getComponent(el, 'notification');
             if (notification && (!group || group === notification.group)) {
                 notification.close(immediate);

package/src/js/components/parallax.js

@@ -1,8 +1,7 @@
 import Parallax from '../mixin/parallax';
-import {css, parent, query, scrolledOver, toPx} from 'uikit-util';
+import { css, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
-
     mixins: [Parallax],
 
     props: {
@@ -10,7 +9,7 @@ export default {
         viewport: Number, // Deprecated
         easing: Number,
         start: String,
-        end: String
+        end: String,
     },
 
     data: {
@@ -18,32 +17,30 @@ export default {
         viewport: 1,
         easing: 1,
         start: 0,
-        end: 0
+        end: 0,
     },
 
     computed: {
-
-        target({target}, $el) {
-            return getOffsetElement(target && query(target, $el) || $el);
+        target({ target }, $el) {
+            return getOffsetElement((target && query(target, $el)) || $el);
         },
 
-        start({start}) {
-            return parseCalc(start, this.target);
+        start({ start }) {
+            return toPx(start, 'height', this.target, true);
         },
 
-        end({end, viewport}) {
-            return parseCalc(
-                end || (viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`,
-                this.target
+        end({ end, viewport }) {
+            return toPx(
+                end || ((viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`),
+                'height',
+                this.target,
+                true
             );
-        }
-
+        },
     },
 
     update: {
-
-        read({percent}, types) {
-
+        read({ percent }, types) {
             if (!types.has('scroll')) {
                 percent = false;
             }
@@ -57,50 +54,28 @@ export default {
 
             return {
                 percent,
-                style: prev === percent ? false : this.getCss(percent)
+                style: prev === percent ? false : this.getCss(percent),
             };
         },
 
-        write({style}) {
-
+        write({ style }) {
             if (!this.matchMedia) {
                 this.reset();
                 return;
             }
 
             style && css(this.$el, style);
-
         },
 
-        events: ['scroll', 'resize']
-    }
-
+        events: ['scroll', 'resize'],
+    },
 };
 
-const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
-function parseCalc(calc, el) {
-    let match;
-    let result = 0;
-    calc = calc.toString().replace(/\s/g, '');
-    calcRe.lastIndex = 0;
-    while ((match = calcRe.exec(calc)) !== null) {
-        result += toPx(match[0], 'height', el, true);
-    }
-
-    return result;
-}
-
 function ease(percent, easing) {
-    return easing >= 0
-        ? Math.pow(percent, easing + 1)
-        : 1 - Math.pow(1 - percent, -easing + 1);
+    return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
 }
 
 // SVG elements do not inherit from HTMLElement
 function getOffsetElement(el) {
-    return el
-        ? 'offsetTop' in el
-            ? el
-            : getOffsetElement(parent(el))
-        : document.documentElement;
+    return el ? ('offsetTop' in el ? el : getOffsetElement(parent(el))) : document.documentElement;
 }

package/src/js/components/slider-parallax.js

@@ -1,24 +1,20 @@
 import Parallax from '../mixin/parallax';
-import {css, endsWith, fastdom, noop, query, Transition} from 'uikit-util';
+import { css, endsWith, fastdom, noop, query, Transition } from 'uikit-util';
 
 export default {
-
     mixins: [Parallax],
 
     data: {
-        selItem: '!li'
+        selItem: '!li',
     },
 
     computed: {
-
-        item({selItem}, $el) {
+        item({ selItem }, $el) {
             return query(selItem, $el);
-        }
-
+        },
     },
 
     events: [
-
         {
             name: 'itemin itemout',
 
@@ -28,18 +24,16 @@ export default {
                 return this.item;
             },
 
-            handler({type, detail: {percent, duration, timing, dir}}) {
-
+            handler({ type, detail: { percent, duration, timing, dir } }) {
                 fastdom.read(() => {
                     const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
-                    const propsTo = this.getCss(isIn(type) ? .5 : dir > 0 ? 1 : 0);
+                    const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
                     fastdom.write(() => {
                         css(this.$el, propsFrom);
                         Transition.start(this.$el, propsTo, duration, timing).catch(noop);
                     });
                 });
-
-            }
+            },
         },
 
         {
@@ -53,8 +47,7 @@ export default {
 
             handler() {
                 Transition.cancel(this.$el);
-            }
-
+            },
         },
 
         {
@@ -66,16 +59,14 @@ export default {
                 return this.item;
             },
 
-            handler({type, detail: {percent, dir}}) {
+            handler({ type, detail: { percent, dir } }) {
                 fastdom.read(() => {
                     const props = this.getCss(getCurrentPercent(type, dir, percent));
                     fastdom.write(() => css(this.$el, props));
                 });
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };
 
 function isIn(type) {
@@ -83,8 +74,7 @@ function isIn(type) {
 }
 
 function getCurrentPercent(type, dir, percent) {
-
     percent /= 2;
 
-    return isIn(type) ^ dir < 0 ? percent : 1 - percent;
+    return isIn(type) ^ (dir < 0) ? percent : 1 - percent;
 }

package/src/js/components/slider.js

@@ -1,16 +1,31 @@
 import Class from '../mixin/class';
-import Slider, {speedUp} from '../mixin/slider';
+import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
-import Transitioner, {getMax, getWidth} from './internal/slider-transitioner';
-import {$, addClass, children, css, data, dimensions, findIndex, includes, isEmpty, last, sortBy, toFloat, toggleClass, toNumber} from 'uikit-util';
+import SliderPreload from './internal/slider-preload';
+import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
+import {
+    $,
+    addClass,
+    children,
+    css,
+    data,
+    dimensions,
+    findIndex,
+    includes,
+    isEmpty,
+    last,
+    sortBy,
+    toFloat,
+    toggleClass,
+    toNumber,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
-        sets: Boolean
+        sets: Boolean,
     },
 
     data: {
@@ -20,22 +35,24 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
-        Transitioner
+        Transitioner,
     },
 
     computed: {
-
         avgWidth() {
             return getWidth(this.list) / this.length;
         },
 
-        finite({finite}) {
-            return finite || Math.ceil(getWidth(this.list)) < dimensions(this.list).width + getMaxElWidth(this.list) + this.center;
+        finite({ finite }) {
+            return (
+                finite ||
+                Math.ceil(getWidth(this.list)) <
+                    Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
+            );
         },
 
         maxIndex() {
-
-            if (!this.finite || this.center && !this.sets) {
+            if (!this.finite || (this.center && !this.sets)) {
                 return this.length - 1;
             }
 
@@ -45,21 +62,18 @@ export default {
 
             let lft = 0;
             const max = getMax(this.list);
-            const index = findIndex(this.slides, el => {
-
+            const index = findIndex(this.slides, (el) => {
                 if (lft >= max) {
                     return true;
                 }
 
                 lft += dimensions(el).width;
-
             });
 
             return ~index ? index : this.length - 1;
         },
 
-        sets({sets}) {
-
+        sets({ sets }) {
             if (!sets) {
                 return;
             }
@@ -71,47 +85,44 @@ export default {
             let slideLeft = 0;
 
             sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-
                 const slideWidth = dimensions(slide).width;
                 const slideRight = slideLeft + slideWidth;
 
                 if (slideRight > left) {
-
                     if (!this.center && i > this.maxIndex) {
                         i = this.maxIndex;
                     }
 
                     if (!includes(sets, i)) {
-
                         const cmp = this.slides[i + 1];
-                        if (this.center && cmp && slideWidth < leftCenter - dimensions(cmp).width / 2) {
+                        if (
+                            this.center &&
+                            cmp &&
+                            slideWidth < leftCenter - dimensions(cmp).width / 2
+                        ) {
                             leftCenter -= slideWidth;
                         } else {
                             leftCenter = width;
                             sets.push(i);
                             left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
                         }
-
                     }
                 }
 
                 slideLeft += slideWidth;
 
                 return sets;
-
             }, []);
 
             return !isEmpty(sets) && sets;
-
         },
 
         transitionOptions() {
             return {
                 center: this.center,
-                list: this.list
+                list: this.list,
             };
-        }
-
+        },
     },
 
     connected() {
@@ -119,14 +130,16 @@ export default {
     },
 
     update: {
-
         write() {
-            this.navItems.forEach(el => {
+            for (const el of this.navItems) {
                 const index = toNumber(data(el, this.attrItem));
                 if (index !== false) {
-                    el.hidden = !this.maxIndex || index > this.maxIndex || this.sets && !includes(this.sets, index);
+                    el.hidden =
+                        !this.maxIndex ||
+                        index > this.maxIndex ||
+                        (this.sets && !includes(this.sets, index));
                 }
-            });
+            }
 
             if (this.length && !this.dragging && !this.stack.length) {
                 this.reorder();
@@ -134,33 +147,40 @@ export default {
             }
 
             const actives = this._getTransitioner(this.index).getActives();
-            this.slides.forEach(slide => toggleClass(slide, this.clsActive, includes(actives, slide)));
-
-            if (this.clsActivated && (!this.sets || includes(this.sets, toFloat(this.index)))) {
-                this.slides.forEach(slide => toggleClass(slide, this.clsActivated || '', includes(actives, slide)));
+            const activeClasses = [
+                this.clsActive,
+                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
+                    '',
+            ];
+            for (const slide of this.slides) {
+                toggleClass(slide, activeClasses, includes(actives, slide));
             }
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: {
-
         beforeitemshow(e) {
-
-            if (!this.dragging && this.sets && this.stack.length < 2 && !includes(this.sets, this.index)) {
+            if (
+                !this.dragging &&
+                this.sets &&
+                this.stack.length < 2 &&
+                !includes(this.sets, this.index)
+            ) {
                 this.index = this.getValidIndex();
             }
 
             const diff = Math.abs(
-                this.index
-                - this.prevIndex
-                + (this.dir > 0 && this.index < this.prevIndex || this.dir < 0 && this.index > this.prevIndex ? (this.maxIndex + 1) * this.dir : 0)
+                this.index -
+                    this.prevIndex +
+                    ((this.dir > 0 && this.index < this.prevIndex) ||
+                    (this.dir < 0 && this.index > this.prevIndex)
+                        ? (this.maxIndex + 1) * this.dir
+                        : 0)
             );
 
             if (!this.dragging && diff > 1) {
-
                 for (let i = 0; i < diff; i++) {
                     this.stack.splice(1, 0, this.dir > 0 ? 'next' : 'previous');
                 }
@@ -169,25 +189,24 @@ export default {
                 return;
             }
 
-            const index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
-            this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions(this.slides[index]).width / this.avgWidth);
+            const index =
+                this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
+            this.duration =
+                speedUp(this.avgWidth / this.velocity) *
+                (dimensions(this.slides[index]).width / this.avgWidth);
 
             this.reorder();
-
         },
 
         itemshow() {
             if (~this.prevIndex) {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
-        }
-
+        },
     },
 
     methods: {
-
         reorder() {
-
             if (this.finite) {
                 css(this.slides, 'order', '');
                 return;
@@ -196,11 +215,10 @@ export default {
             const index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index;
 
             this.slides.forEach((slide, i) =>
-                css(slide, 'order', this.dir > 0 && i < index
-                    ? 1
-                    : this.dir < 0 && i >= this.index
-                        ? -1
-                        : ''
+                css(
+                    slide,
+                    'order',
+                    this.dir > 0 && i < index ? 1 : this.dir < 0 && i >= this.index ? -1 : ''
                 )
             );
 
@@ -219,11 +237,9 @@ export default {
                 css(slide, 'order', slideIndex > index ? -2 : -1);
                 width -= dimensions(slide).width;
             }
-
         },
 
         getValidIndex(index = this.index, prevIndex = this.prevIndex) {
-
             index = this.getIndex(index, prevIndex);
 
             if (!this.sets) {
@@ -233,23 +249,38 @@ export default {
             let prev;
 
             do {
-
                 if (includes(this.sets, index)) {
                     return index;
                 }
 
                 prev = index;
                 index = this.getIndex(index + this.dir, prevIndex);
-
             } while (index !== prev);
 
             return index;
-        }
-
-    }
+        },
 
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
+    },
 };
 
 function getMaxElWidth(list) {
-    return Math.max(0, ...children(list).map(el => dimensions(el).width));
+    return Math.max(0, ...children(list).map((el) => dimensions(el).width));
 }

package/src/js/components/slideshow-parallax.js

@@ -1 +1 @@
-export {default} from './slider-parallax';
+export { default } from './slider-parallax';