uikit 3.13.9 → 3.13.11-dev.1296bb84c

package/src/js/mixin/parallax.js

@@ -4,7 +4,6 @@ import {
     createEvent,
     css,
     Dimensions,
-    each,
     findIndex,
     isNumber,
     isString,
@@ -65,7 +64,9 @@ export default {
 
     methods: {
         reset() {
-            each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
+            for (const prop in this.getCss(0)) {
+                css(this.$el, prop, '');
+            }
         },
 
         getCss(percent) {
@@ -79,12 +80,16 @@ export default {
 };
 
 function transformFn(prop, el, stops) {
-    const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
     let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
         transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
+    } else if (prop === 'scale') {
+        unit = '';
+        transformFn = (stop) =>
+            getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
     }
 
     if (stops.length === 1) {

package/src/js/mixin/position.js

@@ -3,6 +3,7 @@ import {
     flipPosition,
     getCssVar,
     offset as getOffset,
+    includes,
     isNumeric,
     isRtl,
     positionAt,
@@ -20,49 +21,48 @@ export default {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
+        viewportPadding: 10,
     },
 
     connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.dir = this.pos[0];
-        this.align = this.pos[1];
+        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
     },
 
     methods: {
         positionAt(element, target, boundary) {
-            const axis = this.getAxis();
-            const dir = this.pos[0];
-            const align = this.pos[1];
+            const [dir, align] = this.pos;
 
             let { offset } = this;
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
-                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[this.axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[this.axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
             offset = toPx(offset) + toPx(getCssVar('position-offset', element));
+            offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
 
-            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;
+            const attach = {
+                element: [flipPosition(dir), align],
+                target: [dir, align],
+            };
 
-            this.dir = axis === 'x' ? x : y;
-            this.align = axis === 'x' ? y : x;
-        },
+            if (this.axis === 'y') {
+                for (const prop in attach) {
+                    attach[prop] = attach[prop].reverse();
+                }
+                offset = offset.reverse();
+            }
 
-        getAxis() {
-            return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                viewportPadding: this.viewportPadding,
+                flip: this.flip,
+            });
         },
     },
 };

package/src/js/uikit-core.js

@@ -1,5 +1,4 @@
 import UIkit from './api/index';
-import Core from './core/core';
 import boot from './api/boot';
 import * as components from './core/index';
 import { each } from 'uikit-util';
@@ -7,9 +6,6 @@ import { each } from 'uikit-util';
 // register components
 each(components, (component, name) => UIkit.component(name, component));
 
-// core functionality
-UIkit.use(Core);
-
 boot(UIkit);
 
 export default UIkit;

package/src/js/util/lang.js

@@ -133,10 +133,6 @@ export function toWindow(element) {
     return document?.defaultView || window;
 }
 
-export function toMs(time) {
-    return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
-}
-
 export function isEqual(value, other) {
     return (
         value === other ||
@@ -204,48 +200,44 @@ export function pointInRect(point, rect) {
     );
 }
 
-export const Dimensions = {
-    ratio(dimensions, prop, value) {
-        const aProp = prop === 'width' ? 'height' : 'width';
-
-        return {
-            [aProp]: dimensions[prop]
-                ? Math.round((value * dimensions[aProp]) / dimensions[prop])
-                : dimensions[aProp],
-            [prop]: value,
-        };
-    },
-
-    contain(dimensions, maxDimensions) {
-        dimensions = { ...dimensions };
-
-        each(
-            dimensions,
-            (_, prop) =>
-                (dimensions =
-                    dimensions[prop] > maxDimensions[prop]
-                        ? this.ratio(dimensions, prop, maxDimensions[prop])
-                        : dimensions)
-        );
+function ratio(dimensions, prop, value) {
+    const aProp = prop === 'width' ? 'height' : 'width';
 
-        return dimensions;
-    },
+    return {
+        [aProp]: dimensions[prop]
+            ? Math.round((value * dimensions[aProp]) / dimensions[prop])
+            : dimensions[aProp],
+        [prop]: value,
+    };
+}
 
-    cover(dimensions, maxDimensions) {
-        dimensions = this.contain(dimensions, maxDimensions);
+function contain(dimensions, maxDimensions) {
+    dimensions = { ...dimensions };
 
-        each(
-            dimensions,
-            (_, prop) =>
-                (dimensions =
-                    dimensions[prop] < maxDimensions[prop]
-                        ? this.ratio(dimensions, prop, maxDimensions[prop])
-                        : dimensions)
-        );
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] > maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
+
+function cover(dimensions, maxDimensions) {
+    dimensions = contain(dimensions, maxDimensions);
+
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] < maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
 
-        return dimensions;
-    },
-};
+export const Dimensions = { ratio, contain, cover };
 
 export function getIndex(i, elements, current = 0, finite = false) {
     elements = toNodes(elements);

package/src/js/util/position.js

@@ -1,156 +1,211 @@
 import { offset } from './dimensions';
-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,
-    elAttach,
-    targetAttach,
-    elOffset,
-    targetOffset,
-    flip,
-    boundary
-) {
-    elAttach = getPos(elAttach);
-    targetAttach = getPos(targetAttach);
-
-    const flipped = { element: elAttach, target: targetAttach };
-
-    if (!element || !target) {
-        return flipped;
+import { clamp, includes, ucfirst } from './lang';
+import { offsetViewport, 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, [prop, dir, start, end]] of Object.entries(dirs)) {
+        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];
     }
+    return position;
+}
 
-    const dim = offset(element);
+function attachToWithFlip(element, target, options) {
+    const position = attachTo(element, target, options);
     const targetDim = offset(target);
-    const position = targetDim;
 
-    moveTo(position, elAttach, dim, -1);
-    moveTo(position, targetAttach, targetDim, 1);
+    let {
+        flip,
+        attach: { element: elAttach, target: targetAttach },
+        offset: elOffset,
+        boundary,
+        viewport,
+        viewportPadding,
+    } = options;
+
+    let viewports = scrollParents(element);
+    if (boundary === target) {
+        viewports = viewports.filter((viewport) => viewport !== boundary);
+    }
+    const [scrollElement] = viewports;
+    viewports.push(viewport);
 
-    elOffset = getOffsets(elOffset, dim.width, dim.height);
-    targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
+    const offsetPosition = { ...position };
+    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
+        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.filter(Boolean).map(offsetViewport));
 
-    if (flip) {
-        let boundaries = scrollParents(element).map(getViewport);
+        if (viewportPadding) {
+            viewport[start] += viewportPadding;
+            viewport[end] -= viewportPadding;
+        }
 
-        if (boundary && !includes(boundaries, boundary)) {
-            boundaries.unshift(boundary);
+        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
+            viewport = getIntersectionArea(viewport, offset(boundary));
         }
 
-        boundaries = boundaries.map((el) => offset(el));
+        const isInStartBoundary = position[start] >= viewport[start];
+        const isInEndBoundary = position[end] <= viewport[end];
 
-        each(dirs, ([dir, align, alignFlip], prop) => {
-            if (!(flip === true || includes(flip, dir))) {
-                return;
+        if (isInStartBoundary && isInEndBoundary) {
+            continue;
+        }
+
+        let offsetBy;
+
+        // Flip
+        if (willFlip) {
+            if (
+                (elAttach[i] === end && isInStartBoundary) ||
+                (elAttach[i] === start && isInEndBoundary)
+            ) {
+                continue;
             }
 
-            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)
-                    );
+            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;
+
+            if (
+                !isInScrollArea(
+                    {
+                        ...position,
+                        [start]: position[start] + offsetBy,
+                        [end]: position[end] + offsetBy,
+                    },
+                    scrollElement,
+                    i
+                )
+            ) {
+                if (isInScrollArea(position, scrollElement, i)) {
+                    continue;
+                }
+
+                if (options.recursion) {
+                    return false;
                 }
 
-                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;
-                    }
+                const newPos = attachToWithFlip(element, target, {
+                    ...options,
+                    attach: {
+                        element: elAttach.map(flipDir).reverse(),
+                        target: targetAttach.map(flipDir).reverse(),
+                    },
+                    offset: elOffset.reverse(),
+                    flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
+                    recursion: true,
+                });
+
+                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                    return newPos;
                 }
-            });
-        });
+            }
+
+            // 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];
+        }
+
+        offsetPosition[start] = position[dir] = position[start] + offsetBy;
+        offsetPosition[end] += offsetBy;
     }
 
