uikit 3.15.1-dev.a99898921 → 3.15.2-dev.07fe5036e

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.07fe5036e",
     "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

@@ -43,6 +43,8 @@ export default {
         mode: 'list',
         toggle: Boolean,
         boundary: Boolean,
+        boundaryX: Boolean,
+        boundaryY: Boolean,
         target: Boolean,
         targetX: Boolean,
         targetY: Boolean,
@@ -59,6 +61,8 @@ export default {
         mode: ['click', 'hover'],
         toggle: '- *',
         boundary: false,
+        boundaryX: false,
+        boundaryY: false,
         target: false,
         targetX: false,
         targetY: false,
@@ -75,6 +79,13 @@ export default {
     },
 
     computed: {
+        boundary({ boundary, boundaryX, boundaryY }, $el) {
+            return [
+                query(boundaryX || boundary, $el) || window,
+                query(boundaryY || boundary, $el) || window,
+            ];
+        },
+
         target({ target, targetX, targetY }, $el) {
             targetX = targetX || target || this.targetEl;
             targetY = targetY || target || this.targetEl;
@@ -284,7 +295,11 @@ export default {
                     })(),
 
                     ...(this.autoUpdate
-                        ? [on([document, scrollParents(this.$el)], 'scroll', update)]
+                        ? [
+                              on([document, scrollParents(this.$el)], 'scroll', update, {
+                                  passive: true,
+                              }),
+                          ]
                         : []),
 
                     ...(this.bgScroll
@@ -408,8 +423,6 @@ export default {
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;
 
-            const boundary = query(this.boundary, this.$el);
-            const boundaryOffset = offset(boundary || window);
             const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
             const viewportOffset = this.getViewportOffset(this.$el);
 
@@ -422,7 +435,7 @@ export default {
                 if (this.axis !== axis && includes([axis, true], this.stretch)) {
                     css(this.$el, {
                         [prop]: Math.min(
-                            boundaryOffset[prop],
+                            offset(this.boundary[i])[prop],
                             viewports[i][prop] - 2 * viewportOffset
                         ),
                         [`overflow-${axis}`]: 'auto',
@@ -440,7 +453,7 @@ export default {
 
             this.$el.hidden = false;
 
-            this.positionAt(this.$el, this.target, boundary);
+            this.positionAt(this.$el, this.target, this.boundary);
 
             for (const [i, [axis, prop, start, end]] of dirs) {
                 if (this.axis === axis && includes([axis, true], this.stretch)) {
@@ -453,17 +466,17 @@ export default {
                             (targetOffset[start] > elOffset[start]
                                 ? targetOffset[start] -
                                   Math.max(
-                                      boundaryOffset[start],
+                                      offset(this.boundary[i])[start],
                                       viewports[i][start] + viewportOffset
                                   )
                                 : Math.min(
-                                      boundaryOffset[end],
+                                      offset(this.boundary[i])[end],
                                       viewports[i][end] - viewportOffset
                                   ) - targetOffset[end]) - positionOffset,
                         [`overflow-${axis}`]: 'auto',
                     });
 
-                    this.positionAt(this.$el, this.target, boundary);
+                    this.positionAt(this.$el, this.target, this.boundary);
                 }
             }
         },

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/src/js/util/position.js

@@ -141,7 +141,10 @@ function getViewport(element, viewportOffset, boundary, i) {
     }
 
     if (boundary) {
-        viewport = getIntersectionArea(viewport, offset(boundary));
+        viewport = getIntersectionArea(
+            viewport,
+            offset(isArray(boundary) ? boundary[i] : boundary)
+        );
     }
 
     return viewport;

package/tests/drop.html

@@ -118,8 +118,15 @@
 
             <div class="uk-margin uk-form-stacked">
                 <div class="uk-inline">
-                    <label class="uk-form-label" for="js-boundary-switcher">Boundary</label>
-                    <select id="js-boundary-switcher" class="uk-select uk-form-width-small">
+                    <label class="uk-form-label" for="js-boundary-x-switcher">Boundary X</label>
+                    <select id="js-boundary-x-switcher" class="uk-select uk-form-width-small">
+                        <option value="false">Viewport</option>
+                        <option value="!.test-boundary">Box</option>
+                    </select>
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-boundary-y-switcher">Boundary Y</label>
+                    <select id="js-boundary-y-switcher" class="uk-select uk-form-width-small">
                         <option value="false">Viewport</option>
                         <option value="!.test-boundary">Box</option>
                     </select>
@@ -156,6 +163,20 @@
                         <option value="y">Y</option>
                     </select>
                 </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-flip-switcher">Flip</label>
+                    <select id="js-flip-switcher" class="uk-select uk-form-width-xsmall">
+                        <option value="false">False</option>
+                        <option value="true" selected>True</option>
+                    </select>
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-shift-switcher">Shift</label>
+                    <select id="js-shift-switcher" class="uk-select uk-form-width-xsmall">
+                        <option value="false">False</option>
+                        <option value="true" selected>True</option>
+                    </select>
+                </div>
                 <div class="uk-inline">
                     <label class="uk-form-label" for="js-animation-switcher">Animation</label>
                     <select id="js-animation-switcher" class="uk-select uk-form-width-small">
@@ -634,6 +655,18 @@
                             <td>false</td>
                             <td>The area the drop can't exceed causing it to flip and shift. By default, the nearest scrolling ancestor.</td>
                         </tr>
+                        <tr>
+                            <td><code>boundary-x</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The area on the x-axis the drop can't exceed causing it to flip and shift.</td>
+                        </tr>
+                        <tr>
+                            <td><code>boundary-y</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The area on the y-axis the drop can't exceed causing it to flip and shift.</td>
+                        </tr>
                         <tr>
                             <td><code>target</code></td>
                             <td>Boolean, CSS selector</td>
@@ -732,7 +765,7 @@
                 }
             });
 
-            for (const option of ['boundary', 'target-x', 'target-y', 'inset', 'stretch', 'animation', 'animate-out', 'duration']) {
+            for (const option of ['boundary-x', 'boundary-y', 'target-x', 'target-y', 'inset', 'stretch', 'flip', 'shift', 'animation', 'animate-out', 'duration']) {
                 on(`#js-${option}-switcher`, 'change', (e) =>
                     attr($$('.js-options'), option, e.target.value)
                 );

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();