uikit 3.11.2-dev.f2970ffaa → 3.12.0

package/src/js/core/drop.js

@@ -1,13 +1,37 @@
 import Container from '../mixin/container';
+import Lazyload from '../mixin/lazyload';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
-import {addClass, append, apply, attr, css, hasClass, includes, isTouch, matches, MouseTracker, offset, on, once, parent, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, query, removeClass, toggleClass, within} from 'uikit-util';
+import {
+    addClass,
+    append,
+    apply,
+    attr,
+    css,
+    hasClass,
+    includes,
+    isTouch,
+    matches,
+    MouseTracker,
+    offset,
+    on,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerEnter,
+    pointerLeave,
+    pointerUp,
+    query,
+    removeClass,
+    toggleClass,
+    within,
+} from 'uikit-util';
 
 export let active;
 
 export default {
-
-    mixins: [Container, Position, Togglable],
+    mixins: [Container, Lazyload, Position, Togglable],
 
     args: 'pos',
 
@@ -18,7 +42,7 @@ export default {
         boundaryAlign: Boolean,
         delayShow: Number,
         delayHide: Number,
-        clsDrop: String
+        clsDrop: String,
     },
 
     data: {
@@ -31,23 +55,21 @@ export default {
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
-        container: false
+        container: false,
     },
 
     computed: {
-
-        boundary({boundary}, $el) {
+        boundary({ boundary }, $el) {
             return boundary === true ? window : query(boundary, $el);
         },
 
-        clsDrop({clsDrop}) {
+        clsDrop({ clsDrop }) {
             return clsDrop || `uk-${this.$options.name}`;
         },
 
         clsPos() {
             return this.clsDrop;
-        }
-
+        },
     },
 
     created() {
@@ -55,17 +77,16 @@ export default {
     },
 
     connected() {
-
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
             this.target = this.$create('toggle', query(this.toggle, this.$el), {
                 target: this.$el,
-                mode: this.mode
+                mode: this.mode,
             }).$el;
             attr(this.target, 'aria-haspopup', true);
+            this.lazyload(this.target);
         }
-
     },
 
     disconnected() {
@@ -75,9 +96,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -87,44 +106,37 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.hide(false);
-            }
-
+            },
         },
 
         {
-
             name: 'click',
 
             delegate() {
                 return 'a[href^="#"]';
             },
 
-            handler({defaultPrevented, current: {hash}}) {
+            handler({ defaultPrevented, current: { hash } }) {
                 if (!defaultPrevented && hash && !within(hash, this.$el)) {
                     this.hide(false);
                 }
-            }
-
+            },
         },
 
         {
-
             name: 'beforescroll',
 
             handler() {
                 this.hide(false);
-            }
-
+            },
         },
 
         {
-
             name: 'toggle',
 
             self: true,
 
             handler(e, toggle) {
-
                 e.preventDefault();
 
                 if (this.isToggled()) {
@@ -132,12 +144,10 @@ export default {
                 } else {
                     this.show(toggle.$el, false);
                 }
-            }
-
+            },
         },
 
         {
-
             name: 'toggleshow',
 
             self: true,
@@ -145,12 +155,10 @@ export default {
             handler(e, toggle) {
                 e.preventDefault();
                 this.show(toggle.$el);
-            }
-
+            },
         },
 
         {
-
             name: 'togglehide',
 
             self: true,
@@ -160,12 +168,10 @@ export default {
                 if (!matches(this.$el, ':focus,:hover')) {
                     this.hide();
                 }
-            }
-
+            },
         },
 
         {
-
             name: `${pointerEnter} focusin`,
 
             filter() {
@@ -176,12 +182,10 @@ export default {
                 if (!isTouch(e)) {
                     this.clearTimers();
                 }
-            }
-
+            },
         },
 
         {
-
             name: `${pointerLeave} focusout`,
 
             filter() {
@@ -192,107 +196,114 @@ export default {
                 if (!isTouch(e) && e.relatedTarget) {
                     this.hide();
                 }
-            }
-
+            },
         },
 
         {
-
             name: 'toggled',
 
             self: true,
 
             handler(e, toggled) {
-
                 if (!toggled) {
                     return;
                 }
 
                 this.clearTimers();
                 this.position();
-            }
-
+            },
         },
 
         {
-
             name: 'show',
 
             self: true,
 
             handler() {
-
                 active = this;
 
                 this.tracker.init();
 
-                once(this.$el, 'hide', on(document, pointerDown, ({target}) =>
-                    !within(target, this.$el) && once(document, `${pointerUp} ${pointerCancel} scroll`, ({defaultPrevented, type, target: newTarget}) => {
-                        if (!defaultPrevented && type === pointerUp && target === newTarget && !(this.target && within(target, this.target))) {
+                once(
+                    this.$el,
+                    'hide',
+                    on(
+                        document,
+                        pointerDown,
+                        ({ target }) =>
+                            !within(target, this.$el) &&
+                            once(
+                                document,
+                                `${pointerUp} ${pointerCancel} scroll`,
+                                ({ defaultPrevented, type, target: newTarget }) => {
+                                    if (
+                                        !defaultPrevented &&
+                                        type === pointerUp &&
+                                        target === newTarget &&
+                                        !(this.target && within(target, this.target))
+                                    ) {
+                                        this.hide(false);
+                                    }
+                                },
+                                true
+                            )
+                    ),
+                    { self: true }
+                );
+
+                once(
+                    this.$el,
+                    'hide',
+                    on(document, 'keydown', (e) => {
+                        if (e.keyCode === 27) {
                             this.hide(false);
                         }
-                    }, true)
-                ), {self: true});
-
-                once(this.$el, 'hide', on(document, 'keydown', e => {
-                    if (e.keyCode === 27) {
-                        this.hide(false);
-                    }
-                }), {self: true});
-
-            }
-
+                    }),
+                    { self: true }
+                );
+            },
         },
 
         {
-
             name: 'beforehide',
 
             self: true,
 
             handler() {
                 this.clearTimers();
-            }
-
+            },
         },
 
         {
-
             name: 'hide',
 
-            handler({target}) {
-
+            handler({ target }) {
                 if (this.$el !== target) {
-                    active = active === null && within(target, this.$el) && this.isToggled() ? this : active;
+                    active =
+                        active === null && within(target, this.$el) && this.isToggled()
+                            ? this
+                            : active;
                     return;
                 }
 
                 active = this.isActive() ? null : active;
                 this.tracker.cancel();
-            }
-
-        }
-
+            },
+        },
     ],
 
     update: {
-
         write() {
-
             if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
                 this.position();
             }
-
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     methods: {
-
         show(target = this.target, delay = true) {
-
             if (this.isToggled() && target && this.target && target !== this.target) {
                 this.hide(false);
             }
@@ -306,9 +317,8 @@ export default {
             }
 
             if (active) {
-
                 if (delay && active.isDelaying) {
-                    this.showTimer = setTimeout(this.show, 10);
+                    this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
 
@@ -317,24 +327,26 @@ export default {
                     prev = active;
                     active.hide(false);
                 }
-
             }
 
             if (this.container && parent(this.$el) !== this.container) {
                 append(this.container, this.$el);
             }
 
-            this.showTimer = setTimeout(() => this.toggleElement(this.$el, true), delay && this.delayShow || 0);
-
+            this.showTimer = setTimeout(
+                () => this.toggleElement(this.$el, true),
+                (delay && this.delayShow) || 0
+            );
         },
 
         hide(delay = true) {
-
             const hide = () => this.toggleElement(this.$el, false, false);
 
             this.clearTimers();
 
-            this.isDelaying = getPositionedElements(this.$el).some(el => this.tracker.movesTo(el));
+            this.isDelaying = getPositionedElements(this.$el).some((el) =>
+                this.tracker.movesTo(el)
+            );
 
             if (delay && this.isDelaying) {
                 this.hideTimer = setTimeout(this.hide, 50);
@@ -358,7 +370,6 @@ export default {
         },
 
         position() {
-
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
@@ -368,20 +379,25 @@ export default {
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
-            } else if (this.boundary && this.$el.offsetWidth > Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)) {
+            } else if (
+                this.boundary &&
+                this.$el.offsetWidth >
+                    Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)
+            ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            this.positionAt(this.$el, this.boundaryAlign ? this.boundary : this.target, this.boundary);
-
-        }
-
-    }
-
+            this.positionAt(
+                this.$el,
+                this.boundaryAlign ? this.boundary : this.target,
+                this.boundary
+            );
+        },
+    },
 };
 
 function getPositionedElements(el) {
     const result = [];
-    apply(el, el => css(el, 'position') !== 'static' && result.push(el));
+    apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
     return result;
 }

