npm - uikit - Versions diffs - 3.14.4-dev.fea9fd466 → 3.15.1-dev.f849bb0c8 - Mend

uikit 3.14.4-dev.fea9fd466 → 3.15.1-dev.f849bb0c8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/CHANGELOG.md +32 -18
package/build/util.js +1 -0
package/dist/css/uikit-core-rtl.css +284 -63
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +284 -63
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +306 -92
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +306 -92
package/dist/css/uikit.min.css +1 -1
package/dist/js/components/countdown.js +1 -1
package/dist/js/components/countdown.min.js +1 -1
package/dist/js/components/filter.js +1 -1
package/dist/js/components/filter.min.js +1 -1
package/dist/js/components/lightbox-panel.js +98 -131
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +98 -131
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +4 -2
package/dist/js/components/notification.min.js +1 -1
package/dist/js/components/parallax.js +1 -1
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +1 -1
package/dist/js/components/slider-parallax.min.js +1 -1
package/dist/js/components/slider.js +1 -1
package/dist/js/components/slider.min.js +1 -1
package/dist/js/components/slideshow-parallax.js +1 -1
package/dist/js/components/slideshow-parallax.min.js +1 -1
package/dist/js/components/slideshow.js +1 -1
package/dist/js/components/slideshow.min.js +1 -1
package/dist/js/components/sortable.js +1 -1
package/dist/js/components/sortable.min.js +1 -1
package/dist/js/components/tooltip.js +101 -136
package/dist/js/components/tooltip.min.js +1 -1
package/dist/js/components/upload.js +1 -1
package/dist/js/components/upload.min.js +1 -1
package/dist/js/uikit-core.js +518 -478
package/dist/js/uikit-core.min.js +17 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +521 -479
package/dist/js/uikit.min.js +17 -1
package/package.json +11 -11
package/src/images/components/navbar-toggle-icon.svg +25 -3
package/src/js/api/hooks.js +5 -1
package/src/js/api/state.js +2 -2
package/src/js/components/notification.js +3 -1
package/src/js/core/accordion.js +9 -17
package/src/js/core/alert.js +35 -14
package/src/js/core/drop.js +110 -82
package/src/js/core/navbar.js +33 -49
package/src/js/core/offcanvas.js +8 -4
package/src/js/core/scroll.js +37 -10
package/src/js/core/toggle.js +3 -5
package/src/js/mixin/modal.js +15 -12
package/src/js/mixin/position.js +21 -22
package/src/js/mixin/style.js +11 -0
package/src/js/mixin/togglable.js +90 -124
package/src/js/util/animation.js +9 -7
package/src/js/util/class.js +3 -1
package/src/js/util/filter.js +3 -7
package/src/js/util/position.js +136 -130
package/src/js/util/viewport.js +1 -1
package/src/less/components/_import.less +1 -0
package/src/less/components/drop.less +1 -18
package/src/less/components/dropbar.less +126 -0
package/src/less/components/dropdown.less +6 -20
package/src/less/components/nav.less +214 -23
package/src/less/components/navbar.less +26 -54
package/src/less/theme/_import.less +1 -0
package/src/less/theme/dropbar.less +44 -0
package/src/less/theme/dropdown.less +0 -11
package/src/less/theme/nav.less +46 -0
package/src/less/theme/navbar.less +5 -36
package/src/scss/components/_import.scss +1 -0
package/src/scss/components/drop.scss +1 -18
package/src/scss/components/dropbar.scss +126 -0
package/src/scss/components/dropdown.scss +6 -20
package/src/scss/components/nav.scss +163 -22
package/src/scss/components/navbar.scss +26 -54
package/src/scss/mixins-theme.scss +81 -35
package/src/scss/mixins.scss +77 -3
package/src/scss/theme/_import.scss +1 -0
package/src/scss/theme/dropbar.scss +44 -0
package/src/scss/theme/dropdown.scss +0 -8
package/src/scss/theme/nav.scss +44 -0
package/src/scss/theme/navbar.scss +4 -8
package/src/scss/variables-theme.scss +58 -13
package/src/scss/variables.scss +46 -8
package/tests/accordion.html +2 -2
package/tests/alert.html +2 -2
package/tests/countdown.html +1 -1
package/tests/drop.html +446 -416
package/tests/dropbar.html +458 -0
package/tests/dropdown.html +8 -470
package/tests/filter.html +9 -12
package/tests/flex.html +36 -36
package/tests/form.html +1 -1
package/tests/grid.html +22 -22
package/tests/height.html +6 -6
package/tests/index.html +127 -108
package/tests/js/index.js +1 -4
package/tests/lightbox.html +5 -5
package/tests/list.html +8 -8
package/tests/modal.html +13 -13
package/tests/nav.html +121 -12
package/tests/navbar.html +111 -220
package/tests/offcanvas.html +10 -14
package/tests/pagination.html +6 -6
package/tests/parallax.html +1 -1
package/tests/position.html +18 -16
package/tests/progress.html +9 -9
package/tests/scroll.html +7 -10
package/tests/search.html +6 -6
package/tests/slider.html +6 -5
package/tests/slideshow.html +8 -8
package/tests/sortable.html +6 -8
package/tests/sticky-navbar.html +15 -15
package/tests/sticky.html +8 -8
package/tests/switcher.html +1 -1
package/tests/tab.html +1 -1
package/tests/table.html +7 -7
package/tests/toggle.html +2 -2
package/tests/tooltip.html +1 -1
package/tests/upload.html +11 -11
package/tests/utility.html +16 -16

