uikit 3.11.2-dev.7dd548556 → 3.11.2-dev.92f357b93

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.7dd548556",
+    "version": "3.11.2-dev.92f357b93",
     "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

@@ -91,7 +91,7 @@ export default function (UIkit) {
 
     UIkit.prototype._initEvents = function () {
         this._events = [];
-        this.$options.events?.forEach((event) => {
+        for (const event of this.$options.events || []) {
             if (hasOwn(event, 'handler')) {
                 registerEvent(this, event);
             } else {
@@ -99,7 +99,7 @@ export default function (UIkit) {
                     registerEvent(this, event[key], key);
                 }
             }
-        });
+        }
     };
 
     UIkit.prototype._unbindEvents = function () {
@@ -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/countdown.js

@@ -77,7 +77,7 @@ export default {
                 timespan.days = timespan.hours = timespan.minutes = timespan.seconds = 0;
             }
 
-            this.units.forEach((unit) => {
+            for (const unit of this.units) {
                 let digits = String(Math.floor(timespan[unit]));
 
                 digits = digits.length < 2 ? `0${digits}` : digits;
@@ -92,7 +92,7 @@ export default {
 
                     digits.forEach((digit, i) => (el.children[i].textContent = digit));
                 }
-            });
+            }
         },
     },
 

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/slider-transitioner.js

@@ -89,7 +89,7 @@ export default function (prev, next, dir, { center, easing, list }) {
 
             percent = prev ? clamp(percent, -1, 1) : 0;
 
-            children(list).forEach((slide) => {
+            for (const slide of children(list)) {
                 const isActive = includes(actives, slide);
                 const isIn = slide === itemIn;
                 const isOut = slide === itemOut;
@@ -104,7 +104,7 @@ export default function (prev, next, dir, { center, easing, list }) {
                     dir,
                     percent: isOut ? 1 - percent : isIn ? percent : isActive ? 1 : 0,
                 });
-            });
+            }
         },
 
         percent() {

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));
 
@@ -73,9 +72,9 @@ function install(UIkit, Lightbox) {
 function toItem(el) {
     const item = {};
 
-    ['href', 'caption', 'type', 'poster', 'alt', 'attrs'].forEach((attr) => {
+    for (const attr of ['href', 'caption', 'type', 'poster', 'alt', 'attrs']) {
         item[attr === 'href' ? 'source' : attr] = data(el, attr);
-    });
+    }
 
     item.attrs = parseOptions(item.attrs);
 

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,
@@ -130,7 +131,7 @@ export default {
 
     update: {
         write() {
-            this.navItems.forEach((el) => {
+            for (const el of this.navItems) {
                 const index = toNumber(data(el, this.attrItem));
                 if (index !== false) {
                     el.hidden =
@@ -138,7 +139,7 @@ export default {
                         index > this.maxIndex ||
                         (this.sets && !includes(this.sets, index));
                 }
-            });
+            }
 
             if (this.length && !this.dragging && !this.stack.length) {
                 this.reorder();
@@ -146,14 +147,13 @@ export default {
             }
 
             const actives = this._getTransitioner(this.index).getActives();
-            this.slides.forEach((slide) =>
-                toggleClass(slide, this.clsActive, includes(actives, slide))
-            );
-
-            if (this.clsActivated && (!this.sets || includes(this.sets, toFloat(this.index)))) {
-                this.slides.forEach((slide) =>
-                    toggleClass(slide, this.clsActivated || '', includes(actives, slide))
-                );
+            const activeClasses = [
+                this.clsActive,
+                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
+                    '',
+            ];
+            for (const slide of this.slides) {
+                toggleClass(slide, activeClasses, includes(actives, slide));
             }
         },
 
@@ -259,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

@@ -67,13 +67,13 @@ export default {
     },
 
     created() {
-        ['init', 'start', 'move', 'end'].forEach((key) => {
+        for (const key of ['init', 'start', 'move', 'end']) {
             const fn = this[key];
             this[key] = (e) => {
                 assign(this.pos, getEventPos(e));
                 fn(e);
             };
-        });
+        }
     },
 
     events: {
@@ -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);
@@ -269,11 +269,11 @@ export default {
             remove(this.drag);
             this.drag = null;
 
-            this.touched.forEach(({ clsPlaceholder, clsItem }) =>
-                this.touched.forEach((sortable) =>
-                    removeClass(sortable.items, clsPlaceholder, clsItem)
-                )
-            );
+            for (const { clsPlaceholder, clsItem } of this.touched) {
+                for (const sortable of this.touched) {
+                    removeClass(sortable.items, clsPlaceholder, clsItem);
+                }
+            }
             this.touched = null;
             removeClass(document.documentElement, this.clsDragState);
         },

package/src/js/components/upload.js

@@ -139,9 +139,9 @@ export default {
                         beforeSend: (env) => {
                             const { xhr } = env;
                             xhr.upload && on(xhr.upload, 'progress', this.progress);
-                            ['loadStart', 'load', 'loadEnd', 'abort'].forEach((type) =>
-                                on(xhr, type.toLowerCase(), this[type])
-                            );
+                            for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
+                                on(xhr, type.toLowerCase(), this[type]);
+                            }
 
                             return this.beforeSend(env);
                         },

package/src/js/core/accordion.js

@@ -105,7 +105,7 @@ export default {
                 return;
             }
 
-            items.forEach((el) =>
+            for (const el of items) {
                 this.toggleElement(el, !hasClass(el, this.clsOpen), async (el, show) => {
                     toggleClass(el, this.clsOpen, show);
                     attr($(this.$props.toggle, el), 'aria-expanded', show);
@@ -134,8 +134,8 @@ export default {
                             scrollIntoView(toggle, { offset: this.offset });
                         }
                     }
-                })
-            );
+                });
+            }
         },
     },
 };

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: [

package/src/js/core/height-match.js

@@ -29,9 +29,9 @@ export default {
         },
 
         write({ rows }) {
-            rows.forEach(({ heights, elements }) =>
-                elements.forEach((el, i) => css(el, 'minHeight', heights[i]))
-            );
+            for (const { heights, elements } of rows) {
+                elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+            }
         },
 
         events: ['resize'],