uikit 3.14.4-dev.d014a9a57 → 3.14.4-dev.d2929b5b7

package/src/js/util/position.js

@@ -1,5 +1,5 @@
 import { offset } from './dimensions';
-import { clamp, includes, ucfirst } from './lang';
+import { clamp, isArray, ucfirst } from './lang';
 import { offsetViewport, scrollParents } from './viewport';
 
 const dirs = [
@@ -18,11 +18,11 @@ export function positionAt(element, target, options) {
         ...options,
     };
 
-    const dim = options.flip
-        ? attachToWithFlip(element, target, options)
-        : attachTo(element, target, options);
+    if (!isArray(target)) {
+        target = [target, target];
+    }
 
-    offset(element, dim);
+    offset(element, getPosition(element, target, options));
 }
 
 function attachTo(element, target, options) {
@@ -37,8 +37,11 @@ function attachTo(element, target, options) {
     };
 
     const position = offset(element);
-    const targetOffset = offset(target);
+
     for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
+        const targetOffset =
+            attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
+
         position[start] = position[dir] =
             targetOffset[start] +
             moveBy(attach.target[i], end, targetOffset[prop]) -
@@ -53,60 +56,54 @@ function moveBy(start, end, dim) {
     return start === 'center' ? dim / 2 : start === end ? dim : 0;
 }
 
-function attachToWithFlip(element, target, options) {
+function getPosition(element, target, options) {
     const position = attachTo(element, target, options);
-    const targetDim = offset(target);
 
     let {
         flip,
+        shift,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
-        viewport,
         viewportOffset,
     } = options;
 
-    let viewports = scrollParents(element);
-    if (boundary === target) {
-        viewports = viewports.filter((viewport) => viewport !== boundary);
+    if (!flip && !shift) {
+        return position;
     }
-    const [scrollElement] = viewports;
-    viewports.push(viewport);
 
     const offsetPosition = { ...position };
     for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        if (flip !== true && !includes(flip, dir)) {
-            continue;
-        }
+        let viewports = scrollParents(target[i]);
+        const [scrollElement] = viewports;
 
-        const willFlip =
-            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-
-        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+        let viewport = getIntersectionArea(...viewports.map(offsetViewport));
 
         if (viewportOffset) {
             viewport[start] += viewportOffset;
             viewport[end] -= viewportOffset;
         }
 
-        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
-            viewport = getIntersectionArea(viewport, offset(boundary));
+        if (boundary) {
+            viewport = getIntersectionArea(viewport, offsetViewport(boundary));
         }
 
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+        const isInStartViewport = position[start] >= viewport[start];
+        const isInEndViewport = position[end] <= viewport[end];
 
-        if (isInStartBoundary && isInEndBoundary) {
+        if (isInStartViewport && isInEndViewport) {
             continue;
         }
 
-        let offsetBy;
+        let offsetBy = 0;
+        const targetDim = offset(target[i]);
 
         // Flip
-        if (willFlip) {
+        if (!intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i)) {
             if (
-                (elAttach[i] === end && isInStartBoundary) ||
-                (elAttach[i] === start && isInEndBoundary)
+                !flip ||
+                (elAttach[i] === end && isInStartViewport) ||
+                (elAttach[i] === start && isInEndViewport)
             ) {
                 continue;
             }
@@ -143,27 +140,25 @@ function attachToWithFlip(element, target, options) {
                     return false;
                 }
 
-                if (flip === true || includes(flip, dirs[1 - i][1])) {
-                    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;
-                    }
+                const newPos = getPosition(element, target, {
+                    ...options,
+                    attach: {
+                        element: elAttach.map(flipDir).reverse(),
+                        target: targetAttach.map(flipDir).reverse(),
+                    },
+                    offset: elOffset.reverse(),
+                    recursion: true,
+                });
+
+                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                    return newPos;
                 }
+
                 continue;
             }
 
-            // Move
-        } else {
+            // Shift
+        } else if (shift) {
             offsetBy =
                 clamp(
                     clamp(position[start], viewport[start], viewport[end] - position[prop]),

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }

package/src/js/util/viewport.js

@@ -128,12 +128,10 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
     const {
-        document: { body, documentElement },
+        document: { documentElement },
     } = window;
     let viewportElement =
-        scrollElement === scrollingElement(scrollElement) || scrollElement === body
-            ? window
-            : scrollElement;
+        scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
     const { visualViewport } = window;
     if (isWindow(viewportElement) && visualViewport) {
@@ -152,7 +150,7 @@ export function offsetViewport(scrollElement) {
             // iOS 12 returns <body> as scrollingElement
             viewportElement = documentElement;
         } else {
-            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
+            rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
         rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];

package/src/less/components/_import.less

@@ -40,6 +40,7 @@
 @import "accordion.less";
 @import "drop.less"; // After: Card
 @import "dropdown.less"; // After: Card
+@import "dropbar.less";
 @import "modal.less"; // After: Close
 @import "slideshow.less";
 @import "slider.less";

package/src/less/components/drop.less

@@ -3,8 +3,7 @@
 //
 // Component:       `uk-drop`
 //
-// Modifiers:       `uk-drop-stretch`
-//                  `uk-drop-stack`
+// Modifiers:       `uk-drop-stack`
 //                  `uk-drop-grid`
 //
 // States:          `uk-open`
@@ -50,22 +49,6 @@
 .uk-drop.uk-open { display: block; }
 
 
-/* Stretch modifier
- ========================================================================== */
-
-/*
- * 1. Allow scrolling
- */
-
-.uk-drop-stretch {
-    --uk-position-offset: 0;
-    --uk-position-viewport-offset: 0;
-    /* 1 */
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropbar.less

@@ -0,0 +1,115 @@
+// Name:            Dropbar
+// Description:     Component to create dropbar menus
+//
+// Component:       `uk-dropbar`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@dropbar-margin:                                0;
+@dropbar-z-index:                               @global-z-index + 20;
+@dropbar-padding-top:                           15px;
+@dropbar-padding-bottom:                        @dropbar-padding-top;
+@dropbar-padding-horizontal:                    15px;
+@dropbar-padding-horizontal-s:                  @global-gutter;
+@dropbar-padding-horizontal-m:                  @global-medium-gutter;
+@dropbar-background:                            @global-muted-background;
+@dropbar-color:                                 @global-color;
+@dropbar-color-mode:                            none;
+
+
+/* ========================================================================
+   Component: Dropbar
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Style
+ */
+
+.uk-dropbar {
+    --uk-position-offset: @dropbar-margin;
+    --uk-position-shift-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @dropbar-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
+    background: @dropbar-background;
+    color: @dropbar-color;
+    .hook-dropbar();
+}
+
+/* Show */
+.uk-dropbar.uk-open { display: block; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropbar > :last-child { margin-bottom: 0; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-s;
+        padding-right: @dropbar-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-m;
+        padding-right: @dropbar-padding-horizontal-m;
+    }
+
+}
+
+// Color Mode
+.uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
+.uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-dropbar-top {
+    .hook-dropbar-top();
+}
+
+.uk-dropbar-bottom {
+    .hook-dropbar-bottom();
+}
+
+.uk-dropbar-left {
+    .hook-dropbar-left();
+}
+
+.uk-dropbar-right {
+    .hook-dropbar-right();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropbar-misc();
+
+.hook-dropbar() {}
+.hook-dropbar-top() {}
+.hook-dropbar-bottom() {}
+.hook-dropbar-left() {}
+.hook-dropbar-right() {}
+.hook-dropbar-misc() {}

package/src/less/components/dropdown.less

@@ -5,7 +5,7 @@
 //
 // Adopted:         `uk-dropdown-nav`
 //
-// Modifiers:       `uk-dropdown-stretch`
+// Modifiers:       `uk-dropdown-large`
 //                  `uk-dropdown-stack`
 //                  `uk-dropdown-grid`
 //
@@ -24,6 +24,7 @@
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
+@dropdown-color-mode:                           none;
 
 @dropdown-large-padding:                        40px;
 
@@ -59,7 +60,6 @@
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
-    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -70,28 +70,21 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
 
-/* Size modifier
- ========================================================================== */
+.uk-dropdown > :last-child { margin-bottom: 0; }
 
-.uk-dropdown-large { padding: @dropdown-large-padding; }
+// Color Mode
+.uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
+.uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
 
 
-/* Stretch modifier
+/* Size modifier
  ========================================================================== */
 
-/*
- * 1. Allow scrolling
- */
-
-.uk-dropdown-stretch {
-    --uk-position-offset: 0;
-    --uk-position-viewport-offset: 0;
-    /* 1 */
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    .hook-dropdown-stretch();
-}
+.uk-dropdown-large { padding: @dropdown-large-padding; }
 
 
 /* Nav
@@ -168,7 +161,6 @@
 .hook-dropdown-misc();
 
 .hook-dropdown() {}
-.hook-dropdown-stretch() {}
 .hook-dropdown-nav() {}
 .hook-dropdown-nav-item() {}
 .hook-dropdown-nav-item-hover() {}

package/src/less/components/leader.less

@@ -49,7 +49,7 @@
  * Pass fill character to JS
  */
 
-:root { --uk-leader-fill-content: '@{leader-fill-content}'; }
+:root { --uk-leader-fill-content: @leader-fill-content; }
 
 
 // Hooks