package/tests/dropdown.html CHANGED Viewed

@@ -77,7 +77,7 @@
                     <div class="uk-dropdown test">
-                        <ul class="uk-nav uk-dropdown-nav">
+                        <ul class="uk-nav uk-nav-secondary">
                             <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
                             <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
                             <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -91,91 +91,6 @@
                     <div class="uk-margin" uk-margin>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Hover, Click</button>
-                            <div uk-dropdown>
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li class="uk-parent">
-                                        <a href="#">Parent</a>
-                                        <ul class="uk-nav-sub">
-                                            <li><a href="#">Sub item</a></li>
-                                            <li><a href="#">Sub item</a></li>
-                                        </ul>
-                                    </li>
-                                    <li class="uk-nav-header">Header</li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
-                                    <li class="uk-nav-divider"></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Click only</button>
-                            <div uk-dropdown="mode: click">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li class="uk-parent">
-                                        <a href="#">Parent</a>
-                                        <ul class="uk-nav-sub">
-                                            <li><a href="#">Sub item</a></li>
-                                            <li><a href="#">Sub item</a></li>
-                                        </ul>
-                                    </li>
-                                    <li class="uk-nav-header">Header</li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
-                                    <li class="uk-nav-divider"></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Hover only</button>
-                            <div uk-dropdown="mode: hover">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li class="uk-parent">
-                                        <a href="#">Parent</a>
-                                        <ul class="uk-nav-sub">
-                                            <li><a href="#">Sub item</a></li>
-                                            <li><a href="#">Sub item</a></li>
-                                        </ul>
-                                    </li>
-                                    <li class="uk-nav-header">Header</li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
-                                    <li class="uk-nav-divider"></li>
-                                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Out Animation</button>
-                            <div uk-dropdown="animate-out: true">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li><a href="#">Item</a></li>
-                                    <li><a href="#">Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
-                            <div uk-dropdown="mode: click">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li><a href="#">Item</a></li>
-                                    <li><a href="#">Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
                         <div class="uk-inline">
                             <button class="uk-button uk-button-default" type="button">Scrollable</button>
                             <div class="uk-overflow-auto uk-height-medium" uk-dropdown>
@@ -197,19 +112,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-dropdown>
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li><a href="#">Item</a></li>
-                                    <li><a href="#">Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
                     </div>
                     <h2>Position</h2>
@@ -249,17 +151,6 @@
                             </div>
                         </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
-                            <div uk-dropdown="pos: bottom-justify">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li><a href="#">Item</a></li>
-                                    <li><a href="#">Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
                     </div>
                     <div class="uk-margin" uk-margin>
@@ -297,17 +188,6 @@
                             </div>
                         </div>
-                        <div class="uk-inline">
-                            <button class="uk-button uk-button-default" type="button">Top Justify</button>
-                            <div uk-dropdown="pos: top-justify">
-                                <ul class="uk-nav uk-dropdown-nav">
-                                    <li class="uk-active"><a href="#">Active</a></li>
-                                    <li><a href="#">Item</a></li>
-                                    <li><a href="#">Item</a></li>
-                                </ul>
-                            </div>
-                        </div>
                     </div>
                     <div class="uk-margin" uk-margin>
@@ -387,360 +267,18 @@
                 </div>
             </div>
