uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.946d2efea

package/src/js/api/state.js

@@ -1,11 +1,28 @@
-import {assign, camelize, data as getData, hasOwn, hyphenate, isArray, isEmpty, isFunction, isNumeric, isPlainObject, isString, isUndefined, mergeOptions, on, parseOptions, startsWith, toBoolean, toNumber} from 'uikit-util';
+import {
+    assign,
+    camelize,
+    data as getData,
+    hasOwn,
+    hyphenate,
+    includes,
+    isArray,
+    isFunction,
+    isNumeric,
+    isPlainObject,
+    isString,
+    isUndefined,
+    mergeOptions,
+    on,
+    parseOptions,
+    startsWith,
+    toBoolean,
+    toNumber,
+} from 'uikit-util';
 
 export default function (UIkit) {
-
     let uid = 0;
 
     UIkit.prototype._init = function (options) {
-
         options = options || {};
         options.data = normalizeData(options, this.constructor.options);
 
@@ -25,8 +42,7 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initData = function () {
-
-        const {data = {}} = this.$options;
+        const { data = {} } = this.$options;
 
         for (const key in data) {
             this.$props[key] = this[key] = data[key];
@@ -34,8 +50,7 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initMethods = function () {
-
-        const {methods} = this.$options;
+        const { methods } = this.$options;
 
         if (methods) {
             for (const key in methods) {
@@ -45,8 +60,7 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initComputeds = function () {
-
-        const {computed} = this.$options;
+        const { computed } = this.$options;
 
         this._computeds = {};
 
@@ -58,7 +72,6 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initProps = function (props) {
-
         let key;
 
         props = props || getProps(this.$options, this.$name);
@@ -78,246 +91,245 @@ export default function (UIkit) {
     };
 
     UIkit.prototype._initEvents = function () {
-
         this._events = [];
-
-        const {events} = this.$options;
-
-        if (events) {
-
-            events.forEach(event => {
-
-                if (hasOwn(event, 'handler')) {
-                    registerEvent(this, event);
-                } else {
-                    for (const key in event) {
-                        registerEvent(this, event[key], key);
-                    }
+        for (const event of this.$options.events || []) {
+            if (hasOwn(event, 'handler')) {
+                registerEvent(this, event);
+            } else {
+                for (const key in event) {
+                    registerEvent(this, event[key], key);
                 }
-
-            });
+            }
+        }
+        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());
+        this._events.forEach((unbind) => unbind());
         delete this._events;
+        unregisterScrollListener(this._uid);
     };
 
     UIkit.prototype._initObservers = function () {
-        this._observers = [
-            initChildListObserver(this),
-            initPropsObserver(this)
-        ];
+        this._observers = [initChildListObserver(this), initPropsObserver(this)];
     };
 
-    UIkit.prototype._disconnectObservers = function () {
-        this._observers.forEach(observer =>
-            observer && observer.disconnect()
-        );
+    UIkit.prototype.registerObserver = function (observer) {
+        this._observers.push(observer);
     };
 
-    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);
+    UIkit.prototype._disconnectObservers = function () {
+        this._observers.forEach((observer) => observer?.disconnect());
+    };
+}
 
-            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, {
+    const options = parseOptions(getData(el, name), args);
 
-            enumerable: true,
+    for (const key in options) {
+        const prop = camelize(key);
+        if (props[prop] !== undefined) {
+            data[prop] = coerce(props[prop], options[key]);
+        }
+    }
 
-            get() {
+    return data;
+}
 
-                const {_computeds, $props, $el} = component;
+function registerComputed(component, key, cb) {
+    Object.defineProperty(component, key, {
+        enumerable: true,
 
-                if (!hasOwn(_computeds, key)) {
-                    _computeds[key] = (cb.get || cb).call(component, $props, $el);
-                }
+        get() {
+            const { _computeds, $props, $el } = component;
 
-                return _computeds[key];
-            },
+            if (!hasOwn(_computeds, key)) {
+                _computeds[key] = (cb.get || cb).call(component, $props, $el);
+            }
 
-            set(value) {
+            return _computeds[key];
+        },
 
-                const {_computeds} = component;
+        set(value) {
+            const { _computeds } = component;
 
-                _computeds[key] = cb.set ? cb.set.call(component, value) : value;
+            _computeds[key] = cb.set ? cb.set.call(component, value) : value;
 
-                if (isUndefined(_computeds[key])) {
-                    delete _computeds[key];
-                }
+            if (isUndefined(_computeds[key])) {
+                delete _computeds[key];
             }
+        },
+    });
+}
 
-        });
+export function registerEvent(component, event, key) {
+    if (!isPlainObject(event)) {
+        event = { name: key, handler: event };
     }
 
-    function registerEvent(component, event, key) {
-
-        if (!isPlainObject(event)) {
-            event = ({name: key, handler: event});
-        }
-
-        let {name, el, handler, capture, passive, delegate, filter, self} = event;
-        el = isFunction(el)
-            ? el.call(component)
-            : el || component.$el;
+    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, assign({}, event, {el}), key));
-            return;
-        }
+    if (isArray(el)) {
+        el.forEach((el) => registerEvent(component, { ...event, el }, key));
+        return;
+    }
 
-        if (!el || filter && !filter.call(component)) {
-            return;
-        }
+    if (!el || (filter && !filter.call(component))) {
+        return;
+    }
 
-        component._events.push(
-            on(
-                el,
-                name,
-                delegate
-                    ? isString(delegate)
-                        ? delegate
-                        : delegate.call(component)
-                    : null,
-                isString(handler) ? component[handler] : handler.bind(component),
-                {passive, capture, self}
-            )
-        );
+    component._events.push(
+        on(
+            el,
+            name,
+            delegate ? (isString(delegate) ? delegate : delegate.call(component)) : null,
+            isString(handler) ? component[handler] : handler.bind(component),
+            { passive, capture, self }
+        )
+    );
+}
 
-    }
+function notIn(options, key) {
+    return options.every((arr) => !arr || !hasOwn(arr, key));
+}
 
-    function notIn(options, key) {
-        return options.every(arr => !arr || !hasOwn(arr, key));
+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 coerce(type, value) {
+    return type ? type(value) : value;
+}
 
-        if (type === Boolean) {
-            return toBoolean(value);
-        } else if (type === Number) {
-            return toNumber(value);
-        } else if (type === 'list') {
-            return toList(value);
-        }
+function toList(value) {
+    return isArray(value)
+        ? value
+        : isString(value)
+        ? value
+              .split(/,(?![^(]*\))/)
+              .map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
+        : [value];
+}
 
-        return type ? type(value) : 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;
+        }, {});
     }
 
-    function toList(value) {
-        return isArray(value)
-            ? value
-            : isString(value)
-                ? value.split(/,(?![^(]*\))/).map(value => isNumeric(value)
-                    ? toNumber(value)
-                    : toBoolean(value.trim()))
-                : [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 normalizeData({data}, {args, props = {}}) {
-        data = isArray(data)
-            ? !isEmpty(args)
-                ? data.slice(0, args.length).reduce((data, value, index) => {
-                    if (isPlainObject(value)) {
-                        assign(data, value);
-                    } else {
-                        data[args[index]] = value;
-                    }
-                    return data;
-                }, {})
-                : undefined
-            : data;
-
-        if (data) {
-            for (const key in data) {
-                if (isUndefined(data[key])) {
-                    delete data[key];
-                } else {
-                    data[key] = props[key] ? coerce(props[key], data[key]) : data[key];
-                }
-            }
-        }
+    return data;
+}
 
-        return data;
-    }
+function initChildListObserver(component) {
+    const { el } = component.$options;
 
-    function initChildListObserver(component) {
-        const {el} = component.$options;
+    const observer = new MutationObserver(() => component.$emit());
+    observer.observe(el, {
+        childList: true,
+        subtree: true,
+    });
 
-        const observer = new MutationObserver(() => component.$emit());
-        observer.observe(el, {
-            childList: true,
-            subtree: true
-        });
+    return observer;
+}
 
-        return observer;
-    }
+function initPropsObserver(component) {
+    const { $name, $options, $props } = component;
+    const { attrs, props, el } = $options;
 
-    function initPropsObserver(component) {
+    if (!props || attrs === false) {
+        return;
+    }
 
-        const {$name, $options, $props} = component;
-        const {attrs, props, el} = $options;
+    const attributes = isArray(attrs) ? attrs : Object.keys(props);
+    const filter = attributes.map((key) => hyphenate(key)).concat($name);
 
-        if (!props || attrs === false) {
-            return;
+    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);
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
+    });
 
-        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();
-            }
-        });
+    return observer;
+}
 
