uikit 3.11.2-dev.3dfa2c50b → 3.11.2-dev.45194f70c

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.3dfa2c50b",
+    "version": "3.11.2-dev.45194f70c",
     "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

@@ -81,8 +81,8 @@ export default function (UIkit) {
     };
 
     function runUpdates(types) {
-        for (const { read, write, events } of this.$options.update) {
-            if (!types.has('update') && (!events || !events.some((type) => types.has(type)))) {
+        for (const { read, write, events = [] } of this.$options.update) {
+            if (!types.has('update') && !events.some((type) => types.has(type))) {
                 continue;
             }
 
@@ -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

@@ -4,6 +4,7 @@ import {
     data as getData,
     hasOwn,
     hyphenate,
+    includes,
     isArray,
     isFunction,
     isNumeric,
@@ -100,17 +101,28 @@ export default function (UIkit) {
                 }
             }
         }
+        for (const { events = [] } of this.$options.update || []) {
+            if (includes(events, 'scroll')) {
+                registerScrollListener(this._uid, () => this.$emit('scroll'));
+                break;
+            }
+        }
     };
 
     UIkit.prototype._unbindEvents = function () {
         this._events.forEach((unbind) => unbind());
         delete this._events;
+        unregisterScrollListener(this._uid);
     };
 
     UIkit.prototype._initObservers = function () {
         this._observers = [initChildListObserver(this), initPropsObserver(this)];
     };
 
+    UIkit.prototype.registerObserver = function (observer) {
+        this._observers.push(observer);
+    };
+
     UIkit.prototype._disconnectObservers = function () {
         this._observers.forEach((observer) => observer?.disconnect());
     };
@@ -187,7 +199,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;
         }
 
@@ -299,4 +311,25 @@ export default function (UIkit) {
 
         return observer;
     }
+
+    const scrollListeners = new Map();
+    let unbindScrollListener;
+    function registerScrollListener(id, listener) {
+        unbindScrollListener =
+            unbindScrollListener ||
+            on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
+                passive: true,
+                capture: true,
+            });
+
+        scrollListeners.set(id, listener);
+    }
+
+    function unregisterScrollListener(id) {
+        scrollListeners.delete(id);
+        if (unbindScrollListener && !scrollListeners.size) {
+            unbindScrollListener();
+            unbindScrollListener = null;
+        }
+    }
 }

package/src/js/components/countdown.js

@@ -101,8 +101,8 @@ export default {
             this.stop();
 
             if (this.date && this.units.length) {
-                this.$update();
-                this.timer = setInterval(this.$update, 1000);
+                this.$emit();
+                this.timer = setInterval(() => this.$emit(), 1000);
             }
         },
 

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,18 @@
+import { $$, observeIntersection, removeAttr } from 'uikit-util';
+
+export default {
+    connected() {
+        this.registerObserver(
+            observeIntersection(
+                this.slides.concat(this.$el),
+                (entries, observer) => {
+                    for (const el of this.getAdjacentSlides()) {
+                        $$('img[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
+                        observer.unobserve(el);
+                    }
+                },
+                { rootMargin: '50% 50%' }
+            )
+        );
+    },
+};

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 {
     $,
@@ -11,16 +12,14 @@ import {
     dimensions,
     findIndex,
     includes,
-    isEmpty,
     last,
-    sortBy,
     toFloat,
     toggleClass,
     toNumber,
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
@@ -72,48 +71,39 @@ export default {
             return ~index ? index : this.length - 1;
         },
 
-        sets({ sets }) {
-            if (!sets) {
+        sets({ sets: enabled }) {
+            if (!enabled) {
                 return;
             }
 
-            const width = dimensions(this.list).width / (this.center ? 2 : 1);
-
             let left = 0;
-            let leftCenter = width;
-            let slideLeft = 0;
-
-            sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-                const slideWidth = dimensions(slide).width;
-                const slideRight = slideLeft + slideWidth;
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i in this.slides) {
+                const slideWidth = dimensions(this.slides[i]).width;
 
-                if (slideRight > left) {
-                    if (!this.center && i > this.maxIndex) {
-                        i = this.maxIndex;
-                    }
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
 
-                    if (!includes(sets, i)) {
-                        const cmp = this.slides[i + 1];
-                        if (
-                            this.center &&
-                            cmp &&
-                            slideWidth < leftCenter - dimensions(cmp).width / 2
-                        ) {
-                            leftCenter -= slideWidth;
-                        } else {
-                            leftCenter = width;
-                            sets.push(i);
-                            left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                        }
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                    ) {
+                        sets.push(+i);
+                        left = width / 2 - slideWidth / 2;
                     }
+                } else if (left === 0) {
+                    sets.push(Math.min(+i, this.maxIndex));
                 }
 
-                slideLeft += slideWidth;
+                left += slideWidth;
+            }
 
+            if (sets.length) {
                 return sets;
-            }, []);
-
-            return !isEmpty(sets) && sets;
+            }
         },
 
         transitionOptions() {
@@ -145,15 +135,7 @@ export default {
                 this._translate(1);
             }
 
-            const actives = this._getTransitioner(this.index).getActives();
-            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));
-            }
+            this.updateActiveClasses();
         },
 
         events: ['resize'],
@@ -202,6 +184,10 @@ export default {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
         },
+
+        itemshown() {
+            this.updateActiveClasses();
+        },
     },
 
     methods: {
@@ -238,6 +224,18 @@ export default {
             }
         },
 
+        updateActiveClasses() {
+            const actives = this._getTransitioner(this.index).getActives();
+            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));
+            }
+        },
+
         getValidIndex(index = this.index, prevIndex = this.prevIndex) {
             index = this.getIndex(index, prevIndex);
 
@@ -258,6 +256,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/accordion.js

@@ -1,4 +1,5 @@
 import Class from '../mixin/class';
+import Lazyload from '../mixin/lazyload';
 import { default as Togglable, toggleHeight } from '../mixin/togglable';
 import {
     $,
@@ -17,7 +18,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Class, Togglable],
+    mixins: [Class, Lazyload, Togglable],
 
     props: {
         targets: String,
@@ -73,6 +74,10 @@ export default {
         },
     },
 
+    connected() {
+        this.lazyload();
+    },
+
     events: [
         {
             name: 'click',

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/core.js

@@ -4,6 +4,7 @@ import {
     getEventPos,
     inBrowser,
     isTouch,
+    observeResize,
     on,
     once,
     parent,
@@ -31,28 +32,8 @@ export default function (UIkit) {
     };
 
     on(window, 'load resize', handleResize);
-    on(document, 'loadedmetadata load', handleResize, true);
 
-    if ('ResizeObserver' in window) {
-        new ResizeObserver(handleResize).observe(document.documentElement);
-    }
-
-    // throttle `scroll` event (Safari triggers multiple `scroll` events per frame)
-    let pending;
-    on(
-        window,
-        'scroll',
-        (e) => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            fastdom.read(() => (pending = false));
-
-            UIkit.update(null, e.type);
-        },
-        { passive: true, capture: true }
-    );
+    observeResize(document.documentElement, handleResize);
 
     let started = 0;
     on(

package/src/js/core/cover.js

@@ -1,5 +1,5 @@
 import Video from './video';
-import { css, Dimensions, parent } from 'uikit-util';
+import { css, Dimensions, observeResize, parent } from 'uikit-util';
 
 export default {
     mixins: [Video],
@@ -13,6 +13,10 @@ export default {
         automute: true,
     },
 
+    connected() {
+        this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
+    },
+
     update: {
         read() {
             const el = this.$el;