uikit 3.13.8-dev.9cb7293e5 → 3.13.8-dev.eab90fc4f

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.9cb7293e5",
+    "version": "3.13.8-dev.eab90fc4f",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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

@@ -15,7 +15,6 @@ export default {
     data: {
         target: '> *',
         row: true,
-        forceHeight: true,
     },
 
     computed: {
@@ -31,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
     },
 
     update: {

package/src/js/core/margin.js

@@ -15,7 +15,7 @@ export default {
     },
 
     resizeTargets() {
-        return this.$el.children;
+        return [this.$el, this.$el.children];
     },
 
     connected() {

package/src/js/core/navbar.js

@@ -27,8 +27,6 @@ import {
     within,
 } from 'uikit-util';
 
-const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
-
 export default {
     mixins: [Class, Container],
 
@@ -48,7 +46,7 @@ export default {
     },
 
     data: {
-        dropdown: navItem,
+        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-navbar-dropdown',
         mode: undefined,
@@ -61,8 +59,6 @@ export default {
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false,
     },
 
@@ -136,8 +132,22 @@ export default {
             immediate: true,
         },
 
-        toggles({ dropdown }, $el) {
-            return $$(dropdown, $el);
+        toggles: {
+            get({ dropdown }, $el) {
+                return $$(dropdown, $el);
+            },
+
+            watch() {
+                const justify = hasClass(this.$el, 'uk-navbar-justify');
+                for (const container of $$(
+                    '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
+                    this.$el
+                )) {
+                    css(container, 'flexGrow', justify ? $$(this.dropdown, container).length : '');
+                }
+            },
+
+            immediate: true,
         },
     },
 

package/src/js/core/toggle.js

@@ -124,7 +124,7 @@ export default {
                 }
 
                 // Skip if state does not change e.g. hover + focus received
-                if (this._showState && show === (expanded !== this._showState)) {
+                if (this._showState && show && expanded !== this._showState) {
                     // Ensure reset if state has changed through click
                     if (!show) {
                         this._showState = null;

package/src/js/mixin/modal.js

@@ -4,6 +4,7 @@ import {
     append,
     attr,
     css,
+    endsWith,
     includes,
     isFocusable,
     last,
@@ -15,7 +16,6 @@ import {
     pointerUp,
     removeClass,
     toFloat,
-    toMs,
     width,
     within,
 } from 'uikit-util';
@@ -245,7 +245,7 @@ function animate({ transitionElement, _toggle }) {
     return (el, show) =>
         new Promise((resolve, reject) =>
             once(el, 'show hide', () => {
-                el._reject && el._reject();
+                el._reject?.();
                 el._reject = reject;
 
                 _toggle(el, show);
@@ -269,3 +269,7 @@ function animate({ transitionElement, _toggle }) {
             })
         ).then(() => delete el._reject);
 }
+
+function toMs(time) {
+    return time ? (endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000) : 0;
+}

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 ||

package/src/js/util/position.js

@@ -51,7 +51,7 @@ function attachTo(element, target, options) {
 }
 
 function attachToWithFlip(element, target, options) {
-    const position = attachTo(element, target, options);
+    let position = attachTo(element, target, options);
     const targetDim = offset(target);
     const viewports = scrollParents(element).map(getViewport);
 
@@ -61,6 +61,7 @@ function attachToWithFlip(element, target, options) {
         offset: elOffset,
         boundary,
         viewport,
+        recursion = 0,
     } = options;
 
     viewports.push(viewport);
@@ -110,6 +111,29 @@ function attachToWithFlip(element, target, options) {
                     : 0) -
                 elOffset[i] * 2;
 
+            if (
+                position[start] + offsetBy < viewport[start] ||
+                position[end] + offsetBy > viewport[end]
+            ) {
+                if (recursion < 1) {
+                    position =
+                        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: recursion + 1,
+                        }) || position;
+
+                    continue;
+                } else {
+                    return false;
+                }
+            }
+
             // Move
         } else {
             offsetBy =
@@ -153,3 +177,12 @@ function intersectLine(dimA, dimB, dir) {
     const [, , start, end] = dirs[dir];
     return dimA[end] > dimB[start] && dimB[end] > dimA[start];
 }
+
+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/less/components/drop.less

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

package/src/less/components/navbar.less

@@ -317,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
  ========================================================================== */
 

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() {}

package/src/less/theme/search.less

@@ -25,6 +25,12 @@
 .hook-search-input() {}
 
 
+// Icon
+// ========================================================================
+
+.hook-search-icon() {}
+
+
 // Default modifiers
 // ========================================================================
 

package/src/scss/components/drop.scss

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

package/src/scss/components/navbar.scss

@@ -317,6 +317,17 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 }
 
 
+/* 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
  ========================================================================== */
 

package/src/scss/components/search.scss

@@ -154,6 +154,7 @@ $search-toggle-hover-color:                          $global-color !default;
     align-items: center;
     /* 3 */
     color: $search-icon-color;
+    @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
 }
 
 /*
@@ -294,6 +295,7 @@ $search-toggle-hover-color:                          $global-color !default;
 @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
 
 // @mixin hook-search-input(){}
+// @mixin hook-search-icon(){}
 // @mixin hook-search-default-input(){}
 // @mixin hook-search-default-input-focus(){}
 // @mixin hook-search-navbar-input(){}

package/src/scss/mixins-theme.scss

@@ -1843,6 +1843,7 @@
 @mixin hook-progress-bar(){}
 @mixin hook-progress-misc(){}
 @mixin hook-search-input(){}
+@mixin hook-search-icon(){}
 @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
 @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
 @mixin hook-search-navbar-input(){}

package/src/scss/mixins.scss

@@ -1529,6 +1529,7 @@
 @mixin hook-progress-bar(){}
 @mixin hook-progress-misc(){}
 @mixin hook-search-input(){}
+@mixin hook-search-icon(){}
 @mixin hook-search-default-input(){}
 @mixin hook-search-default-input-focus(){}
 @mixin hook-search-navbar-input(){}

package/src/scss/theme/search.scss

@@ -25,6 +25,12 @@ $search-default-focus-border:                        $global-primary-background
 // @mixin hook-search-input(){}
 
 
+// Icon
+// ========================================================================
+
+// @mixin hook-search-icon(){}
+
+
 // Default modifiers
 // ========================================================================