uikit 3.21.14-dev.60ed95dfb → 3.21.14-dev.8b3dfa6cd

package/src/js/components/lightbox.js

@@ -1,7 +1,21 @@
-import { $$, assign, attr, data, findIndex, isElement, isTag, on, uniqueBy } from 'uikit-util';
+import {
+    $,
+    $$,
+    assign,
+    attr,
+    findIndex,
+    isElement,
+    isTag,
+    matches,
+    on,
+    parents,
+    uniqueBy,
+} from 'uikit-util';
 import { parseOptions } from '../api/options';
 import LightboxPanel from './lightbox-panel';
 
+const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
+
 export default {
     install,
 
@@ -31,19 +45,27 @@ export default {
     events: {
         name: 'click',
 
-        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
+        delegate: ({ toggle }) => toggle,
 
         handler(e) {
             if (!e.defaultPrevented) {
                 e.preventDefault();
-                this.show(e.current);
+                if (!matches(e.current, selDisabled)) {
+                    this.show(e.current);
+                }
             }
         },
     },
 
     methods: {
         show(index) {
-            const items = uniqueBy(this.toggles.map(toItem), 'source');
+            let items = this.toggles.map(toItem);
+
+            if (this.nav === 'thumbnav') {
+                ensureThumb.call(this, this.toggles, items);
+            }
+
+            items = uniqueBy(items, 'source');
 
             if (isElement(index)) {
                 const { source } = toItem(index);
@@ -71,11 +93,42 @@ function install(UIkit, Lightbox) {
     assign(Lightbox.props, UIkit.component('lightboxPanel').options.props);
 }
 
+function ensureThumb(toggles, items) {
+    for (const [i, toggle] of Object.entries(toggles)) {
+        if (items[i].thumb) {
+            continue;
+        }
+
+        const parent = parents(toggle)
+            .reverse()
+            .concat(toggle)
+            .find(
+                (parent) =>
+                    this.$el.contains(parent) &&
+                    (parent === toggle || $$(this.toggle, parent).length === 1),
+            );
+
+        if (!parent) {
+            continue;
+        }
+
+        const media = $('img,video', parent);
+
+        if (media) {
+            items[i].thumb = media.currentSrc || media.poster || media.src;
+            items[i].thumbRatio =
+                (media.naturalWidth || media.videoWidth) /
+                (media.naturalHeight || media.videoHeight);
+        }
+    }
+}
+
 function toItem(el) {
     const item = {};
 
-    for (const attr of ['href', 'caption', 'type', 'poster', 'alt', 'attrs']) {
-        item[attr === 'href' ? 'source' : attr] = data(el, attr);
+    for (const attribute of el.getAttributeNames()) {
+        const key = attribute.replace(/^data-/, '');
+        item[key === 'href' ? 'source' : key] = el.getAttribute(attribute);
     }
 
     item.attrs = parseOptions(item.attrs);

package/src/js/components/slideshow.js

@@ -31,8 +31,7 @@ export default {
                 aspectRatio: this.ratio ? this.ratio.replace(':', '/') : undefined,
                 minHeight: this.minHeight,
                 maxHeight: this.maxHeight,
-                minWidth: '100%',
-                maxWidth: '100%',
+                width: '100%',
             });
         },
     },

package/src/js/components/tooltip.js

@@ -136,7 +136,7 @@ export default {
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
         [`focus ${pointerEnter} ${pointerDown}`](e) {
-            if (!isTouch(e) || e.type === pointerDown) {
+            if ((!isTouch(e) || e.type === pointerDown) && document.readyState !== 'loading') {
                 this.show();
             }
         },

package/src/js/core/grid.js

@@ -165,7 +165,7 @@ function applyMasonry(rows, gutter, next) {
     let rowHeights = 0;
     for (let row of rows) {
         if (isRtl) {
-            row = row.reverse();
+            row.reverse();
         }
 
         let height = 0;

package/src/js/core/icon.js

@@ -5,6 +5,7 @@ import {
     attr,
     css,
     each,
+    fragment,
     hasAttr,
     hasClass,
     hyphenate,
@@ -35,7 +36,6 @@ import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
 import I18n from '../mixin/i18n';
 import Svg from '../mixin/svg';
-import { stringToSvg } from './svg';
 
 const icons = {
     spinner,
@@ -262,7 +262,7 @@ function getIcon(icon) {
     }
 
     if (!parsed[icon]) {
-        parsed[icon] = stringToSvg(icons[applyRtl(icon)] || icons[icon]);
+        parsed[icon] = fragment(icons[applyRtl(icon)] || icons[icon]);
     }
 
     return parsed[icon].cloneNode(true);

package/src/js/core/img.js

@@ -101,7 +101,7 @@ function setSourceProps(sourceEl, targetEl) {
     for (const prop of srcProps) {
         const value = data(sourceEl, prop);
         if (value) {
-            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
+            attr(targetEl, prop.replace(/data-/g, ''), value);
         }
     }
 }
@@ -111,14 +111,12 @@ function getImageFromElement(el, src, sources) {
 
     wrapInPicture(img, sources);
     setSourceProps(el, img);
-    img.onload = () => {
-        setSrcAttrs(el, img.currentSrc);
-    };
+    img.onload = () => setSrcAttrs(el, img.currentSrc);
     attr(img, 'src', src);
     return img;
 }
 
-function wrapInPicture(img, sources) {
+export function wrapInPicture(img, sources) {
     sources = parseSources(sources);
 
     if (sources.length) {

package/src/js/core/navbar.js

@@ -1,4 +1,4 @@
-import { $$, addClass, css, hasClass, offset, removeClass } from 'uikit-util';
+import { $$, addClass, css, hasClass, offset, parent, removeClass } from 'uikit-util';
 import Dropnav from './dropnav';
 
 const clsNavbarTransparent = 'uk-navbar-transparent';
@@ -56,7 +56,11 @@ export default {
 
             el: ({ dropContainer }) => dropContainer,
 
-            async handler() {
+            async handler(e) {
+                if (parent(e.target) !== this.dropContainer) {
+                    return;
+                }
+
                 await awaitMacroTask();
 
                 if (!this.getActive() && this._transparent) {

package/src/js/core/scrollspy-nav.js

@@ -52,7 +52,7 @@ export default {
     update: [
         {
             read() {
-                const targets = this.links.map((el) => getTargetedElement(el) || el.ownerDocument);
+                const targets = this.links.map((el) => getTargetedElement(el)).filter(Boolean);
 
                 const { length } = targets;
 

package/src/js/core/svg.js

@@ -2,6 +2,7 @@ import {
     addClass,
     attr,
     css,
+    fragment,
     includes,
     isTag,
     memoize,
@@ -94,11 +95,14 @@ const loadSVG = memoize(async (src) => {
         if (startsWith(src, 'data:')) {
             return decodeURIComponent(src.split(',')[1]);
         } else {
-            return (await fetch(src)).text();
+            const response = await fetch(src);
+            if (response.headers.get('Content-Type') === 'image/svg+xml') {
+                return response.text();
+            }
         }
-    } else {
-        return Promise.reject();
     }
+
+    return Promise.reject();
 });
 
 function parseSVG(svg, icon) {
@@ -106,7 +110,7 @@ function parseSVG(svg, icon) {
         svg = parseSymbols(svg)[icon] || svg;
     }
 
-    return stringToSvg(svg);
+    return fragment(svg);
 }
 
 const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
@@ -131,9 +135,3 @@ function applyAnimation(el) {
         css(el, '--uk-animation-stroke', length);
     }
 }
-
-export function stringToSvg(string) {
-    const container = document.createElement('template');
-    container.innerHTML = string;
-    return container.content.firstElementChild;
-}

package/src/js/core/toggle.js

@@ -102,7 +102,7 @@ export default {
             filter: ({ mode }) => includes(mode, 'hover'),
 
             handler(e) {
-                if (isTouch(e) || this.$el.disabled) {
+                if (isTouch(e) || this.$el.disabled || document.readyState === 'loading') {
                     return;
                 }
 

package/src/js/core/video.js

@@ -3,7 +3,6 @@ import {
     includes,
     isTag,
     isTouch,
-    isVideo,
     mute,
     parent,
     pause,
@@ -78,7 +77,7 @@ export default {
 
     observe: [
         intersection({
-            filter: ({ $el, autoplay }) => autoplay !== 'hover' && isVideo($el),
+            filter: ({ autoplay }) => autoplay !== 'hover',
             handler([{ isIntersecting }]) {
                 if (!document.fullscreenElement) {
                     if (isIntersecting) {
@@ -91,7 +90,9 @@ export default {
                 }
             },
             args: { intersecting: false },
-            options: ({ $el, autoplay }) => ({ root: autoplay === 'inview' ? null : parent($el) }),
+            options: ({ $el, autoplay }) => ({
+                root: autoplay === 'inview' ? null : parent($el).closest(':not(a)'),
+            }),
         }),
     ],
 };

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

@@ -24,10 +24,5 @@ export function translated(el) {
 }
 
 export function translate(value = 0, unit = '%') {
-    value += value ? unit : '';
-    return `translate3d(${value}, 0, 0)`;
-}
-
-export function scale3d(value) {
-    return `scale3d(${value}, ${value}, 1)`;
+    return value ? `translate3d(${value + unit}, 0, 0)` : '';
 }

package/src/js/mixin/modal.js

@@ -53,10 +53,6 @@ export default {
         transitionElement() {
             return this.panel;
         },
-
-        bgClose({ bgClose }) {
-            return bgClose && this.panel;
-        },
     },
 
     connected() {
@@ -266,6 +262,7 @@ function listenForBackgroundClose(modal) {
         if (
             last(active) !== modal ||
             (modal.overlay && !modal.$el.contains(target)) ||
+            !modal.panel ||
             modal.panel.contains(target)
         ) {
             return;

package/src/js/mixin/slider-drag.js

@@ -17,7 +17,7 @@ const pointerUpOptions = { passive: true, capture: true };
 const pointerDown = 'touchstart mousedown';
 const pointerMove = 'touchmove mousemove';
 const pointerUp = 'touchend touchcancel mouseup click input scroll';
-const preventClick = (e) => e.preventDefault();
+
 export default {
     props: {
         draggable: Boolean,
@@ -120,10 +120,6 @@ export default {
                 return;
             }
 
-            if (!this.dragging) {
-                on(this.list, 'click', preventClick, pointerOptions);
-            }
-
             e.cancelable && e.preventDefault();
 
             this.dragging = true;
@@ -188,6 +184,8 @@ export default {
             off(document, pointerUp, this.end, pointerUpOptions);
 
             if (this.dragging) {
+                setTimeout(on(this.list, 'click', (e) => e.preventDefault(), pointerOptions));
+
                 this.dragging = null;
 
                 if (this.index === this.prevIndex) {
@@ -202,6 +200,8 @@ export default {
                     this.index = dirChange ? this.index : this.prevIndex;
 
                     if (dirChange) {
+                        trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
+                        trigger(this.slides[this.index], 'itemshown', [this]);
                         this.percent = 1 - this.percent;
                     }
 
@@ -214,7 +214,6 @@ export default {
                 }
             }
 
-            setTimeout(() => off(this.list, 'click', preventClick, pointerOptions));
             css(this.list, { userSelect: '' });
 
             this.drag = this.percent = null;

package/src/js/mixin/slider-nav.js

@@ -211,7 +211,7 @@ export default {
                     const active = item === index;
 
                     toggleClass(el, this.clsActive, active);
-                    toggleClass(button, 'uk-disabled', this.parallax);
+                    toggleClass(button, 'uk-disabled', !!this.parallax);
 
                     attr(button, {
                         'aria-selected': active,

package/src/js/mixin/slider.js

@@ -101,7 +101,7 @@ export default {
     },
 
     methods: {
-        show(index, force = false) {
+        async show(index, force = false) {
             if (this.dragging || !this.length || this.parallax) {
                 return;
             }
@@ -149,22 +149,20 @@ export default {
                 return;
             }
 
-            const promise = this._show(prev, next, force).then(() => {
-                prev && trigger(prev, 'itemhidden', [this]);
-                trigger(next, 'itemshown', [this]);
+            prev && trigger(prev, 'itemhide', [this]);
+            trigger(next, 'itemshow', [this]);
 
-                stack.shift();
-                this._transitioner = null;
+            await this._show(prev, next, force);
 
-                if (stack.length) {
-                    requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
-                }
-            });
+            prev && trigger(prev, 'itemhidden', [this]);
+            trigger(next, 'itemshown', [this]);
 
-            prev && trigger(prev, 'itemhide', [this]);
-            trigger(next, 'itemshow', [this]);
+            stack.shift();
+            this._transitioner = null;
 
-            return promise;
+            if (stack.length) {
+                requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+            }
         },
 
         getIndex(index = this.index, prev = this.index) {

package/src/js/mixin/slideshow.js

@@ -31,7 +31,7 @@ export default {
     observe: resize(),
 
     events: {
-        beforeitemshow({ target }) {
+        itemshow({ target }) {
             addClass(target, this.clsActive);
         },
 

package/src/js/mixin/togglable.js

@@ -20,6 +20,7 @@ import {
     unwrap,
     wrapInner,
 } from 'uikit-util';
+import { storeScrollPosition } from './position';
 
 export default {
     props: {
@@ -79,6 +80,12 @@ export default {
                         const done = () => {
                             removeClass(el, cls);
                             trigger(el, show ? 'shown' : 'hidden', [this]);
+
+                            if (show) {
+                                const restoreScrollPosition = storeScrollPosition(el);
+                                $$('[autofocus]', el).find(isVisible)?.focus();
+                                restoreScrollPosition();
+                            }
                         };
 
                         return promise
@@ -125,8 +132,6 @@ export default {
             if (changed) {
                 trigger(el, 'toggled', [toggled, this]);
             }
-
-            $$('[autofocus]', el).some((el) => (isVisible(el) ? el.focus() || true : el.blur()));
         },
     },
 };

package/src/js/util/dom.js

@@ -18,7 +18,9 @@ export function isTag(element, ...tagNames) {
 
 export function empty(element) {
     element = $(element);
-    element.innerHTML = '';
+    if (element) {
+        element.innerHTML = '';
+    }
     return element;
 }
 

package/src/js/util/filter.js

@@ -84,6 +84,8 @@ export function getTargetedElement(el) {
     if (isSameSiteAnchor(el)) {
         const { hash, ownerDocument } = toNode(el);
         const id = decodeURIComponent(hash).slice(1);
-        return ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0];
+        return id
+            ? ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0]
+            : ownerDocument;
     }
 }

package/src/js/util/player.js

@@ -32,10 +32,6 @@ export function mute(el) {
     }
 }
 
-export function isVideo(el) {
-    return isHTML5(el) || isIFrame(el);
-}
-
 function isHTML5(el) {
     return isTag(el, 'video');
 }

package/src/less/components/background.less

@@ -69,15 +69,7 @@
 /* Attachment
  ========================================================================== */
 
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
-
-.uk-background-fixed {
-    background-attachment: fixed;
-    /* 1 */
-    backface-visibility: hidden;
-}
+.uk-background-fixed { background-attachment: fixed; }
 
 /*
  * Exclude touch devices because `fixed` doesn't work on iOS and Android

package/src/less/components/breadcrumb.less

@@ -28,12 +28,16 @@
  ========================================================================== */
 
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 
 .uk-breadcrumb {
+    /* 1 */
     padding: 0;
     list-style: none;
+    /* 2 */
+    font-size: 0;
     .hook-breadcrumb();
 }
 
@@ -83,7 +87,7 @@
     content: @breadcrumb-divider;
     display: inline-block;
     /* 1 */
-    margin: 0 @breadcrumb-divider-margin-horizontal 0 ~'calc(@{breadcrumb-divider-margin-horizontal} - 4px)';
+    margin: 0 @breadcrumb-divider-margin-horizontal;
     /* 2 */
     font-size: @breadcrumb-divider-font-size;
     color: @breadcrumb-divider-color;

package/src/less/components/button.less

@@ -350,7 +350,7 @@
  ========================================================================== */
 
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
  * 2. Behave like button
  * 3. Create position context
  */

package/src/less/components/form-range.less

@@ -137,3 +137,55 @@
 .hook-form-range-track-focus() {}
 .hook-form-range-thumb() {}
 .hook-form-range-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-form-range-track-background:          darken(@inverse-global-muted-background; 5%);
+@inverse-form-range-track-focus-background:    fadein(@inverse-form-range-track-background, 5%);
+
+@inverse-form-range-thumb-background:          fadein(@inverse-global-color, 100%);
+
+.hook-inverse() {
+
+    /* Webkit */
+    .uk-range::-webkit-slider-runnable-track {
+        background: @inverse-form-range-track-background;
+        .hook-inverse-form-range-track();
+    }
+
+    .uk-range:focus::-webkit-slider-runnable-track,
+    .uk-range:active::-webkit-slider-runnable-track {
+        background: @inverse-form-range-track-focus-background;
+        .hook-inverse-form-range-track-focus();
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-track {
+        background: @inverse-form-range-track-background;
+        .hook-inverse-form-range-track();
+    }
+
+    .uk-range:focus::-moz-range-track {
+        background: @inverse-form-range-track-focus-background;
+        .hook-inverse-form-range-track-focus();
+    }
+
+    /* Webkit */
+    .uk-range::-webkit-slider-thumb {
+        background: @inverse-form-range-thumb-background;
+        .hook-inverse-form-range-thumb();
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-thumb {
+        background: @inverse-form-range-thumb-background;
+        .hook-inverse-form-range-thumb();
+    }
+
+}
+
+.hook-inverse-form-range-track() {}
+.hook-inverse-form-range-track-focus() {}
+.hook-inverse-form-range-thumb() {}

package/src/less/components/form.less

@@ -604,7 +604,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controle and show cursor
+ * 4. Hide controls and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */