uikit 3.13.8-dev.7605e7963 → 3.13.8-dev.bd666a112

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.8-dev.7605e7963",
+    "version": "3.13.8-dev.bd666a112",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/tooltip.js

@@ -6,11 +6,9 @@ import {
     attr,
     flipPosition,
     hasAttr,
-    includes,
     isFocusable,
     isTouch,
     matches,
-    offset,
     on,
     once,
     pointerDown,
@@ -106,12 +104,10 @@ export default {
 
                 this.positionAt(this.tooltip, this.$el);
 
-                const [dir, align] = getAlignment(this.tooltip, this.$el, this.pos);
-
                 this.origin =
-                    this.axis === 'y'
-                        ? `${flipPosition(dir)}-${align}`
-                        : `${align}-${flipPosition(dir)}`;
+                    this.getAxis() === 'y'
+                        ? `${flipPosition(this.dir)}-${this.align}`
+                        : `${this.align}-${flipPosition(this.dir)}`;
             });
 
             this.toggleElement(this.tooltip, true);
@@ -147,34 +143,3 @@ function makeFocusable(el) {
         attr(el, 'tabindex', '0');
     }
 }
-
-function getAlignment(el, target, [dir, align]) {
-    const elOffset = offset(el);
-    const targetOffset = offset(target);
-    const properties = [
-        ['left', 'right'],
-        ['top', 'bottom'],
-    ];
-
-    for (const props of properties) {
-        if (elOffset[props[0]] >= targetOffset[props[1]]) {
-            dir = props[1];
-            break;
-        }
-        if (elOffset[props[1]] <= targetOffset[props[0]]) {
-            dir = props[0];
-            break;
-        }
-    }
-
-    const props = includes(properties[0], dir) ? properties[1] : properties[0];
-    if (elOffset[props[0]] === targetOffset[props[0]]) {
-        align = props[0];
-    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
-        align = props[1];
-    } else {
-        align = 'center';
-    }
-
-    return [dir, align];
-}

package/src/js/core/drop.js

@@ -362,18 +362,17 @@ export default {
             const boundaryOffset = offset(boundary);
             const targetOffset = offset(this.target);
             const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-            const prop = this.axis === 'y' ? 'width' : 'height';
-
-            css(this.$el, `max-${prop}`, '');
 
             if (this.pos[1] === 'justify') {
+                const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
-            } else if (this.$el.offsetWidth > boundaryOffset.width) {
+            } else if (
+                this.$el.offsetWidth >
+                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
+            ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            css(this.$el, `max-${prop}`, boundaryOffset[prop]);
-
             this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         },
     },

package/src/js/mixin/position.js

@@ -25,19 +25,21 @@ export default {
 
     connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
     },
 
     methods: {
         positionAt(element, target, boundary) {
             const [dir, align] = this.pos;
+            const axis = this.getAxis(dir);
 
             let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
-                      getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
             offset = toPx(offset) + toPx(getCssVar('position-offset', element));
@@ -48,7 +50,7 @@ export default {
                 target: [dir, align],
             };
 
-            if (this.axis === 'y') {
+            if (axis === 'y') {
                 for (const prop in attach) {
                     attach[prop] = attach[prop].reverse();
                 }
@@ -61,6 +63,43 @@ export default {
                 boundary,
                 flip: this.flip,
             });
+
+            [this.dir, this.align] = getAlignment(element, target, this.pos);
+        },
+
+        getAxis(dir = this.dir) {
+            return includes(['top', 'bottom'], dir) ? 'y' : 'x';
         },
     },
 };
+
+function getAlignment(el, target, [dir, align]) {
+    const elOffset = getOffset(el);
+    const targetOffset = getOffset(target);
+    const properties = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+
+    for (const props of properties) {
+        if (elOffset[props[0]] >= targetOffset[props[1]]) {
+            dir = props[1];
+            break;
+        }
+        if (elOffset[props[1]] <= targetOffset[props[0]]) {
+            dir = props[0];
+            break;
+        }
+    }
+
+    const props = includes(properties[0], dir) ? properties[1] : properties[0];
+    if (elOffset[props[0]] === targetOffset[props[0]]) {
+        align = props[0];
+    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
+        align = props[1];
+    } else {
+        align = 'center';
+    }
+
+    return [dir, align];
+}