uikit 3.9.5-dev.e48c5e252 → 3.10.1-dev.6b26facf9

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.9.5-dev.e48c5e252",
+  "version": "3.10.1-dev.6b26facf9",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -20,7 +20,7 @@
     "prefix": "node build/prefix",
     "scope": "node build/scope",
     "release": "node build/release",
-    "watch": "watch-run -i -p 'src/less/**/*.less' yarn compile-less",
+    "watch": "watch-run -i -p '**/*.less' yarn compile-less",
     "eslint": "eslint src/js",
     "eslint-fix": "eslint --fix src/js"
   },
@@ -34,15 +34,15 @@
   },
   "homepage": "https://getuikit.com",
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.8",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-replace": "^3.0.1",
     "archiver": "^5.3.0",
-    "camelcase": "^6.2.1",
+    "camelcase": "^6.3.0",
     "clean-css": "^5.2.2",
     "dateformat": "^5.0.2",
-    "esbuild": "^0.13.14",
-    "eslint": "^8.2.0",
+    "esbuild": "^0.14.11",
+    "eslint": "^8.6.0",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
@@ -50,10 +50,8 @@
     "minimist": "^1.2.5",
     "number-precision": "^1.5.1",
     "p-limit": "^4.0.0",
-    "postcss": "^8.3.11",
-    "prettier": "^2.4.1",
-    "rollup": "^2.60.0",
-    "rollup-plugin-esbuild": "^4.7.1",
+    "rollup": "^2.63.0",
+    "rollup-plugin-esbuild": "^4.8.2",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^3.5.0",

package/src/js/api/component.js

