uikit 3.11.2-dev.bbaa4362f → 3.11.2-dev.c2430c233

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.11.2-dev.bbaa4362f",
+  "version": "3.11.2-dev.c2430c233",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/component.js

@@ -28,7 +28,7 @@ export default function (UIkit) {
 
             return component.options.functional
                 ? new component({data: isPlainObject(element) ? element : [...arguments]})
-                : !element ? init(element) : $$(element).map(init)[0];
+                : element ? $$(element).map(init)[0] : init();
 
             function init(element) {
 

package/src/js/api/state.js

@@ -1,4 +1,4 @@
-import {assign, camelize, data as getData, hasOwn, hyphenate, isArray, isEmpty, isFunction, isNumeric, isPlainObject, isString, isUndefined, mergeOptions, on, parseOptions, startsWith, toBoolean, toNumber} from 'uikit-util';
+import {assign, camelize, data as getData, hasOwn, hyphenate, isArray, isFunction, isNumeric, isPlainObject, isString, isUndefined, mergeOptions, on, parseOptions, startsWith, toBoolean, toNumber} from 'uikit-util';
 
 export default function (UIkit) {
 
@@ -211,11 +211,11 @@ export default function (UIkit) {
             on(
                 el,
                 name,
-                !delegate
-                    ? null
-                    : isString(delegate)
+                delegate
+                    ? isString(delegate)
                         ? delegate
-                        : delegate.call(component),
+                        : delegate.call(component)
+                    : null,
                 isString(handler) ? component[handler] : handler.bind(component),
                 {passive, capture, self}
             )
@@ -250,27 +250,23 @@ export default function (UIkit) {
                 : [value];
     }
 
-    function normalizeData({data}, {args, props = {}}) {
-        data = isArray(data)
-            ? !isEmpty(args)
-                ? data.slice(0, args.length).reduce((data, value, index) => {
-                    if (isPlainObject(value)) {
-                        assign(data, value);
-                    } else {
-                        data[args[index]] = value;
-                    }
-                    return data;
-                }, {})
-                : undefined
-            : data;
-
-        if (data) {
-            for (const key in data) {
-                if (isUndefined(data[key])) {
-                    delete data[key];
+    function normalizeData({data = {}}, {args = [], props = {}}) {
+        if (isArray(data)) {
+            data = data.slice(0, args.length).reduce((data, value, index) => {
+                if (isPlainObject(value)) {
+                    assign(data, value);
                 } else {
-                    data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
+                    data[args[index]] = value;
                 }
+                return data;
+            }, {});
+        }
+
+        for (const key in data) {
+            if (isUndefined(data[key])) {
+                delete data[key];
+            } else if (props[key]) {
+                data[key] = coerce(props[key], data[key]);
             }
         }
 

package/src/js/core/drop.js

@@ -308,7 +308,7 @@ export default {
             if (active) {
 
                 if (delay && active.isDelaying) {
-                    this.showTimer = setTimeout(this.show, 10);
+                    this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
 

package/src/js/core/navbar.js

@@ -137,7 +137,7 @@ export default {
 
             handler({current}) {
                 const active = this.getActive();
-                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.isDelaying) {
                     active.hide(false);
                 }
             }

package/src/less/components/flex.less

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/less/components/navbar.less

@@ -109,13 +109,6 @@
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) when (@navbar-color-mode = light) {}
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-dark all) when (@navbar-color-mode = dark) {}
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/less/components/utility.less

@@ -251,6 +251,28 @@
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-fit-none { object-fit: none; }
+.uk-object-fit-cover { object-fit: cover; }
+.uk-object-fit-contain { object-fit: contain; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/components/flex.scss

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/scss/components/form.scss

@@ -780,7 +780,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 
 $inverse-form-background:                       $inverse-global-muted-background !default;
 $inverse-form-color:                            $inverse-global-color !default;
-$inverse-form-focus-background:                 fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background:                 fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color:                      $inverse-global-color !default;
 $inverse-form-placeholder-color:                $inverse-global-muted-color !default;
 
@@ -790,12 +790,12 @@ $inverse-form-datalist-icon-color:              $inverse-global-color !default;
 
 $inverse-form-radio-background:                 $inverse-global-muted-background !default;
 
-$inverse-form-radio-focus-background:           fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background:           fade-in($inverse-form-radio-background, 0.05) !default;
 
 $inverse-form-radio-checked-background:         $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color:         $inverse-global-inverse-color !default;
 
-$inverse-form-radio-checked-focus-background:   fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background:   fade-in($inverse-global-primary-background, 0.1) !default;
 
 $inverse-form-icon-color:                       $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color:                 $inverse-global-color !default;

package/src/scss/components/icon.scss

@@ -201,9 +201,9 @@ $inverse-icon-link-hover-color:                 $inverse-global-color !default;
 $inverse-icon-link-active-color:                $inverse-global-color !default;
 $inverse-icon-button-background:                $inverse-global-muted-background !default;
 $inverse-icon-button-color:                     $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background:          fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background:          fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color:               $inverse-global-color !default;
-$inverse-icon-button-active-background:         fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background:         fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color:              $inverse-global-color !default;
 
 

package/src/scss/components/navbar.scss

@@ -109,13 +109,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 @if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} }
 @if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/scss/components/search.scss

@@ -317,7 +317,7 @@ $inverse-search-placeholder-color:              $inverse-global-muted-color !def
 $inverse-search-icon-color:                     $inverse-global-muted-color !default;
 
 $inverse-search-default-background:             $inverse-global-muted-background !default;
-$inverse-search-default-focus-background:       fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background:       fade-in($inverse-search-default-background, 0.05) !default;
 
 $inverse-search-navbar-background:              transparent !default;
 

package/src/scss/components/utility.scss

@@ -251,6 +251,28 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-fit-none { object-fit: none; }
+.uk-object-fit-cover { object-fit: cover; }
+.uk-object-fit-contain { object-fit: contain; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/variables-theme.scss

@@ -449,16 +449,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -543,9 +543,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -855,7 +855,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: transparent !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/src/scss/variables.scss

@@ -447,16 +447,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -541,9 +541,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -853,7 +853,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: $inverse-global-muted-background !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;