uikit 3.13.10 → 3.13.11-dev.eb080f280

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 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];
     }
+    return position;
+}
 
-    const dim = offset(element);
+function attachToWithFlip(element, target, options) {
+    const position = attachTo(element, target, options);
     const targetDim = offset(target);
-    const position = targetDim;
+    const viewports = scrollParents(element, /auto|scroll/);
+    const [scrollElement] = viewports;
+
+    let {
+        flip,
+        attach: { element: elAttach, target: targetAttach },
+        offset: elOffset,
+        boundary,
+        viewport,
+        viewportPadding,
+    } = options;
+
+    viewports.push(viewport);
+
+    const offsetPosition = { ...position };
+    for (const i in dirs) {
+        const [prop, dir, start, end] = dirs[i];
+
+        if (flip !== true && !includes(flip, dir)) {
+            continue;
+        }
 
-    moveTo(position, elAttach, dim, -1);
-    moveTo(position, targetAttach, targetDim, 1);
+        const willFlip =
+            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-    elOffset = getOffsets(elOffset, dim.width, dim.height);
-    targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
+        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
 
-    elOffset['x'] += targetOffset['x'];
-    elOffset['y'] += targetOffset['y'];
+        if (viewportPadding) {
+            viewport[start] += viewportPadding;
+            viewport[end] -= viewportPadding;
+        }
 
-    position.left += elOffset['x'];
-    position.top += elOffset['y'];
+        if (boundary && !(willFlip || position[prop] > offset(boundary)[prop])) {
+            viewport = getIntersectionArea(viewport, offset(boundary));
+        }
 
-    if (flip) {
-        let boundaries = scrollParents(element).map(getViewport);
+        const isInStartBoundary = position[start] >= viewport[start];
+        const isInEndBoundary = position[end] <= viewport[end];
 
-        if (boundary && !includes(boundaries, boundary)) {
-            boundaries.unshift(boundary);
+        if (isInStartBoundary && isInEndBoundary) {
+            continue;
         }
 
-        boundaries = boundaries.map((el) => offset(el));
+        let offsetBy;
 
-        each(dirs, ([dir, align, alignFlip], prop) => {
-            if (!(flip === true || includes(flip, dir))) {
-                return;
+        // 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;
                 }
 
-                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;
-                    }
+                if (options.recursion) {
+                    return false;
                 }
-            });
-        });
+
+                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 (const i in dirs) {
+        const index = dirs[i].indexOf(prop);
+        if (~index) {
+            return dirs[1 - i][(index % 2) + 2];
+        }
+    }
 }

package/src/js/util/viewport.js

@@ -8,8 +8,10 @@ import {
     isDocument,
     isUndefined,
     isWindow,
+    toFloat,
     toNode,
     toWindow,
+    ucfirst,
 } from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
