uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/js/core/toggle.js

@@ -1,12 +1,29 @@
+import Lazyload from '../mixin/lazyload';
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
-import {attr, closest, hasClass, includes, isBoolean, isFocusable, isTouch, matches, once, pointerDown, pointerEnter, pointerLeave, queryAll, trigger, within} from 'uikit-util';
+import {
+    attr,
+    closest,
+    hasClass,
+    includes,
+    isBoolean,
+    isFocusable,
+    isTag,
+    isTouch,
+    matches,
+    once,
+    pointerDown,
+    pointerEnter,
+    pointerLeave,
+    queryAll,
+    trigger,
+    within,
+} from 'uikit-util';
 
 const KEY_SPACE = 32;
 
 export default {
-
-    mixins: [Media, Togglable],
+    mixins: [Lazyload, Media, Togglable],
 
     args: 'target',
 
@@ -14,43 +31,39 @@ export default {
         href: String,
         target: null,
         mode: 'list',
-        queued: Boolean
+        queued: Boolean,
     },
 
     data: {
         href: false,
         target: false,
         mode: 'click',
-        queued: true
+        queued: true,
     },
 
     connected() {
         if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
             attr(this.$el, 'tabindex', '0');
         }
+        this.lazyload(this.$el, this.target);
     },
 
     computed: {
-
         target: {
-
-            get({href, target}, $el) {
+            get({ href, target }, $el) {
                 target = queryAll(target || href, $el);
-                return target.length && target || [$el];
+                return (target.length && target) || [$el];
             },
 
             watch() {
                 this.updateAria();
             },
 
-            immediate: true
-
-        }
-
+            immediate: true,
+        },
     },
 
     events: [
-
         {
             name: pointerDown,
 
@@ -59,7 +72,6 @@ export default {
             },
 
             handler(e) {
-
                 if (!isTouch(e) || this._showState) {
                     return;
                 }
@@ -67,17 +79,22 @@ export default {
                 // Clicking a button does not give it focus on all browsers and platforms
                 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
                 trigger(this.$el, 'focus');
-                once(document, pointerDown, () => trigger(this.$el, 'blur'), true, e => !within(e.target, this.$el));
+                once(
+                    document,
+                    pointerDown,
+                    () => trigger(this.$el, 'blur'),
+                    true,
+                    (e) => !within(e.target, this.$el)
+                );
 
                 // Prevent initial click to prevent double toggle through focus + click
                 if (includes(this.mode, 'click')) {
                     this._preventClick = true;
                 }
-            }
+            },
         },
 
         {
-
             name: `${pointerEnter} ${pointerLeave} focus blur`,
 
             filter() {
@@ -93,16 +110,16 @@ export default {
                 const expanded = attr(this.$el, 'aria-expanded');
 
                 // Skip hide if still hovered or focused
-                if (!show && (
-                    e.type === pointerLeave && matches(this.$el, ':focus')
-                    || e.type === 'blur' && matches(this.$el, ':hover')
-                )) {
+                if (
+                    !show &&
+                    ((e.type === pointerLeave && matches(this.$el, ':focus')) ||
+                        (e.type === 'blur' && matches(this.$el, ':hover')))
+                ) {
                     return;
                 }
 
                 // Skip if state does not change e.g. hover + focus received
                 if (this._showState && show === (expanded !== this._showState)) {
-
                     // Ensure reset if state has changed through click
                     if (!show) {
                         this._showState = null;
@@ -113,15 +130,14 @@ export default {
                 this._showState = show ? expanded : null;
 
                 this.toggle(`toggle${show ? 'show' : 'hide'}`);
-            }
-
+            },
         },
 
         {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
             },
 
             handler(e) {
@@ -129,11 +145,10 @@ export default {
                     e.preventDefault();
                     this.$el.click();
                 }
-            }
+            },
         },
 
         {
-
             name: 'click',
 
             filter() {
@@ -141,28 +156,25 @@ export default {
             },
 
             handler(e) {
-
                 if (this._preventClick) {
-                    return this._preventClick = null;
+                    return (this._preventClick = null);
                 }
 
                 let link;
-                if (closest(e.target, 'a[href="#"], a[href=""]')
-                    || (link = closest(e.target, 'a[href]')) && (
-                        attr(this.$el, 'aria-expanded') !== 'true'
-                        || link.hash && matches(this.target, link.hash)
-                    )
+                if (
+                    closest(e.target, 'a[href="#"], a[href=""]') ||
+                    ((link = closest(e.target, 'a[href]')) &&
+                        (attr(this.$el, 'aria-expanded') !== 'true' ||
+                            (link.hash && matches(this.target, link.hash))))
                 ) {
                     e.preventDefault();
                 }
 
                 this.toggle();
-            }
-
+            },
         },
 
         {
-
             name: 'toggled',
 
             self: true,
@@ -175,36 +187,27 @@ export default {
                 if (e.target === this.target[0]) {
                     this.updateAria(toggled);
                 }
-            }
-        }
-
+            },
+        },
     ],
 
     update: {
-
         read() {
-            return includes(this.mode, 'media') && this.media
-                ? {match: this.matchMedia}
-                : false;
+            return includes(this.mode, 'media') && this.media ? { match: this.matchMedia } : false;
         },
 
-        write({match}) {
-
+        write({ match }) {
             const toggled = this.isToggled(this.target);
             if (match ? !toggled : toggled) {
                 this.toggle();
             }
-
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     methods: {
-
-        toggle(type) {
-
+        async toggle(type) {
             if (!trigger(this.target, type || 'toggle', [this])) {
                 return;
             }
@@ -213,23 +216,22 @@ export default {
                 return this.toggleElement(this.target);
             }
 
-            const leaving = this.target.filter(el => hasClass(el, this.clsLeave));
+            const leaving = this.target.filter((el) => hasClass(el, this.clsLeave));
 
             if (leaving.length) {
-                this.target.forEach(el => {
+                for (const el of this.target) {
                     const isLeaving = includes(leaving, el);
                     this.toggleElement(el, isLeaving, isLeaving);
-                });
+                }
                 return;
             }
 
             const toggled = this.target.filter(this.isToggled);
-            this.toggleElement(toggled, false).then(() =>
-                this.toggleElement(this.target.filter(el =>
-                    !includes(toggled, el)
-                ), true)
+            await this.toggleElement(toggled, false);
+            await this.toggleElement(
+                this.target.filter((el) => !includes(toggled, el)),
+                true
             );
-
         },
 
         updateAria(toggled) {
@@ -237,12 +239,11 @@ export default {
                 return;
             }
 
-            attr(this.$el, 'aria-expanded', isBoolean(toggled)
-                ? toggled
-                : this.isToggled(this.target)
+            attr(
+                this.$el,
+                'aria-expanded',
+                isBoolean(toggled) ? toggled : this.isToggled(this.target)
             );
-        }
-
-    }
-
+        },
+    },
 };

package/src/js/core/video.js

@@ -1,29 +1,35 @@
-import {css, hasAttr, isInView, isVideo, isVisible, mute, pause, play} from 'uikit-util';
+import {
+    css,
+    hasAttr,
+    isInView,
+    isVideo,
+    isVisible,
+    mute,
+    observeIntersection,
+    pause,
+    play,
+} from 'uikit-util';
 
 export default {
-
     args: 'autoplay',
 
     props: {
         automute: Boolean,
-        autoplay: Boolean
+        autoplay: Boolean,
     },
 
     data: {
         automute: false,
-        autoplay: true
+        autoplay: true,
     },
 
     computed: {
-
-        inView({autoplay}) {
+        inView({ autoplay }) {
             return autoplay === 'inview';
-        }
-
+        },
     },
 
     connected() {
-
         if (this.inView && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -32,34 +38,29 @@ export default {
             mute(this.$el);
         }
 
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
     },
 
     update: {
-
         read() {
-
             if (!isVideo(this.$el)) {
                 return false;
             }
 
             return {
                 visible: isVisible(this.$el) && css(this.$el, 'visibility') !== 'hidden',
-                inView: this.inView && isInView(this.$el)
+                inView: this.inView && isInView(this.$el),
             };
         },
 
-        write({visible, inView}) {
-
-            if (!visible || this.inView && !inView) {
+        write({ visible, inView }) {
+            if (!visible || (this.inView && !inView)) {
                 pause(this.$el);
-            } else if (this.autoplay === true || this.inView && inView) {
+            } else if (this.autoplay === true || (this.inView && inView)) {
                 play(this.$el);
             }
-
         },
 
-        events: ['resize', 'scroll']
-
-    }
-
+        events: ['resize', 'scroll'],
+    },
 };

package/src/js/mixin/animate.js

@@ -1,38 +1,37 @@
 import fade from './internal/animate-fade';
 import slide from './internal/animate-slide';
-import {noop, Promise} from 'uikit-util';
+import { noop } from 'uikit-util';
 
 export default {
-
     props: {
         duration: Number,
-        animation: Boolean
+        animation: Boolean,
     },
 
     data: {
         duration: 150,
-        animation: 'slide'
+        animation: 'slide',
     },
 
     methods: {
-
         animate(action, target = this.$el) {
-
             const name = this.animation;
-            const animationFn = name === 'fade'
-                ? fade
-                : name === 'delayed-fade'
+            const animationFn =
+                name === 'fade'
+                    ? fade
+                    : name === 'delayed-fade'
                     ? (...args) => fade(...args, 40)
                     : name
-                        ? slide
-                        : () => {
-                            action();
-                            return Promise.resolve();
-                        };
-
-            return animationFn(action, target, this.duration)
-                .then(() => this.$update(target, 'resize'), noop);
-        }
-
-    }
+                    ? slide
+                    : () => {
+                          action();
+                          return Promise.resolve();
+                      };
+
+            return animationFn(action, target, this.duration).then(
+                () => this.$update(target, 'resize'),
+                noop
+            );
+        },
+    },
 };

package/src/js/mixin/class.js

@@ -1,9 +1,7 @@
-import {addClass, hasClass} from 'uikit-util';
+import { addClass, hasClass } from 'uikit-util';
 
 export default {
-
     connected() {
         !hasClass(this.$el, this.$name) && addClass(this.$el, this.$name);
-    }
-
+    },
 };

package/src/js/mixin/container.js

@@ -1,21 +1,17 @@
-import {$} from 'uikit-util';
+import { $ } from 'uikit-util';
 
 export default {
-
     props: {
-        container: Boolean
+        container: Boolean,
     },
 
     data: {
-        container: true
+        container: true,
     },
 
     computed: {
-
-        container({container}) {
-            return container === true && this.$container || container && $(container);
-        }
-
-    }
-
+        container({ container }) {
+            return (container === true && this.$container) || (container && $(container));
+        },
+    },
 };

package/src/js/mixin/internal/animate-fade.js

@@ -1,43 +1,58 @@
-import {getRows} from '../../core/margin';
-import {addClass, children, css, hasClass, height, isInView, once, Promise, removeClass, sortBy, toNumber, Transition} from 'uikit-util';
+import { getRows } from '../../core/margin';
+import {
+    addClass,
+    children,
+    css,
+    hasClass,
+    height,
+    isInView,
+    once,
+    removeClass,
+    sortBy,
+    toNumber,
+    Transition,
+} from 'uikit-util';
 
 const clsLeave = 'uk-transition-leave';
 const clsEnter = 'uk-transition-enter';
 
 export default function fade(action, target, duration, stagger = 0) {
-
     const index = transitionIndex(target, true);
-    const propsIn = {opacity: 1};
-    const propsOut = {opacity: 0};
+    const propsIn = { opacity: 1 };
+    const propsOut = { opacity: 0 };
 
-    const wrapIndexFn = fn =>
-        () => index === transitionIndex(target) ? fn() : Promise.reject();
+    const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
 
     const leaveFn = wrapIndexFn(() => {
-
         addClass(target, clsLeave);
 
-        return Promise.all(getTransitionNodes(target).map((child, i) =>
-            new Promise(resolve =>
-                setTimeout(() => Transition.start(child, propsOut, duration / 2, 'ease').then(resolve), i * stagger)
+        return Promise.all(
+            getTransitionNodes(target).map(
+                (child, i) =>
+                    new Promise((resolve) =>
+                        setTimeout(
+                            () =>
+                                Transition.start(child, propsOut, duration / 2, 'ease').then(
+                                    resolve
+                                ),
+                            i * stagger
+                        )
+                    )
             )
-        )).then(() => removeClass(target, clsLeave));
-
+        ).then(() => removeClass(target, clsLeave));
     });
 
     const enterFn = wrapIndexFn(() => {
-
         const oldHeight = height(target);
 
         addClass(target, clsEnter);
         action();
 
-        css(children(target), {opacity: 0});
+        css(children(target), { opacity: 0 });
 
         // Ensure UIkit updates have propagated
-        return new Promise(resolve =>
+        return new Promise((resolve) =>
             requestAnimationFrame(() => {
-
                 const nodes = children(target);
                 const newHeight = height(target);
 
@@ -48,21 +63,35 @@ export default function fade(action, target, duration, stagger = 0) {
                 const transitionNodes = getTransitionNodes(target);
                 css(nodes, propsOut);
 
-                const transitions = transitionNodes.map((child, i) =>
-                    new Promise(resolve =>
-                        setTimeout(() => Transition.start(child, propsIn, duration / 2, 'ease').then(resolve), i * stagger)
-                    )
+                const transitions = transitionNodes.map(
+                    (child, i) =>
+                        new Promise((resolve) =>
+                            setTimeout(
+                                () =>
+                                    Transition.start(child, propsIn, duration / 2, 'ease').then(
+                                        resolve
+                                    ),
+                                i * stagger
+                            )
+                        )
                 );
 
                 if (oldHeight !== newHeight) {
-                    transitions.push(Transition.start(target, {height: newHeight}, duration / 2 + transitionNodes.length * stagger, 'ease'));
+                    transitions.push(
+                        Transition.start(
+                            target,
+                            { height: newHeight },
+                            duration / 2 + transitionNodes.length * stagger,
+                            'ease'
+                        )
+                    );
                 }
 
                 Promise.all(transitions).then(() => {
                     removeClass(target, clsEnter);
                     if (index === transitionIndex(target)) {
-                        css(target, {height: '', alignContent: ''});
-                        css(nodes, {opacity: ''});
+                        css(target, { height: '', alignContent: '' });
+                        css(nodes, { opacity: '' });
                         delete target.dataset.transition;
                     }
                     resolve();
@@ -74,8 +103,8 @@ export default function fade(action, target, duration, stagger = 0) {
     return hasClass(target, clsLeave)
         ? waitTransitionend(target).then(enterFn)
         : hasClass(target, clsEnter)
-            ? waitTransitionend(target).then(leaveFn).then(enterFn)
-            : leaveFn().then(enterFn);
+        ? waitTransitionend(target).then(leaveFn).then(enterFn)
+        : leaveFn().then(enterFn);
 }
 
 function transitionIndex(target, next) {
@@ -87,11 +116,25 @@ function transitionIndex(target, next) {
 }
 
 function waitTransitionend(target) {
-    return Promise.all(children(target).filter(Transition.inProgress).map(el =>
-        new Promise(resolve => once(el, 'transitionend transitioncanceled', resolve))
-    ));
+    return Promise.all(
+        children(target)
+            .filter(Transition.inProgress)
+            .map(
+                (el) =>
+                    new Promise((resolve) => once(el, 'transitionend transitioncanceled', resolve))
+            )
+    );
 }
 
 function getTransitionNodes(target) {
-    return getRows(children(target)).reduce((nodes, row) => nodes.concat(sortBy(row.filter(el => isInView(el)), 'offsetLeft')), []);
+    return getRows(children(target)).reduce(
+        (nodes, row) =>
+            nodes.concat(
+                sortBy(
+                    row.filter((el) => isInView(el)),
+                    'offsetLeft'
+                )
+            ),
+        []
+    );
 }