uikit 3.13.6-dev.f130508b6 → 3.13.7-dev.120e5ee9c

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.6-dev.f130508b6",
+    "version": "3.13.7-dev.120e5ee9c",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/slider-parallax.js

@@ -8,7 +8,7 @@ export default {
         selItem: '!li',
     },
 
-    connected() {
+    beforeConnect() {
         this.item = query(this.selItem, this.$el);
     },
 

package/src/js/core/drop.js

@@ -360,7 +360,7 @@ export default {
             const targetOffset = offset(this.target);
             const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
-            if (this.align === 'justify') {
+            if (this.pos[1] === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
             } else if (

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

@@ -1,7 +1,10 @@
+import Resize from '../mixin/resize';
 import { getRows } from './margin';
 import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
 
 export default {
+    mixins: [Resize],
+
     args: 'target',
 
     props: {

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

@@ -46,11 +46,13 @@ export default {
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
             if (this.expand) {
-                minHeight =
+                minHeight = Math.max(
                     height(window) -
                         (dimensions(document.documentElement).height -
                             dimensions(this.$el).height) -
-                        box || '';
+                        box,
+                    0
+                );
             } else {
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                 minHeight = 'calc(100vh';

package/src/js/core/img.js

@@ -19,7 +19,6 @@ import {
     queryAll,
     removeAttr,
     startsWith,
-    toFloat,
     toPx,
     trigger,
 } from 'uikit-util';
@@ -89,25 +88,6 @@ export default {
         }
     },
 
-    update: {
-        write(store) {
-            if (!this.observer || isImg(this.$el)) {
-                return false;
-            }
-
-            const srcset = data(this.$el, 'data-srcset');
-            if (srcset && window.devicePixelRatio !== 1) {
-                const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
-                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
-                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
-                }
-            }
-        },
-
-        events: ['resize'],
-    },
-
     methods: {
         load() {
             if (this._data.image) {
@@ -197,43 +177,6 @@ function parseSources(sources) {
     return sources.filter((source) => !isEmpty(source));
 }
 
-const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
-function sizesToPixel(sizes) {
-    let matches;
-
-    sizesRe.lastIndex = 0;
-
-    while ((matches = sizesRe.exec(sizes))) {
-        if (!matches[1] || window.matchMedia(matches[1]).matches) {
-            matches = evaluateSize(matches[2]);
-            break;
-        }
-    }
-
-    return matches || '100vw';
-}
-
-const sizeRe = /\d+(?:\w+|%)/g;
-const additionRe = /[+-]?(\d+)/g;
-function evaluateSize(size) {
-    return startsWith(size, 'calc')
-        ? size
-              .slice(5, -1)
-              .replace(sizeRe, (size) => toPx(size))
-              .replace(/ /g, '')
-              .match(additionRe)
-              .reduce((a, b) => a + +b, 0)
-        : size;
-}
-
-const srcSetRe = /\s+\d+w\s*(?:,|$)/g;
-function getSourceSize(srcset, sizes) {
-    const srcSize = toPx(sizesToPixel(sizes));
-    const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
-
-    return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
-}
-
 function ensureSrcAttribute(el) {
     if (isImg(el) && !hasAttr(el, 'src')) {
         attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');

package/src/js/mixin/position.js

@@ -3,7 +3,6 @@ import {
     flipPosition,
     getCssVar,
     offset as getOffset,
-    includes,
     isNumeric,
     isRtl,
     positionAt,
@@ -43,59 +42,27 @@ export default {
                       getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
-            offset = toPx(offset) + toPx(getCssVar('position-margin-offset', element));
+            offset = toPx(offset) + toPx(getCssVar('position-offset', element));
 
-            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],
-            });
+            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, this.align] = getAlignment(element, target);
+            this.dir = axis === 'x' ? x : y;
+            this.align = axis === 'x' ? y : x;
         },
 
         getAxis() {
-            return includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
+            return this.dir === 'top' || this.dir === 'bottom' ? '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/position.js

@@ -1,152 +1,156 @@
 import { offset } from './dimensions';
-import { clamp, includes } from './lang';
+import { each, endsWith, includes, toFloat } from './lang';
 import { getViewport, scrollParents } from './viewport';
 
-const dirs = [
-    ['width', 'x', 'left', 'right'],
-    ['height', 'y', 'top', 'bottom'],
-];
-
-export function positionAt(element, target, options) {
-    options = {
-        attach: {
-            element: ['left', 'top'],
-            target: ['left', 'top'],
-            ...options.attach,
-        },
-        offset: [0, 0],
-        ...options,
-    };
-
-    const dim = options.flip
-        ? attachToWithFlip(element, target, options)
-        : attachTo(element, target, options);
-
-    offset(element, dim);
-}
-
-function attachTo(element, target, options) {
-    let { attach, offset: offsetBy } = {
-        attach: {
-            element: ['left', 'top'],
-            target: ['left', 'top'],
-            ...options.attach,
-        },
-        offset: [0, 0],
-        ...options,
-    };
-
-    const position = offset(element);
-    const targetOffset = offset(target);
-    for (const i in dirs) {
-        const [prop, dir, start, end] = dirs[i];
-        position[start] = position[dir] =
-            targetOffset[start] +
-            moveBy(attach.target[i], end, targetOffset[prop]) -
-            moveBy(attach.element[i], end, position[prop]) +
-            +offsetBy[i];
-        position[end] = position[start] + position[prop];
+const dirs = {
+    width: ['x', 'left', 'right'],
+    height: ['y', 'top', 'bottom'],
+};
+
+export function positionAt(
+    element,
+    target,
+    elAttach,
+    targetAttach,
+    elOffset,
+    targetOffset,
+    flip,
+    boundary
+) {
+    elAttach = getPos(elAttach);
+    targetAttach = getPos(targetAttach);
+
+    const flipped = { element: elAttach, target: targetAttach };
+
+    if (!element || !target) {
+        return flipped;
     }
-    return position;
-}
 
-function attachToWithFlip(element, target, options) {
-    const position = attachTo(element, target, options);
+    const dim = offset(element);
     const targetDim = offset(target);
-    const viewports = scrollParents(element).map(getViewport);
-
-    let {
-        flip,
-        attach: { element: elAttach, target: targetAttach },
-        offset: elOffset,
-        boundary,
-        viewport,
-    } = options;
+    const position = targetDim;
 
-    viewports.push(viewport);
+    moveTo(position, elAttach, dim, -1);
+    moveTo(position, targetAttach, targetDim, 1);
 
-    for (const i in dirs) {
-        const [prop, dir, start, end] = dirs[i];
+    elOffset = getOffsets(elOffset, dim.width, dim.height);
+    targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
 
-        if (flip !== true && !includes(flip, dir)) {
-            continue;
-        }
+    elOffset['x'] += targetOffset['x'];
+    elOffset['y'] += targetOffset['y'];
 
-        const willFlip =
-            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
+    position.left += elOffset['x'];
+    position.top += elOffset['y'];
 
-        viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+    if (flip) {
+        let boundaries = scrollParents(element).map(getViewport);
 
-        if (isInStartBoundary && isInEndBoundary) {
-            continue;
+        if (boundary && !includes(boundaries, boundary)) {
+            boundaries.unshift(boundary);
         }
 
-        let offsetBy;
+        boundaries = boundaries.map((el) => offset(el));
 
-        // Flip
-        if (willFlip) {
-            if (
-                (elAttach[i] === end && isInStartBoundary) ||
-                (elAttach[i] === start && isInEndBoundary)
-            ) {
-                continue;
+        each(dirs, ([dir, align, alignFlip], prop) => {
+            if (!(flip === true || includes(flip, dir))) {
+                return;
             }
 
-            offsetBy =
-                (elAttach[i] === start
-                    ? -position[prop]
-                    : elAttach[i] === end
-                    ? position[prop]
-                    : 0) +
-                (targetAttach[i] === start
-                    ? targetDim[prop]
-                    : targetAttach[i] === end
-                    ? -targetDim[prop]
-                    : 0) -
-                elOffset[i] * 2;
-
-            // Move
-        } else {
-            offsetBy =
-                clamp(
-                    clamp(position[start], viewport[start], viewport[end] - position[prop]),
-                    targetDim[start] - position[prop] + elOffset[i],
-                    targetDim[end] - elOffset[i]
-                ) - position[start];
-        }
-
-        position[start] = position[dir] = position[start] + offsetBy;
-        position[end] += offsetBy;
+            boundaries.some((boundary) => {
+                const elemOffset =
+                    elAttach[dir] === align
+                        ? -dim[prop]
+                        : elAttach[dir] === alignFlip
+                        ? dim[prop]
+                        : 0;
+
+                const targetOffset =
+                    targetAttach[dir] === align
+                        ? targetDim[prop]
+                        : targetAttach[dir] === alignFlip
+                        ? -targetDim[prop]
+                        : 0;
+
+                if (
+                    position[align] < boundary[align] ||
+                    position[align] + dim[prop] > boundary[alignFlip]
+                ) {
+                    const centerOffset = dim[prop] / 2;
+                    const centerTargetOffset =
+                        targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
+
+                    return (
+                        (elAttach[dir] === 'center' &&
+                            (apply(centerOffset, centerTargetOffset) ||
+                                apply(-centerOffset, -centerTargetOffset))) ||
+                        apply(elemOffset, targetOffset)
+                    );
+                }
+
+                function apply(elemOffset, targetOffset) {
+                    const newVal = toFloat(
+                        (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4)
+                    );
+
+                    if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
+                        position[align] = newVal;
+
+                        for (const el of ['element', 'target']) {
+                            if (elemOffset) {
+                                flipped[el][dir] =
+                                    flipped[el][dir] === dirs[prop][1]
+                                        ? dirs[prop][2]
+                                        : dirs[prop][1];
+                            }
+                        }
+
+                        return true;
+                    }
+                }
+            });
+        });
     }
 
-    return position;
-}
+    offset(element, position);
 
-function moveBy(start, end, dim) {
-    return start === 'center' ? dim / 2 : start === end ? dim : 0;
+    return flipped;
 }
 
-function getIntersectionArea(...elements) {
-    let intersection;
-    for (const el of elements.filter(Boolean)) {
-        const rect = offset(el);
-        if (!intersection) {
-            intersection = rect;
-            continue;
-        }
-        for (const prop of ['left', 'top']) {
-            intersection[prop] = Math.max(rect[prop], intersection[prop]);
-        }
-        for (const prop of ['right', 'bottom']) {
-            intersection[prop] = Math.min(rect[prop], intersection[prop]);
+function moveTo(position, attach, dim, factor) {
+    each(dirs, ([dir, align, alignFlip], prop) => {
+        if (attach[dir] === alignFlip) {
+            position[align] += dim[prop] * factor;
+        } else if (attach[dir] === 'center') {
+            position[align] += (dim[prop] * factor) / 2;
         }
+    });
+}
+
+function getPos(pos) {
+    const x = /left|center|right/;
+    const y = /top|center|bottom/;
+
+    pos = (pos || '').split(' ');
+
+    if (pos.length === 1) {
+        pos = x.test(pos[0])
+            ? pos.concat('center')
+            : y.test(pos[0])
+            ? ['center'].concat(pos)
+            : ['center', 'center'];
     }
-    return intersection;
+
+    return {
+        x: x.test(pos[0]) ? pos[0] : 'center',
+        y: y.test(pos[1]) ? pos[1] : 'center',
+    };
 }
 
-function intersectLine(dimA, dimB, dir) {
-    const [, , start, end] = dirs[dir];
-    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+function getOffsets(offsets, width, height) {
+    const [x, y] = (offsets || '').split(' ');
+
+    return {
+        x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
+        y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0,
+    };
 }

package/src/less/components/drop.less

@@ -41,7 +41,7 @@
     /* 2 */
     position: absolute;
     z-index: @drop-z-index;
-    --uk-position-margin-offset: @drop-margin;
+    --uk-position-offset: @drop-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;

package/src/less/components/dropdown.less

@@ -53,7 +53,7 @@
     /* 2 */
     position: absolute;
     z-index: @dropdown-z-index;
-    --uk-position-margin-offset: @dropdown-margin;
+    --uk-position-offset: @dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;

package/src/less/components/nav.less

@@ -94,7 +94,6 @@
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Reset link
-* 4. Space is allocated solely based on content dimensions: 0 0 auto
  */
 
 .uk-nav li > a {
@@ -107,9 +106,6 @@
     text-decoration: none;
 }
 
-/* 4 */
-.uk-nav li > a > * { flex: none; }
-
 /*
  * Items
  * Must target `a` elements to exclude other elements (e.g. lists)
@@ -177,7 +173,7 @@ ul.uk-nav-sub {
 /* Divider
  ========================================================================== */
 
-.uk-nav >.uk-nav-divider {
+.uk-nav .uk-nav-divider {
     margin: @nav-divider-margin-vertical @nav-divider-margin-horizontal;
     .hook-nav-divider();
 }

package/src/less/components/navbar.less

@@ -349,7 +349,7 @@
     /* 2 */
     position: absolute;
     z-index: @navbar-dropdown-z-index;
-    --uk-position-margin-offset: @navbar-dropdown-margin;
+    --uk-position-offset: @navbar-dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
@@ -397,7 +397,7 @@
 
 .uk-navbar-dropdown-dropbar {
     /* 1 */
-    --uk-position-margin-offset: @navbar-dropdown-dropbar-margin-top;
+    --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
     /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
     padding: @navbar-dropdown-dropbar-padding;

package/src/less/components/tooltip.less

@@ -50,7 +50,7 @@
     /* 2 */
     position: absolute;
     z-index: @tooltip-z-index;
-    --uk-position-margin-offset: @tooltip-margin;
+    --uk-position-offset: @tooltip-margin;
     /* 3 */
     top: 0;
     /* 4 */

package/src/scss/components/drop.scss

@@ -41,7 +41,7 @@ $drop-width:                                 300px !default;
     /* 2 */
     position: absolute;
     z-index: $drop-z-index;
-    --uk-position-margin-offset: #{$drop-margin};
+    --uk-position-offset: #{$drop-margin};
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;

package/src/scss/components/dropdown.scss

@@ -53,7 +53,7 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     /* 2 */
     position: absolute;
     z-index: $dropdown-z-index;
-    --uk-position-margin-offset: #{$dropdown-margin};
+    --uk-position-offset: #{$dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     min-width: $dropdown-min-width;

package/src/scss/components/nav.scss

@@ -94,7 +94,6 @@ $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20widt
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Reset link
-* 4. Space is allocated solely based on content dimensions: 0 0 auto
  */
 
 .uk-nav li > a {
@@ -107,9 +106,6 @@ $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20widt
     text-decoration: none;
 }
 
-/* 4 */
-.uk-nav li > a > * { flex: none; }
-
 /*
  * Items
  * Must target `a` elements to exclude other elements (e.g. lists)
@@ -177,7 +173,7 @@ ul.uk-nav-sub {
 /* Divider
  ========================================================================== */
 
-.uk-nav >.uk-nav-divider {
+.uk-nav .uk-nav-divider {
     margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
     @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
 }

package/src/scss/components/navbar.scss

@@ -349,7 +349,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 2 */
     position: absolute;
     z-index: $navbar-dropdown-z-index;
-    --uk-position-margin-offset: #{$navbar-dropdown-margin};
+    --uk-position-offset: #{$navbar-dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
@@ -397,7 +397,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-dropdown-dropbar {
     /* 1 */
-    --uk-position-margin-offset: #{$navbar-dropdown-dropbar-margin-top};
+    --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
     /* 2 */
     margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
     padding: $navbar-dropdown-dropbar-padding;

package/src/scss/components/tooltip.scss

@@ -50,7 +50,7 @@ $tooltip-font-size:                              12px !default;
     /* 2 */
     position: absolute;
     z-index: $tooltip-z-index;
-    --uk-position-margin-offset: #{$tooltip-margin};
+    --uk-position-offset: #{$tooltip-margin};
     /* 3 */
     top: 0;
     /* 4 */