uikit 3.13.1-dev.dedbd3fce → 3.13.2-dev.696f00752

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.1-dev.dedbd3fce",
+    "version": "3.13.2-dev.696f00752",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,27 +34,27 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.16.0",
+        "@babel/core": "^7.17.8",
         "@babel/preset-env": "^7.16.4",
         "@rollup/plugin-alias": "^3.1.9",
-        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^3.0.1",
         "archiver": "^5.3.0",
         "camelcase": "^6.3.0",
         "clean-css": "^5.2.4",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.23",
-        "eslint": "^8.9.0",
-        "eslint-config-prettier": "^8.3.0",
-        "fs-extra": "^10.0.0",
+        "esbuild": "^0.14.27",
+        "eslint": "^8.11.0",
+        "eslint-config-prettier": "^8.5.0",
+        "fs-extra": "^10.0.1",
         "glob": "^7.2.0",
-        "inquirer": "^8.2.0",
+        "inquirer": "^8.2.1",
         "less": "^4.1.2",
         "minimist": "^1.2.5",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.5.1",
-        "rollup": "^2.68.0",
+        "prettier": "^2.6.0",
+        "rollup": "^2.70.1",
         "rollup-plugin-esbuild": "^4.8.2",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/js/components/tooltip.js

@@ -35,7 +35,6 @@ export default {
         animation: ['uk-animation-scale-up'],
         duration: 100,
         cls: 'uk-active',
-        clsPos: 'uk-tooltip',
     },
 
     beforeConnect() {
@@ -91,8 +90,8 @@ export default {
         _show() {
             this.tooltip = append(
                 this.container,
-                `<div class="${this.clsPos}">
-                    <div class="${this.clsPos}-inner">${this.title}</div>
+                `<div class="uk-${this.$options.name}">
+                    <div class="uk-${this.$options.name}-inner">${this.title}</div>
                  </div>`
             );
 

package/src/js/core/cover.js

@@ -15,7 +15,7 @@ export default {
     },
 
     events: {
-        load() {
+        'load loadedmetadata'() {
             this.$emit('resize');
         },
     },

package/src/js/core/drop.js

@@ -63,7 +63,7 @@ export default {
     },
 
     connected() {
-        this.clsPos = this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
+        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -129,7 +129,7 @@ export default {
                 if (this.isToggled()) {
                     this.hide(false);
                 } else {
-                    this.show(toggle.$el, false);
+                    this.show(toggle?.$el, false);
                 }
             },
         },
@@ -141,7 +141,7 @@ export default {
 
             handler(e, toggle) {
                 e.preventDefault();
-                this.show(toggle.$el);
+                this.show(toggle?.$el);
             },
         },
 
@@ -352,23 +352,20 @@ export default {
         },
 
         position() {
-            const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
+            const boundary = query(this.boundary, this.$el) || window;
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
             const boundaryOffset = offset(boundary);
-            const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
+            const targetOffset = offset(this.target);
+            const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
             } else if (
-                boundary &&
                 this.$el.offsetWidth >
-                    Math.max(
-                        boundaryOffset.right - alignTo.left,
-                        alignTo.right - boundaryOffset.left
-                    )
+                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
             ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }

package/src/js/core/navbar.js

@@ -16,6 +16,7 @@ import {
     isVisible,
     matches,
     noop,
+    offset,
     once,
     parent,
     query,
@@ -42,7 +43,6 @@ export default {
         delayShow: Number,
         delayHide: Number,
         dropbar: Boolean,
-        dropbarMode: String,
         dropbarAnchor: Boolean,
         duration: Number,
     },
@@ -59,7 +59,6 @@ export default {
         flip: 'x',
         boundary: true,
         dropbar: false,
-        dropbarMode: 'slide',
         dropbarAnchor: false,
         duration: 200,
         forceHeight: true,
@@ -68,8 +67,8 @@ export default {
     },
 
     computed: {
-        boundary({ boundary, boundaryAlign }, $el) {
-            return boundary === true || boundaryAlign ? $el : boundary;
+        boundary({ boundary }, $el) {
+            return boundary === true ? $el : boundary;
         },
 
         dropbarAnchor({ dropbarAnchor }, $el) {
@@ -276,10 +275,16 @@ export default {
                 return this.dropbar;
             },
 
-            handler() {
+            handler(_, { $el }) {
+                if (!hasClass($el, this.clsDrop)) {
+                    return;
+                }
+
                 if (!parent(this.dropbar)) {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
+
+                addClass($el, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -299,16 +304,10 @@ export default {
                     return;
                 }
 
-                if (this.dropbarMode === 'slide') {
-                    addClass(this.dropbar, 'uk-navbar-dropbar-slide');
-                }
-
-                this.clsDrop && addClass($el, `${this.clsDrop}-dropbar`);
-
                 if (dir === 'bottom') {
                     this.transitionTo(
-                        $el.offsetHeight +
-                            toFloat(css($el, 'marginTop')) +
+                        offset($el).bottom -
+                            offset(this.dropbar).top +
                             toFloat(css($el, 'marginBottom')),
                         $el
                     );

package/src/js/core/responsive.js

@@ -2,7 +2,7 @@ import Resize from '../mixin/resize';
 import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
-    mixin: [Resize],
+    mixins: [Resize],
 
     props: ['width', 'height'],
 

package/src/js/core/sticky.js

@@ -14,6 +14,7 @@ import {
     height as getHeight,
     offset as getOffset,
     getScrollingElement,
+    intersectRect,
     isString,
     isVisible,
     noop,
@@ -29,7 +30,6 @@ import {
     toPx,
     trigger,
     within,
-    intersectRect,
 } from 'uikit-util';
 
 export default {

package/src/js/core/switcher.js

@@ -148,27 +148,21 @@ export default {
 
         show(item) {
             const prev = this.index();
-            const next = getIndex(
-                this.children[getIndex(item, this.toggles, prev)],
-                children(this.$el)
-            );
-
-            if (prev === next) {
-                return;
-            }
-
+            const next = getIndex(item, this.toggles, prev);
+            const active = getIndex(this.children[next], children(this.$el));
             children(this.$el).forEach((child, i) => {
-                toggleClass(child, this.cls, next === i);
-                attr(this.toggles[i], 'aria-expanded', next === i);
+                toggleClass(child, this.cls, active === i);
+                attr(this.toggles[i], 'aria-expanded', active === i);
             });
 
+            const animate = prev >= 0 && prev !== next;
             this.connects.forEach(async ({ children }) => {
                 await this.toggleElement(
                     toNodes(children).filter((child) => hasClass(child, this.cls)),
                     false,
-                    prev >= 0
+                    animate
                 );
-                await this.toggleElement(children[next], true, prev >= 0);
+                await this.toggleElement(children[active], true, animate);
             });
         },
     },

package/src/js/mixin/media.js

@@ -1,12 +1,12 @@
 import {
+    createEvent,
     getCssVar,
+    isNumeric,
     isString,
     on,
-    trigger,
-    toFloat,
     startsWith,
-    isNumeric,
-    createEvent,
+    toFloat,
+    trigger,
 } from 'uikit-util';
 
 export default {

package/src/js/mixin/position.js

@@ -1,12 +1,13 @@
 import {
     $,
     flipPosition,
+    getCssVar,
     offset as getOffset,
+    includes,
     isNumeric,
     isRtl,
     positionAt,
-    removeClasses,
-    toggleClass,
+    toPx,
 } from 'uikit-util';
 
 export default {
@@ -14,14 +15,12 @@ export default {
         pos: String,
         offset: null,
         flip: Boolean,
-        clsPos: String,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
-        clsPos: '',
     },
 
     connected() {
@@ -32,13 +31,11 @@ export default {
 
     methods: {
         positionAt(element, target, boundary) {
-            removeClasses(element, `${this.clsPos}-(top|bottom|left|right)(-[a-z]+)?`);
-
-            let { offset } = this;
             const axis = this.getAxis();
             const dir = this.pos[0];
             const align = this.pos[1];
 
+            let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
@@ -46,28 +43,60 @@ export default {
                       getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
+            offset += toPx(getCssVar('position-margin-offset', element));
 
-            const { x, y } = positionAt(
-                element,
-                target,
-                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
-                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
-                axis === 'x'
-                    ? `${dir === 'left' ? -offset : offset}`
-                    : ` ${dir === 'top' ? -offset : offset}`,
-                null,
-                this.flip,
-                boundary
-            ).target;
-
-            this.dir = axis === 'x' ? x : y;
-            this.align = axis === 'x' ? y : x;
+            positionAt(element, target, {
+                boundary,
+                flip: this.flip,
+                attach: {
+                    element: axis === 'x' ? [flipPosition(dir), align] : [align, flipPosition(dir)],
+                    target: axis === 'x' ? [dir, align] : [align, dir],
+                },
+                offset:
+                    axis === 'x'
+                        ? [dir === 'left' ? -offset : +offset, 0]
+                        : [0, dir === 'top' ? -offset : +offset],
+            });
 
-            toggleClass(element, `${this.clsPos}-${this.dir}-${this.align}`, this.offset === false);
+            [this.dir, this.align] = getAlignment(element, target);
+            console.log(this.dir, this.align);
         },
 
         getAxis() {
-            return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+            return includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
         },
     },
 };
+
+function getAlignment(el, target) {
+    const elOffset = getOffset(el);
+    const targetOffset = getOffset(target);
+    const properties = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+
+    let dir;
+    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;
+        }
+    }
+
+    let align;
+    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/util/dimensions.js

@@ -41,8 +41,8 @@ export function offset(element, coordinates) {
         const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs) {
-            for (const i in dirs[dir]) {
-                currentOffset[dirs[dir][i]] += offsetBy[dir];
+            for (const prop of dirs[dir]) {
+                currentOffset[prop] += offsetBy[dir];
             }
         }
     }