uikit 3.13.8-dev.2fb6bed58 → 3.13.8-dev.6a84a45c4

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.8-dev.2fb6bed58",
+    "version": "3.13.8-dev.6a84a45c4",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -41,9 +41,9 @@
         "@rollup/plugin-replace": "^4.0.0",
         "archiver": "^5.3.0",
         "camelcase": "^6.3.0",
-        "clean-css": "^5.2.4",
+        "clean-css": "^5.3.0",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.28",
+        "esbuild": "^0.14.32",
         "eslint": "^8.12.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.0.1",
@@ -53,9 +53,9 @@
         "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.6.1",
+        "prettier": "^2.6.2",
         "rollup": "^2.70.1",
-        "rollup-plugin-esbuild": "^4.8.2",
+        "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",
         "rtlcss": "^3.5.0",

package/src/js/components/tooltip.js

@@ -6,9 +6,11 @@ import {
     attr,
     flipPosition,
     hasAttr,
+    includes,
     isFocusable,
     isTouch,
     matches,
+    offset,
     on,
     once,
     pointerDown,
@@ -104,10 +106,12 @@ export default {
 
                 this.positionAt(this.tooltip, this.$el);
 
+                const [dir, align] = getAlignment(this.tooltip, this.$el, this.pos);
+
                 this.origin =
-                    this.getAxis() === 'y'
-                        ? `${flipPosition(this.dir)}-${this.align}`
-                        : `${this.align}-${flipPosition(this.dir)}`;
+                    this.axis === 'y'
+                        ? `${flipPosition(dir)}-${align}`
+                        : `${align}-${flipPosition(dir)}`;
             });
 
             this.toggleElement(this.tooltip, true);
@@ -143,3 +147,34 @@ function makeFocusable(el) {
         attr(el, 'tabindex', '0');
     }
 }
+
+function getAlignment(el, target, [dir, align]) {
+    const elOffset = offset(el);
+    const targetOffset = offset(target);
+    const properties = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+
+    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;
+        }
+    }
+
+    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/core/accordion.js

