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

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.21.14-dev.60ed95dfb",
+  "version": "3.21.14-dev.8b3dfa6cd",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -35,7 +35,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
     "globals": "^15.7.0",
-    "inquirer": "^11.0.1",
+    "inquirer": "^12.0.0",
     "less": "^4.2.0",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",

package/src/images/icons/arrow-down-arrow-up.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <line fill="none" stroke="#000" x1="7" y1="3.38" x2="7" y2="15.38" />
+    <polyline fill="none" stroke="#000" points="10.18 12.75 7 15.93 3.83 12.76" />
+    <line fill="none" stroke="#000" x1="13" y1="16.62" x2="13" y2="4.62" />
+    <polyline fill="none" stroke="#000" points="9.82 7.25 13 4.07 16.17 7.24" />
+</svg>

package/src/images/icons/arrow-down.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="10.5,16.08 5.63,10.66 6.37,10 10.5,14.58 14.63,10 15.37,10.66" />
-    <line fill="none" stroke="#000" x1="10.5" y1="4" x2="10.5" y2="15" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="3.48" x2="10" y2="15.48" />
+    <polyline fill="none" stroke="#000" points="6.16 12 10 15.84 13.84 12" />
+</svg>

package/src/images/icons/arrow-left.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="10 14 5 9.5 10 5" />
-    <line fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52" />
-</svg>
+    <line fill="none" stroke="#000" x1="16.53" y1="10" x2="4.53" y2="10" />
+    <polyline fill="none" stroke="#000" points="8 6.16 4.18 10 8 13.84" />
+</svg>

package/src/images/icons/arrow-right.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="10 5 15 9.5 10 14" />
-    <line fill="none" stroke="#000" x1="4" y1="9.5" x2="15" y2="9.5" />
-</svg>
+    <line fill="none" stroke="#000" x1="3.47" y1="10" x2="15.47" y2="10" />
+    <polyline fill="none" stroke="#000" points="11.98 13.84 15.82 10 11.98 6.16" />
+</svg>

package/src/images/icons/arrow-up-right.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="16 10 16 4 10 4"/>
-    <line fill="none" stroke="#000" x1="4" y1="16" x2="16" y2="4"/>
-</svg>
+    <line fill="none" stroke="#000" x1="4.5" y1="15.53" x2="16.5" y2="3.53" />
+    <polyline fill="none" stroke="#000" points="16.5 9 16.5 3.5 11 3.5" />
+</svg>

package/src/images/icons/arrow-up.svg

@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="10.5,4 15.37,9.4 14.63,10.08 10.5,5.49 6.37,10.08 5.63,9.4" />
-    <line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="16.53" x2="10" y2="4.53" />
+    <polyline fill="none" stroke="#000" points="13.84 8 10 4.17 6.16 8" />
+</svg>

package/src/images/icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9" />
+    <line fill="none" stroke="#000" x1="13.18" y1="6.82" x2="6.82" y2="13.18" />
+    <line fill="none" stroke="#000" x1="6.82" y1="6.82" x2="13.18" y2="13.18" />
+</svg>

package/src/images/icons/cloud-download.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,14.61 L3.75,14.61 C1.96,14.61 0.5,13.17 0.5,11.39 C0.5,9.76 1.72,8.41 3.3,8.2 C3.38,5.31 5.75,3 8.68,3 C11.19,3 13.31,4.71 13.89,7.02 C14.39,6.8 14.93,6.68 15.5,6.68 C17.71,6.68 19.5,8.45 19.5,10.64 C19.5,12.83 17.71,14.6 15.5,14.6 L12.5,14.6" />
-    <polyline fill="none" stroke="#000" points="11.75 16 9.5 18.25 7.25 16" />
-    <path fill="none" stroke="#000" d="M9.5,18 L9.5,9.5" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,13.28h-2.75c-1.79,0-3.25-1.44-3.25-3.22,0-1.63,1.22-2.98,2.8-3.19.08-2.89,2.45-5.2,5.38-5.2,2.51,0,4.63,1.71,5.21,4.02.5-.22,1.04-.34,1.61-.34,2.21,0,4,1.77,4,3.96s-1.79,3.96-4,3.96h-3" />
+    <path fill="none" stroke="#000" d="M9.5,18.17v-10" />
+    <polyline fill="none" stroke="#000" points="12.67 15.66 9.5 18.83 6.33 15.66" />
+</svg>

