uikit 3.13.5 → 3.13.6-dev.aac70c00c

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.5",
+    "version": "3.13.6-dev.aac70c00c",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -38,22 +38,22 @@
         "@babel/preset-env": "^7.16.4",
         "@rollup/plugin-alias": "^3.1.9",
         "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-replace": "^3.0.1",
+        "@rollup/plugin-replace": "^4.0.0",
         "archiver": "^5.3.0",
         "camelcase": "^6.3.0",
         "clean-css": "^5.2.4",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.14.27",
-        "eslint": "^8.11.0",
+        "esbuild": "^0.14.28",
+        "eslint": "^8.12.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.0.1",
         "glob": "^7.2.0",
-        "inquirer": "^8.2.1",
+        "inquirer": "^8.2.2",
         "less": "^4.1.2",
-        "minimist": "^1.2.5",
+        "minimist": "^1.2.6",
         "number-precision": "^1.5.2",
         "p-limit": "^4.0.0",
-        "prettier": "^2.6.0",
+        "prettier": "^2.6.1",
         "rollup": "^2.70.1",
         "rollup-plugin-esbuild": "^4.8.2",
         "rollup-plugin-html": "^0.2.1",

package/src/js/components/slider-parallax.js

@@ -8,7 +8,7 @@ export default {
         selItem: '!li',
     },
 