package/src/js/core/form-custom.js

@@ -1,22 +1,20 @@
 import Class from '../mixin/class';
-import {$, $$, closest, isInput, matches, parent, query, selInput} from 'uikit-util';
+import { $, $$, closest, isInput, matches, parent, query, selInput } from 'uikit-util';
 
 export default {
-
     mixins: [Class],
 
     args: 'target',
 
     props: {
-        target: Boolean
+        target: Boolean,
     },
 
     data: {
-        target: false
+        target: false,
     },
 
     computed: {
-
         input(_, $el) {
             return $(selInput, $el);
         },
@@ -25,18 +23,17 @@ export default {
             return this.input.nextElementSibling;
         },
 
-        target({target}, $el) {
-            return target && (target === true
-                && parent(this.input) === $el
-                && this.input.nextElementSibling
-                || query(target, $el));
-        }
-
+        target({ target }, $el) {
+            return (
+                target &&
+                ((target === true && parent(this.input) === $el && this.input.nextElementSibling) ||
+                    query(target, $el))
+            );
+        },
     },
 
     update() {
-
-        const {target, input} = this;
+        const { target, input } = this;
 
         if (!target) {
             return;
@@ -45,26 +42,26 @@ export default {
         let option;
         const prop = isInput(target) ? 'value' : 'textContent';
         const prev = target[prop];
-        const value = input.files && input.files[0]
-            ? input.files[0].name
-            : matches(input, 'select') && (option = $$('option', input).filter(el => el.selected)[0]) // eslint-disable-line prefer-destructuring
+        const value =
+            input.files && input.files[0]
+                ? input.files[0].name
+                : matches(input, 'select') &&
+                  (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
                 ? option.textContent
                 : input.value;
 
         if (prev !== value) {
             target[prop] = value;
         }
-
     },
 
     events: [
-
         {
             name: 'change',
 
             handler() {
-                this.$update();
-            }
+                this.$emit();
+            },
         },
 
         {
@@ -75,10 +72,8 @@ export default {
             },
 
             handler() {
-                this.$update();
-            }
-        }
-
-    ]
-
+                this.$emit();
+            },
+        },
+    ],
 };

package/src/js/core/gif.js

@@ -1,12 +1,9 @@
-import {isInView} from 'uikit-util';
+import { isInView } from 'uikit-util';
 
 // Deprecated
 export default {
-
     update: {
-
         read(data) {
-
             const inview = isInView(this.$el);
 
             if (!inview || data.isInView === inview) {
@@ -20,7 +17,6 @@ export default {
             this.$el.src = '' + this.$el.src; // force self-assign
         },
 
-        events: ['scroll', 'resize']
-    }
-
+        events: ['scroll', 'resize'],
+    },
 };