@@ -48,7 +48,7 @@ export default {
     computed: {
         items: {
             get({ targets }, $el) {
-                return $$(targets, $el);
+                return $$(targets, $el).filter((el) => $(this.content, el));
             },
 
             watch(items, prev) {

package/src/js/core/drop.js

@@ -362,17 +362,18 @@ export default {
             const boundaryOffset = offset(boundary);
             const targetOffset = offset(this.target);
             const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
+            const prop = this.axis === 'y' ? 'width' : 'height';
+
+            css(this.$el, `max-${prop}`, '');
 
             if (this.pos[1] === 'justify') {
-                const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
-            } else if (
-                this.$el.offsetWidth >
-                Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left)
-            ) {
+            } else if (this.$el.offsetWidth > boundaryOffset.width) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
+            css(this.$el, `max-${prop}`, boundaryOffset[prop]);
+
             this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         },
     },

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

@@ -1,6 +1,6 @@
 import Resize from '../mixin/resize';
 import { getRows } from './margin';
-import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
+import { $$, boxModelAdjust, css, dimensions, isVisible } from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -56,22 +56,14 @@ function match(elements) {
         return { heights: [''], elements };
     }
 
+    css(elements, 'minHeight', '');
     let heights = elements.map(getHeight);
-    let max = Math.max(...heights);
-    const hasMinHeight = elements.some((el) => el.style.minHeight);
-    const hasShrunk = elements.some((el, i) => !el.style.minHeight && heights[i] < max);
-
-    if (hasMinHeight && hasShrunk) {
-        css(elements, 'minHeight', '');
-        heights = elements.map(getHeight);
-        max = Math.max(...heights);
-    }
-
-    heights = elements.map((el, i) =>
-        heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max
-    );
+    const max = Math.max(...heights);
 
-    return { heights, elements };
+    return {
+        heights: elements.map((el, i) => (heights[i].toFixed(2) === max.toFixed(2) ? '' : max)),
+        elements,
+    };
 }
 
 function getHeight(element) {

package/src/js/core/navbar.js

@@ -299,7 +299,7 @@ export default {
                 return this.dropbar;
             },
 
-            handler(_, { $el, dir }) {
+            handler(_, { $el, pos: [dir] = [] }) {
                 if (!hasClass($el, this.clsDrop)) {
                     return;
                 }

package/src/js/core/sticky.js

@@ -137,13 +137,13 @@ export default {
                     return false;
                 }
 
-                const hide = this.isActive && types.has('resize');
+                const hide = this.active && types.has('resize');
                 if (hide) {
                     css(this.selTarget, 'transition', '0s');
                     this.hide();
                 }
 
-                if (!this.isActive) {
+                if (!this.active) {
                     height = getOffset(this.$el).height;
                     margin = css(this.$el, 'margin');
                 }

package/src/js/mixin/media.js

@@ -20,16 +20,18 @@ export default {
 
     connected() {
         const media = toMedia(this.media);
-        this.mediaObj = window.matchMedia(media);
-        const handler = () => {
-            this.matchMedia = this.mediaObj.matches;
-            trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
-        };
-        this.offMediaObj = on(this.mediaObj, 'change', () => {
+        if (media) {
+            this.mediaObj = window.matchMedia(media);
+            const handler = () => {
+                this.matchMedia = this.mediaObj.matches;
+                trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+            };
+            this.offMediaObj = on(this.mediaObj, 'change', () => {
+                handler();
+                this.$emit('resize');
+            });
             handler();
-            this.$emit('resize');
-        });
-        handler();
+        }
     },
 
     disconnected() {

package/src/js/mixin/position.js

@@ -25,21 +25,19 @@ export default {
 
     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 [dir, align] = this.pos;
-            const axis = this.getAxis(dir);
 
             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));
@@ -50,7 +48,7 @@ export default {
                 target: [dir, align],
             };
 
-            if (axis === 'y') {
+            if (this.axis === 'y') {
                 for (const prop in attach) {
                     attach[prop] = attach[prop].reverse();
                 }
@@ -63,43 +61,6 @@ export default {
                 boundary,
                 flip: this.flip,
             });
-
-            [this.dir, this.align] = getAlignment(element, target, this.pos);
-        },
-
-        getAxis(dir = this.dir) {
-            return includes(['top', 'bottom'], dir) ? 'y' : 'x';
         },
     },
 };
-
-function getAlignment(el, target, [dir, align]) {
-    const elOffset = getOffset(el);
-    const targetOffset = getOffset(target);
-    const properties = [
-        ['left', 'right'],
-        ['top', 'bottom'],
-    ];
-
-    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;
-        }
-    }
-
-    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

@@ -75,7 +75,10 @@ function attachToWithFlip(element, target, options) {
         const willFlip =
             !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-        viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
+        viewport = getIntersectionArea(
+            ...viewports,
+            willFlip || position[prop] > offset(boundary)[prop] ? null : boundary
+        );
         const isInStartBoundary = position[start] >= viewport[start];
         const isInEndBoundary = position[end] <= viewport[end];
 

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/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;
@@ -393,6 +394,7 @@
  * 1. Set position
  * 2. Bottom padding for dropbar
  * 3. Horizontal padding
+ * 4. Reset padding if aligned to boundary
  */
 
 .uk-navbar-dropdown-dropbar {
@@ -400,10 +402,18 @@
     --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();
 }
 
+/* 4 */
+.uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
+    padding-left: 0;
+    padding-right: 0;
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -434,6 +444,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 +521,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/theme/dropdown.less

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

package/src/less/theme/nav.less

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

package/src/less/theme/navbar.less

@@ -109,6 +109,8 @@
 
 .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,6 +29,7 @@ $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;
@@ -74,7 +75,6 @@ $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,6 +94,15 @@ $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
  */
@@ -138,6 +147,7 @@ $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,6 +48,7 @@ $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;
@@ -60,6 +61,7 @@ $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;
@@ -207,6 +209,15 @@ 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
  */
@@ -266,6 +277,15 @@ 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
  */
@@ -340,12 +360,14 @@ 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(){}