uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/js/core/modal.js

@@ -1,8 +1,18 @@
 import Modal from '../mixin/modal';
-import {$, addClass, assign, css, Deferred, hasClass, height, html, isString, on, Promise, removeClass} from 'uikit-util';
+import {
+    $,
+    addClass,
+    css,
+    Deferred,
+    hasClass,
+    height,
+    html,
+    isString,
+    on,
+    removeClass,
+} from 'uikit-util';
 
 export default {
-
     install,
 
     mixins: [Modal],
@@ -10,18 +20,17 @@ export default {
     data: {
         clsPage: 'uk-modal-page',
         selPanel: '.uk-modal-dialog',
-        selClose: '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full'
+        selClose:
+            '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full',
     },
 
     events: [
-
         {
             name: 'show',
 
             self: true,
 
             handler() {
-
                 if (hasClass(this.panel, 'uk-margin-auto-vertical')) {
                     addClass(this.$el, 'uk-flex');
                 } else {
@@ -29,7 +38,7 @@ export default {
                 }
 
                 height(this.$el); // force reflow
-            }
+            },
         },
 
         {
@@ -38,21 +47,15 @@ export default {
             self: true,
 
             handler() {
-
                 css(this.$el, 'display', '');
                 removeClass(this.$el, 'uk-flex');
-
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };
 
-function install({modal}) {
-
+function install({ modal }) {
     modal.dialog = function (content, options) {
-
         const dialog = modal(
             `<div class="uk-modal">
                 <div class="uk-modal-dialog">${content}</div>
@@ -62,10 +65,14 @@ function install({modal}) {
 
         dialog.show();
 
-        on(dialog.$el, 'hidden', () =>
-            Promise.resolve().then(() =>
-                dialog.$destroy(true)
-            ), {self: true}
+        on(
+            dialog.$el,
+            'hidden',
+            async () => {
+                await Promise.resolve();
+                dialog.$destroy(true);
+            },
+            { self: true }
         );
 
         return dialog;
@@ -73,64 +80,71 @@ function install({modal}) {
 
     modal.alert = function (message, options) {
         return openDialog(
-            ({labels}) => `<div class="uk-modal-body">${isString(message) ? message : html(message)}</div>
+            ({ labels }) => `<div class="uk-modal-body">${
+                isString(message) ? message : html(message)
+            }</div>
             <div class="uk-modal-footer uk-text-right">
-                <button class="uk-button uk-button-primary uk-modal-close" autofocus>${labels.ok}</button>
+                <button class="uk-button uk-button-primary uk-modal-close" autofocus>${
+                    labels.ok
+                }</button>
             </div>`,
             options,
-            deferred => deferred.resolve()
+            (deferred) => deferred.resolve()
         );
     };
 
     modal.confirm = function (message, options) {
         return openDialog(
-            ({labels}) => `<form>
+            ({ labels }) => `<form>
                 <div class="uk-modal-body">${isString(message) ? message : html(message)}</div>
                 <div class="uk-modal-footer uk-text-right">
-                    <button class="uk-button uk-button-default uk-modal-close" type="button">${labels.cancel}</button>
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
+                        labels.cancel
+                    }</button>
                     <button class="uk-button uk-button-primary" autofocus>${labels.ok}</button>
                 </div>
             </form>`,
             options,
-            deferred => deferred.reject()
+            (deferred) => deferred.reject()
         );
     };
 
     modal.prompt = function (message, value, options) {
         return openDialog(
-            ({labels}) => `<form class="uk-form-stacked">
+            ({ labels }) => `<form class="uk-form-stacked">
                 <div class="uk-modal-body">
                     <label>${isString(message) ? message : html(message)}</label>
                     <input class="uk-input" value="${value || ''}" autofocus>
                 </div>
                 <div class="uk-modal-footer uk-text-right">
-                    <button class="uk-button uk-button-default uk-modal-close" type="button">${labels.cancel}</button>
+                    <button class="uk-button uk-button-default uk-modal-close" type="button">${
+                        labels.cancel
+                    }</button>
                     <button class="uk-button uk-button-primary">${labels.ok}</button>
                 </div>
             </form>`,
             options,
-            deferred => deferred.resolve(null),
-            dialog => $('input', dialog.$el).value
+            (deferred) => deferred.resolve(null),
+            (dialog) => $('input', dialog.$el).value
         );
     };
 
     modal.labels = {
         ok: 'Ok',
-        cancel: 'Cancel'
+        cancel: 'Cancel',
     };
 
     function openDialog(tmpl, options, hideFn, submitFn) {
-
-        options = assign({bgClose: false, escClose: true, labels: modal.labels}, options);
+        options = { bgClose: false, escClose: true, labels: modal.labels, ...options };
 
         const dialog = modal.dialog(tmpl(options), options);
         const deferred = new Deferred();
 
         let resolved = false;
 
-        on(dialog.$el, 'submit', 'form', e => {
+        on(dialog.$el, 'submit', 'form', (e) => {
             e.preventDefault();
-            deferred.resolve(submitFn && submitFn(dialog));
+            deferred.resolve(submitFn?.(dialog));
             resolved = true;
             dialog.hide();
         });
@@ -141,5 +155,4 @@ function install({modal}) {
 
         return deferred.promise;
     }
-
 }

package/src/js/core/nav.js

@@ -1,13 +1,11 @@
 import Accordion from './accordion';
 
 export default {
-
     extends: Accordion,
 
     data: {
         targets: '> .uk-parent',
         toggle: '> a',
-        content: '> ul'
-    }
-
+        content: '> ul',
+    },
 };

package/src/js/core/navbar.js

@@ -1,14 +1,35 @@
-import {active} from './drop';
+import { active } from './drop';
 import Class from '../mixin/class';
-import FlexBug from '../mixin/flex-bug';
 import Container from '../mixin/container';
-import {$, $$, addClass, after, assign, css, findIndex, hasAttr, hasClass, height, includes, isRtl, isVisible, matches, noop, once, parent, Promise, query, remove, selFocusable, toFloat, Transition, within} from 'uikit-util';
+import {
+    $,
+    $$,
+    addClass,
+    after,
+    css,
+    findIndex,
+    hasAttr,
+    hasClass,
+    height,
+    includes,
+    isRtl,
+    isVisible,
+    matches,
+    noop,
+    once,
+    parent,
+    query,
+    remove,
+    selFocusable,
+    toFloat,
+    Transition,
+    within,
+} from 'uikit-util';
 
 const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
 
 export default {
-
-    mixins: [Class, Container, FlexBug],
+    mixins: [Class, Container],
 
     props: {
         dropdown: String,
@@ -23,7 +44,7 @@ export default {
         dropbar: Boolean,
         dropbarMode: String,
         dropbarAnchor: Boolean,
-        duration: Number
+        duration: Number,
     },
 
     data: {
@@ -43,43 +64,41 @@ export default {
         duration: 200,
         forceHeight: true,
         selMinHeight: navItem,
-        container: false
+        container: false,
     },
 
     computed: {
-
-        boundary({boundary, boundaryAlign}, $el) {
+        boundary({ boundary, boundaryAlign }, $el) {
             return boundary === true || boundaryAlign ? $el : boundary;
         },
 
-        dropbarAnchor({dropbarAnchor}, $el) {
+        dropbarAnchor({ dropbarAnchor }, $el) {
             return query(dropbarAnchor, $el);
         },
 
-        pos({align}) {
+        pos({ align }) {
             return `bottom-${align}`;
         },
 
         dropbar: {
-
-            get({dropbar}) {
-
+            get({ dropbar }) {
                 if (!dropbar) {
                     return null;
                 }
 
-                dropbar = this._dropbar || query(dropbar, this.$el) || $('+ .uk-navbar-dropbar', this.$el);
+                dropbar =
+                    this._dropbar ||
+                    query(dropbar, this.$el) ||
+                    $('+ .uk-navbar-dropbar', this.$el);
 
                 return dropbar ? dropbar : (this._dropbar = $('<div></div>'));
-
             },
 
             watch(dropbar) {
                 addClass(dropbar, 'uk-navbar-dropbar');
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         dropContainer(_, $el) {
@@ -87,17 +106,16 @@ export default {
         },
 
         dropdowns: {
-
-            get({clsDrop}, $el) {
+            get({ clsDrop }, $el) {
                 const dropdowns = $$(`.${clsDrop}`, $el);
 
                 if (this.dropContainer !== $el) {
-                    $$(`.${clsDrop}`, this.dropContainer).forEach(el => {
-                        const dropdown = this.getDropdown(el);
-                        if (!includes(dropdowns, el) && dropdown && dropdown.target && within(dropdown.target, this.$el)) {
+                    for (const el of $$(`.${clsDrop}`, this.dropContainer)) {
+                        const target = this.getDropdown(el)?.target;
+                        if (!includes(dropdowns, el) && target && within(target, this.$el)) {
                             dropdowns.push(el);
                         }
-                    });
+                    }
                 }
 
                 return dropdowns;
@@ -106,19 +124,22 @@ export default {
             watch(dropdowns) {
                 this.$create(
                     'drop',
-                    dropdowns.filter(el => !this.getDropdown(el)),
-                    assign({}, this.$props, {boundary: this.boundary, pos: this.pos, offset: this.dropbar || this.offset})
+                    dropdowns.filter((el) => !this.getDropdown(el)),
+                    {
+                        ...this.$props,
+                        boundary: this.boundary,
+                        pos: this.pos,
+                        offset: this.dropbar || this.offset,
+                    }
                 );
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
-        toggles({dropdown}, $el) {
+        toggles({ dropdown }, $el) {
             return $$(dropdown, $el);
-        }
-
+        },
     },
 
     disconnected() {
@@ -127,7 +148,6 @@ export default {
     },
 
     events: [
-
         {
             name: 'mouseover focusin',
 
@@ -135,13 +155,18 @@ export default {
                 return this.dropdown;
             },
 
-            handler({current}) {
+            handler({ current }) {
                 const active = this.getActive();
-                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (
+                    active &&
+                    includes(active.mode, 'hover') &&
+                    active.target &&
+                    !within(active.target, current) &&
+                    !active.isDelaying
+                ) {
                     active.hide(false);
                 }
-            }
-
+            },
         },
 
         {
@@ -152,25 +177,24 @@ export default {
             },
 
             handler(e) {
-
-                const {current, keyCode} = e;
+                const { current, keyCode } = e;
                 const active = this.getActive();
 
                 if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
-
                     e.preventDefault();
 
                     if (!active || active.target !== current) {
                         current.click();
-                        once(this.dropContainer, 'show', ({target}) => focusFirstFocusableElement(target));
+                        once(this.dropContainer, 'show', ({ target }) =>
+                            focusFirstFocusableElement(target)
+                        );
                     } else {
                         focusFirstFocusableElement(active.$el);
                     }
-
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
-            }
+            },
         },
 
         {
@@ -185,8 +209,7 @@ export default {
             },
 
             handler(e) {
-
-                const {current, keyCode} = e;
+                const { current, keyCode } = e;
 
                 if (!includes(this.dropdowns, current)) {
                     return;
@@ -194,7 +217,7 @@ export default {
 
                 const active = this.getActive();
                 const elements = $$(selFocusable, current);
-                const i = findIndex(elements, el => matches(el, ':focus'));
+                const i = findIndex(elements, (el) => matches(el, ':focus'));
 
                 if (keyCode === keyMap.UP) {
                     e.preventDefault();
@@ -211,11 +234,11 @@ export default {
                 }
 
                 if (keyCode === keyMap.ESC) {
-                    active && active.target && active.target.focus();
+                    active?.target?.focus();
                 }
 
                 handleNavItemNavigation(e, this.toggles, active);
-            }
+            },
         },
 
         {
@@ -232,10 +255,14 @@ export default {
             handler() {
                 const active = this.getActive();
 
-                if (active && includes(active.mode, 'hover') && !this.dropdowns.some(el => matches(el, ':hover'))) {
+                if (
+                    active &&
+                    includes(active.mode, 'hover') &&
+                    !this.dropdowns.some((el) => matches(el, ':hover'))
+                ) {
                     active.hide();
                 }
-            }
+            },
         },
 
         {
@@ -250,12 +277,10 @@ export default {
             },
 
             handler() {
-
                 if (!parent(this.dropbar)) {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
-
-            }
+            },
         },
 
         {
@@ -269,7 +294,7 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, {$el, dir}) {
+            handler(_, { $el, dir }) {
                 if (!hasClass($el, this.clsDrop)) {
                     return;
                 }
@@ -281,9 +306,14 @@ export default {
                 this.clsDrop && addClass($el, `${this.clsDrop}-dropbar`);
 
                 if (dir === 'bottom') {
-                    this.transitionTo($el.offsetHeight + toFloat(css($el, 'marginTop')) + toFloat(css($el, 'marginBottom')), $el);
+                    this.transitionTo(
+                        $el.offsetHeight +
+                            toFloat(css($el, 'marginTop')) +
+                            toFloat(css($el, 'marginBottom')),
+                        $el
+                    );
                 }
-            }
+            },
         },
 
         {
@@ -297,14 +327,17 @@ export default {
                 return this.dropbar;
             },
 
-            handler(e, {$el}) {
-
+            handler(e, { $el }) {
                 const active = this.getActive();
 
-                if (matches(this.dropbar, ':hover') && active && active.$el === $el) {
+                if (
+                    matches(this.dropbar, ':hover') &&
+                    active?.$el === $el &&
+                    !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
+                ) {
                     e.preventDefault();
                 }
-            }
+            },
         },
 
         {
@@ -318,30 +351,27 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, {$el}) {
+            handler(_, { $el }) {
                 if (!hasClass($el, this.clsDrop)) {
                     return;
                 }
 
                 const active = this.getActive();
 
-                if (!active || active && active.$el === $el) {
+                if (!active || active?.$el === $el) {
                     this.transitionTo(0);
                 }
-            }
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         getActive() {
             return active && within(active.target, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
-
-            const {dropbar} = this;
+            const { dropbar } = this;
             const oldHeight = isVisible(dropbar) ? height(dropbar) : 0;
 
             el = oldHeight < newHeight && el;
@@ -352,54 +382,52 @@ export default {
 
             Transition.cancel([el, dropbar]);
             return Promise.all([
-                Transition.start(dropbar, {height: newHeight}, this.duration),
-                Transition.start(el, {clip: `rect(0,${el.offsetWidth}px,${newHeight}px,0)`}, this.duration)
+                Transition.start(dropbar, { height: newHeight }, this.duration),
+                Transition.start(
+                    el,
+                    { clip: `rect(0,${el.offsetWidth}px,${newHeight}px,0)` },
+                    this.duration
+                ),
             ])
                 .catch(noop)
                 .then(() => {
-                    css(el, {clip: ''});
+                    css(el, { clip: '' });
                     this.$update(dropbar);
                 });
         },
 
         getDropdown(el) {
             return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
-        }
-
-    }
-
+        },
+    },
 };
 
 function handleNavItemNavigation(e, toggles, active) {
-
-    const {current, keyCode} = e;
-    const target = active && active.target || current;
+    const { current, keyCode } = e;
+    const target = active?.target || current;
     const i = toggles.indexOf(target);
 
     // Left
     if (keyCode === keyMap.LEFT && i > 0) {
-        active && active.hide(false);
+        active?.hide(false);
         toggles[i - 1].focus();
     }
 
     // Right
     if (keyCode === keyMap.RIGHT && i < toggles.length - 1) {
-        active && active.hide(false);
+        active?.hide(false);
         toggles[i + 1].focus();
     }
 
     if (keyCode === keyMap.TAB) {
         target.focus();
-        active && active.hide(false);
+        active?.hide(false);
     }
 }
 
 function focusFirstFocusableElement(el) {
     if (!$(':focus', el)) {
-        const focusEl = $(selFocusable, el);
-        if (focusEl) {
-            focusEl.focus();
-        }
+        $(selFocusable, el)?.focus();
     }
 }
 
@@ -409,5 +437,5 @@ const keyMap = {
     LEFT: 37,
     UP: 38,
     RIGHT: 39,
-    DOWN: 40
+    DOWN: 40,
 };