uikit 3.15.1-dev.a99898921 → 3.15.2-dev.c376993b7

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.15.1-dev.a99898921",
+    "version": "3.15.2-dev.c376993b7",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -41,9 +41,9 @@
         "@rollup/plugin-replace": "^4.0.0",
         "archiver": "^5.3.1",
         "camelcase": "^7.0.0",
-        "clean-css": "^5.3.0",
+        "clean-css": "^5.3.1",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.48",
+        "esbuild": "^0.14.49",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
@@ -54,7 +54,7 @@
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
         "prettier": "^2.7.1",
-        "rollup": "^2.76.0",
+        "rollup": "^2.77.0",
         "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/js/components/lightbox-panel.js

@@ -207,7 +207,6 @@ export default {
                 let matches;
                 const iframeAttrs = {
                     frameborder: '0',
-                    allow: 'autoplay',
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',

package/src/js/core/drop.js

@@ -284,7 +284,11 @@ export default {
                     })(),
 
                     ...(this.autoUpdate
-                        ? [on([document, scrollParents(this.$el)], 'scroll', update)]
+                        ? [
+                              on([document, scrollParents(this.$el)], 'scroll', update, {
+                                  passive: true,
+                              }),
+                          ]
                         : []),
 
                     ...(this.bgScroll

package/src/js/core/navbar.js

@@ -32,35 +32,29 @@ export default {
 
     props: {
         dropdown: String,
-        mode: 'list',
         align: String,
-        offset: Number,
-        boundary: Boolean,
-        target: Boolean,
-        targetX: Boolean,
-        targetY: Boolean,
         clsDrop: String,
-        delayShow: Number,
-        delayHide: Number,
+        boundary: Boolean,
         dropbar: Boolean,
         dropbarAnchor: Boolean,
         duration: Number,
+        mode: Boolean,
+        offset: Boolean,
+        stretch: Boolean,
+        delayShow: Boolean,
+        delayHide: Boolean,
+        target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
+        animation: Boolean,
+        animateOut: Boolean,
     },
 
     data: {
         dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-navbar-dropdown',
-        mode: undefined,
-        offset: undefined,
-        delayShow: undefined,
-        delayHide: undefined,
-        flip: false,
-        shift: true,
         boundary: true,
-        target: false,
-        targetX: false,
-        targetY: false,
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
@@ -68,18 +62,10 @@ export default {
     },
 
     computed: {
-        boundary({ boundary }, $el) {
-            return boundary === true ? $el : boundary;
-        },
-
         dropbarAnchor({ dropbarAnchor }, $el) {
             return query(dropbarAnchor, $el) || $el;
         },
 
-        pos({ align }) {
-            return `bottom-${align}`;
-        },
-
         dropbar: {
             get({ dropbar }) {
                 if (!dropbar) {
@@ -127,8 +113,10 @@ export default {
                     dropdowns.filter((el) => !this.getDropdown(el)),
                     {
                         ...this.$props,
-                        boundary: this.boundary,
-                        pos: this.pos,
+                        flip: false,
+                        shift: true,
+                        pos: `bottom-${this.align}`,
+                        boundary: this.boundary === true ? this.$el : this.boundary,
                     }
                 );
             },
@@ -375,7 +363,7 @@ export default {
                     return;
                 }
 
-                this._observer.disconnect();
+                this._observer?.disconnect();
 
                 const active = this.getActive();
 

package/src/js/core/scroll.js

@@ -41,7 +41,7 @@ function registerClick(cmp) {
 function unregisterClick(cmp) {
     components.delete(cmp);
 
-    if (!components.length) {
+    if (!components.size) {
         off(document, 'click', clickHandler);
     }
 }

package/src/js/core/video.js

@@ -2,6 +2,7 @@ import {
     css,
     hasAttr,
     isInView,
+    isTag,
     isVideo,
     isVisible,
     mute,
@@ -30,6 +31,10 @@ export default {
             this.$el.preload = 'none';
         }
 
+        if (isTag(this.$el, 'iframe') && !hasAttr(this.$el, 'allow')) {
+            this.$el.allow = 'autoplay';
+        }
+
         if (this.automute) {
             mute(this.$el);
         }

package/tests/navbar.html

@@ -3108,77 +3108,95 @@
                             <td>left</td>
                             <td>Drop alignment.</td>
                         </tr>
+                        <tr>
+                            <td><code>boundary</code></td>
+                            <td>Boolean, CSS selector</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>dropbar</code></td>
+                            <td>Boolean | CSS selector</td>
+                            <td>false</td>
+                            <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
+                        </tr>
+                        <tr>
+                            <td><code>dropbar-anchor</code></td>
+                            <td>Boolean | CSS selector</td>
+                            <td>false</td>
+                            <td>The dropbar anchor selector. If set, dropbar will be inserted after the anchor element.</td>
+                        </tr>
+                        <tr>
+                            <td><code>duration</code></td>
+                            <td>Number</td>
+                            <td>200</td>
+                            <td>The dropbar transition 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 drops should be appended in the DOM.</td>
+                        </tr>
+                        <tr>
+                            <td><code>stretch</code></td>
+                            <td>false|true|'x'|'y'</td>
+                            <td>true</td>
+                            <td>Stretch drop on both (true) or given axis.</td>
+                        </tr>
                         <tr>
                             <td><code>mode</code></td>
                             <td>hover | click</td>
                             <td>click,hover</td>
-                            <td>Comma-separated list of dropdown trigger behavior modes.</td>
+                            <td>Comma-separated list of drop trigger behavior modes.</td>
                         </tr>
                         <tr>
                             <td><code>delay-show</code></td>
                             <td>Number</td>
                             <td>0</td>
-                            <td>Delay time in hover mode before a Drop is shown in ms.</td>
+                            <td>Delay time in hover mode before a drop 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 Drop is hidden in ms.</td>
-                        </tr>
-                        <tr>
-                            <td><code>boundary</code></td>
-                            <td>Boolean, CSS selector</td>
-                            <td>true</td>
-                            <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
+                            <td>Delay time in hover mode before a drop is hidden in ms.</td>
                         </tr>
                         <tr>
                             <td><code>target</code></td>
                             <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>The element the drops are positioned to (`true` for window).</td>
+                            <td>The element the drop is positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>target-x</code></td>
                             <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>The element's X axis the drops are positioned to (`true` for window).</td>
+                            <td>The element's X axis the drop is positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>target-y</code></td>
                             <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>The element's Y axis the drop are positioned to (`true` for window).</td>
-                        </tr>
-                        <tr>
-                            <td><code>cls-drop</code></td>
-                            <td>String</td>
-                            <td>'uk-navbar-dropdown'</td>
-                            <td>The Drop container class.</td>
+                            <td>The element's Y axis the drop is positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>offset</code></td>
                             <td>Number</td>
                             <td>0</td>
-                            <td>The offset of the Drop container.</td>
+                            <td>The drop offset.</td>
                         </tr>
                         <tr>
-                            <td><code>dropbar</code></td>
-                            <td>Boolean | CSS selector</td>
-                            <td>false</td>
-                            <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
-                        </tr>
-                        <tr>
-                            <td><code>duration</code></td>
-                            <td>Number</td>
-                            <td>200</td>
-                            <td>The dropbar transition duration.</td>
+                            <td><code>animation</code></td>
+                            <td>String</td>
+                            <td>'uk-animation-fade'</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
-                            <td><code>container</code></td>
+                            <td><code>animate-out</code></td>
                             <td>Boolean</td>
                             <td>false</td>
-                            <td>Define a target container via a selector to specify where the drops should be appended in the DOM.</td>
+                            <td>Use animation when closing the drop.</td>
                         </tr>
                     </tbody>
                 </table>

package/tests/position.html

@@ -385,7 +385,7 @@
             });
 
             on($$('select,input'), 'change', position);
-            on(window, 'scroll', position);
+            on(window, 'scroll', position, { passive: true });
 
             position();