uikit 3.11.2-dev.44c622843 → 3.11.2-dev.536e1a374

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.44c622843",
+    "version": "3.11.2-dev.536e1a374",
     "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,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, assign({}, 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

@@ -1,5 +1,7 @@
 import Class from '../mixin/class';
-import { $, empty, html } from 'uikit-util';
+import { $, html } from 'uikit-util';
+
+const units = ['days', 'hours', 'minutes', 'seconds'];
 
 export default {
     mixins: [Class],
@@ -14,39 +16,13 @@ export default {
         clsWrapper: '.uk-countdown-%unit%',
     },
 
-    computed: {
-        date({ date }) {
-            return Date.parse(date);
-        },
-
-        days({ clsWrapper }, $el) {
-            return $(clsWrapper.replace('%unit%', 'days'), $el);
-        },
-
-        hours({ clsWrapper }, $el) {
-            return $(clsWrapper.replace('%unit%', 'hours'), $el);
-        },
-
-        minutes({ clsWrapper }, $el) {
-            return $(clsWrapper.replace('%unit%', 'minutes'), $el);
-        },
-
-        seconds({ clsWrapper }, $el) {
-            return $(clsWrapper.replace('%unit%', 'seconds'), $el);
-        },
-
-        units() {
-            return ['days', 'hours', 'minutes', 'seconds'].filter((unit) => this[unit]);
-        },
-    },
-
     connected() {
+        this.date = Date.parse(this.date);
         this.start();
     },
 
     disconnected() {
         this.stop();
-        this.units.forEach((unit) => empty(this[unit]));
     },
 
     events: [
@@ -67,22 +43,37 @@ export default {
         },
     ],
 
-    update: {
-        write() {
+    methods: {
+        start() {
+            this.stop();
+            this.update();
+            this.timer = setInterval(this.update, 1000);
+        },
+
+        stop() {
+            clearInterval(this.timer);
+        },
+
+        update() {
             const timespan = getTimeSpan(this.date);
 
-            if (timespan.total <= 0) {
+            if (!this.date || timespan.total <= 0) {
                 this.stop();
 
                 timespan.days = timespan.hours = timespan.minutes = timespan.seconds = 0;
             }
 
-            for (const unit of this.units) {
+            for (const unit of units) {
+                const el = $(this.clsWrapper.replace('%unit%', unit), this.$el);
+
+                if (!el) {
+                    continue;
+                }
+
                 let digits = String(Math.floor(timespan[unit]));
 
                 digits = digits.length < 2 ? `0${digits}` : digits;
 
-                const el = this[unit];
                 if (el.textContent !== digits) {
                     digits = digits.split('');
 
@@ -95,24 +86,6 @@ export default {
             }
         },
     },
-
-    methods: {
-        start() {
-            this.stop();
-
-            if (this.date && this.units.length) {
-                this.$update();
-                this.timer = setInterval(this.$update, 1000);
-            }
-        },
-
-        stop() {
-            if (this.timer) {
-                clearInterval(this.timer);
-                this.timer = null;
-            }
-        },
-    },
 };
 
 function getTimeSpan(date) {

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,9 @@
+import Lazyload from '../../mixin/lazyload';
+
+export default {
+    mixins: [Lazyload],
+
+    connected() {
+        this.lazyload(this.slides, this.getAdjacentSlides);
+    },
+};

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, {
                   ];
         },
     },
-});
+};