uikit 3.11.2-dev.03e47c2ff → 3.11.2-dev.06fe7f1d0

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.03e47c2ff",
+    "version": "3.11.2-dev.06fe7f1d0",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

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;
             }
 

package/src/js/api/state.js

@@ -4,6 +4,7 @@ import {
     data as getData,
     hasOwn,
     hyphenate,
+    includes,
     isArray,
     isFunction,
     isNumeric,
@@ -100,203 +101,235 @@ 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());
     };
+}
 
-    function getProps(opts, name) {
-        const data = {};
-        const { args = [], props = {}, el } = opts;
-
-        if (!props) {
-            return data;
-        }
-
-        for (const key in props) {
-            const prop = hyphenate(key);
-            let value = getData(el, prop);
-
-            if (isUndefined(value)) {
-                continue;
-            }
+function getProps(opts, name) {
+    const data = {};
+    const { args = [], props = {}, el } = opts;
 
-            value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
+    if (!props) {
+        return data;
+    }
 
-            if (prop === 'target' && (!value || startsWith(value, '_'))) {
-                continue;
-            }
+    for (const key in props) {
+        const prop = hyphenate(key);
+        let value = getData(el, prop);
 
-            data[key] = value;
+        if (isUndefined(value)) {
+            continue;
         }
 
-        const options = parseOptions(getData(el, name), args);
+        value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
 
-        for (const key in options) {
-            const prop = camelize(key);
-            if (props[prop] !== undefined) {
-                data[prop] = coerce(props[prop], options[key]);
-            }
+        if (prop === 'target' && (!value || startsWith(value, '_'))) {
+            continue;
         }
 
-        return data;
+        data[key] = value;
     }
 
-    function registerComputed(component, key, cb) {
-        Object.defineProperty(component, key, {
-            enumerable: true,
+    const options = parseOptions(getData(el, name), args);
 
-            get() {
-                const { _computeds, $props, $el } = component;
+    for (const key in options) {
+        const prop = camelize(key);
+        if (props[prop] !== undefined) {
+            data[prop] = coerce(props[prop], options[key]);
+        }
+    }
 
-                if (!hasOwn(_computeds, key)) {
-                    _computeds[key] = (cb.get || cb).call(component, $props, $el);
-                }
+    return data;
+}
 
-                return _computeds[key];
-            },
+function registerComputed(component, key, cb) {
+    Object.defineProperty(component, key, {
+        enumerable: true,
 
-            set(value) {
-                const { _computeds } = component;
+        get() {
+            const { _computeds, $props, $el } = component;
 
-                _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+            if (!hasOwn(_computeds, key)) {
+                _computeds[key] = (cb.get || cb).call(component, $props, $el);
+            }
 
-                if (isUndefined(_computeds[key])) {
-                    delete _computeds[key];
-                }
-            },
-        });
-    }
+            return _computeds[key];
+        },
 
-    function registerEvent(component, event, key) {
-        if (!isPlainObject(event)) {
-            event = { name: key, handler: event };
-        }
+        set(value) {
+            const { _computeds } = component;
 
-        let { name, el, handler, capture, passive, delegate, filter, self } = event;
-        el = isFunction(el) ? el.call(component) : el || component.$el;
+            _computeds[key] = cb.set ? cb.set.call(component, value) : value;
 
-        if (isArray(el)) {
-            el.forEach((el) => registerEvent(component, { ...event, el }, key));
-            return;
-        }
+            if (isUndefined(_computeds[key])) {
+                delete _computeds[key];
+            }
+        },
+    });
+}
 
-        if (!el || (filter && !filter.call(component))) {
-            return;
-        }
+export function registerEvent(component, event, key) {
+    if (!isPlainObject(event)) {
+        event = { name: key, handler: event };
+    }
 
-        component._events.push(
-            on(
-                el,
-                name,
-                delegate ? (isString(delegate) ? delegate : delegate.call(component)) : null,
-                isString(handler) ? component[handler] : handler.bind(component),
-                { passive, capture, self }
-            )
-        );
+    let { name, el, handler, capture, passive, delegate, filter, self } = event;
+    el = isFunction(el) ? el.call(component) : el || component.$el;
+
+    if (isArray(el)) {
+        el.forEach((el) => registerEvent(component, { ...event, el }, key));
+        return;
     }
 
-    function notIn(options, key) {
-        return options.every((arr) => !arr || !hasOwn(arr, key));
+    if (!el || (filter && !filter.call(component))) {
+        return;
     }
 
-    function coerce(type, value) {
-        if (type === Boolean) {
-            return toBoolean(value);
-        } else if (type === Number) {
-            return toNumber(value);
-        } else if (type === 'list') {
-            return toList(value);
-        }
+    component._events.push(
+        on(
+            el,
+            name,
+            delegate ? (isString(delegate) ? delegate : delegate.call(component)) : null,
+            isString(handler) ? component[handler] : handler.bind(component),
+            { passive, capture, self }
+        )
+    );
+}
 
-        return type ? type(value) : value;
-    }
+function notIn(options, key) {
+    return options.every((arr) => !arr || !hasOwn(arr, key));
+}
 
-    function toList(value) {
-        return isArray(value)
-            ? value
-            : isString(value)
-            ? value
-                  .split(/,(?![^(]*\))/)
-                  .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
-            : [value];
+function coerce(type, value) {
+    if (type === Boolean) {
+        return toBoolean(value);
+    } else if (type === Number) {
+        return toNumber(value);
+    } else if (type === 'list') {
+        return toList(value);
     }
 
-    function normalizeData({ data = {} }, { args = [], props = {} }) {
-        if (isArray(data)) {
-            data = data.slice(0, args.length).reduce((data, value, index) => {
-                if (isPlainObject(value)) {
-                    assign(data, value);
-                } else {
-                    data[args[index]] = value;
-                }
-                return data;
-            }, {});
-        }
+    return type ? type(value) : value;
+}
 
-        for (const key in data) {
-            if (isUndefined(data[key])) {
-                delete data[key];
-            } else if (props[key]) {
-                data[key] = coerce(props[key], data[key]);
+function toList(value) {
+    return isArray(value)
+        ? value
+        : isString(value)
+        ? value
+              .split(/,(?![^(]*\))/)
+              .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
+        : [value];
+}
+
+function normalizeData({ data = {} }, { args = [], props = {} }) {
+    if (isArray(data)) {
+        data = data.slice(0, args.length).reduce((data, value, index) => {
+            if (isPlainObject(value)) {
+                assign(data, value);
+            } else {
+                data[args[index]] = value;
             }
-        }
+            return data;
+        }, {});
+    }
 
-        return data;
+    for (const key in data) {
+        if (isUndefined(data[key])) {
+            delete data[key];
+        } else if (props[key]) {
+            data[key] = coerce(props[key], data[key]);
+        }
     }
 
-    function initChildListObserver(component) {
-        const { el } = component.$options;
+    return data;
+}
 
-        const observer = new MutationObserver(() => component.$emit());
-        observer.observe(el, {
-            childList: true,
-            subtree: true,
-        });
+function initChildListObserver(component) {
+    const { el } = component.$options;
 
-        return observer;
-    }
+    const observer = new MutationObserver(() => component.$emit());
+    observer.observe(el, {
+        childList: true,
+        subtree: true,
+    });
+
+    return observer;
+}
 
-    function initPropsObserver(component) {
-        const { $name, $options, $props } = component;
-        const { attrs, props, el } = $options;
+function initPropsObserver(component) {
+    const { $name, $options, $props } = component;
+    const { attrs, props, el } = $options;
 
-        if (!props || attrs === false) {
-            return;
+    if (!props || attrs === false) {
+        return;
+    }
+
+    const attributes = isArray(attrs) ? attrs : Object.keys(props);
+    const filter = attributes.map((key) => hyphenate(key)).concat($name);
+
+    const observer = new MutationObserver((records) => {
+        const data = getProps($options, $name);
+        if (
+            records.some(({ attributeName }) => {
+                const prop = attributeName.replace('data-', '');
+                return (
+                    prop === $name ? attributes : [camelize(prop), camelize(attributeName)]
+                ).some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
+            })
+        ) {
+            component.$reset();
         }
+    });
 
-        const attributes = isArray(attrs) ? attrs : Object.keys(props);
-        const filter = attributes.map((key) => hyphenate(key)).concat($name);
-
-        const observer = new MutationObserver((records) => {
-            const data = getProps($options, $name);
-            if (
-                records.some(({ attributeName }) => {
-                    const prop = attributeName.replace('data-', '');
-                    return (
-                        prop === $name ? attributes : [camelize(prop), camelize(attributeName)]
-                    ).some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
-                })
-            ) {
-                component.$reset();
-            }
-        });
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
+    });
 
-        observer.observe(el, {
-            attributes: true,
-            attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
+    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,
         });
 
-        return observer;
+    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/internal/slider-preload.js

@@ -1,37 +1,9 @@
-import { $$, isVisible, removeAttr } from 'uikit-util';
+import Lazyload from '../../mixin/lazyload';
 
 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();
-    },
+    mixins: [Lazyload],
 
-    update: {
-        read() {
-            if (isVisible(this.$el)) {
-                removeLazyLoad(this.getAdjacentSlides());
-            }
-        },
-
-        events: ['resize'],
+    connected() {
+        this.lazyload(this.slides, this.getAdjacentSlides);
     },
 };
-
-export function removeLazyLoad(elements = []) {
-    for (const el of elements) {
-        el && $$('img[loading="lazy"]', el).forEach((el) => removeAttr(el, 'loading'));
-    }
-}

package/src/js/components/slider.js

@@ -12,9 +12,7 @@ import {
     dimensions,
     findIndex,
     includes,
-    isEmpty,
     last,
-    sortBy,
     toFloat,
     toggleClass,
     toNumber,
@@ -73,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() {
@@ -146,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'],
@@ -203,6 +184,10 @@ export default {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
         },
+
+        itemshown() {
+            this.updateActiveClasses();
+        },
     },
 
     methods: {
@@ -239,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);
 

package/src/js/components/upload.js

@@ -1,4 +1,4 @@
-import { addClass, ajax, matches, noop, on, removeClass, trigger } from 'uikit-util';
+import { addClass, ajax, matches, noop, on, removeClass, toArray, trigger } from 'uikit-util';
 
 export default {
     props: {
@@ -178,6 +178,7 @@ function match(pattern, path) {
 }
 
 function chunk(files, size) {
+    files = toArray(files);
     const chunks = [];
     for (let i = 0; i < files.length; i += size) {
         chunks.push(files.slice(i, i + size));

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',