uikit 3.11.2-dev.2b60845fb → 3.11.2-dev.2f4ac8e16

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.11.2-dev.2b60845fb",
+    "version": "3.11.2-dev.2f4ac8e16",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/api/component.js

@@ -1,13 +1,4 @@
-import {
-    $$,
-    assign,
-    camelize,
-    fastdom,
-    hyphenate,
-    isPlainObject,
-    memoize,
-    startsWith,
-} from 'uikit-util';
+import { $$, camelize, fastdom, hyphenate, isPlainObject, memoize, startsWith } from 'uikit-util';
 
 export default function (UIkit) {
     const DATA = UIkit.data;
@@ -51,7 +42,7 @@ export default function (UIkit) {
             }
         };
 
-        const opt = isPlainObject(options) ? assign({}, options) : options.options;
+        const opt = isPlainObject(options) ? { ...options } : options.options;
 
         opt.name = name;
 

package/src/js/api/hooks.js

@@ -105,7 +105,7 @@ export default function (UIkit) {
         const {
             $options: { computed },
         } = this;
-        const values = assign({}, this._computeds);
+        const values = { ...this._computeds };
         this._computeds = {};
 
         for (const key in computed) {

package/src/js/api/state.js

@@ -187,7 +187,7 @@ export default function (UIkit) {
         el = isFunction(el) ? el.call(component) : el || component.$el;
 
         if (isArray(el)) {
-            el.forEach((el) => registerEvent(component, assign({}, event, { el }), key));
+            el.forEach((el) => registerEvent(component, { ...event, el }, key));
             return;
         }
 

package/src/js/components/filter.js

@@ -2,7 +2,6 @@ import Animate from '../mixin/animate';
 import {
     $$,
     append,
-    assign,
     css,
     data,
     each,
@@ -105,7 +104,7 @@ export default {
         },
 
         setState(state, animate = true) {
-            state = assign({ filter: { '': '' }, sort: [] }, state);
+            state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
 
@@ -205,7 +204,7 @@ function getSelector({ filter }) {
 }
 
 function sortItems(nodes, sort, order) {
-    return assign([], nodes).sort(
+    return [...nodes].sort(
         (a, b) =>
             data(a, sort).localeCompare(data(b, sort), undefined, { numeric: true }) *
             (order === 'asc' || -1)

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

@@ -1,7 +1,8 @@
 import Animations, { scale3d } from '../../mixin/internal/slideshow-animations';
-import { assign, css } from 'uikit-util';
+import { css } from 'uikit-util';
 
-export default assign({}, Animations, {
+export default {
+    ...Animations,
     fade: {
         show() {
             return [{ opacity: 0 }, { opacity: 1 }];
@@ -35,4 +36,4 @@ export default assign({}, Animations, {
             ];
         },
     },
-});
+};

package/src/js/components/internal/slider-preload.js

@@ -0,0 +1,37 @@
+import { $$, isVisible, removeAttr } from 'uikit-util';
+
+export default {
+    connected() {
+        if (window.IntersectionObserver) {
+            this.observer = new IntersectionObserver(
+                (entries) => {
+                    if (entries.some((entry) => entry.isIntersecting)) {
+                        removeLazyLoad(this.getAdjacentSlides());
+                    }
+                },
+                { rootMargin: '50% 50%' }
+            );
+            this.observer.observe(this.$el);
+        }
+    },
+
+    disconnected() {
+        this.observer && this.observer.disconnect();
+    },
+
+    update: {
+        read() {
+            if (isVisible(this.$el)) {
+                removeLazyLoad(this.getAdjacentSlides());
+            }
+        },
+
+        events: ['resize'],
+    },
+};
+
+export function removeLazyLoad(elements = []) {
+    for (const el of elements) {
+        el && $$('img[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+    }
+}

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

@@ -3,9 +3,10 @@ import Animations, {
     translate,
     translated,
 } from '../../mixin/internal/slideshow-animations';
-import { assign, css } from 'uikit-util';
+import { css } from 'uikit-util';
 
-export default assign({}, Animations, {
+export default {
+    ...Animations,
     fade: {
         show() {
             return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
@@ -96,4 +97,4 @@ export default assign({}, Animations, {
                   ];
         },
     },
-});
+};

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

@@ -7,7 +7,6 @@ import {
     $,
     addClass,
     append,
-    assign,
     attr,
     fragment,
     getImage,
@@ -219,29 +218,21 @@ export default {
                 if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
                     try {
                         const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-                        this.setItem(
-                            item,
-                            createEl('img', assign({ src, width, height, alt }, attrs))
-                        );
+                        this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
                     } catch (e) {
                         this.setError(item);
                     }
 
                     // Video
                 } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
-                    const video = createEl(
-                        'video',
-                        assign(
-                            {
-                                src,
-                                poster,
-                                controls: '',
-                                playsinline: '',
-                                'uk-video': `${this.videoAutoplay}`,
-                            },
-                            attrs
-                        )
-                    );
+                    const video = createEl('video', {
+                        src,
+                        poster,
+                        controls: '',
+                        playsinline: '',
+                        'uk-video': `${this.videoAutoplay}`,
+                        ...attrs,
+                    });
 
                     on(video, 'loadedmetadata', () => {
                         attr(video, { width: video.videoWidth, height: video.videoHeight });
@@ -253,18 +244,13 @@ export default {
                 } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
                     this.setItem(
                         item,
-                        createEl(
-                            'iframe',
-                            assign(
-                                {
-                                    src,
-                                    frameborder: '0',
-                                    allowfullscreen: '',
-                                    class: 'uk-lightbox-iframe',
-                                },
-                                attrs
-                            )
-                        )
+                        createEl('iframe', {
+                            src,
+                            frameborder: '0',
+                            allowfullscreen: '',
+                            class: 'uk-lightbox-iframe',
+                            ...attrs,
+                        })
                     );
 
                     // YouTube
@@ -275,20 +261,15 @@ export default {
                 ) {
                     this.setItem(
                         item,
-                        createEl(
-                            'iframe',
-                            assign(
-                                {
-                                    src: `https://www.youtube${matches[1] || ''}.com/embed/${
-                                        matches[2]
-                                    }${matches[3] ? `?${matches[3]}` : ''}`,
-                                    width: 1920,
-                                    height: 1080,
-                                },
-                                iframeAttrs,
-                                attrs
-                            )
-                        )
+                        createEl('iframe', {
+                            src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${
+                                matches[3] ? `?${matches[3]}` : ''
+                            }`,
+                            width: 1920,
+                            height: 1080,
+                            ...iframeAttrs,
+                            ...attrs,
+                        })
                     );
 
                     // Vimeo
@@ -307,20 +288,15 @@ export default {
 
                         this.setItem(
                             item,
-                            createEl(
-                                'iframe',
-                                assign(
-                                    {
-                                        src: `https://player.vimeo.com/video/${matches[1]}${
-                                            matches[2] ? `?${matches[2]}` : ''
-                                        }`,
-                                        width,
-                                        height,
-                                    },
-                                    iframeAttrs,
-                                    attrs
-                                )
-                            )
+                            createEl('iframe', {
+                                src: `https://player.vimeo.com/video/${matches[1]}${
+                                    matches[2] ? `?${matches[2]}` : ''
+                                }`,
+                                width,
+                                height,
+                                ...iframeAttrs,
+                                ...attrs,
+                            })
                         );
                     } catch (e) {
                         this.setError(item);

package/src/js/components/lightbox.js

@@ -48,8 +48,7 @@ export default {
                 index = findIndex(items, ({ source: src }) => source === src);
             }
 
-            this.panel =
-                this.panel || this.$create('lightboxPanel', assign({}, this.$props, { items }));
+            this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
             on(this.panel.$el, 'hidden', () => (this.panel = false));
 

package/src/js/components/slider.js

@@ -1,6 +1,7 @@
 import Class from '../mixin/class';
 import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
 import {
     $,
@@ -20,7 +21,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
@@ -258,6 +259,25 @@ export default {
 
             return index;
         },
+
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
     },
 };
 

package/src/js/components/slideshow.js

@@ -2,10 +2,11 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
 import { boxModelAdjust, css } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slideshow, SliderReactive],
+    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
     props: {
         ratio: String,
@@ -50,4 +51,10 @@ export default {
 
         events: ['resize'],
     },
+
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };

package/src/js/components/sortable.js

@@ -205,7 +205,7 @@ export default {
 
             this.touched = new Set([this]);
             this.placeholder = placeholder;
-            this.origin = assign({ target, index: index(placeholder) }, this.pos);
+            this.origin = { target, index: index(placeholder), ...this.pos };
 
             on(document, pointerMove, this.move);
             on(document, pointerUp, this.end);

package/src/js/core/alert.js

@@ -1,6 +1,5 @@
 import Class from '../mixin/class';
 import Togglable from '../mixin/togglable';
-import { assign } from 'uikit-util';
 
 export default {
     mixins: [Class, Togglable],
@@ -15,7 +14,7 @@ export default {
         animation: [true],
         selClose: '.uk-alert-close',
         duration: 150,
-        hideProps: assign({ opacity: 0 }, Togglable.data.hideProps),
+        hideProps: { opacity: 0, ...Togglable.data.hideProps },
     },
 
     events: [