@@ -20,7 +22,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     return intersectRect(
         ...scrollParents(element)
             .map((parent) => {
-                const { top, left, bottom, right } = offset(getViewport(parent));
+                const { top, left, bottom, right } = offsetViewport(parent);
 
                 return {
                     top: top - offsetTop,
@@ -35,7 +37,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
 
 export function scrollTop(element, top) {
     if (isWindow(element) || isDocument(element)) {
-        element = getScrollingElement(element);
+        element = scrollingElement(element);
     } else {
         element = toNode(element);
     }
@@ -52,12 +54,13 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     return parents.reduce(
         (fn, scrollElement, i) => {
             const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
-            const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
-            const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
+            const viewport = offsetViewport(scrollElement);
+            const maxScroll = scrollHeight - viewport.height;
+            const { height: elHeight, top: elTop } = parents[i - 1]
+                ? offsetViewport(parents[i - 1])
+                : offset(element);
 
-            let top = Math.ceil(
-                elTop - offset(getViewport(scrollElement)).top - offsetBy + scrollTop
-            );
+            let top = Math.ceil(elTop - viewport.top - offsetBy + scrollTop);
 
             if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
                 top += offsetBy;
@@ -115,7 +118,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
 
     const [scrollElement] = scrollParents(element, /auto|scroll/, true);
     const { scrollHeight, scrollTop } = scrollElement;
-    const viewportHeight = getViewportClientHeight(scrollElement);
+    const { height: viewportHeight } = offsetViewport(scrollElement);
     const maxScroll = scrollHeight - viewportHeight;
     const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
 
@@ -126,7 +129,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
 }
 
 export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {
-    const scrollEl = getScrollingElement(element);
+    const scrollEl = scrollingElement(element);
 
     let ancestors = parents(element).reverse();
     ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
@@ -141,26 +144,43 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
             ancestors.filter(
                 (parent) =>
                     overflowRe.test(css(parent, 'overflow')) &&
-                    (!scrollable || parent.scrollHeight > getViewportClientHeight(parent))
+                    (!scrollable || parent.scrollHeight > offsetViewport(parent).height)
             )
         )
         .reverse();
 }
 
-export function getViewport(scrollElement) {
-    return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
+export function offsetViewport(scrollElement) {
+    let viewportElement = getViewport(scrollElement);
+
+    // iOS 12 returns <body> as scrollingElement
+    if (viewportElement === scrollingElement(viewportElement)) {
+        viewportElement = document.documentElement;
+    }
+
+    let rect = offset(viewportElement);
+    for (let [prop, dir, start, end] of [
+        ['width', 'x', 'left', 'right'],
+        ['height', 'y', 'top', 'bottom'],
+    ]) {
+        if (!isWindow(getViewport(viewportElement))) {
+            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
+        }
+        rect[prop] = rect[dir] = (
+            isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement
+        )[`client${ucfirst(prop)}`];
+        rect[end] = rect[prop] + rect[start];
+    }
+    return rect;
 }
 
-// iOS 12 returns <body> as scrollingElement
-export function getViewportClientHeight(scrollElement) {
-    return (
-        scrollElement === getScrollingElement(scrollElement)
-            ? document.documentElement
-            : scrollElement
-    ).clientHeight;
+function scrollingElement(element) {
+    const {
+        document: { scrollingElement },
+    } = toWindow(element);
+    return scrollingElement;
 }
 
-export function getScrollingElement(element) {
-    const { document } = toWindow(element);
-    return document.scrollingElement || document.documentElement;
+function getViewport(scrollElement) {
+    return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 }

package/src/less/components/drop.less

@@ -45,7 +45,6 @@
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
-    max-width: 100vw;
 }
 
 /* Show */

package/src/less/components/dropdown.less

@@ -29,6 +29,7 @@
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
+@dropdown-nav-subtitle-font-size:               @global-small-font-size;
 @dropdown-nav-header-color:                     @global-emphasis-color;
 @dropdown-nav-divider-border-width:             @global-border-width;
 @dropdown-nav-divider-border:                   @global-border;
@@ -74,7 +75,6 @@
  ========================================================================== */
 
 .uk-dropdown-nav {
-    white-space: nowrap;
     .hook-dropdown-nav();
 }
 
@@ -94,6 +94,15 @@
     .hook-dropdown-nav-item-hover();
 }
 
+/*
+ * Subtitle
+ */
+
+.uk-dropdown-nav .uk-nav-subtitle {
+    font-size: @dropdown-nav-subtitle-font-size;
+    .hook-dropdown-nav-subtitle();
+}
+
 /*
  * Header
  */
@@ -138,6 +147,7 @@
 .hook-dropdown-nav() {}
 .hook-dropdown-nav-item() {}
 .hook-dropdown-nav-item-hover() {}
+.hook-dropdown-nav-subtitle() {}
 .hook-dropdown-nav-header() {}
 .hook-dropdown-nav-divider() {}
 .hook-dropdown-misc() {}

package/src/less/components/icon.less

@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Link
+ * 1. Allow text within link
  */
 
 .uk-icon-link {
     color: @icon-link-color;
+    /* 1 */
+    text-decoration: none !important;
     .hook-icon-link();
 }
 

package/src/less/components/nav.less

@@ -48,6 +48,7 @@
 @nav-default-item-color:                        @global-muted-color;
 @nav-default-item-hover-color:                  @global-color;
 @nav-default-item-active-color:                 @global-emphasis-color;
+@nav-default-subtitle-font-size:                @global-small-font-size;
 @nav-default-header-color:                      @global-emphasis-color;
 @nav-default-divider-border-width:              @global-border-width;
 @nav-default-divider-border:                    @global-border;
@@ -60,6 +61,7 @@
 @nav-primary-item-color:                        @global-muted-color;
 @nav-primary-item-hover-color:                  @global-color;
 @nav-primary-item-active-color:                 @global-emphasis-color;
+@nav-primary-subtitle-font-size:                @global-medium-font-size;
 @nav-primary-header-color:                      @global-emphasis-color;
 @nav-primary-divider-border-width:              @global-border-width;
 @nav-primary-divider-border:                    @global-border;
@@ -207,6 +209,15 @@ ul.uk-nav-sub {
     .hook-nav-default-item-active();
 }
 
+/*
+ * Subtitle
+ */
+
+.uk-nav-default .uk-nav-subtitle {
+    font-size: @nav-default-subtitle-font-size;
+    .hook-nav-default-subtitle();
+}
+
 /*
  * Header
  */
@@ -266,6 +277,15 @@ ul.uk-nav-sub {
     .hook-nav-primary-item-active();
 }
 
+/*
+ * Subtitle
+ */
+
+ .uk-nav-primary .uk-nav-subtitle {
+    font-size: @nav-primary-subtitle-font-size;
+    .hook-nav-primary-subtitle();
+}
+
 /*
  * Header
  */
@@ -340,12 +360,14 @@ ul.uk-nav-sub {
 .hook-nav-default-item() {}
 .hook-nav-default-item-hover() {}
 .hook-nav-default-item-active() {}
+.hook-nav-default-subtitle() {}
 .hook-nav-default-header() {}
 .hook-nav-default-divider() {}
 .hook-nav-primary() {}
 .hook-nav-primary-item() {}
 .hook-nav-primary-item-hover() {}
 .hook-nav-primary-item-active() {}
+.hook-nav-primary-subtitle() {}
 .hook-nav-primary-header() {}
 .hook-nav-primary-divider() {}
 .hook-nav-dividers() {}

package/src/less/components/navbar.less

@@ -66,11 +66,12 @@
 
 @navbar-dropdown-dropbar-margin-top:            0px;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
-@navbar-dropdown-dropbar-padding:               @navbar-nav-item-padding-horizontal;
+@navbar-dropdown-dropbar-padding-horizontal:    @navbar-nav-item-padding-horizontal;
 
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
 @navbar-dropdown-nav-item-active-color:         @global-emphasis-color;
+@navbar-dropdown-nav-subtitle-font-size:        @global-small-font-size;
 @navbar-dropdown-nav-header-color:              @global-emphasis-color;
 @navbar-dropdown-nav-divider-border-width:      @global-border-width;
 @navbar-dropdown-nav-divider-border:            @global-border;
@@ -316,6 +317,17 @@
 }
 
 
+/* Justify modifier
+ ========================================================================== */
+
+.uk-navbar-justify .uk-navbar-left,
+.uk-navbar-justify .uk-navbar-right,
+.uk-navbar-justify .uk-navbar-nav,
+.uk-navbar-justify .uk-navbar-nav > li,        // Nav item
+.uk-navbar-justify .uk-navbar-item,            // Content item
+.uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
+
+
 /* Style modifiers
  ========================================================================== */
 
@@ -400,7 +412,9 @@
     --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
     /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
-    padding: @navbar-dropdown-dropbar-padding;
+    /* 3 */
+    padding-left: @navbar-dropdown-dropbar-padding-horizontal;
+    padding-right: @navbar-dropdown-dropbar-padding-horizontal;
     .hook-navbar-dropdown-dropbar();
 }
 
@@ -434,6 +448,15 @@
     .hook-navbar-dropdown-nav-item-active();
 }
 
+/*
+ * Subtitle
+ */
+
+.uk-navbar-dropdown-nav .uk-nav-subtitle {
+    font-size: @navbar-dropdown-nav-subtitle-font-size;
+    .hook-navbar-dropdown-nav-subtitle();
+}
+
 /*
  * Header
  */
@@ -502,6 +525,7 @@
 .hook-navbar-dropdown-nav-item() {}
 .hook-navbar-dropdown-nav-item-hover() {}
 .hook-navbar-dropdown-nav-item-active() {}
+.hook-navbar-dropdown-nav-subtitle() {}
 .hook-navbar-dropdown-nav-header() {}
 .hook-navbar-dropdown-nav-divider() {}
 .hook-navbar-dropbar(){}

package/src/less/components/search.less

@@ -154,6 +154,7 @@
     align-items: center;
     /* 3 */
     color: @search-icon-color;
+    .hook-search-icon();
 }
 
 /*
@@ -294,6 +295,7 @@
 .hook-search-misc();
 
 .hook-search-input() {}
+.hook-search-icon() {}
 .hook-search-default-input() {}
 .hook-search-default-input-focus() {}
 .hook-search-navbar-input() {}