uikit 3.14.4-dev.e8873dd80 → 3.14.4-dev.eb440d70c

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.14.4-dev.e8873dd80",
+    "version": "3.14.4-dev.eb440d70c",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,27 +34,27 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.17.10",
-        "@babel/preset-env": "^7.17.10",
+        "@babel/core": "^7.18.6",
+        "@babel/preset-env": "^7.18.6",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
         "@rollup/plugin-replace": "^4.0.0",
         "archiver": "^5.3.1",
-        "camelcase": "^6.3.0",
+        "camelcase": "^7.0.0",
         "clean-css": "^5.3.0",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.38",
-        "eslint": "^8.15.0",
+        "esbuild": "^0.14.48",
+        "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
-        "glob": "^8.0.1",
-        "inquirer": "^8.2.4",
-        "less": "^4.1.2",
+        "glob": "^8.0.3",
+        "inquirer": "^9.0.0",
+        "less": "^4.1.3",
         "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.6.2",
-        "rollup": "^2.72.1",
+        "prettier": "^2.7.1",
+        "rollup": "^2.76.0",
         "rollup-plugin-esbuild": "^4.9.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",

package/src/js/api/hooks.js

@@ -96,7 +96,11 @@ export default function (UIkit) {
             }
 
             if (write && result !== false) {
-                fastdom.write(() => write.call(this, this._data, types));
+                fastdom.write(() => {
+                    if (this._connected) {
+                        write.call(this, this._data, types);
+                    }
+                });
             }
         }
     }

package/src/js/components/notification.js

