uikit 3.13.11-dev.4551212a9 → 3.13.11-dev.77828bb3f

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.13.11-dev.4551212a9",
+    "version": "3.13.11-dev.77828bb3f",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/drop.js

@@ -13,7 +13,7 @@ import {
     isTouch,
     matches,
     MouseTracker,
-    noop,
+    observeResize,
     offset,
     offsetViewport,
     on,
@@ -247,15 +247,23 @@ export default {
                             this.hide(false);
                         }
                     }),
-                    on(window, 'resize', () => this.$emit()),
-                    this.display === 'static'
-                        ? noop
-                        : on(
-                              document,
-                              'scroll',
-                              ({ target }) => target.contains(this.$el) && this.$emit(),
-                              true
-                          ),
+
+                    ...(this.display === 'static'
+                        ? []
+                        : (() => {
+                              const handler = () => this.$emit();
+                              return [
+                                  on(window, 'resize', handler),
+                                  on(document, 'scroll', handler, true),
+                                  (() => {
+                                      const observer = observeResize(
+                                          scrollParents(this.$el),
+                                          handler
+                                      );
+                                      return () => observer.disconnect();
+                                  })(),
+                              ];
+                          })()),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -375,7 +383,8 @@ export default {
             const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
 
             css(this.$el, 'maxWidth', '');
-            const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
+            const maxWidth =
+                scrollParentOffset.width - (this.boundaryAlign ? 0 : 2 * this.viewportPadding);
 
             if (this.pos[1] === 'justify') {
                 const prop = this.axis === 'y' ? 'width' : 'height';

package/src/js/core/height-match.js

@@ -30,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.elements];
+        return [this.$el, ...this.elements];
     },
 
     update: {

package/src/js/core/margin.js

@@ -1,5 +1,12 @@
 import Resize from '../mixin/resize';
-import { isRtl, isVisible, observeMutation, offsetPosition, toggleClass } from 'uikit-util';
+import {
+    isRtl,
+    isVisible,
+    observeMutation,
+    offsetPosition,
+    toArray,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -15,7 +22,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.$el.children];
+        return [this.$el, ...toArray(this.$el.children)];
     },
 
     connected() {

package/src/js/util/position.js

@@ -52,8 +52,6 @@ function attachTo(element, target, options) {
 function attachToWithFlip(element, target, options) {
     const position = attachTo(element, target, options);
     const targetDim = offset(target);
-    const viewports = scrollParents(element);
-    const [scrollElement] = viewports;
 
     let {
         flip,
@@ -64,6 +62,11 @@ function attachToWithFlip(element, target, options) {
         viewportPadding,
     } = options;
 
+    let viewports = scrollParents(element);
+    if (boundary === target) {
+        viewports = viewports.filter((viewport) => viewport !== boundary);
+    }
+    const [scrollElement] = viewports;
     viewports.push(viewport);
 
     const offsetPosition = { ...position };
@@ -82,7 +85,7 @@ function attachToWithFlip(element, target, options) {
             viewport[end] -= viewportPadding;
         }
 
-        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
             viewport = getIntersectionArea(viewport, offset(boundary));
         }
 

package/tests/drop.html

@@ -15,9 +15,7 @@
                 -webkit-overflow-scrolling: touch;
             }
 
-            .boundary-overflow {
-                width: 200%;
-            }
+            .boundary-overflow { width: 200%; }
 
         </style>
     </head>
@@ -219,11 +217,18 @@
 
             <h2>Shift and Flip</h2>
 
+            <div class="uk-margin">
+                <select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
+                    <option value="">Resize</option>
+                    <option value="boundary-overflow">Scroll</option>
+                </select>
+            </div>
+
             <div uk-grid>
                 <div class="uk-width-1-2@m">
 
-                    <div class="boundary uk-resize-horizontal uk-height-large uk-margin">
-                        <div class="boundary-overflow uk-flex uk-flex-center">
+                    <div class="boundary uk-height-large uk-resize-horizontal uk-margin">
+                        <div class="js-boundary-overflow uk-flex uk-flex-center">
                             <div>
 
                                 <button class="uk-button uk-button-default" type="button">Click</button>
@@ -236,8 +241,8 @@
                 </div>
                 <div class="uk-width-1-2@m">
 
-                    <div class="boundary uk-resize-horizontal uk-height-large uk-margin">
-                        <div class="boundary-overflow uk-flex uk-flex-center">
+                    <div class="boundary uk-height-large uk-resize-horizontal uk-margin">
+                        <div class="js-boundary-overflow uk-flex uk-flex-center">
                             <div>
 
                                 <button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Click</button>
@@ -308,7 +313,7 @@
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
 
-                    <div class="boundary uk-height-small uk-margin uk-flex uk-flex-around uk-flex-wrap">
+                    <div class="boundary uk-margin uk-flex uk-flex-around uk-flex-wrap" uk-margin>
                         <div>
 
                             <button class="uk-button uk-button-default" type="button">Bottom Right</button>
@@ -336,7 +341,7 @@
                     </div>
 
                 </div>
-                <div class="uk-width-1-4@m">
+                <div class="uk-width-auto">
 
                     <div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-around">
                         <div>
@@ -474,5 +479,19 @@
 
         </div>
 
+        <script>
+
+            var options = UIkit.util.$$('#js-boundary-overflow-switcher option').map(function (option) { return option.value; });
+
+            UIkit.util.on('#js-boundary-overflow-switcher', 'change', function () {
+                var value = this.value;
+                UIkit.util.$$('.js-boundary-overflow').forEach(function (table) {
+                    UIkit.util.removeClass(table, options);
+                    UIkit.util.addClass(table, value);
+                });
+            });
+
+        </script>
+
     </body>
 </html>