@@ -35,10 +35,10 @@ export default function (UIkit) {
                 const instance = UIkit.getComponent(element, name);
 
                 if (instance) {
-                    if (!data) {
-                        return instance;
-                    } else {
+                    if (data) {
                         instance.$destroy();
+                    } else {
+                        return instance;
                     }
                 }
 

package/src/js/api/state.js

@@ -87,12 +87,12 @@ export default function (UIkit) {
 
             events.forEach(event => {
 
-                if (!hasOwn(event, 'handler')) {
+                if (hasOwn(event, 'handler')) {
+                    registerEvent(this, event);
+                } else {
                     for (const key in event) {
                         registerEvent(this, event[key], key);
                     }
-                } else {
-                    registerEvent(this, event);
                 }
 
             });

package/src/js/components/slideshow.js

@@ -28,6 +28,10 @@ export default {
 
         read() {
 
+            if (!this.list) {
+                return false;
+            }
+
             let [width, height] = this.ratio.split(':').map(Number);
 
             height = height * this.list.offsetWidth / width || 0;

package/src/js/components/sortable.js

@@ -300,7 +300,7 @@ function trackScroll(pos) {
         const dist = (Date.now() - last) * .3;
         last = Date.now();
 
-        scrollParents(document.elementFromPoint(x, pos.y)).reverse().some(scrollEl => {
+        scrollParents(document.elementFromPoint(x, pos.y), /auto|scroll/).reverse().some(scrollEl => {
 
             let {scrollTop: scroll, scrollHeight} = scrollEl;
 

package/src/js/components/tooltip.js

@@ -67,7 +67,8 @@ export default {
             }
 
             this.toggleElement(this.tooltip, false, false).then(() => {
-                this.tooltip = remove(this.tooltip);
+                remove(this.tooltip);
+                this.tooltip = null;
                 this._unbind();
             });
         },

package/src/js/core/cover.js

@@ -1,10 +1,9 @@
 import Video from './video';
-import Class from '../mixin/class';
 import {css, Dimensions, parent} from 'uikit-util';
 
 export default {
 
-    mixins: [Class, Video],
+    mixins: [Video],
 
     props: {
         width: Number,

package/src/js/core/img.js

@@ -1,4 +1,4 @@
-import {$, attr, children, createEvent, css, data, Dimensions, escape, getImage, includes, isUndefined, once, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
+import {createEvent, css, Dimensions, escape, getImage, includes, isUndefined, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
 
 export default {
 
@@ -6,6 +6,8 @@ export default {
 
     props: {
         dataSrc: String,
+        dataSrcset: Boolean,
+        sizes: String,
         width: Number,
         height: Number,
         offsetTop: String,
@@ -15,6 +17,8 @@ export default {
 
     data: {
         dataSrc: '',
+        dataSrcset: false,
+        sizes: false,
         width: false,
         height: false,
         offsetTop: '50vh',
@@ -28,6 +32,22 @@ export default {
             return `${this.$name}.${dataSrc}`;
         },
 
+        width({width, dataWidth}) {
+            return width || dataWidth;
+        },
+
+        height({height, dataHeight}) {
+            return height || dataHeight;
+        },
+
+        sizes({sizes, dataSizes}) {
+            return sizes || dataSizes;
+        },
+
+        isImg(_, $el) {
+            return isImg($el);
+        },
+
         target: {
 
             get({target}) {
@@ -53,14 +73,14 @@ export default {
     connected() {
 
         if (!window.IntersectionObserver) {
-            setSrcAttrs(this.$el);
+            setSrcAttrs(this.$el, this.dataSrc, this.dataSrcset, this.sizes);
             return;
         }
 
         if (storage[this.cacheKey]) {
-            setSrcAttrs(this.$el, storage[this.cacheKey]);
-        } else if (isImg(this.$el) && this.width && this.height) {
-            attr(this.$el, 'src', getPlaceholderImage(this.$el));
+            setSrcAttrs(this.$el, storage[this.cacheKey], this.dataSrcset, this.sizes);
+        } else if (this.isImg && this.width && this.height) {
+            setSrcAttrs(this.$el, getPlaceholderImage(this.width, this.height, this.sizes));
         }
 
         this.observer = new IntersectionObserver(this.load, {
@@ -87,7 +107,7 @@ export default {
                 this.load(this.observer.takeRecords());
             }
 
-            if (isImg(this.$el)) {
+            if (this.isImg) {
                 return false;
             }
 
@@ -95,15 +115,14 @@ export default {
 
         },
 
-        write(store) {
+        write(data) {
 
-            const srcset = data(this.$el, 'data-srcset');
-            if (srcset && window.devicePixelRatio !== 1) {
+            if (this.dataSrcset && 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`);
+                if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === data.bgSize) {
+                    data.bgSize = getSourceSize(this.dataSrcset, this.sizes);
+                    css(this.$el, 'backgroundSize', `${data.bgSize}px`);
                 }
 
             }
@@ -123,9 +142,9 @@ export default {
                 return;
             }
 
-            this._data.image = getImageFromElement(this.$el, this.dataSrc).then(img => {
+            this._data.image = getImage(this.dataSrc, this.dataSrcset, this.sizes).then(img => {
 
-                setSrcAttrs(this.$el, currentSrc(img));
+                setSrcAttrs(this.$el, currentSrc(img), img.srcset, img.sizes);
                 storage[this.cacheKey] = currentSrc(img);
                 return img;
 
@@ -144,20 +163,13 @@ export default {
 
 };
 
-const srcProps = ['data-src', 'data-srcset', 'sizes'];
-function setSrcAttrs(el, src) {
+function setSrcAttrs(el, src, srcset, sizes) {
 
-    const parentNode = parent(el);
     if (isImg(el)) {
-        (isPicture(parentNode) ? children(parentNode) : [el]).forEach(el =>
-            srcProps.forEach(prop => {
-                const value = data(el, prop);
-                if (value) {
-                    attr(el, prop.replace(/^(data-)+/, ''), value);
-                }
-            })
-        );
-        src && attr(el, 'src', src);
+        const set = (prop, val) => val && val !== el[prop] && (el[prop] = val);
+        set('sizes', sizes);
+        set('srcset', srcset);
+        set('src', src);
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -170,10 +182,7 @@ function setSrcAttrs(el, src) {
 
 }
 
-function getPlaceholderImage(el) {
-    const sizes = data(el, 'sizes');
-    let width = data(el, 'width');
-    let height = data(el, 'height');
+function getPlaceholderImage(width, height, sizes) {
 
     if (sizes) {
         ({width, height} = Dimensions.ratio({width, height}, 'width', toPx(sizesToPixel(sizes))));
@@ -198,24 +207,6 @@ function sizesToPixel(sizes) {
     return matches || '100vw';
 }
 
-function getImageFromElement(el, src) {
-    const parentNode = parent(el);
-
-    if (!src) {
-        return Promise.reject(createEvent('error', false));
-    }
-
-    if (!isPicture(parentNode)) {
-        return getImage(src, ...srcProps.slice(1).map(prop => data(el, prop)));
-    }
-
-    return new Promise((resolve, reject) => {
-        const picture = parentNode.cloneNode(true);
-        once(picture, 'load error', e => e.type === 'error' ? reject(e) : resolve(e.target), true);
-        setSrcAttrs($('img', picture));
-    });
-}
-
 const sizeRe = /\d+(?:\w+|%)/g;
 const additionRe = /[+-]?(\d+)/g;
 function evaluateSize(size) {
@@ -237,16 +228,8 @@ function getSourceSize(srcset, sizes) {
     return descriptors.filter(size => size >= srcSize)[0] || descriptors.pop() || '';
 }
 
-function isPicture(el) {
-    return isA(el, 'PICTURE');
-}
-
 function isImg(el) {
-    return isA(el, 'IMG');
-}
-
-function isA(el, tagName) {
-    return el && el.tagName === tagName;
+    return el.tagName === 'IMG';
 }
 
 function currentSrc(el) {

package/src/js/core/sticky.js

@@ -144,7 +144,7 @@ export default {
                     this.show();
                 }
 
-                height = !this.isActive ? this.$el.offsetHeight : height;
+                height = this.isActive ? height : this.$el.offsetHeight;
 
                 if (height + this.offset > getHeight(window)) {
                     this.inactive = true;

package/src/js/core/toggle.js

@@ -2,6 +2,8 @@ import Media from '../mixin/media';
 import Togglable from '../mixin/togglable';
 import {attr, closest, hasClass, includes, isBoolean, isFocusable, isTouch, matches, once, pointerDown, pointerEnter, pointerLeave, queryAll, trigger, within} from 'uikit-util';
 
+const KEY_SPACE = 32;
+
 export default {
 
     mixins: [Media, Togglable],
@@ -119,12 +121,11 @@ export default {
             name: 'keydown',
 
             filter() {
-                return includes(this.mode, 'click');
+                return includes(this.mode, 'click') && this.$el.tagName !== 'INPUT';
             },
 
             handler(e) {
-                // Space
-                if (e.keyCode === 32) {
+                if (e.keyCode === KEY_SPACE) {
                     e.preventDefault();
                     this.$el.click();
                 }

package/src/js/mixin/animate.js

@@ -23,12 +23,12 @@ export default {
                 ? fade
                 : name === 'delayed-fade'
                     ? (...args) => fade(...args, 40)
-                    : !name
-                        ? () => {
+                    : name
+                        ? slide
+                        : () => {
                             action();
                             return Promise.resolve();
-                        }
-                        : slide;
+                        };
 
             return animationFn(action, target, this.duration)
                 .then(() => this.$update(target, 'resize'), noop);

package/src/js/mixin/internal/slideshow-animations.js

@@ -32,7 +32,7 @@ export function translated(el) {
 
 export function translate(value = 0, unit = '%') {
     value += value ? unit : '';
-    return isIE ? `translateX(${value})` : `translate3d(${value}, 0, 0)`; // currently not translate3d in IE, translate3d within translate3d does not work while transitioning
+    return isIE ? `translateX(${value})` : `translate3d(${value}, 0, 0)`; // currently, not translate3d in IE, translate3d within translate3d does not work while transitioning
 }
 
 export function scale3d(value) {

package/src/js/mixin/parallax.js

@@ -254,7 +254,7 @@ export default {
 
                         css[prop] = `rgba(${
                             start.map((value, i) => {
-                                value = value + p * (end[i] - value);
+                                value += p * (end[i] - value);
                                 return i === 3 ? toFloat(value) : parseInt(value, 10);
                             }).join(',')
                         })`;

package/src/js/util/dom.js

@@ -1,4 +1,4 @@
-import {on} from './event';
+import {once} from './event';
 import {parent} from './filter';
 import {find, findAll} from './selector';
 import {isElement, isString, isUndefined, toNode, toNodes} from './lang';
@@ -10,10 +10,7 @@ export function ready(fn) {
         return;
     }
 
-    const unbind = on(document, 'DOMContentLoaded', function () {
-        unbind();
-        fn();
-    });
+    once(document, 'DOMContentLoaded', fn);
 }
 
 export function empty(element) {
@@ -33,10 +30,10 @@ export function prepend(parent, element) {
 
     parent = $(parent);
 
-    if (!parent.hasChildNodes()) {
-        return append(parent, element);
-    } else {
+    if (parent.hasChildNodes()) {
         return insertNodes(element, element => parent.insertBefore(element, parent.firstChild));
+    } else {
+        return append(parent, element);
     }
 }
 

package/src/js/util/selector.js

@@ -1,3 +1,4 @@
+import {attr} from './attr';
 import {inBrowser} from './env';
 import {closest, index, matches, parent} from './filter';
 import {isDocument, isString, memoize, toNode, toNodes} from './lang';
@@ -95,8 +96,9 @@ const splitSelector = memoize(selector =>
 function domPath(element) {
     const names = [];
     while (element.parentNode) {
-        if (element.id) {
-            names.unshift(`#${escape(element.id)}`);
+        const id = attr(element, 'id');
+        if (id) {
+            names.unshift(`#${escape(id)}`);
             break;
         } else {
             let {tagName} = element;

package/src/js/util/viewport.js

@@ -82,10 +82,10 @@ export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
                 scrollTop(element, scroll + top * percent);
 
                 // scroll more if we have not reached our destination
-                if (percent !== 1) {
-                    requestAnimationFrame(step);
-                } else {
+                if (percent === 1) {
                     resolve();
+                } else {
+                    requestAnimationFrame(step);
                 }
 
             })();

package/src/less/components/cover.less

@@ -14,16 +14,16 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
-[uk-cover] {
+[uk-cover],
+[data-uk-cover] {
     /* 2 */
     max-width: none;
     /* 3 */
@@ -35,7 +35,8 @@
     transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
-iframe.uk-cover { pointer-events: none; }
+iframe[uk-cover],
+iframe[data-uk-cover] { pointer-events: none; }
 
 
 /* Container

package/src/less/components/divider.less

@@ -114,7 +114,7 @@
  ========================================================================== */
 
 .uk-divider-vertical {
-    width: 1px;
+    width: max-content;
     height: @divider-vertical-height;
     margin-left: auto;
     margin-right: auto;

package/src/less/components/list.less

@@ -95,7 +95,7 @@
 .uk-list-decimal > * { counter-increment: decimal; }
 
 [class*='uk-list'] > ::before {
-    content: '';
+    content: "";
     position: relative;
     left: -@list-padding-left;
     width: @list-padding-left;

package/src/less/components/search.less

@@ -30,6 +30,7 @@
 @search-default-focus-background:                   darken(@search-default-background, 5%);
 
 @search-default-icon-width:                         @global-control-height;
+@search-default-icon-padding:                       0;
 
 @search-navbar-width:                               400px;
 @search-navbar-height:                              40px;
@@ -37,6 +38,7 @@
 @search-navbar-font-size:                           @global-large-font-size;
 
 @search-navbar-icon-width:                          40px;
+@search-navbar-icon-padding:                        0;
 
 @search-large-width:                                500px;
 @search-large-height:                               80px;
@@ -44,6 +46,7 @@
 @search-large-font-size:                            @global-2xlarge-font-size;
 
 @search-large-icon-width:                           80px;
+@search-large-icon-padding:                         0;
 
 @search-toggle-color:                               @global-muted-color;
 @search-toggle-hover-color:                         @global-color;
@@ -205,8 +208,8 @@
 
 .uk-search-default .uk-search-icon { width: @search-default-icon-width; }
 
-.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-default-icon-width); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-default-icon-width); }
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-default-icon-width + @search-default-icon-padding); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-default-icon-width + @search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -236,8 +239,8 @@
 
 .uk-search-navbar .uk-search-icon { width: @search-navbar-icon-width; }
 
-.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-navbar-icon-width); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-navbar-icon-width + @search-navbar-icon-padding); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-navbar-icon-width + @search-navbar-icon-padding); }
 
 
 /* Large modifier
@@ -267,8 +270,8 @@
 
 .uk-search-large .uk-search-icon { width: @search-large-icon-width; }
 
-.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-large-icon-width); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-large-icon-width); }
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-large-icon-width + @search-large-icon-padding); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-large-icon-width + @search-large-icon-padding); }
 
 
 /* Toggle

package/src/less/components/utility.less

@@ -40,6 +40,7 @@
 @box-shadow-duration:                           0.1s;
 
 @box-shadow-bottom-height:                      30px;
+@box-shadow-bottom-bottom:                      -@box-shadow-bottom-height;
 @box-shadow-bottom-border-radius:               100%;
 @box-shadow-bottom-background:                  #444;
 @box-shadow-bottom-blur:                        20px;
@@ -246,7 +247,8 @@
  * Fix initial iframe width. Without the viewport is expanded on iOS devices
  */
 
-[uk-responsive] { max-width: 100%; }
+[uk-responsive],
+[data-uk-responsive] { max-width: 100%; }
 
 
 /* Border
@@ -303,10 +305,10 @@
     }
 
     .uk-box-shadow-bottom::after {
-        content: '';
+        content: "";
         /* 1 */
         position: absolute;
-        bottom: -@box-shadow-bottom-height;
+        bottom: @box-shadow-bottom-bottom;
         left: 0;
         right: 0;
         z-index: -1;

package/src/less/components/width.less

@@ -360,6 +360,13 @@
 
 }
 
+/* Intrinsic Widths
+ ========================================================================== */
+
+.uk-width-max-content { width: max-content; }
+
+.uk-width-min-content { width: min-content; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/cover.scss

@@ -14,16 +14,16 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
-[uk-cover] {
+[uk-cover],
+[data-uk-cover] {
     /* 2 */
     max-width: none;
     /* 3 */
@@ -35,7 +35,8 @@
     transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
-iframe.uk-cover { pointer-events: none; }
+iframe[uk-cover],
+iframe[data-uk-cover] { pointer-events: none; }
 
 
 /* Container

package/src/scss/components/divider.scss

@@ -114,7 +114,7 @@ $divider-vertical-border:                        $global-border !default;
  ========================================================================== */
 
 .uk-divider-vertical {
-    width: 1px;
+    width: max-content;
     height: $divider-vertical-height;
     margin-left: auto;
     margin-right: auto;

package/src/scss/components/list.scss

@@ -95,7 +95,7 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D
 .uk-list-decimal > * { counter-increment: decimal; }
 
 [class*='uk-list'] > ::before {
-    content: '';
+    content: "";
     position: relative;
     left: (-$list-padding-left);
     width: $list-padding-left;