-    connected() {
+    beforeConnect() {
         this.item = query(this.selItem, this.$el);
     },
 

package/src/js/components/upload.js

@@ -92,6 +92,8 @@ export default {
 
     methods: {
         async upload(files) {
+            files = toArray(files);
+
             if (!files.length) {
                 return;
             }
@@ -178,7 +180,6 @@ function match(pattern, path) {
 }
 
 function chunk(files, size) {
-    files = toArray(files);
     const chunks = [];
     for (let i = 0; i < files.length; i += size) {
         chunks.push(files.slice(i, i + size));

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

@@ -46,11 +46,13 @@ export default {
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
             if (this.expand) {
-                minHeight =
+                minHeight = Math.max(
                     height(window) -
                         (dimensions(document.documentElement).height -
                             dimensions(this.$el).height) -
-                        box || '';
+                        box,
+                    0
+                );
             } else {
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                 minHeight = 'calc(100vh';

package/src/js/core/img.js

@@ -19,7 +19,6 @@ import {
     queryAll,
     removeAttr,
     startsWith,
-    toFloat,
     toPx,
     trigger,
 } from 'uikit-util';
@@ -89,25 +88,6 @@ export default {
         }
     },
 
-    update: {
-        write(store) {
-            if (!this.observer || isImg(this.$el)) {
-                return false;
-            }
-
-            const srcset = data(this.$el, 'data-srcset');
-            if (srcset && window.devicePixelRatio !== 1) {
-                const bgSize = css(this.$el, 'backgroundSize');
-                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
-                    store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
-                    css(this.$el, 'backgroundSize', `${store.bgSize}px`);
-                }
-            }
-        },
-
-        events: ['resize'],
-    },
-
     methods: {
         load() {
             if (this._data.image) {
@@ -197,43 +177,6 @@ function parseSources(sources) {
     return sources.filter((source) => !isEmpty(source));
 }
 
-const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
-function sizesToPixel(sizes) {
-    let matches;
-
-    sizesRe.lastIndex = 0;
-
-    while ((matches = sizesRe.exec(sizes))) {
-        if (!matches[1] || window.matchMedia(matches[1]).matches) {
-            matches = evaluateSize(matches[2]);
-            break;
-        }
-    }
-
-    return matches || '100vw';
-}
-
-const sizeRe = /\d+(?:\w+|%)/g;
-const additionRe = /[+-]?(\d+)/g;
-function evaluateSize(size) {
-    return startsWith(size, 'calc')
-        ? size
-              .slice(5, -1)
-              .replace(sizeRe, (size) => toPx(size))
-              .replace(/ /g, '')
-              .match(additionRe)
-              .reduce((a, b) => a + +b, 0)
-        : size;
-}
-
-const srcSetRe = /\s+\d+w\s*(?:,|$)/g;
-function getSourceSize(srcset, sizes) {
-    const srcSize = toPx(sizesToPixel(sizes));
-    const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
-
-    return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
-}
-
 function ensureSrcAttribute(el) {
     if (isImg(el) && !hasAttr(el, 'src')) {
         attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');

package/src/js/mixin/position.js

@@ -43,7 +43,7 @@ export default {
                       getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
-            offset = toPx(offset) + toPx(getCssVar('position-margin-offset', element));
+            offset = toPx(offset) + toPx(getCssVar('position-offset', element));
 
             positionAt(element, target, {
                 boundary,

package/src/less/components/drop.less

@@ -41,7 +41,7 @@
     /* 2 */
     position: absolute;
     z-index: @drop-z-index;
-    --uk-position-margin-offset: @drop-margin;
+    --uk-position-offset: @drop-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;

package/src/less/components/dropdown.less

@@ -53,7 +53,7 @@
     /* 2 */
     position: absolute;
     z-index: @dropdown-z-index;
-    --uk-position-margin-offset: @dropdown-margin;
+    --uk-position-offset: @dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;

package/src/less/components/nav.less

@@ -94,7 +94,6 @@
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Reset link
-* 4. Space is allocated solely based on content dimensions: 0 0 auto
  */
 
 .uk-nav li > a {
@@ -107,9 +106,6 @@
     text-decoration: none;
 }
 
-/* 4 */
-.uk-nav li > a > * { flex: none; }
-
 /*
  * Items
  * Must target `a` elements to exclude other elements (e.g. lists)
@@ -177,7 +173,7 @@ ul.uk-nav-sub {
 /* Divider
  ========================================================================== */
 
-.uk-nav >.uk-nav-divider {
+.uk-nav .uk-nav-divider {
     margin: @nav-divider-margin-vertical @nav-divider-margin-horizontal;
     .hook-nav-divider();
 }

package/src/less/components/navbar.less

@@ -349,7 +349,7 @@
     /* 2 */
     position: absolute;
     z-index: @navbar-dropdown-z-index;
-    --uk-position-margin-offset: @navbar-dropdown-margin;
+    --uk-position-offset: @navbar-dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
@@ -397,7 +397,7 @@
 
 .uk-navbar-dropdown-dropbar {
     /* 1 */
-    --uk-position-margin-offset: @navbar-dropdown-dropbar-margin-top;
+    --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
     /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
     padding: @navbar-dropdown-dropbar-padding;

package/src/less/components/tooltip.less

@@ -50,7 +50,7 @@
     /* 2 */
     position: absolute;
     z-index: @tooltip-z-index;
-    --uk-position-margin-offset: @tooltip-margin;
+    --uk-position-offset: @tooltip-margin;
     /* 3 */
     top: 0;
     /* 4 */

package/src/scss/components/drop.scss

@@ -41,7 +41,7 @@ $drop-width:                                 300px !default;
     /* 2 */
     position: absolute;
     z-index: $drop-z-index;
-    --uk-position-margin-offset: #{$drop-margin};
+    --uk-position-offset: #{$drop-margin};
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;

package/src/scss/components/dropdown.scss

@@ -53,7 +53,7 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     /* 2 */
     position: absolute;
     z-index: $dropdown-z-index;
-    --uk-position-margin-offset: #{$dropdown-margin};
+    --uk-position-offset: #{$dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     min-width: $dropdown-min-width;

package/src/scss/components/nav.scss

@@ -94,7 +94,6 @@ $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20widt
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Reset link
-* 4. Space is allocated solely based on content dimensions: 0 0 auto
  */
 
 .uk-nav li > a {
@@ -107,9 +106,6 @@ $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20widt
     text-decoration: none;
 }
 
-/* 4 */
-.uk-nav li > a > * { flex: none; }
-
 /*
  * Items
  * Must target `a` elements to exclude other elements (e.g. lists)
@@ -177,7 +173,7 @@ ul.uk-nav-sub {
 /* Divider
  ========================================================================== */
 
-.uk-nav >.uk-nav-divider {
+.uk-nav .uk-nav-divider {
     margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
     @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
 }

package/src/scss/components/navbar.scss

@@ -349,7 +349,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 2 */
     position: absolute;
     z-index: $navbar-dropdown-z-index;
-    --uk-position-margin-offset: #{$navbar-dropdown-margin};
+    --uk-position-offset: #{$navbar-dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
@@ -397,7 +397,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-dropdown-dropbar {
     /* 1 */
-    --uk-position-margin-offset: #{$navbar-dropdown-dropbar-margin-top};
+    --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
     /* 2 */
     margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
     padding: $navbar-dropdown-dropbar-padding;

package/src/scss/components/tooltip.scss

@@ -50,7 +50,7 @@ $tooltip-font-size:                              12px !default;
     /* 2 */
     position: absolute;
     z-index: $tooltip-z-index;
-    --uk-position-margin-offset: #{$tooltip-margin};
+    --uk-position-offset: #{$tooltip-margin};
     /* 3 */
     top: 0;
     /* 4 */