-    offset(element, position);
+    return offsetPosition;
+}
 
-    return flipped;
+function moveBy(start, end, dim) {
+    return start === 'center' ? dim / 2 : start === end ? dim : 0;
 }
 
-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 getIntersectionArea(...rects) {
+    let area = {};
+    for (const rect of rects) {
+        for (const [, , start, end] of dirs) {
+            area[start] = Math.max(area[start] || 0, rect[start]);
+            area[end] = Math.min(...[area[end], rect[end]].filter(Boolean));
         }
-    });
+    }
+    return area;
 }
 
-function getPos(pos) {
-    const x = /left|center|right/;
-    const y = /top|center|bottom/;
-
-    pos = (pos || '').split(' ');
+function isInScrollArea(position, scrollElement, dir) {
+    const viewport = offsetViewport(scrollElement);
+    const [prop, , start, end] = dirs[dir];
+    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
+    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`];
 
-    if (pos.length === 1) {
-        pos = x.test(pos[0])
-            ? pos.concat('center')
-            : y.test(pos[0])
-            ? ['center'].concat(pos)
-            : ['center', 'center'];
-    }
-
-    return {
-        x: x.test(pos[0]) ? pos[0] : 'center',
-        y: y.test(pos[1]) ? pos[1] : 'center',
-    };
+    return position[start] >= viewport[start] && position[end] <= viewport[end];
 }
 
-function getOffsets(offsets, width, height) {
-    const [x, y] = (offsets || '').split(' ');
+function intersectLine(dimA, dimB, dir) {
+    const [, , start, end] = dirs[dir];
+    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+}
 
-    return {
-        x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
-        y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0,
-    };
+function flipDir(prop) {
+    for (let i = 0; i < dirs.length; i++) {
+        const index = dirs[i].indexOf(prop);
+        if (~index) {
+            return dirs[1 - i][(index % 2) + 2];
+        }
+    }
 }