uikit 3.13.8-dev.f030a8b39 → 3.13.9

package/src/js/util/position.js

@@ -1,155 +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 || position[prop] > offset(boundary)[prop] ? 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/dropdown.less

@@ -29,7 +29,6 @@
 
 @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;
@@ -75,6 +74,7 @@
  ========================================================================== */
 
 .uk-dropdown-nav {
+    white-space: nowrap;
     .hook-dropdown-nav();
 }
 
@@ -94,15 +94,6 @@
     .hook-dropdown-nav-item-hover();
 }
 
-/*
- * Subtitle
- */
-
-.uk-dropdown-nav .uk-nav-subtitle {
-    font-size: @dropdown-nav-subtitle-font-size;
-    .hook-dropdown-nav-subtitle();
-}
-
 /*
  * Header
  */
@@ -147,7 +138,6 @@
 .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/nav.less

@@ -48,7 +48,6 @@
 @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;
@@ -61,7 +60,6 @@
 @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;
@@ -209,15 +207,6 @@ 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
  */
@@ -277,15 +266,6 @@ 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
  */
@@ -360,14 +340,12 @@ 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,12 +66,11 @@
 
 @navbar-dropdown-dropbar-margin-top:            0px;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
-@navbar-dropdown-dropbar-padding-horizontal:    @navbar-nav-item-padding-horizontal;
+@navbar-dropdown-dropbar-padding:               @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;
@@ -394,7 +393,6 @@
  * 1. Set position
  * 2. Bottom padding for dropbar
  * 3. Horizontal padding
- * 4. Reset padding if aligned to boundary
  */
 
 .uk-navbar-dropdown-dropbar {
@@ -402,18 +400,10 @@
     --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
     /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
-    /* 3 */
-    padding-left: @navbar-dropdown-dropbar-padding-horizontal;
-    padding-right: @navbar-dropdown-dropbar-padding-horizontal;
+    padding: @navbar-dropdown-dropbar-padding;
     .hook-navbar-dropdown-dropbar();
 }
 
-/* 4 */
-.uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -444,15 +434,6 @@
     .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
  */
@@ -521,7 +502,6 @@
 .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/theme/dropdown.less

@@ -34,8 +34,6 @@
 
 .hook-dropdown-nav-item-hover() {}
 
-.hook-dropdown-nav-subtitle() {}
-
 .hook-dropdown-nav-header() {}
 
 .hook-dropdown-nav-divider() {}

package/src/less/theme/nav.less

@@ -49,8 +49,6 @@
 
 .hook-nav-default-item-active() {}
 
-.hook-nav-default-subtitle() {}
-
 .hook-nav-default-header() {}
 
 .hook-nav-default-divider() {}
@@ -67,8 +65,6 @@
 
 .hook-nav-primary-item-active() {}
 
-.hook-nav-primary-subtitle() {}
-
 .hook-nav-primary-header() {}
 
 .hook-nav-primary-divider() {}

package/src/less/theme/navbar.less

@@ -109,8 +109,6 @@
 
 .hook-navbar-dropdown-nav-item-hover() {}
 
-.hook-navbar-dropdown-nav-subtitle() {}
-
 .hook-navbar-dropdown-nav-header() {}
 
 .hook-navbar-dropdown-nav-divider() {}

package/src/scss/components/dropdown.scss

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

package/src/scss/components/nav.scss

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

package/src/scss/components/navbar.scss

@@ -66,12 +66,11 @@ $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-ho
 
 $navbar-dropdown-dropbar-margin-top:             0px !default;
 $navbar-dropdown-dropbar-margin-bottom:          $navbar-dropdown-dropbar-margin-top !default;
-$navbar-dropdown-dropbar-padding-horizontal:     $navbar-nav-item-padding-horizontal !default;
+$navbar-dropdown-dropbar-padding:                $navbar-nav-item-padding-horizontal !default;
 
 $navbar-dropdown-nav-item-color:                 $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color:           $global-color !default;
 $navbar-dropdown-nav-item-active-color:          $global-emphasis-color !default;
-$navbar-dropdown-nav-subtitle-font-size:         $global-small-font-size !default;
 $navbar-dropdown-nav-header-color:               $global-emphasis-color !default;
 $navbar-dropdown-nav-divider-border-width:       $global-border-width !default;
 $navbar-dropdown-nav-divider-border:             $global-border !default;
@@ -394,7 +393,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  * 1. Set position
  * 2. Bottom padding for dropbar
  * 3. Horizontal padding
- * 4. Reset padding if aligned to boundary
  */
 
 .uk-navbar-dropdown-dropbar {
@@ -402,18 +400,10 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
     /* 2 */
     margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
-    /* 3 */
-    padding-left: $navbar-dropdown-dropbar-padding-horizontal;
-    padding-right: $navbar-dropdown-dropbar-padding-horizontal;
+    padding: $navbar-dropdown-dropbar-padding;
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
 
-/* 4 */
-.uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -444,15 +434,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
 }
 
-/*
- * Subtitle
- */
-
-.uk-navbar-dropdown-nav .uk-nav-subtitle {
-    font-size: $navbar-dropdown-nav-subtitle-font-size;
-    @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
-}
-
 /*
  * Header
  */
@@ -521,7 +502,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 // @mixin hook-navbar-dropdown-nav-item(){}
 // @mixin hook-navbar-dropdown-nav-item-hover(){}
 // @mixin hook-navbar-dropdown-nav-item-active(){}
-// @mixin hook-navbar-dropdown-nav-subtitle(){}
 // @mixin hook-navbar-dropdown-nav-header(){}
 // @mixin hook-navbar-dropdown-nav-divider(){}
 // @mixin hook-navbar-dropbar(){}