uikit 3.16.21 → 3.16.22-dev.5f4b11144

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.16.21",
+  "version": "3.16.22-dev.5f4b11144",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/uikit/uikit/issues"
   },
   "homepage": "https://getuikit.com",
-  "packageManager": "pnpm@7.29.1",
+  "packageManager": "pnpm@8.6.3",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-replace": "^5.0.2",
@@ -31,6 +31,7 @@
     "esbuild": "^0.18.1",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
+    "execa": "^7.1.1",
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "inquirer": "^9.2.6",

package/src/js/components/notification.js

@@ -5,6 +5,7 @@ import {
     apply,
     closest,
     css,
+    isVisible,
     parent,
     pointerEnter,
     pointerLeave,
@@ -46,12 +47,14 @@ export default {
     },
 
     created() {
-        const container =
-            $(`.${this.clsContainer}-${this.pos}`, this.container) ||
-            append(
+        let container = $(`.${this.clsContainer}-${this.pos}`, this.container);
+
+        if (!container || !isVisible(container)) {
+            container = append(
                 this.container,
-                `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"></div>`
+                `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"}></div>`
             );
+        }
 
         this.$mount(
             append(

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

@@ -36,7 +36,7 @@ export default {
     }),
 
     update: {
-        read({ minHeight: prev }) {
+        read() {
             if (!isVisible(this.$el)) {
                 return false;
             }
@@ -51,12 +51,11 @@ export default {
             );
 
             if (this.expand) {
-                minHeight = Math.max(
+                minHeight = `${
                     viewportHeight -
-                        (dimensions(scrollElement).height - dimensions(this.$el).height) -
-                        box,
-                    0
-                );
+                    (dimensions(scrollElement).height - dimensions(this.$el).height) -
+                    box
+                }px`;
             } else {
                 const isScrollingElement =
                     scrollingElement === scrollElement || body === scrollElement;
@@ -86,15 +85,11 @@ export default {
                 minHeight += `${box ? ` - ${box}px` : ''})`;
             }
 
-            return { minHeight, prev };
+            return { minHeight };
         },
 
         write({ minHeight }) {
-            css(this.$el, { minHeight });
-
-            if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
-                css(this.$el, 'minHeight', this.minHeight);
-            }
+            css(this.$el, 'minHeight', `max(${this.minHeight || 0}px, ${minHeight})`);
         },
 
         events: ['resize'],

package/src/scss/components/mixin.scss

@@ -4,7 +4,6 @@
 //
 // ========================================================================
 
-
 // SVG
 // ========================================================================
 
@@ -15,18 +14,19 @@
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+    $index: str-index($string, $search);
 
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace +
+            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
 
-  @return $string;
+    @return $string;
 }
 
-@mixin svg-fill($src, $color-default, $color-new){
-
+@mixin svg-fill($src, $color-default, $color-new) {
     $replace-src: str-replace($src, $color-default, $color-new) !default;
-    $replace-src: str-replace($replace-src, "#", "%23");
-    background-image: url(quote($replace-src));
-}
+    $replace-src: str-replace($replace-src, '#', '%23');
+    $replace-src: quote($replace-src);
+    background-image: url($replace-src);
+}

package/src/scss/mixins-theme.scss

@@ -1623,7 +1623,7 @@
     .uk-logo-inverse { display: block; }
 
 }
-@mixin hook-inverse(){
+@mixin hook-inverse() {
     @include hook-inverse-component-base();
     @include hook-inverse-component-link();
     @include hook-inverse-component-heading();

package/src/scss/mixins.scss

@@ -1376,7 +1376,7 @@
     .uk-logo-inverse { display: block; }
 
 }
-@mixin hook-inverse(){
+@mixin hook-inverse() {
     @include hook-inverse-component-base();
     @include hook-inverse-component-link();
     @include hook-inverse-component-heading();

package/tests/dropbar.html

@@ -16,9 +16,7 @@
                 width: 100%;
             }
 
-            .test-boundary {
-                border: 1px dashed rgba(0,0,0,0.2);
-            }
+            .test-boundary { border: 1px dashed rgba(0,0,0,0.2); }
 
         </style>
     </head>
@@ -241,7 +239,7 @@
                 </div>
             </div>
 
-            <h2>Stretch and Overflow Content</h2>
+            <h2>Stretch + Overflow Content</h2>
 
             <div class="uk-child-width-1-4@m" uk-grid>
                 <div>
@@ -438,6 +436,101 @@
                 </div>
             </div>
 
+            <h2>Position + Click</h2>
+
+            <div class="uk-child-width-1-3@m" uk-grid>
+                <div>
+                    <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
+
+                        <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
+                            <div class="uk-navbar-left">
+
+                                <a class="uk-navbar-item uk-logo" href="#">Below</a>
+
+                            </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
+
+                                    <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </nav>
+
+                    </div>
+                </div>
+                <div>
+                    <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
+
+                        <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
+                            <div class="uk-navbar-left">
+
+                                <a class="uk-navbar-item uk-logo" href="#">Above</a>
+
+                            </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle uk-navbar-toggle-animate uk-position-z-index" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-dropbar uk-dropbar-top uk-position-z-index-zero" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
+
+                                    <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </nav>
+
+                    </div>
+                </div>
+                <div>
+                    <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
+
+                        <nav class="uk-navbar-container uk-navbar-transparent uk-position-z-index" uk-navbar>
+                            <div class="uk-navbar-left">
+
+                                <a class="uk-navbar-item uk-logo" href="#">Below</a>
+
+                            </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-dropbar uk-dropbar-top uk-position-z-index-negative" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
+
+                                    <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                            <li><a href="#">Item</a></li>
+                                        </ul>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </nav>
+
+                    </div>
+                </div>
+            </div>
+
         </div>
 
         <script>