package/src/images/icons/cloud-upload.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,14.61 L3.75,14.61 C1.96,14.61 0.5,13.17 0.5,11.39 C0.5,9.76 1.72,8.41 3.31,8.2 C3.38,5.31 5.75,3 8.68,3 C11.19,3 13.31,4.71 13.89,7.02 C14.39,6.8 14.93,6.68 15.5,6.68 C17.71,6.68 19.5,8.45 19.5,10.64 C19.5,12.83 17.71,14.6 15.5,14.6 L12.5,14.6" />
-    <polyline fill="none" stroke="#000" points="7.25 11.75 9.5 9.5 11.75 11.75" />
-    <path fill="none" stroke="#000" d="M9.5,18 L9.5,9.5" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M6.5,13.77h-2.75c-1.79,0-3.25-1.44-3.25-3.22,0-1.63,1.22-2.98,2.81-3.19.07-2.89,2.44-5.2,5.37-5.2,2.51,0,4.63,1.71,5.21,4.02.5-.22,1.04-.34,1.61-.34,2.21,0,4,1.77,4,3.96s-1.79,3.96-4,3.96h-3" />
+    <path fill="none" stroke="#000" d="M9.51,9.34v9" />
+    <polyline fill="none" stroke="#000" points="6.34 11.85 9.51 8.68 12.68 11.85" />
+</svg>

package/src/images/icons/download.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10" />
-    <rect x="3" y="17" width="13" height="1" />
-    <line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="2.09" x2="10" y2="14.09" />
+    <polyline fill="none" stroke="#000" points="6.16 10.62 10 14.46 13.84 10.62" />
+    <line stroke="#000" x1="3.5" y1="17.5" x2="16.5" y2="17.5" />
+</svg>

package/src/images/icons/expand.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="13 2 18 2 18 7 17 7 17 3 13 3" />
-    <polygon points="2 13 3 13 3 17 7 17 7 18 2 18" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M11,9 L17,3" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M3,17 L9,11" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M2.48,17.52l6.52-6.52" />
+    <polyline fill="none" stroke="#000" points="6.97 17.52 2.48 17.52 2.48 13.03" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M17.52,2.48l-6.52,6.52" />
+    <polyline fill="none" stroke="#000" points="13.03 2.48 17.52 2.48 17.52 6.97" />
+</svg>

package/src/images/icons/link-external.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="14.5 10.5 14.5 16.5 3.5 16.5 3.5 5.5 8.5 5.5"/>
-    <polyline fill="none" stroke="#000" points="17.5 8.5 17.5 2.5 11.5 2.5"/>
-    <line fill="none" stroke="#000" x1="6.5" y1="13.5" x2="17.5" y2="2.5"/>
-</svg>
+    <polyline fill="none" stroke="#000" points="15 10.5 15 17 3 17 3 5 9.5 5" />
+    <line fill="none" stroke="#000" x1="8.22" y1="11.79" x2="17.01" y2="2.99" />
+    <polyline fill="none" stroke="#000" points="12.5 3 17 3 17 7.5" />
+</svg>

package/src/images/icons/pull.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="6.85,8 9.5,10.6 12.15,8 12.85,8.7 9.5,12 6.15,8.7" />
-    <line fill="none" stroke="#000" x1="9.5" y1="11" x2="9.5" y2="2" />
-    <polyline fill="none" stroke="#000" points="6,5.5 3.5,5.5 3.5,18.5 15.5,18.5 15.5,5.5 13,5.5" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="11" x2="10" y2="2" />
+    <polyline fill="none" stroke="#000" points="6.5 5.5 4 5.5 4 18.5 16 18.5 16 5.5 13.5 5.5" />
+    <polyline fill="none" stroke="#000" points="13.18 8.2 10 11.38 6.83 8.21" />
+</svg>

package/src/images/icons/push.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="12.15,4 9.5,1.4 6.85,4 6.15,3.3 9.5,0 12.85,3.3" />
-    <line fill="none" stroke="#000" x1="9.5" y1="10" x2="9.5" y2="1" />
-    <polyline fill="none" stroke="#000" points="6 5.5 3.5 5.5 3.5 18.5 15.5 18.5 15.5 5.5 13 5.5" />
+    <line fill="none" stroke="#000" x1="10" y1="11" x2="10" y2="1" />
+    <polyline fill="none" stroke="#000" points="6.5 6.5 4 6.5 4 19.5 16 19.5 16 6.5 13.5 6.5" />
+    <polyline fill="none" stroke="#000" points="6.82 3.88 10 .71 13.17 3.88" />
 </svg>