-            <h2>Stretch</h2>
-            <div class="uk-margin" uk-margin>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
-                    <div uk-dropdown="pos: bottom-stretch; animate-out: true">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
-                    <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
-                    <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
-                    <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="uk-margin" uk-margin>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Fade</button>
-                    <div uk-dropdown="pos: top-stretch; animate-out: true">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Slide</button>
-                    <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
-                    <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
-                    <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="uk-margin" uk-margin>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Fade</button>
-                    <div uk-dropdown="pos: left-stretch; animate-out: true">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Slide</button>
-                    <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
-                    <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
-                    <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="uk-margin" uk-margin>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Fade</button>
-                    <div uk-dropdown="pos: right-stretch; animate-out: true">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Slide</button>
-                    <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
-                    <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
-                    <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
-                        <ul class="uk-nav uk-dropdown-nav">
-                            <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="uk-child-width-1-4@m" uk-grid>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
-                        <div uk-dropdown="pos: bottom-stretch; animate-out: true">
-                            <ul class="uk-nav uk-dropdown-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
-                                <li><a href="#">Item</a></li>
-                                <li><a href="#">Item</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
-                        <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
-                            <ul class="uk-nav uk-dropdown-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
-                                <li><a href="#">Item</a></li>
-                                <li><a href="#">Item</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
-                        <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
-                            <ul class="uk-nav uk-dropdown-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
-                                <li><a href="#">Item</a></li>
-                                <li><a href="#">Item</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-                        <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
-                        <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
-                            <ul class="uk-nav uk-dropdown-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
-                                <li><a href="#">Item</a></li>
-                                <li><a href="#">Item</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <h2>JavaScript Options</h2>
-            <div class="uk-overflow-auto">
-                <table class="uk-table uk-table-striped">
-                    <thead>
-                        <tr>
-                            <th>Option</th>
-                            <th>Value</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><code>toggle</code></td>
-                            <td>String, Boolean</td>
-                            <td>'- *'</td>
-                            <td>CSS selector for the element to be used as toggle. By default, the preceding element is used.</td>
-                        </tr>
-                        <tr>
-                            <td><code>pos</code></td>
-                            <td>String</td>
-                            <td>'bottom-left'</td>
-                            <td>Dropdown position.</td>
-                        </tr>
-                        <tr>
-                            <td><code>mode</code></td>
-                            <td>hover | click</td>
-                            <td>click,hover</td>
-                            <td>Comma separated list of dropdown trigger behaviour modes.</td>
-                        </tr>
-                        <tr>
-                            <td><code>delay-show</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Delay time in hover mode before a Dropdown is shown in ms.</td>
-                        </tr>
-                        <tr>
-                            <td><code>delay-hide</code></td>
-                            <td>Number</td>
-                            <td>800</td>
-                            <td>Delay time in hover mode before a Dropdown is hidden in ms.</td>
-                        </tr>
-                        <tr>
-                            <td><code>boundary</code></td>
-                            <td>CSS selector</td>
-                            <td>true</td>
-                            <td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
-                        </tr>
-                        <tr>
-                            <td><code>boundary-align</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Align Drop to boundary.</td>
-                        </tr>
-                        <tr>
-                            <td><code>flip</code></td>
-                            <td>false|true|'x'|'y'</td>
-                            <td>true</td>
-                            <td>Automatic Dropdown flip.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>The offset of the Dropdown container.</td>
-                        </tr>
-                        <tr>
-                            <td><code>animation</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The space separated names of animations to use.</td>
-                        </tr>
-                        <tr>
-                            <td><code>duration</code></td>
-                            <td>Number</td>
-                            <td>200</td>
-                            <td>The animation duration.</td>
-                        </tr>
-                        <tr>
-                            <td><code>container</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
         </div>
         <script>
-            var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
+            const {$$, addClass, on, removeClass } = UIkit.util;
-            UIkit.util.on('#js-size-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-dropdown').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const dropdown of $$('.uk-dropdown')) {
+                    removeClass(dropdown, options);
+                    addClass(dropdown, e.target.value);
+                }
             });
         </script>

package/tests/filter.html CHANGED Viewed

@@ -20,18 +20,15 @@
         <script>
-            var util = UIkit.util;
-            util.ready(function () {
-                util.on(document.body, 'beforeFilter afterFilter', function (e, filter, state) {
-                    console.log(e.type, filter, state);
-                });
-                util.on('#js-animation-switcher', 'change', function () {
-                    util.attr(util.$$('.js-filter-animation'), 'animation', this.value);
-                });
+            const {$$, attr, on, ready} = UIkit.util;
+            ready(() => {
+                on(document.body, 'beforeFilter afterFilter', (e, filter, state) =>
+                    console.log(e.type, filter, state)
+                );
+                on('#js-animation-switcher', 'change', () =>
+                    attr($$('.js-filter-animation'), 'animation', this.value)
+                );
             });
         </script>