-        observer.observe(el, {
-            attributes: true,
-            attributeFilter: filter.concat(filter.map(key => `data-${key}`))
+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,46 +1,43 @@
 import Class from '../mixin/class';
-import {$, empty, html} from 'uikit-util';
+import { $, empty, html } from 'uikit-util';
 
 export default {
-
     mixins: [Class],
 
     props: {
         date: String,
-        clsWrapper: String
+        clsWrapper: String,
     },
 
     data: {
         date: '',
-        clsWrapper: '.uk-countdown-%unit%'
+        clsWrapper: '.uk-countdown-%unit%',
     },
 
     computed: {
-
-        date({date}) {
+        date({ date }) {
             return Date.parse(date);
         },
 
-        days({clsWrapper}, $el) {
+        days({ clsWrapper }, $el) {
             return $(clsWrapper.replace('%unit%', 'days'), $el);
         },
 
-        hours({clsWrapper}, $el) {
+        hours({ clsWrapper }, $el) {
             return $(clsWrapper.replace('%unit%', 'hours'), $el);
         },
 
-        minutes({clsWrapper}, $el) {
+        minutes({ clsWrapper }, $el) {
             return $(clsWrapper.replace('%unit%', 'minutes'), $el);
         },
 
-        seconds({clsWrapper}, $el) {
+        seconds({ clsWrapper }, $el) {
             return $(clsWrapper.replace('%unit%', 'seconds'), $el);
         },
 
         units() {
-            return ['days', 'hours', 'minutes', 'seconds'].filter(unit => this[unit]);
-        }
-
+            return ['days', 'hours', 'minutes', 'seconds'].filter((unit) => this[unit]);
+        },
     },
 
     connected() {
@@ -49,13 +46,11 @@ export default {
 
     disconnected() {
         this.stop();
-        this.units.forEach(unit => empty(this[unit]));
+        this.units.forEach((unit) => empty(this[unit]));
     },
 
     events: [
-
         {
-
             name: 'visibilitychange',
 
             el() {
@@ -68,31 +63,21 @@ export default {
                 } else {
                     this.start();
                 }
-            }
-
-        }
-
+            },
+        },
     ],
 
     update: {
-
         write() {
-
             const timespan = getTimeSpan(this.date);
 
             if (timespan.total <= 0) {
-
                 this.stop();
 
-                timespan.days
-                    = timespan.hours
-                    = timespan.minutes
-                    = timespan.seconds
-                    = 0;
+                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;
@@ -105,50 +90,39 @@ export default {
                         html(el, digits.map(() => '<span></span>').join(''));
                     }
 
-                    digits.forEach((digit, i) => el.children[i].textContent = digit);
+                    digits.forEach((digit, i) => (el.children[i].textContent = digit));
                 }
-
-            });
-
-        }
-
+            }
+        },
     },
 
     methods: {
-
         start() {
-
             this.stop();
 
             if (this.date && this.units.length) {
-                this.$update();
-                this.timer = setInterval(this.$update, 1000);
+                this.$emit();
+                this.timer = setInterval(() => this.$emit(), 1000);
             }
-
         },
 
         stop() {
-
             if (this.timer) {
                 clearInterval(this.timer);
                 this.timer = null;
             }
-
-        }
-
-    }
-
+        },
+    },
 };
 
 function getTimeSpan(date) {
-
     const total = date - Date.now();
 
     return {
         total,
-        seconds: total / 1000 % 60,
-        minutes: total / 1000 / 60 % 60,
-        hours: total / 1000 / 60 / 60 % 24,
-        days: total / 1000 / 60 / 60 / 24
+        seconds: (total / 1000) % 60,
+        minutes: (total / 1000 / 60) % 60,
+        hours: (total / 1000 / 60 / 60) % 24,
+        days: total / 1000 / 60 / 60 / 24,
     };
 }