npm - uikit - Versions diffs - 3.14.4-dev.871ba3c05 → 3.14.4-dev.a014fa609 - Mend

uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.a014fa609

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 (139) hide show

package/CHANGELOG.md +47 -12
package/build/util.js +1 -0
package/dist/css/uikit-core-rtl.css +385 -110
package/dist/css/uikit-core-rtl.min.css +1 -1
package/dist/css/uikit-core.css +385 -110
package/dist/css/uikit-core.min.css +1 -1
package/dist/css/uikit-rtl.css +402 -115
package/dist/css/uikit-rtl.min.css +1 -1
package/dist/css/uikit.css +402 -115
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 +7 -5
package/dist/js/components/filter.min.js +1 -1
package/dist/js/components/lightbox-panel.js +196 -140
package/dist/js/components/lightbox-panel.min.js +1 -1
package/dist/js/components/lightbox.js +196 -140
package/dist/js/components/lightbox.min.js +1 -1
package/dist/js/components/notification.js +1 -1
package/dist/js/components/notification.min.js +1 -1
package/dist/js/components/parallax.js +4 -5
package/dist/js/components/parallax.min.js +1 -1
package/dist/js/components/slider-parallax.js +4 -5
package/dist/js/components/slider-parallax.min.js +1 -1
package/dist/js/components/slider.js +22 -7
package/dist/js/components/slider.min.js +1 -1
package/dist/js/components/slideshow-parallax.js +4 -5
package/dist/js/components/slideshow-parallax.min.js +1 -1
package/dist/js/components/slideshow.js +22 -7
package/dist/js/components/slideshow.min.js +1 -1
package/dist/js/components/sortable.js +3 -3
package/dist/js/components/sortable.min.js +1 -1
package/dist/js/components/tooltip.js +107 -137
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 +1819 -1714
package/dist/js/uikit-core.min.js +14 -1
package/dist/js/uikit-icons.js +1 -1
package/dist/js/uikit-icons.min.js +1 -1
package/dist/js/uikit.js +1081 -959
package/dist/js/uikit.min.js +14 -1
package/package.json +1 -1
package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
package/src/images/components/nav-parent-icon.svg +3 -0
package/src/images/components/navbar-parent-icon.svg +3 -0
package/src/images/components/navbar-toggle-icon.svg +22 -3
package/src/js/api/state.js +2 -2
package/src/js/components/filter.js +5 -3
package/src/js/components/sortable.js +2 -3
package/src/js/core/accordion.js +9 -17
package/src/js/core/alert.js +35 -14
package/src/js/core/drop.js +115 -80
package/src/js/core/height-viewport.js +14 -6
package/src/js/core/icon.js +16 -0
package/src/js/core/index.js +2 -0
package/src/js/core/leader.js +2 -2
package/src/js/core/navbar.js +44 -30
package/src/js/core/offcanvas.js +1 -47
package/src/js/core/scroll.js +37 -10
package/src/js/core/sticky.js +8 -9
package/src/js/core/toggle.js +3 -5
package/src/js/mixin/media.js +4 -5
package/src/js/mixin/modal.js +97 -8
package/src/js/mixin/position.js +26 -11
package/src/js/mixin/slider-drag.js +20 -8
package/src/js/mixin/style.js +11 -0
package/src/js/mixin/togglable.js +88 -133
package/src/js/util/animation.js +4 -3
package/src/js/util/class.js +3 -1
package/src/js/util/dimensions.js +6 -6
package/src/js/util/filter.js +3 -7
package/src/js/util/position.js +108 -107
package/src/js/util/style.js +4 -13
package/src/js/util/viewport.js +5 -32
package/src/less/components/_import.less +1 -0
package/src/less/components/drop.less +1 -18
package/src/less/components/dropbar.less +115 -0
package/src/less/components/dropdown.less +16 -16
package/src/less/components/leader.less +1 -1
package/src/less/components/nav.less +240 -63
package/src/less/components/navbar.less +81 -38
package/src/less/components/utility.less +21 -4
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 +43 -9
package/src/less/theme/navbar.less +7 -11
package/src/scss/components/_import.scss +1 -0
package/src/scss/components/drop.scss +1 -18
package/src/scss/components/dropbar.scss +115 -0
package/src/scss/components/dropdown.scss +16 -16
package/src/scss/components/leader.scss +1 -1
package/src/scss/components/nav.scss +189 -51
package/src/scss/components/navbar.scss +69 -38
package/src/scss/components/utility.scss +19 -3
package/src/scss/mixins-theme.scss +93 -25
package/src/scss/mixins.scss +89 -17
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 +41 -9
package/src/scss/theme/navbar.scss +7 -8
package/src/scss/variables-theme.scss +71 -18
package/src/scss/variables.scss +60 -14
package/tests/accordion.html +2 -2
package/tests/alert.html +2 -2
package/tests/countdown.html +1 -1
package/tests/drop.html +461 -375
package/tests/dropbar.html +458 -0
package/tests/dropdown.html +26 -401
package/tests/filter.html +9 -12
package/tests/form.html +1 -1
package/tests/index.html +126 -107
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 +117 -75
package/tests/navbar.html +2002 -1131
package/tests/offcanvas.html +17 -21
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 +9 -9
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 +19 -0
package/src/images/backgrounds/nav-parent-close.svg +0 -3

package/tests/dropdown.html CHANGED Viewed

@@ -14,6 +14,13 @@
                 width: 100%;
             }
+            .scroll-container {
+                padding: 15px;
+                border: 1px dashed rgba(0,0,0,0.2);
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+            }
         </style>
     </head>
@@ -23,6 +30,13 @@
             <h1>Dropdown</h1>
+            <div class="uk-margin">
+                <select id="js-size-switcher" class="uk-select uk-form-width-small">
+                    <option value="">Default</option>
+                    <option value="uk-dropdown-large">Large</option>
+                </select>
+            </div>
             <div uk-grid>
                 <div class="uk-width-1-4@m">
@@ -63,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>
@@ -77,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>
@@ -183,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>
@@ -235,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>
@@ -283,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>
@@ -373,290 +267,21 @@
                 </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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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 Stretch 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>
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right Stretch 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>
+        <script>
-            </div>
+            const {$$, addClass, on, removeClass } = UIkit.util;
-            <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>
+            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);
+                }
+            });
-        </div>
+        </script>
     </body>
 </html>

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>

package/tests/form.html CHANGED Viewed

@@ -313,7 +313,7 @@
                                 <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
                             </div>
-                            <script>UIkit.util.$$('.js-indeterminate').forEach(function (el) { el.indeterminate = true; })</script>
+                            <script>UIkit.util.$$('.js-indeterminate').forEach(el => { el.indeterminate = true; })</script>
                         </div>