uikit 3.11.1 → 3.11.2-dev.03e47c2ff

package/src/js/components/slideshow.js

@@ -2,16 +2,16 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
-import {boxModelAdjust, css} from 'uikit-util';
+import SliderPreload from './internal/slider-preload';
+import { boxModelAdjust, css } from 'uikit-util';
 
 export default {
-
-    mixins: [Class, Slideshow, SliderReactive],
+    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
     props: {
         ratio: String,
         minHeight: Number,
-        maxHeight: Number
+        maxHeight: Number,
     },
 
     data: {
@@ -21,20 +21,18 @@ export default {
         selList: '.uk-slideshow-items',
         attrItem: 'uk-slideshow-item',
         selNav: '.uk-slideshow-nav',
-        Animations
+        Animations,
     },
 
     update: {
-
         read() {
-
             if (!this.list) {
                 return false;
             }
 
             let [width, height] = this.ratio.split(':').map(Number);
 
-            height = height * this.list.offsetWidth / width || 0;
+            height = (height * this.list.offsetWidth) / width || 0;
 
             if (this.minHeight) {
                 height = Math.max(this.minHeight, height);
@@ -44,15 +42,19 @@ export default {
                 height = Math.min(this.maxHeight, height);
             }
 
-            return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
+            return { height: height - boxModelAdjust(this.list, 'height', 'content-box') };
         },
 
-        write({height}) {
+        write({ height }) {
             height > 0 && css(this.list, 'minHeight', height);
         },
 
-        events: ['resize']
-
-    }
+        events: ['resize'],
+    },
 
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };

package/src/js/components/sortable.js

@@ -1,9 +1,40 @@
 import Animate from '../mixin/animate';
 import Class from '../mixin/class';
-import {$$, addClass, append, assign, before, children, css, findIndex, getEventPos, getViewport, hasTouch, height, index, isEmpty, isInput, off, offset, on, parent, pointerDown, pointerMove, pointerUp, pointInRect, remove, removeClass, scrollParents, scrollTop, toggleClass, Transition, trigger, within} from 'uikit-util';
+import {
+    $$,
+    addClass,
+    append,
+    assign,
+    before,
+    children,
+    css,
+    findIndex,
+    getEventPos,
+    getViewport,
+    hasTouch,
+    height,
+    index,
+    isEmpty,
+    isInput,
+    off,
+    offset,
+    on,
+    parent,
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    pointInRect,
+    remove,
+    removeClass,
+    scrollParents,
+    scrollTop,
+    toggleClass,
+    Transition,
+    trigger,
+    within,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Class, Animate],
 
     props: {
@@ -17,7 +48,7 @@ export default {
         clsNoDrag: String,
         clsEmpty: String,
         clsCustom: String,
-        handle: String
+        handle: String,
     },
 
     data: {
@@ -32,29 +63,26 @@ export default {
         clsEmpty: 'uk-sortable-empty',
         clsCustom: '',
         handle: false,
-        pos: {}
+        pos: {},
     },
 
     created() {
-        ['init', 'start', 'move', 'end'].forEach(key => {
+        for (const key of ['init', 'start', 'move', 'end']) {
             const fn = this[key];
-            this[key] = e => {
+            this[key] = (e) => {
                 assign(this.pos, getEventPos(e));
                 fn(e);
             };
-        });
+        }
     },
 
     events: {
-
         name: pointerDown,
         passive: false,
-        handler: 'init'
-
+        handler: 'init',
     },
 
     computed: {
-
         target() {
             return (this.$el.tBodies || [this.$el])[0];
         },
@@ -64,7 +92,6 @@ export default {
         },
 
         isEmpty: {
-
             get() {
                 return isEmpty(this.items);
             },
@@ -73,40 +100,38 @@ export default {
                 toggleClass(this.target, this.clsEmpty, empty);
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         handles: {
-
-            get({handle}, el) {
+            get({ handle }, el) {
                 return handle ? $$(handle, el) : this.items;
             },
 
             watch(handles, prev) {
-                css(prev, {touchAction: '', userSelect: ''});
-                css(handles, {touchAction: hasTouch ? 'none' : '', userSelect: 'none'}); // touchAction set to 'none' causes a performance drop in Chrome 80
+                css(prev, { touchAction: '', userSelect: '' });
+                css(handles, { touchAction: hasTouch ? 'none' : '', userSelect: 'none' }); // touchAction set to 'none' causes a performance drop in Chrome 80
             },
 
-            immediate: true
-
-        }
-
+            immediate: true,
+        },
     },
 
     update: {
-
         write(data) {
-
             if (!this.drag || !parent(this.placeholder)) {
                 return;
             }
 
-            const {pos: {x, y}, origin: {offsetTop, offsetLeft}, placeholder} = this;
+            const {
+                pos: { x, y },
+                origin: { offsetTop, offsetLeft },
+                placeholder,
+            } = this;
 
             css(this.drag, {
                 top: y - offsetTop,
-                left: x - offsetLeft
+                left: x - offsetLeft,
             });
 
             const sortable = this.getSortable(document.elementFromPoint(x, y));
@@ -115,20 +140,27 @@ export default {
                 return;
             }
 
-            const {items} = sortable;
+            const { items } = sortable;
 
             if (items.some(Transition.inProgress)) {
                 return;
             }
 
-            const target = findTarget(items, {x, y});
+            const target = findTarget(items, { x, y });
 
             if (items.length && (!target || target === placeholder)) {
                 return;
             }
 
             const previous = this.getSortable(placeholder);
-            const insertTarget = findInsertTarget(sortable.target, target, placeholder, x, y, sortable === previous && data.moved !== target);
+            const insertTarget = findInsertTarget(
+                sortable.target,
+                target,
+                placeholder,
+                x,
+                y,
+                sortable === previous && data.moved !== target
+            );
 
             if (insertTarget === false) {
                 return;
@@ -150,23 +182,21 @@ export default {
             this.touched.add(sortable);
         },
 
-        events: ['move']
-
+        events: ['move'],
     },
 
     methods: {
-
         init(e) {
-
-            const {target, button, defaultPrevented} = e;
-            const [placeholder] = this.items.filter(el => within(target, el));
-
-            if (!placeholder
-                || defaultPrevented
-                || button > 0
-                || isInput(target)
-                || within(target, `.${this.clsNoDrag}`)
-                || this.handle && !within(target, this.handle)
+            const { target, button, defaultPrevented } = e;
+            const [placeholder] = this.items.filter((el) => within(target, el));
+
+            if (
+                !placeholder ||
+                defaultPrevented ||
+                button > 0 ||
+                isInput(target) ||
+                within(target, `.${this.clsNoDrag}`) ||
+                (this.handle && !within(target, this.handle))
             ) {
                 return;
             }
@@ -175,7 +205,7 @@ export default {
 
             this.touched = new Set([this]);
             this.placeholder = placeholder;
-            this.origin = assign({target, index: index(placeholder)}, this.pos);
+            this.origin = { target, index: index(placeholder), ...this.pos };
 
             on(document, pointerMove, this.move);
             on(document, pointerUp, this.end);
@@ -183,14 +213,12 @@ export default {
             if (!this.threshold) {
                 this.start(e);
             }
-
         },
 
         start(e) {
-
             this.drag = appendDrag(this.$container, this.placeholder);
-            const {left, top} = this.placeholder.getBoundingClientRect();
-            assign(this.origin, {offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top});
+            const { left, top } = this.placeholder.getBoundingClientRect();
+            assign(this.origin, { offsetLeft: this.pos.x - left, offsetTop: this.pos.y - top });
 
             addClass(this.drag, this.clsDrag, this.clsCustom);
             addClass(this.placeholder, this.clsPlaceholder);
@@ -205,20 +233,19 @@ export default {
         },
 
         move(e) {
-
             if (this.drag) {
                 this.$emit('move');
-            } else if (Math.abs(this.pos.x - this.origin.x) > this.threshold || Math.abs(this.pos.y - this.origin.y) > this.threshold) {
+            } else if (
+                Math.abs(this.pos.x - this.origin.x) > this.threshold ||
+                Math.abs(this.pos.y - this.origin.y) > this.threshold
+            ) {
                 this.start(e);
             }
-
         },
 
         end() {
-
             off(document, pointerMove, this.move);
             off(document, pointerUp, this.end);
-            off(window, 'scroll', this.scroll);
 
             if (!this.drag) {
                 return;
@@ -242,87 +269,77 @@ export default {
             remove(this.drag);
             this.drag = null;
 
-            this.touched.forEach(({clsPlaceholder, clsItem}) =>
-                this.touched.forEach(sortable =>
-                    removeClass(sortable.items, clsPlaceholder, clsItem)
-                )
-            );
+            for (const { clsPlaceholder, clsItem } of this.touched) {
+                for (const sortable of this.touched) {
+                    removeClass(sortable.items, clsPlaceholder, clsItem);
+                }
+            }
             this.touched = null;
             removeClass(document.documentElement, this.clsDragState);
-
         },
 
         insert(element, target) {
-
             addClass(this.items, this.clsItem);
 
-            const insert = () => target
-                ? before(target, element)
-                : append(this.target, element);
+            const insert = () => (target ? before(target, element) : append(this.target, element));
 
             this.animate(insert);
-
         },
 
         remove(element) {
-
             if (!within(element, this.target)) {
                 return;
             }
 
             this.animate(() => remove(element));
-
         },
 
         getSortable(element) {
             do {
                 const sortable = this.$getComponent(element, 'sortable');
 
-                if (sortable && (sortable === this || this.group !== false && sortable.group === this.group)) {
+                if (
+                    sortable &&
+                    (sortable === this || (this.group !== false && sortable.group === this.group))
+                ) {
                     return sortable;
                 }
             } while ((element = parent(element)));
-        }
-
-    }
-
+        },
+    },
 };
 
 let trackTimer;
 function trackScroll(pos) {
-
     let last = Date.now();
     trackTimer = setInterval(() => {
+        let { x, y } = pos;
+        y += scrollTop(window);
 
-        let {x, y} = pos;
-        y += window.pageYOffset;
-
-        const dist = (Date.now() - last) * .3;
+        const dist = (Date.now() - last) * 0.3;
         last = Date.now();
 
-        scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(scrollEl => {
-
-            let {scrollTop: scroll, scrollHeight} = scrollEl;
-
-            const {top, bottom, height} = offset(getViewport(scrollEl));
-
-            if (top < y && top + 35 > y) {
-                scroll -= dist;
-            } else if (bottom > y && bottom - 35 < y) {
-                scroll += dist;
-            } else {
-                return;
-            }
+        scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/)
+            .reverse()
+            .some((scrollEl) => {
+                let { scrollTop: scroll, scrollHeight } = scrollEl;
 
-            if (scroll > 0 && scroll < scrollHeight - height) {
-                scrollTop(scrollEl, scroll);
-                return true;
-            }
+                const { top, bottom, height } = offset(getViewport(scrollEl));
 
-        });
+                if (top < y && top + 35 > y) {
+                    scroll -= dist;
+                } else if (bottom > y && bottom - 35 < y) {
+                    scroll += dist;
+                } else {
+                    return;
+                }
 
+                if (scroll > 0 && scroll < scrollHeight - height) {
+                    scrollTop(scrollEl, scroll);
+                    return true;
+                }
+            });
     }, 15);
-
 }
 
 function untrackScroll() {
@@ -330,14 +347,18 @@ function untrackScroll() {
 }
 
 function appendDrag(container, element) {
-    const clone = append(container, element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2'));
+    const clone = append(
+        container,
+        element.outerHTML.replace(/(^<)(?:li|tr)|(?:li|tr)(\/>$)/g, '$1div$2')
+    );
 
     css(clone, 'margin', '0', 'important');
-    css(clone, assign({
+    css(clone, {
         boxSizing: 'border-box',
         width: element.offsetWidth,
-        height: element.offsetHeight
-    }, css(element, ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'])));
+        height: element.offsetHeight,
+        padding: css(element, 'padding'),
+    });
 
     height(clone.firstElementChild, height(element.firstElementChild));
 
@@ -345,22 +366,18 @@ function appendDrag(container, element) {
 }
 
 function findTarget(items, point) {
-    return items[findIndex(items, item => pointInRect(point, item.getBoundingClientRect()))];
+    return items[findIndex(items, (item) => pointInRect(point, item.getBoundingClientRect()))];
 }
 
 function findInsertTarget(list, target, placeholder, x, y, sameList) {
-
     if (!children(list).length) {
         return;
     }
 
     const rect = target.getBoundingClientRect();
     if (!sameList) {
-
         if (!isHorizontal(list, placeholder)) {
-            return y < rect.top + rect.height / 2
-                ? target
-                : target.nextElementSibling;
+            return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
         }
 
         return target;
@@ -377,10 +394,12 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
     const startProp = sameRow ? 'left' : 'top';
     const endProp = sameRow ? 'right' : 'bottom';
 
-    const diff = placeholderRect[lengthProp] < rect[lengthProp] ? rect[lengthProp] - placeholderRect[lengthProp] : 0;
+    const diff =
+        placeholderRect[lengthProp] < rect[lengthProp]
+            ? rect[lengthProp] - placeholderRect[lengthProp]
+            : 0;
 
     if (placeholderRect[startProp] < rect[startProp]) {
-
         if (diff && pointerPos < rect[startProp] + diff) {
             return false;
         }
@@ -396,7 +415,6 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
 }
 
 function isHorizontal(list, placeholder) {
-
     const single = children(list).length === 1;
 
     if (single) {
@@ -406,7 +424,7 @@ function isHorizontal(list, placeholder) {
     const items = children(list);
     const isHorizontal = items.some((el, i) => {
         const rectA = el.getBoundingClientRect();
-        return items.slice(i + 1).some(el => {
+        return items.slice(i + 1).some((el) => {
             const rectB = el.getBoundingClientRect();
             return !linesIntersect([rectA.left, rectA.right], [rectB.left, rectB.right]);
         });

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