uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.29f2881ed

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.isDelaying) {
+                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,18 +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
-                    && !this.toggles.some(el => active.target !== el && matches(el, ':focus'))
+                if (
+                    matches(this.dropbar, ':hover') &&
+                    active?.$el === $el &&
+                    !this.toggles.some((el) => active.target !== el && matches(el, ':focus'))
                 ) {
                     e.preventDefault();
                 }
-            }
+            },
         },
 
         {
@@ -322,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;
@@ -356,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();
     }
 }
 
@@ -413,5 +437,5 @@ const keyMap = {
     LEFT: 37,
     UP: 38,
     RIGHT: 39,
-    DOWN: 40
+    DOWN: 40,
 };

package/src/js/core/offcanvas.js

@@ -1,8 +1,20 @@
 import Modal from '../mixin/modal';
-import {$, addClass, append, css, endsWith, hasClass, height, isVisible, parent, removeClass, unwrap, wrapAll} from 'uikit-util';
+import {
+    $,
+    addClass,
+    append,
+    css,
+    endsWith,
+    hasClass,
+    height,
+    isVisible,
+    parent,
+    removeClass,
+    unwrap,
+    wrapAll,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Modal],
 
     args: 'mode',
@@ -10,7 +22,7 @@ export default {
     props: {
         mode: String,
         flip: Boolean,
-        overlay: Boolean
+        overlay: Boolean,
     },
 
     data: {
@@ -26,65 +38,58 @@ export default {
         clsMode: 'uk-offcanvas',
         clsOverlay: 'uk-offcanvas-overlay',
         selClose: '.uk-offcanvas-close',
-        container: false
+        container: false,
     },
 
     computed: {
-
-        clsFlip({flip, clsFlip}) {
+        clsFlip({ flip, clsFlip }) {
             return flip ? clsFlip : '';
         },
 
-        clsOverlay({overlay, clsOverlay}) {
+        clsOverlay({ overlay, clsOverlay }) {
             return overlay ? clsOverlay : '';
         },
 
-        clsMode({mode, clsMode}) {
+        clsMode({ mode, clsMode }) {
             return `${clsMode}-${mode}`;
         },
 
-        clsSidebarAnimation({mode, clsSidebarAnimation}) {
+        clsSidebarAnimation({ mode, clsSidebarAnimation }) {
             return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
         },
 
-        clsContainerAnimation({mode, clsContainerAnimation}) {
+        clsContainerAnimation({ mode, clsContainerAnimation }) {
             return mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation;
         },
 
-        transitionElement({mode}) {
+        transitionElement({ mode }) {
             return mode === 'reveal' ? parent(this.panel) : this.panel;
-        }
-
+        },
     },
 
     update: {
-
         read() {
             if (this.isToggled() && !isVisible(this.$el)) {
                 this.hide();
             }
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
                 return 'a[href^="#"]';
             },
 
-            handler({current: {hash}, defaultPrevented}) {
+            handler({ current: { hash }, defaultPrevented }) {
                 if (!defaultPrevented && hash && $(hash, document.body)) {
                     this.hide();
                 }
-            }
-
+            },
         },
 
         {
@@ -96,14 +101,11 @@ export default {
                 return this.panel;
             },
 
-            handler({targetTouches}) {
-
+            handler({ targetTouches }) {
                 if (targetTouches.length === 1) {
                     this.clientY = targetTouches[0].clientY;
                 }
-
-            }
-
+            },
         },
 
         {
@@ -118,8 +120,7 @@ export default {
 
             handler(e) {
                 e.cancelable && e.preventDefault();
-            }
-
+            },
         },
 
         {
@@ -132,23 +133,21 @@ export default {
             },
 
             handler(e) {
-
                 if (e.targetTouches.length !== 1) {
                     return;
                 }
 
                 const clientY = e.targetTouches[0].clientY - this.clientY;
-                const {scrollTop, scrollHeight, clientHeight} = this.panel;
+                const { scrollTop, scrollHeight, clientHeight } = this.panel;
 
-                if (clientHeight >= scrollHeight
-                    || scrollTop === 0 && clientY > 0
-                    || scrollHeight - scrollTop <= clientHeight && clientY < 0
+                if (
+                    clientHeight >= scrollHeight ||
+                    (scrollTop === 0 && clientY > 0) ||
+                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
                 ) {
                     e.cancelable && e.preventDefault();
                 }
-
-            }
-
+            },
         },
 
         {
@@ -157,7 +156,6 @@ export default {
             self: true,
 
             handler() {
-
                 if (this.mode === 'reveal' && !hasClass(parent(this.panel), this.clsMode)) {
                     wrapAll(this.panel, '<div>');
                     addClass(parent(this.panel), this.clsMode);
@@ -168,15 +166,17 @@ export default {
                 css(document.body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
                 addClass(this.$el, this.clsOverlay);
-                addClass(this.panel, this.clsSidebarAnimation, this.mode !== 'reveal' ? this.clsMode : '');
+                addClass(
+                    this.panel,
+                    this.clsSidebarAnimation,
+                    this.mode !== 'reveal' ? this.clsMode : ''
+                );
 
                 height(document.body); // force reflow
                 addClass(document.body, this.clsContainerAnimation);
 
                 this.clsContainerAnimation && suppressUserScale();
-
-
-            }
+            },
         },
 
         {
@@ -187,7 +187,7 @@ export default {
             handler() {
                 removeClass(document.body, this.clsContainerAnimation);
                 css(document.body, 'touch-action', '');
-            }
+            },
         },
 
         {
@@ -196,7 +196,6 @@ export default {
             self: true,
 
             handler() {
-
                 this.clsContainerAnimation && resumeUserScale();
 
                 if (this.mode === 'reveal') {
@@ -209,24 +208,19 @@ export default {
                 removeClass(document.body, this.clsContainer, this.clsFlip);
 
                 css(document.documentElement, 'overflowY', '');
-
-            }
+            },
         },
 
         {
             name: 'swipeLeft swipeRight',
 
             handler(e) {
-
                 if (this.isToggled() && endsWith(e.type, 'Left') ^ this.flip) {
                     this.hide();
                 }
-
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };
 
 // Chrome in responsive mode zooms page upon opening offcanvas
@@ -240,5 +234,7 @@ function resumeUserScale() {
 }
 
 function getViewport() {
-    return $('meta[name="viewport"]', document.head) || append(document.head, '<meta name="viewport">');
+    return (
+        $('meta[name="viewport"]', document.head) || append(document.head, '<meta name="viewport">')
+    );
 }