uikit 3.21.17 → 3.21.18-dev.27bfd7d2b

package/src/js/components/lightbox-panel.js

@@ -1,64 +1,123 @@
 import {
     $,
+    $$,
+    Transition,
     addClass,
     append,
     attr,
     fragment,
     getIndex,
     html,
+    isTag,
+    matches,
     on,
+    parent,
+    pick,
     pointerDown,
     pointerMove,
+    remove,
     removeClass,
-    Transition,
+    toggleClass,
     trigger,
+    wrapAll,
 } from 'uikit-util';
+import { wrapInPicture } from '../core/img';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
 import { keyMap } from '../util/keys';
 import Animations from './internal/lightbox-animations';
 
 export default {
+    i18n: {
+        counter: '%s / %s',
+    },
+
     mixins: [Modal, Slideshow],
 
     functional: true,
 
     props: {
-        delayControls: Number,
+        counter: Boolean,
         preload: Number,
+        nav: Boolean,
+        slidenav: Boolean,
+        delayControls: Number,
         videoAutoplay: Boolean,
         template: String,
     },
 
     data: () => ({
+        counter: false,
         preload: 1,
-        videoAutoplay: false,
+        nav: false,
+        slidenav: true,
         delayControls: 3000,
+        videoAutoplay: false,
         items: [],
         cls: 'uk-open',
         clsPage: 'uk-lightbox-page',
-        selList: '.uk-lightbox-items',
+        clsFit: 'uk-lightbox-items-fit',
+        clsZoom: 'uk-lightbox-zoom',
         attrItem: 'uk-lightbox-item',
+        selList: '.uk-lightbox-items',
         selClose: '.uk-close-large',
+        selNav: '.uk-lightbox-thumbnav, .uk-lightbox-dotnav',
         selCaption: '.uk-lightbox-caption',
+        selCounter: '.uk-lightbox-counter',
         pauseOnHover: false,
         velocity: 2,
         Animations,
         template: `<div class="uk-lightbox uk-overflow-hidden">
                         <div class="uk-lightbox-items"></div>
-                        <div class="uk-lightbox-toolbar uk-position-top uk-text-right uk-transition-slide-top uk-transition-opaque">
-                            <button class="uk-lightbox-toolbar-icon uk-close-large" type="button" uk-close></button>
-                         </div>
-                        <a class="uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade" href uk-slidenav-previous uk-lightbox-item="previous"></a>
-                        <a class="uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade" href uk-slidenav-next uk-lightbox-item="next"></a>
-                        <div class="uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
+                        <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
+                            <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
+                        </div>
+                        <div class="uk-lightbox-slidenav uk-position-center-left uk-position-medium uk-transition-fade" uk-inverse>
+                            <a href uk-slidenav-previous uk-lightbox-item="previous"></a>
+                        </div>
+                        <div class="uk-lightbox-slidenav uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse>
+                            <a href uk-slidenav-next uk-lightbox-item="next"></a>
+                        </div>
+                        <div class="uk-position-center-right uk-position-medium uk-transition-fade" uk-inverse style="max-height: 90vh; overflow: auto;">
+                            <ul class="uk-lightbox-thumbnav uk-lightbox-thumbnav-vertical uk-thumbnav uk-thumbnav-vertical"></ul>
+                            <ul class="uk-lightbox-dotnav uk-dotnav uk-dotnav-vertical"></ul>
+                        </div>
+                        <div class="uk-lightbox-counter uk-text-large uk-position-top-left uk-position-small uk-transition-fade" uk-inverse></div>
+                        <div class="uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
                     </div>`,
     }),
 
     created() {
-        const $el = $(this.template);
+        let $el = $(this.template);
+
+        if (isTag($el, 'template')) {
+            $el = fragment(html($el));
+        }
+
         const list = $(this.selList, $el);
-        this.items.forEach(() => append(list, '<div>'));
+        const navType = this.$props.nav;
+
+        remove($$(this.selNav, $el).filter((el) => !matches(el, `.uk-${navType}`)));
+
+        for (const [i, item] of this.items.entries()) {
+            append(list, '<div>');
+            if (navType === 'thumbnav') {
+                wrapAll(
+                    toThumbnavItem(item, this.videoAutoplay),
+                    append($(this.selNav, $el), `<li uk-lightbox-item="${i}"><a href></a></li>`),
+                );
+            }
+        }
+
+        if (!this.slidenav) {
+            remove($$('.uk-lightbox-slidenav', $el));
+        }
+
+        if (!this.counter) {
+            remove($(this.selCounter, $el));
+        }
+
+        addClass(list, this.clsFit);
 
         const close = $('[uk-close]', $el);
         const closeLabel = this.t('close');
@@ -71,10 +130,18 @@ export default {
 
     events: [
         {
-            name: `${pointerMove} ${pointerDown} keydown`,
+            name: 'click',
 
-            handler() {
-                this.showControls();
+            self: true,
+
+            filter: ({ bgClose }) => bgClose,
+
+            delegate: ({ selList }) => `${selList} > *`,
+
+            handler(e) {
+                if (!e.defaultPrevented) {
+                    this.hide();
+                }
             },
         },
 
@@ -83,15 +150,25 @@ export default {
 
             self: true,
 
-            delegate: ({ selList }) => `${selList} > *`,
+            delegate: ({ clsZoom }) => `.${clsZoom}`,
 
             handler(e) {
                 if (!e.defaultPrevented) {
-                    this.hide();
+                    toggleClass(this.list, this.clsFit);
                 }
             },
         },
 
+        {
+            name: `${pointerMove} ${pointerDown} keydown`,
+
+            filter: ({ delayControls }) => delayControls,
+
+            handler() {
+                this.showControls();
+            },
+        },
+
         {
             name: 'shown',
 
@@ -157,6 +234,16 @@ export default {
             name: 'beforeitemshow',
 
             handler(e) {
+                html($(this.selCaption, this.$el), this.getItem().caption || '');
+                html(
+                    $(this.selCounter, this.$el),
+                    this.t('counter', this.index + 1, this.slides.length),
+                );
+
+                for (let j = -this.preload; j <= this.preload; j++) {
+                    this.loadItem(this.index + j);
+                }
+
                 if (this.isToggled()) {
                     return;
                 }
@@ -167,24 +254,12 @@ export default {
 
                 this.toggleElement(this.$el, true, false);
 
-                this.animation = Animations['scale'];
+                this.animation = Animations.scale;
                 removeClass(e.target, this.clsActive);
                 this.stack.splice(1, 0, this.index);
             },
         },
 
-        {
-            name: 'itemshow',
-
-            handler() {
-                html($(this.selCaption, this.$el), this.getItem().caption || '');
-
-                for (let j = -this.preload; j <= this.preload; j++) {
-                    this.loadItem(this.index + j);
-                }
-            },
-        },
-
         {
             name: 'itemshown',
 
@@ -197,9 +272,9 @@ export default {
             name: 'itemload',
 
             async handler(_, item) {
-                const { source: src, type, alt = '', poster, attrs = {} } = item;
+                const { source: src, type, attrs = {} } = item;
 
-                this.setItem(item, '<span uk-spinner></span>');
+                this.setItem(item, '<span uk-spinner uk-inverse></span>');
 
                 if (!src) {
                     return;
@@ -210,26 +285,33 @@ export default {
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',
-                    'uk-video': `${this.videoAutoplay}`,
+                    'uk-video': `${Boolean(this.videoAutoplay)}`,
                 };
 
                 // Image
-                if (
-                    type === 'image' ||
-                    src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i)
-                ) {
-                    const img = createEl('img', { src, alt, ...attrs });
-                    on(img, 'load', () => this.setItem(item, img));
+                if (type === 'image' || isImage(src)) {
+                    const img = createEl('img');
+
+                    wrapInPicture(img, item.sources);
+                    attr(img, {
+                        src,
+                        ...pick(item, ['alt', 'srcset', 'sizes']),
+                        ...attrs,
+                    });
+
+                    on(img, 'load', () => this.setItem(item, parent(img) || img));
                     on(img, 'error', () => this.setError(item));
 
                     // Video
-                } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
+                } else if (type === 'video' || isVideo(src)) {
+                    const inline = this.videoAutoplay === 'inline';
                     const video = createEl('video', {
                         src,
-                        poster,
-                        controls: '',
                         playsinline: '',
-                        'uk-video': `${this.videoAutoplay}`,
+                        controls: inline ? null : '',
+                        loop: inline ? '' : null,
+                        poster: this.videoAutoplay ? null : item.poster,
+                        'uk-video': inline ? 'automute: true' : Boolean(this.videoAutoplay),
                         ...attrs,
                     });
 
@@ -297,8 +379,33 @@ export default {
                 }
             },
         },
+
+        {
+            name: 'itemloaded',
+            handler() {
+                this.$emit('resize');
+            },
+        },
     ],
 
+    update: {
+        read() {
+            for (const media of $$(`${this.selList} :not([controls]):is(img,video)`, this.$el)) {
+                toggleClass(
+                    media,
+                    this.clsZoom,
+                    (media.naturalHeight || media.videoHeight) - this.$el.offsetHeight >
+                        Math.max(
+                            0,
+                            (media.naturalWidth || media.videoWidth) - this.$el.offsetWidth,
+                        ),
+                );
+            }
+        },
+
+        events: ['resize'],
+    },
+
     methods: {
         loadItem(index = this.index) {
             const item = this.getItem(index);
@@ -321,12 +428,13 @@ export default {
         },
 
         setError(item) {
-            this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2"></span>');
+            this.setItem(item, '<span uk-icon="icon: bolt; ratio: 2" uk-inverse></span>');
         },
 
         showControls() {
             clearTimeout(this.controlsTimer);
-            this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
+            this.controlsTimer =
+                this.delayControls && setTimeout(this.hideControls, this.delayControls);
 
             addClass(this.$el, 'uk-active', 'uk-transition-active');
         },
@@ -342,3 +450,31 @@ function createEl(tag, attrs) {
     attr(el, attrs);
     return el;
 }
+
+function toThumbnavItem(item, videoAutoplay) {
+    const el =
+        item.poster || (item.thumb && (item.type === 'image' || isImage(item.thumb)))
+            ? createEl('img', { src: item.poster || item.thumb, alt: '' })
+            : item.thumb && (item.type === 'video' || isVideo(item.thumb))
+              ? createEl('video', {
+                    src: item.thumb,
+                    loop: '',
+                    playsinline: '',
+                    'uk-video': `autoplay: ${Boolean(videoAutoplay)}; automute: true`,
+                })
+              : createEl('canvas');
+
+    if (item.thumbRatio) {
+        el.style.aspectRatio = item.thumbRatio;
+    }
+
+    return el;
+}
+
+function isImage(src) {
+    return src?.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i);
+}
+
+function isVideo(src) {
+    return src?.match(/\.(mp4|webm|ogv)($|\?)/i);
+}

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/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,5 @@
 import { $$, addClass, css, hasClass, offset, removeClass } from 'uikit-util';
+import { active } from './drop';
 import Dropnav from './dropnav';
 
 const clsNavbarTransparent = 'uk-navbar-transparent';
@@ -56,14 +57,10 @@ export default {
 
             el: ({ dropContainer }) => dropContainer,
 
-            async handler(e) {
-                if (!this.getDropdown(e.target)) {
-                    return;
-                }
-
+            async handler() {
                 await awaitMacroTask();
 
-                if (!this.getActive() && this._transparent) {
+                if (this._transparent && (!active || !this.dropContainer.contains(active.$el))) {
                     addClass(this.navbarContainer, clsNavbarTransparent);
                     this._transparent = null;
                 }

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) {
@@ -216,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/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/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
  */