package/src/images/icons/shrink.svg

@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="11 4 12 4 12 8 16 8 16 9 11 9" />
-    <polygon points="4 11 9 11 9 16 8 16 8 12 4 12" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M12,8 L18,2" />
-    <path fill="none" stroke="#000" stroke-width="1.1" d="M2,18 L8,12" />
-</svg>
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M2,18l6-6" />
+    <polyline fill="none" stroke="#000" points="4 11.5 8.49 11.5 8.49 15.99" />
+    <path fill="none" stroke="#000" stroke-width="1.1" d="M18,2l-6,6" />
+    <polyline fill="none" stroke="#000" points="15.99 8.49 11.5 8.49 11.5 4" />
+</svg>

package/src/images/icons/sign-in.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="7 2 17 2 17 17 7 17 7 16 16 16 16 3 7 3" />
-    <polygon points="9.1 13.4 8.5 12.8 11.28 10 4 10 4 9 11.28 9 8.5 6.2 9.1 5.62 13 9.5" />
-</svg>
+    <polygon points="7 2 17 2 17 17 7 17 7 16 16 16 16 3 7 3 7 2" />
+    <line stroke="#000" x1="3" y1="9.5" x2="12" y2="9.5" />
+    <polyline fill="none" stroke="#000" points="9.2 6.33 12.37 9.5 9.2 12.67" />
+</svg>

package/src/images/icons/sign-out.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="13.1 13.4 12.5 12.8 15.28 10 8 10 8 9 15.28 9 12.5 6.2 13.1 5.62 17 9.5" />
-    <polygon points="13 2 3 2 3 17 13 17 13 16 4 16 4 3 13 3" />
-</svg>
+    <polygon points="13 2 3 2 3 17 13 17 13 16 4 16 4 3 13 3 13 2" />
+    <line stroke="#000" x1="7.96" y1="9.49" x2="16.96" y2="9.49" />
+    <polyline fill="none" stroke="#000" points="14.17 6.31 17.35 9.48 14.17 12.66" />
+</svg>

package/src/images/icons/sorting.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <line fill="none" stroke="#000" x1="7" y1="3.38" x2="7" y2="15.38" />
+    <polyline fill="none" stroke="#000" points="10.18 12.75 7 15.93 3.83 12.76" />
+    <line fill="none" stroke="#000" x1="13" y1="16.62" x2="13" y2="4.62" />
+    <polyline fill="none" stroke="#000" points="9.82 7.25 13 4.07 16.17 7.24" />
+</svg>

package/src/images/icons/upload.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 " />
-    <rect x="3" y="17" width="13" height="1" />
-    <line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4" />
-</svg>
+    <line fill="none" stroke="#000" x1="10" y1="15.17" x2="10" y2="3.17" />
+    <polyline fill="none" stroke="#000" points="13.84 6.63 10 2.8 6.16 6.64" />
+    <line fill="#fff" stroke="#000" x1="3.5" y1="17.5" x2="16.5" y2="17.5" />
+</svg>

package/src/js/api/instance.js

@@ -11,7 +11,7 @@ export default function (App) {
 
         instance.$options.el = el;
 
-        if (document.contains(el)) {
+        if (el.isConnected) {
             callConnected(instance);
         }
     };

package/src/js/components/internal/lightbox-animations.js

@@ -1,5 +1,6 @@
 import { css } from 'uikit-util';
-import Animations, { scale3d } from '../../mixin/internal/slideshow-animations';
+import Animations from '../../mixin/internal/slideshow-animations';
+import { scale3d } from './slideshow-animations';
 
 export default {
     ...Animations,

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

@@ -1,9 +1,5 @@
 import { css } from 'uikit-util';
-import Animations, {
-    scale3d,
-    translate,
-    translated,
-} from '../../mixin/internal/slideshow-animations';
+import Animations, { translate, translated } from '../../mixin/internal/slideshow-animations';
 
 export default {
     ...Animations,
@@ -98,3 +94,7 @@ export default {
         },
     },
 };
+
+export function scale3d(value) {
+    return `scale3d(${value}, ${value}, 1)`;
+}

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,32 @@ 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 : '',
+                        poster: this.videoAutoplay ? null : item.poster,
+                        'uk-video': inline ? 'automute: true' : Boolean(this.videoAutoplay),
                         ...attrs,
                     });
 
@@ -297,8 +378,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 +427,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 +449,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);
+}