@@ -56,7 +56,9 @@ export default {
         this.$mount(
             append(
                 container,
-                `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
+                `<div class="${this.clsMsg}${
+                    this.status ? ` ${this.clsMsg}-${this.status}` : ''
+                }" role="alert">
                 <a href class="${this.clsClose}" data-uk-close></a>
                 <div>${this.message}</div>
             </div>`

package/src/js/util/animation.js

@@ -4,7 +4,7 @@ import { css, propName } from './style';
 import { startsWith, toNodes } from './lang';
 import { addClass, hasClass, removeClass, removeClasses } from './class';
 
-export function transition(element, props, duration = 400, timing = 'linear') {
+function transition(element, props, duration = 400, timing = 'linear') {
     duration = Math.round(duration);
     return Promise.all(
         toNodes(element).map(
@@ -67,7 +67,7 @@ export const Transition = {
 
 const animationPrefix = 'uk-animation-';
 
-export function animate(element, animation, duration = 200, origin, out) {
+function animate(element, animation, duration = 200, origin, out) {
     return Promise.all(
         toNodes(element).map(
             (element) =>
@@ -101,7 +101,8 @@ export function animate(element, animation, duration = 200, origin, out) {
     );
 }
 
-const inProgress = new RegExp(`${animationPrefix}(enter|leave)`);
+const inProgressRe = new RegExp(`${animationPrefix}(enter|leave)`);
+
 export const Animation = {
     in: animate,
 
@@ -110,7 +111,7 @@ export const Animation = {
     },
 
     inProgress(element) {
-        return inProgress.test(attr(element, 'class'));
+        return inProgressRe.test(attr(element, 'class'));
     },
 
     cancel(element) {

package/src/less/components/dropbar.less

@@ -20,6 +20,9 @@
 @dropbar-color:                                 @global-color;
 @dropbar-color-mode:                            none;
 
+@dropbar-large-padding-top:                     40px;
+@dropbar-large-padding-bottom:                  @dropbar-large-padding-top;
+
 
 /* ========================================================================
    Component: Dropbar
@@ -81,6 +84,14 @@
 .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
 .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: @dropbar-large-padding-top;
+    padding-bottom: @dropbar-large-padding-bottom;
+}
+
 
 /* Direction modifier
  ========================================================================== */

package/src/less/components/navbar.less

@@ -84,6 +84,9 @@
 @navbar-dropdown-dropbar-viewport-margin-s:     @global-gutter;
 @navbar-dropdown-dropbar-viewport-margin-m:     @global-medium-gutter;
 
+@navbar-dropdown-dropbar-large-padding-top:     @navbar-dropdown-large-padding;
+@navbar-dropdown-dropbar-large-padding-bottom:  @navbar-dropdown-dropbar-large-padding-top;
+
 @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;
@@ -477,6 +480,11 @@
 
 }
 
+.uk-navbar-dropdown-dropbar-large {
+    padding-top: @navbar-dropdown-dropbar-large-padding-top;
+    padding-bottom: @navbar-dropdown-dropbar-large-padding-bottom;
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`

package/src/scss/components/dropbar.scss

@@ -20,6 +20,9 @@ $dropbar-background:                             $global-muted-background !defau
 $dropbar-color:                                  $global-color !default;
 $dropbar-color-mode:                             none !default;
 
+$dropbar-large-padding-top:                      40px !default;
+$dropbar-large-padding-bottom:                   $dropbar-large-padding-top !default;
+
 
 /* ========================================================================
    Component: Dropbar
@@ -81,6 +84,14 @@ $dropbar-color-mode:                             none !default;
 @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
 @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: $dropbar-large-padding-top;
+    padding-bottom: $dropbar-large-padding-bottom;
+}
+
 
 /* Direction modifier
  ========================================================================== */

package/src/scss/components/navbar.scss

@@ -84,6 +84,9 @@ $navbar-dropdown-dropbar-viewport-margin:        15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s:      $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m:      $global-medium-gutter !default;
 
+$navbar-dropdown-dropbar-large-padding-top:      $navbar-dropdown-large-padding !default;
+$navbar-dropdown-dropbar-large-padding-bottom:   $navbar-dropdown-dropbar-large-padding-top !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;
@@ -477,6 +480,11 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 }
 
+.uk-navbar-dropdown-dropbar-large {
+    padding-top: $navbar-dropdown-dropbar-large-padding-top;
+    padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom;
+}
+
 
 /* Dropdown Nav
  * Adopts `uk-nav`

package/src/scss/variables-theme.scss

@@ -379,6 +379,8 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-large-padding-top: 40px !default;
+$dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-z-index: $global-z-index + 20 !default;
 $dropdown-margin: $global-small-margin !default;
 $dropdown-viewport-margin: 15px !default;
@@ -812,6 +814,8 @@ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal
 $navbar-dropdown-dropbar-viewport-margin: 15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
+$navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
+$navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !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;

package/src/scss/variables.scss

@@ -378,6 +378,8 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-muted-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-large-padding-top: 40px !default;
+$dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-z-index: $global-z-index + 20 !default;
 $dropdown-margin: $global-small-margin !default;
 $dropdown-viewport-margin: 15px !default;
@@ -810,6 +812,8 @@ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal
 $navbar-dropdown-dropbar-viewport-margin: 15px !default;
 $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
+$navbar-dropdown-dropbar-large-padding-top: $navbar-dropdown-large-padding !default;
+$navbar-dropdown-dropbar-large-padding-bottom: $navbar-dropdown-dropbar-large-padding-top !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;

package/tests/navbar.html

@@ -255,7 +255,7 @@
             <h2>Dropdown</h2>
 
             <div class="uk-margin">
-                <select id="js-size-switcher" class="uk-select uk-form-width-small">
+                <select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small">
                     <option value="">Default</option>
                     <option value="uk-navbar-dropdown-large">Large</option>
                 </select>
@@ -1550,6 +1550,13 @@
 
             <h2>Dropbar</h2>
 
+            <div class="uk-margin">
+                <select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small">
+                    <option value="">Default</option>
+                    <option value="uk-navbar-dropdown-dropbar-large">Large</option>
+                </select>
+            </div>
+
             <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
 
         </div>
@@ -3190,7 +3197,7 @@
 
         <script>
 
-            const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
+            const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
             const tracker = MouseTracker();
             const el = $('#js-mousetracker');
             const target = $('#js-mousetarget');
@@ -3206,9 +3213,17 @@
                 clearInterval(interval);
             });
 
-            on('#js-size-switcher', 'change', (e) => {
+            on('#js-dropdown-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-navbar-dropdown:not(.uk-navbar-dropdown-dropbar)')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
+            });
+
+            on('#js-dropbar-size-switcher', 'change', (e) => {
                 const options = $$('option', e.target).map(({value}) => value);
-                for (const el of $$('.uk-navbar-dropdown')) {
+                for (const el of $$('.uk-navbar-dropdown-dropbar')) {
                     removeClass(el, options);
                     addClass(el, e.target.value);
                 }