uikit 3.7.3-dev.82185d0bc → 3.7.4-dev.54855f777

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.7.3-dev.82185d0bc",
+  "version": "3.7.4-dev.54855f777",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/navbar.js

@@ -2,7 +2,7 @@ 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, hasClass, height, includes, isRtl, isVisible, matches, noop, parent, Promise, query, remove, toFloat, Transition, within} from 'uikit-util';
+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';
 
 const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
 
@@ -49,7 +49,7 @@ export default {
     computed: {
 
         boundary({boundary, boundaryAlign}, $el) {
-            return (boundary === true || boundaryAlign) ? $el : boundary;
+            return boundary === true || boundaryAlign ? $el : boundary;
         },
 
         dropbarAnchor({dropbarAnchor}, $el) {
@@ -91,8 +91,13 @@ export default {
             get({clsDrop}, $el) {
                 const dropdowns = $$(`.${clsDrop}`, $el);
 
-                if (this.container !== $el) {
-                    $$(`.${clsDrop}`, this.container).forEach(el => !includes(dropdowns, el) && dropdowns.push(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)) {
+                            dropdowns.push(el);
+                        }
+                    });
                 }
 
                 return dropdowns;
@@ -108,6 +113,10 @@ export default {
 
             immediate: true
 
+        },
+
+        toggles({dropdown}, $el) {
+            return $$(dropdown, $el);
         }
 
     },
@@ -120,7 +129,7 @@ export default {
     events: [
 
         {
-            name: 'mouseover',
+            name: 'mouseover focusin',
 
             delegate() {
                 return this.dropdown;
@@ -128,13 +137,87 @@ export default {
 
             handler({current}) {
                 const active = this.getActive();
-                if (active && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
                     active.hide(false);
                 }
             }
 
         },
 
+        {
+            name: 'keydown',
+
+            delegate() {
+                return this.dropdown;
+            },
+
+            handler(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));
+                    } else {
+                        focusFirstFocusableElement(active.$el);
+                    }
+
+                }
+
+                handleNavItemNavigation(e, this.toggles, active);
+            }
+        },
+
+        {
+            name: 'keydown',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            delegate() {
+                return `.${this.clsDrop}`;
+            },
+
+            handler(e) {
+
+                const {current, keyCode} = e;
+
+                if (!includes(this.dropdowns, current)) {
+                    return;
+                }
+
+                const active = this.getActive();
+                const elements = $$(selFocusable, current);
+                const i = findIndex(elements, el => matches(el, ':focus'));
+
+                if (keyCode === keyMap.UP) {
+                    e.preventDefault();
+                    if (i > 0) {
+                        elements[i - 1].focus();
+                    }
+                }
+
+                if (keyCode === keyMap.DOWN) {
+                    e.preventDefault();
+                    if (i < elements.length - 1) {
+                        elements[i + 1].focus();
+                    }
+                }
+
+                if (keyCode === keyMap.ESC) {
+                    active && active.target && active.target.focus();
+                }
+
+                handleNavItemNavigation(e, this.toggles, active);
+            }
+        },
+
         {
             name: 'mouseleave',
 
@@ -142,10 +225,14 @@ export default {
                 return this.dropbar;
             },
 
+            filter() {
+                return this.dropbar;
+            },
+
             handler() {
                 const active = this.getActive();
 
-                if (active && !this.dropdowns.some(el => matches(el, ':hover'))) {
+                if (active && includes(active.mode, 'hover') && !this.dropdowns.some(el => matches(el, ':hover'))) {
                     active.hide();
                 }
             }
@@ -249,7 +336,7 @@ export default {
     methods: {
 
         getActive() {
-            return active && includes(active.mode, 'hover') && within(active.target, this.$el) && active;
+            return active && within(active.target, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -282,3 +369,45 @@ export default {
     }
 
 };
+
+function handleNavItemNavigation(e, toggles, active) {
+
+    const {current, keyCode} = e;
+    const target = active && active.target || current;
+    const i = toggles.indexOf(target);
+
+    // Left
+    if (keyCode === keyMap.LEFT && i > 0) {
+        active && active.hide(false);
+        toggles[i - 1].focus();
+    }
+
+    // Right
+    if (keyCode === keyMap.RIGHT && i < toggles.length - 1) {
+        active && active.hide(false);
+        toggles[i + 1].focus();
+    }
+
+    if (keyCode === keyMap.TAB) {
+        target.focus();
+        active && active.hide(false);
+    }
+}
+
+function focusFirstFocusableElement(el) {
+    if (!$(':focus', el)) {
+        const focusEl = $(selFocusable, el);
+        if (focusEl) {
+            focusEl.focus();
+        }
+    }
+}
+
+const keyMap = {
+    TAB: 9,
+    ESC: 27,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40
+};

package/src/js/core/overflow-auto.js

@@ -7,12 +7,14 @@ export default {
 
     props: {
         selContainer: String,
-        selContent: String
+        selContent: String,
+        minHeight: Number
     },
 
     data: {
         selContainer: '.uk-modal',
-        selContent: '.uk-modal-dialog'
+        selContent: '.uk-modal-dialog',
+        minHeight: 150
     },
 
     computed: {
@@ -28,7 +30,7 @@ export default {
     },
 
     connected() {
-        css(this.$el, 'minHeight', 150);
+        css(this.$el, 'minHeight', this.minHeight);
     },
 
     update: {
@@ -41,7 +43,7 @@ export default {
 
             return {
                 current: toFloat(css(this.$el, 'maxHeight')),
-                max: Math.max(150, height(this.container) - (dimensions(this.content).height - height(this.$el)))
+                max: Math.max(this.minHeight, height(this.container) - (dimensions(this.content).height - height(this.$el)))
             };
         },
 

package/src/js/core/switcher.js

@@ -10,6 +10,7 @@ export default {
     props: {
         connect: String,
         toggle: String,
+        itemNav: String,
         active: Number,
         swiping: Boolean
     },
@@ -17,6 +18,7 @@ export default {
     data: {
         connect: '~.uk-switcher',
         toggle: '> * > :first-child',
+        itemNav: false,
         active: 0,
         swiping: true,
         cls: 'uk-active',
@@ -92,7 +94,7 @@ export default {
             name: 'click',
 
             el() {
-                return this.connects;
+                return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
             },
 
             delegate() {

package/src/js/core/toggle.js

@@ -1,6 +1,6 @@
 import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
-import {attr, closest, hasClass, hasTouch, includes, isBoolean, isFocusable, isTouch, isVisible, matches, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, queryAll, trigger} from 'uikit-util';
+import {attr, closest, hasClass, hasTouch, includes, isBoolean, isFocusable, isTouch, matches, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, queryAll, trigger} from 'uikit-util';
 
 export default {
 
@@ -71,21 +71,39 @@ export default {
             },
 
             handler(e) {
-                if (!isTouch(e) && this._isTouch) {
+                if (!isTouch(e) && !this._isTouch) {
 
-                    const isPointerEvent = includes(['pointerleave', 'pointerenter'], e.type);
-                    if (!isPointerEvent && matches(this.$el, ':hover')
-                        || isPointerEvent && matches(this.$el, ':focus')
+                    const show = includes([pointerEnter, 'focus'], e.type);
+
+                    if (e.type === 'blur' && matches(this.$el, ':hover')
+                        || e.type === pointerLeave && matches(this.$el, ':focus')
+                        || show && attr(this.$el, 'aria-expanded') === 'true'
                     ) {
                         return;
                     }
 
-                    this.toggle(`toggle${includes([pointerEnter, 'focus'], e.type) ? 'show' : 'hide'}`);
+                    this.toggle(`toggle${show ? 'show' : 'hide'}`);
                 }
             }
 
         },
 
+        {
+            name: 'keydown',
+
+            filter() {
+                return includes(this.mode, 'click');
+            },
+
+            handler(e) {
+                // Space
+                if (e.keyCode === 32) {
+                    e.preventDefault();
+                    this.$el.click();
+                }
+            }
+        },
+
         {
 
             name: 'click',
@@ -99,7 +117,7 @@ export default {
                 let link;
                 if (closest(e.target, 'a[href="#"], a[href=""]')
                     || (link = closest(e.target, 'a[href]')) && (
-                        !attr(this.$el, 'aria-expanded')
+                        attr(this.$el, 'aria-expanded') !== 'true'
                         || link.hash && matches(this.target, link.hash)
                     )
                 ) {
@@ -122,7 +140,9 @@ export default {
             },
 
             handler(e, toggled) {
-                this.updateAria(toggled);
+                if (e.target === this.target[0]) {
+                    this.updateAria(toggled);
+                }
             }
         }
 
@@ -183,12 +203,11 @@ export default {
         updateAria(toggled) {
             attr(this.$el, 'aria-expanded', isBoolean(toggled)
                 ? toggled
-                : this.cls
-                    ? hasClass(this.target[0], this.cls.split(' ')[0])
-                    : isVisible(this.target[0])
+                : this.isToggled(this.target)
             );
         }
 
     }
 
 };
+

package/src/js/mixin/togglable.js

@@ -1,4 +1,4 @@
-import {$$, addClass, Animation, assign, css, fastdom, hasAttr, hasClass, height, includes, isBoolean, isFunction, isVisible, noop, Promise, removeClass, toFloat, toggleClass, toNodes, Transition, trigger} from 'uikit-util';
+import {$$, addClass, Animation, assign, css, fastdom, hasClass, height, includes, isBoolean, isFunction, isVisible, noop, Promise, removeClass, toFloat, toggleClass, toNodes, Transition, trigger} from 'uikit-util';
 
 export default {
 
@@ -95,13 +95,14 @@ export default {
         },
 
         isToggled(el = this.$el) {
+            el = toNodes(el)[0];
             return hasClass(el, this.clsEnter)
                 ? true
                 : hasClass(el, this.clsLeave)
                     ? false
                     : this.cls
                         ? hasClass(el, this.cls.split(' ')[0])
-                        : !hasAttr(el, 'hidden');
+                        : isVisible(el);
         },
 
         _toggle(el, toggled) {

package/src/js/util/filter.js

@@ -1,4 +1,3 @@
-import {hasAttr} from './attr';
 import {inBrowser} from './env';
 import {isDocument, isElement, isString, noop, startsWith, toNode, toNodes} from './lang';
 
@@ -33,8 +32,9 @@ export function isInput(element) {
     return toNodes(element).some(element => matches(element, selInput));
 }
 
+export const selFocusable = `${selInput},a[href],[tabindex]`;
 export function isFocusable(element) {
-    return isInput(element) || matches(element, 'a[href],button') || hasAttr(element, 'tabindex');
+    return matches(element, selFocusable);
 }
 
 export function parent(element) {

package/src/less/components/form.less

@@ -73,7 +73,7 @@
 
 @form-select-padding-right:                     20px;
 @form-select-icon-color:                        @global-color;
-@form-select-option-color:                      #444;
+@form-select-option-color:                      @global-color;
 @form-select-disabled-icon-color:               @global-muted-color;
 
 @form-datalist-padding-right:                   20px;

package/src/less/components/navbar.less

@@ -251,7 +251,7 @@
 
 .uk-navbar-nav > li:hover > a,
 .uk-navbar-nav > li > a:focus,
-.uk-navbar-nav > li > a.uk-open {
+.uk-navbar-nav > li > a[aria-expanded="true"] {
     color: @navbar-nav-item-hover-color;
     outline: none;
     .hook-navbar-nav-item-hover;
@@ -295,7 +295,7 @@
 
 .uk-navbar-toggle:hover,
 .uk-navbar-toggle:focus,
-.uk-navbar-toggle.uk-open {
+.uk-navbar-toggle[aria-expanded="true"] {
     color: @navbar-toggle-hover-color;
     outline: none;
     text-decoration: none;
@@ -552,7 +552,7 @@
 
     .uk-navbar-nav > li:hover > a,
     .uk-navbar-nav > li > a:focus,
-    .uk-navbar-nav > li > a.uk-open {
+    .uk-navbar-nav > li > a[aria-expanded="true"] {
         color: @inverse-navbar-nav-item-hover-color;
         .hook-inverse-navbar-nav-item-hover;
     }
@@ -579,7 +579,7 @@
 
     .uk-navbar-toggle:hover,
     .uk-navbar-toggle:focus,
-    .uk-navbar-toggle.uk-open {
+    .uk-navbar-toggle[aria-expanded="true"] {
         color: @inverse-navbar-toggle-hover-color;
         .hook-inverse-navbar-toggle-hover;
     }

package/src/scss/components/form.scss

@@ -73,7 +73,7 @@ $form-width-large:                               500px !default;
 
 $form-select-padding-right:                      20px !default;
 $form-select-icon-color:                         $global-color !default;
-$form-select-option-color:                       #444 !default;
+$form-select-option-color:                       $global-color !default;
 $form-select-disabled-icon-color:                $global-muted-color !default;
 
 $form-datalist-padding-right:                    20px !default;

package/src/scss/components/navbar.scss

@@ -251,7 +251,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-nav > li:hover > a,
 .uk-navbar-nav > li > a:focus,
-.uk-navbar-nav > li > a.uk-open {
+.uk-navbar-nav > li > a[aria-expanded="true"] {
     color: $navbar-nav-item-hover-color;
     outline: none;
     @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}
@@ -295,7 +295,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-toggle:hover,
 .uk-navbar-toggle:focus,
-.uk-navbar-toggle.uk-open {
+.uk-navbar-toggle[aria-expanded="true"] {
     color: $navbar-toggle-hover-color;
     outline: none;
     text-decoration: none;

package/src/scss/mixins-theme.scss

@@ -1378,7 +1378,7 @@
 
     .uk-navbar-nav > li:hover > a,
     .uk-navbar-nav > li > a:focus,
-    .uk-navbar-nav > li > a.uk-open {
+    .uk-navbar-nav > li > a[aria-expanded="true"] {
         color: $inverse-navbar-nav-item-hover-color;
         @if(mixin-exists(hook-inverse-navbar-nav-item-hover)) {@include hook-inverse-navbar-nav-item-hover();}
     }
@@ -1405,7 +1405,7 @@
 
     .uk-navbar-toggle:hover,
     .uk-navbar-toggle:focus,
-    .uk-navbar-toggle.uk-open {
+    .uk-navbar-toggle[aria-expanded="true"] {
         color: $inverse-navbar-toggle-hover-color;
         @if(mixin-exists(hook-inverse-navbar-toggle-hover)) {@include hook-inverse-navbar-toggle-hover();}
     }

package/src/scss/mixins.scss

@@ -1132,7 +1132,7 @@
 
     .uk-navbar-nav > li:hover > a,
     .uk-navbar-nav > li > a:focus,
-    .uk-navbar-nav > li > a.uk-open {
+    .uk-navbar-nav > li > a[aria-expanded="true"] {
         color: $inverse-navbar-nav-item-hover-color;
         @if(mixin-exists(hook-inverse-navbar-nav-item-hover)) {@include hook-inverse-navbar-nav-item-hover();}
     }
@@ -1159,7 +1159,7 @@
 
     .uk-navbar-toggle:hover,
     .uk-navbar-toggle:focus,
-    .uk-navbar-toggle.uk-open {
+    .uk-navbar-toggle[aria-expanded="true"] {
         color: $inverse-navbar-toggle-hover-color;
         @if(mixin-exists(hook-inverse-navbar-toggle-hover)) {@include hook-inverse-navbar-toggle-hover();}
     }

package/src/scss/variables-theme.scss

@@ -413,7 +413,7 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 $form-select-padding-right: 20px !default;
 $form-select-icon-color: $global-color !default;
-$form-select-option-color: #444 !default;
+$form-select-option-color: $global-color !default;
 $form-select-disabled-icon-color: $global-muted-color !default;
 $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: $global-color !default;

package/src/scss/variables.scss

@@ -411,7 +411,7 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 $form-select-padding-right: 20px !default;
 $form-select-icon-color: $global-color !default;
-$form-select-option-color: #444 !default;
+$form-select-option-color: $global-color !default;
 $form-select-disabled-icon-color: $global-muted-color !default;
 $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: $global-color !default;

package/tests/drop.html

@@ -25,7 +25,7 @@
             <div class="uk-margin" uk-margin>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Hover</button>
+                    <button class="uk-button uk-button-default" type="button">Hover, Click</button>
                     <div id="parent-drop" uk-drop>
                         <div id="parent-drop-card" class="uk-card uk-card-body uk-card-default">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
@@ -56,7 +56,7 @@
                 </div>
 
                 <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Click</button>
+                    <button class="uk-button uk-button-default" type="button">Click only</button>
                     <div id="parent-drop-click" uk-drop="mode: click">
                         <div id="parent-drop-card-click" class="uk-card uk-card-body uk-card-default">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
@@ -93,15 +93,6 @@
                     </div>
                 </div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
-                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
-                    <button class="uk-button uk-button-default" type="button">Target</button>
-                    <div uk-drop>
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
-
             </div>
 
             <h2>Position</h2>
@@ -328,6 +319,21 @@
 
             </div>
 
+            <h2>Multiple Toggles</h2>
+
+            <div class="uk-margin" uk-margin>
+
+                <div class="uk-inline">
+                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
+                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
+                    <button class="uk-button uk-button-default" type="button">Target</button>
+                    <div uk-drop>
+                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    </div>
+                </div>
+
+            </div>
+
             <h2>JavaScript Options</h2>
 
             <div class="uk-overflow-auto">
@@ -374,8 +380,8 @@
                         <tr>
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
-                            <td>window</td>
-                            <td>Referenced element to keep Drop's visibility.</td>
+                            <td>true</td>
+                            <td>Referenced element to keep Drop's visibility. By default it's the navbar component's element</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</code></td>

package/tests/navbar.html

@@ -528,7 +528,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="align: center">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="align: center; boundary: html">
                 <div class="uk-navbar-left">
 
                     <ul class="uk-navbar-nav">
@@ -1955,8 +1955,8 @@
                         <tr>
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
-                            <td>window</td>
-                            <td>Referenced element to keep Drop's visibility.</td>
+                            <td>true</td>
+                            <td>Referenced element to keep Drop's visibility. By default it's the navbar component's element.</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</code></td>

package/tests/switcher.html

@@ -334,7 +334,7 @@
                             <td><code>connect</code></td>
                             <td>CSS selector</td>
                             <td>~.uk-switcher</td>
-                            <td>Related items container. By default succeeding elements with class 'uk-switcher'.</td>
+                            <td>Related items container. By default, succeeding elements with class 'uk-switcher'.</td>
                         </tr>
                         <tr>
                             <td><code>toggle</code></td>
@@ -342,6 +342,12 @@
                             <td>> * > :first-child</td>
                             <td>Toggle selector - triggers content switching on click.</td>
                         </tr>
+                        <tr>
+                            <td><code>itemNav</code></td>
+                            <td>CSS selector</td>
+                            <td>false</td>
+                            <td>Related nav container. By default, nav items are found in related items container only.</td>
+                        </tr>
                         <tr>
                             <td><code>active</code></td>
                             <td>Number</td>

package/tests/toggle.html

@@ -113,10 +113,10 @@
 
                     <h3>Mode Hover</h3>
 
-                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~; mode: hover">Hover</button>
+                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~; mode: hover">Hover, Focus</button>
 
+                    <p hidden>Hovered, Focused</p>
                     <p>What's up?</p>
-                    <p hidden>Hovered</p>
 
                 </div>
             </div>