uikit 3.15.1 → 3.15.2

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",
+    "version": "3.15.2",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,8 +34,8 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.18.6",
-        "@babel/preset-env": "^7.18.6",
+        "@babel/core": "^7.18.10",
+        "@babel/preset-env": "^7.18.10",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^4.0.0",
@@ -43,18 +43,18 @@
         "camelcase": "^7.0.0",
         "clean-css": "^5.3.1",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.49",
-        "eslint": "^8.19.0",
+        "esbuild": "^0.14.53",
+        "eslint": "^8.21.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
         "glob": "^8.0.3",
-        "inquirer": "^9.0.0",
+        "inquirer": "^9.1.0",
         "less": "^4.1.3",
         "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
         "prettier": "^2.7.1",
-        "rollup": "^2.77.0",
+        "rollup": "^2.77.2",
         "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

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;
@@ -412,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);
 
@@ -426,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',
@@ -444,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)) {
@@ -457,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/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/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)
                 );